/* SLIDES */

.team-filtered-cards-crabe {

    .slick-slide {

        @apply flex flex-col;

        &>div {
            @apply flex flex-wrap -mx-4;

            &>* {
                @apply px-4;
            }
        }

        &:focus {
            @apply outline-none;
        }
    }

    .team-terms {
        &__term {
            &.active {
                @apply text-white bg-primary;
            }
        }
    }

    .team-members {
        &__member {
            .square-height {
                &::before {
                    content: "";
                    display: block;
                    padding-top: 100%;
                }
            }

            &:hover {
                .overlay {
                    @apply opacity-0;

                    .content {
                        @apply opacity-0;
                        transform: translateY(20px);
                    }
                }
            }

            &__content {

                @apply absolute top-0 bottom-0 left-0 right-0 opacity-100;
                transition: .44s transform, .44s opacity;

                .overlay {
                    .content {
                        transition: opacity .95s cubic-bezier(.2, 1, .2, 1),
                            transform .95s cubic-bezier(.2, 1, .2, 1);
                    }
                }
            }
        }

        &.slider-reset {
            .team-members__member__content {
                @apply opacity-0;
                transform: translateY(150px);
            }
        }
    }

    .slick-dots {
        @apply flex flex-row items-center justify-center;

        li {
            button {
                @apply text-transparent rounded-full outline-none bg-secondary;
                width: 20px;
                min-width: 20px;
                height: 20px;
                min-height: 20px;
            }

            &.slick-active {
                button {
                    @apply bg-secondary-700;
                }
            }

            &+li {
                @apply ml-4;
            }


            &:only-child {
                @apply hidden;
            }
        }
    }
}