// Slider
// Custom module with slick slider: http://kenwheeler.github.io/slick/
// -----------------------------------------------------------------------------

// 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/slick-carousel/slick.css";
@import "./../vendor/slick-carousel/slick-theme.css";
@import "./../vendor/slick-lightbox/slick-lightbox.css";


// Wrapper class is added to parent element of slider with JS
.slider-wrapper {

    // Create light background strip with bottom border
    @media screen and (min-width: @computerBreakpoint) {
        #header & {
            border-bottom: 80px solid @darkWhite !important;
        }
    }

    // Apply platform border radius to sliders inside grid columns
    &.column,
    &.nested {
        .slick-list {
            border-radius: @roundedBorderRadius;
        }
        .slick-prev {
            border-top-left-radius: @roundedBorderRadius;
            border-bottom-left-radius: @roundedBorderRadius;
        }
        .slick-next {
            border-top-right-radius: @roundedBorderRadius;
            border-bottom-right-radius: @roundedBorderRadius;
        }
    }

    > [class*="slider-"] > .vertical.segment.white {
        border-bottom: @borderWidth solid @borderColor;
    }
}

.slick-slider {
    transition: all 0.2s;

    // Fix small outline glitch
    .slick-slide:focus {
        outline: none;
    }

    // Position dots
    .slick-dots {
        bottom: -2.6rem;
    }

    // Display prev/next arrows
    .slick-arrow {
        width: 4.5rem;
        height: 100%;
        transition: background 0.2s;
        z-index: 999;

        @media (max-width: @tabletBreakpoint) {
            width: 3rem;
        }

        &:hover {
            background: @veryStrongTransparentBlack;
        }

        &:before {
            font-size: 4rem;
            color: @lightBlack;

            @media (max-width: @tabletBreakpoint) {
                font-size: 2.5rem;
            }
        }

        &.slick-prev {
            left: 0;
            &:before {
                font-family: "Icons";
                content: '\f104';
            }
        }
        &.slick-next {
            right: 0;
            &:before {
                font-family: "Icons";
                content: '\f105';
            }
        }
    }

    // Specific display types
    &.cards:not(.overview) {
        // Cards need a little offset for their box shadow
        .column {
            margin: .1em 1em;
        }

        // Compensate card margins to keep edges of container aligned
        .slick-list {
            margin: 0 -1em;
        }

        .slick-arrow.slick-prev,
        .slick-arrow.slick-next {
            clip-path: inset(0.15rem 0);
        }
    }

    &.overview {
        position: initial;

        // Default margins derail the slider calculations
        .cards,
        &.cards {
            margin: 0 !important;
        }
        .cards > .card {
            height: auto;
        }

        // Compensate card margins to keep edges of container aligned
        .slick-list {
            margin: 0 -.4em;
        }

        // Relative position is expanded to containing layout segment
        .slick-dots {
            position: initial;
        }
    }

    &.fullscreen {
        margin-bottom: 0;

        .slick-slide {
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .slick-dots {
            bottom: 2rem;
        }
    }
}

// The slider uses an additional lightbox plugin to enlarge slider images:
// https://github.com/mreq/slick-lightbox
.slick-lightbox {
    .slick-lightbox-slick-caption {
        float: left;
        text-align: left;
        padding-left: 5%;
    }

    .slick-lightbox-slick-item-inner,
    .slick-lightbox-slick-img {

        // Images can be display full-width on mobile devices
        @media (max-width: @tabletBreakpoint) {
            max-width: 100%;
            max-height: 100%;
        }
    }

    .slick-lightbox-close {
        top: 0;
        right: 0;
        width: 4.5rem;
        height: 4.5rem;
        z-index: 1001;

        // The close icon itself is in here
        &:before {
            font-size: 32px;
            line-height: 0.25;
            color: @invertedTextColor;
        }
        &:hover {
            background: @veryStrongTransparentBlack;
            &:before {
                color: @white;
            }
        }

        // Make close button a little smaller on smaller screens
        @media (max-width: @tabletBreakpoint) {
            width: 3rem;
            height: 3rem;

            &:before {
                font-size: 20px;
            }
        }
    }
}

// Presentation template
body.presentation {
    overflow: hidden;
}

// Stretch full screen slider to viewport already, before JS is loaded
[class*="slider-"].fullscreen,
[class*="slider-"].fullscreen > .ui.vertical.stripe.segment {
    height: 100vh;
}
[class*="slider-"].fullscreen > .ui.vertical.stripe.segment {
    display: flex;
    align-items: center;
}