@use "global" as *;

.p-topInterview .swiper-wrapper {
    @include mq(md) {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: rem(16);
    }
}

.p-topInterview .swiper-slide {
    @include mq(md) {
        width: 100% !important;
    }
}

.swiper .swiper-pagination-bullet {
    background: #D9D9D9;
    opacity: 1;
}

.p-fv .swiper-pagination-bullet,
.p-topHowto .swiper-pagination-bullet,
.p-internship .swiper-pagination-bullet {
    @include mq(md) {
        width: rem(12);
        height: rem(12);
    }
}

.p-post .swiper-pagination-bullet {
    @include mq(md) {
        width: rem(12);
        height: rem(12);
    }
}

.swiper .swiper-pagination-bullet-active {
    background: #ABABAB;
}

.p-post .swiper .swiper-pagination-bullet-active {
    background: $purple;
}

.p-fv,
.p-topInterview,
.p-internship,
.p-post {
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: 0;
    }
}

.p-topHowto {
    .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction {
        bottom: rem(20);
    }
}

.p-fv,
.p-topHowto,
.p-internship,
.p-post {
    .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
        @include mq(md) {
            margin: 0 rem(8);
        }
    }
}

.p-topHowto .swiper-slide,
.p-post .swiper-slide {
    opacity: 0;
    transition: opacity .3s ease-out;
    @include mq(md) {
        opacity: 1;
    }
}

.p-topHowto .swiper-slide-active,
.p-post .swiper-slide-active {
    opacity: 1;
}

.p-topHowto .swiper-button-next,
.p-topHowto .swiper-button-prev {
    color: $purple;
}

.p-topHowto .swiper-button-next:after,
.p-topHowto .swiper-button-prev:after {
    text-rendering: initial;
    font-size: rem(26);
    @include mq(md) {
        font-size: rem(38);
    }
}

.p-topHowto {
    .swiper-button-next, .swiper-rtl .swiper-button-prev {
        top: 96%;
        left: calc(50% + rem(40));
        transform: translateX(-50%);
        right: rem(5);
        @include mq(md) {
            left: calc(50% + rem(60));
        }
    }
    .swiper-button-prev, .swiper-rtl .swiper-button-next {
        top: 96%;
        left: calc(50% - rem(40));
        transform: translateX(-50%);
        @include mq(md) {
            left: calc(50% - rem(60));
        }
    }
}