// Swiper
// Custom module with Swiper: https://swiperjs.com/
// -----------------------------------------------------------------------------

// Import variables
@import "./../../../default/globals/site.variables";
@import "./../../globals/site.variables";
@import "./../../elements/image.variables";
@import "./../../../../site/globals/site.variables";

// Import default CSS
@import "./../vendor/swiper/swiper-bundle.css";

:root {
    --swiper-theme-color: @lightTextColor;
    --swiper-pagination-color: var(--swiper-theme-color);
}

// Navigation elements and slide wrapper are inside the container
.swiper {

    // Apply platform border radius to nested sliders
    .nested.slider & {
        border-radius: @roundedBorderRadius;

        .swiper-button-prev {
            border-top-left-radius: @roundedBorderRadius;
            border-bottom-left-radius: @roundedBorderRadius;
        }
        .swiper-button-next {
            border-top-right-radius: @roundedBorderRadius;
            border-bottom-right-radius: @roundedBorderRadius;
        }
    }

    &.inverted,
    &.inverted ~ [class*="swiper-"] {
        --swiper-theme-color: @invertedTextColor;
        --swiper-pagination-color: #fff;
    }
}

// The wrapper contains the slides
.swiper-wrapper {
    &.ui.cards,
    &.ui.grid {
        flex-wrap: initial;
        margin: 0;
        justify-content: normal;

        &.nested {
            margin-bottom: 0 !important;
        }
    }
    &.ui.cards {
        .swiper-slide {
            display: flex;
            height: auto;
        }
        .card {
            margin: .1em; // give box-shadow some space
        }
        .bottom.attached.button {
            width: auto;
        }
    }
    &.ui.grid {
        > .column {
            margin: 0 !important;
            padding: 0 !important;
        }
    }
}

// Set box sizing back to border box in slides
.swiper-slide {
    box-sizing: border-box;
}

// Pagination
.swiper-pagination {
    .swiper-pagination-bullet {
        background: var(--swiper-pagination-color);
    }

    &.outside {
        left: 0;
        right: 0;
        //bottom: 1em;
        width: 100%;
        margin-top: @verticalRhythm2;

        .swiper-pagination-bullet {
            margin: 0 2px;
        }
    }
}

// Prev/next buttons
button[class*="swiper-button"] {
    border: none;
    background: none;
    height: 100%;
    top: 0;
    bottom: 0;
    margin: 0;

    width: 5vw;
    min-width: 3rem;

    &.outside {
        @media screen and (min-width: @largeMonitorBreakpoint) {
            width: 8vw;
        }
    }
    .fullscreen.swiper & {
        width: 8vw;
    }

    &:hover {
        background: @subtleTransparentBlack;
    }
    .inverted.swiper &:hover,
    .inverted.swiper + &:hover {
        background: @transparentWhite;
    }
    &.swiper-button-prev {
        left: 0;
    }
    &.swiper-button-next {
        right: 0;
    }
}

// Prevent unwanted scrollbars
body.presentation,
body.dimmed.scrolling > .dimmer {
    overflow: hidden !important;
}

// Stretch full screen slider to viewport already, before JS is loaded
.swiper.fullscreen > .swiper-wrapper,
.swiper.fullscreen > .swiper-wrapper > .ui.vertical.stripe.segment {
    height: 100vh;
    padding: 0;
}
.swiper.fullscreen > .swiper-wrapper > .ui.vertical.stripe.segment {
    display: flex;
    align-items: center;
}

// Mobile only slider
.swiper-mobile {
    &:not(.swiper-initialized) {
        .swiper-button-prev,
        .swiper-button-next,
        .swiper-pagination,
        ~ .swiper-button-prev,
        ~ .swiper-button-next,
        ~ .swiper-pagination {
            visibility: hidden;
        }
    }
}


// Swipers inside lightbox modals
.modal.overlay {
    .inside.close.icon {
        z-index: 999 !important;
        top: 0 !important;
        right: 0 !important;
        width: 8vw;
        height: 8vw;
        min-width: 3rem;
        margin: 0;
        padding: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        @media screen and (max-width: @largestMobileScreen) {
            min-width: 5rem;
            min-height: 5rem;
        }

        &:hover {
            background: @transparentWhite;
        }

        &:before,
        &:after {
            font-family: swiper-icons;
            font-size: calc(var(--swiper-navigation-size) / 1.5);
            font-weight: 900;
            color: @invertedTextColor;
        }

        &:before {
            content: 'next';
        }
        &:after {
            content: 'prev';
            margin-left: -2.1px;
        }
    }

    .swiper {
        border-radius: 0 !important;
    }
    .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;

        > figcaption {
            position: absolute;
            bottom: 2em;
            width: 100%;
            text-align: center;
            font-size: 1.5rem;
        }
    }
}