/**
 * Slider Block
 * ----------------------------------------------------------------------------
 */

// Internal variables.
$slider-border: 1px solid $color-white;

.block--slider {
    padding-bottom: 0;
    padding-top: $spacing--xlarge;

    @include breakpoint(medium) {
        padding-top: 70px;
    }

    .block__title {
        font-size: rem-calc(30);
        line-height: rem-calc(31);
        margin-bottom: $spacing--xlarge;
        @include breakpoint(medium) {
            font-size: rem-calc(40);
            line-height: rem-calc(48);
            margin-bottom: rem-calc(70);
        }
    }
}

.slider {
    position: relative;
    padding: 0;
    color: $white;

    /**
     * Gradient overlay.
     */

    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }

    &::before {
        position: absolute;
        background-image: url('assets/svg/mask--slider.svg');
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
    }

    &::after {

    }
}

.slider--background-color-supreme-fruits {
    background: $color-supreme;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-supreme--light, 1) 0%, rgba($color-supreme, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-kingston-delight {
    background: $color-kingston;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-kingston--light, 1) 0%, rgba($color-kingston, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-kingston-xtreme {
    background: $color-xtreme;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-xtreme--light, 1) 0%, rgba($color-xtreme, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-tiramisu-havana {
    background: $color-tiramisu;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-tiramisu--light, 1) 0%, rgba($color-tiramisu, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-rock-melon-berry {
    background: $color-berry;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-berry--light, 1) 0%, rgba($color-berry, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-imperial-custard {
    background: $color-custard;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($color-custard--light, 1) 0%, rgba($color-custard, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider--background-color-elyx-kit {
    background-color: $color-elyx-box;
}

.slider--none {
    background: $dark-gray;
    @include breakpoint(large) {
        $gradiant-slider: linear-gradient(to right, rgba($medium-gray, 1) 0%, rgba($dark-gray, 1) 50%);
        background: $gradiant-slider;
    }
}

.slider__wrapper {
    position: relative;
    z-index: z-index(positive);

    @include breakpoint(large up) {
        display: flex;
        height: 680px;
        border-left: $slider-border;
    }
    @include breakpoint(1140) {
        height: 640px;
    }
}

/**
 * Slider items.
 *
 * 1. Animate the transition.
 * 2. Set a minimum width for the items.
 * 3. Offset the default spacing from Foundation columns.
 */

.slider__item {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    border: $slider-border;
    border-width: 0 0 1px 0;
    will-change: transform;
    transition:
        max-height $transition,
        flex-grow $transition; /* 1 */

    @include breakpoint(large up) {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        flex-grow: 0;
        flex-basis: 100px; /* 2 */
        border-width: 0 1px 0 0;
        padding: $spacing--large $spacing;
    }

    @include breakpoint(small only) {
        margin: 0 -15px; /* 3 */
    }
}

/**
 * 1. Make sure the active item takes up all remaining space.
 */

.slider__item--active {
    cursor: default;
    padding: $spacing--large 0;

    @include breakpoint(large up) {
        flex-grow: 1; /* 1 */
    }
}

.slider__inner {
    opacity: 0;
    transform: translateY(20px);
    position: absolute;
    left: -9999px;
    padding: 0 $spacing;
    pointer-events: none;

    .slider__item--active & {
        pointer-events: auto;
        position: relative;
        left: auto;
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity $transition $duration,
            transform $transition $duration
    }

    @include breakpoint(medium only) {
        margin: 0 auto;
    }

    @include breakpoint(large up) {
        &,
        .slider__item--active & {
            position: absolute;
            top: $spacing--large;
            right: $spacing;
            left: $spacing;
            bottom: $spacing;
        }
    }

    .row:not(.collapse) {
        position: relative;
        @include breakpoint(large) {
            position: absolute;
            width: 100%;
            height: 100%;
            bottom: 0;
        }
    }

    .vo-add-to-cart {
        .products__actions {
            border: none;
        }
        .products__actions {
            padding-bottom: 16px;

            @include breakpoint(large) {
                padding: 0 0 20px 0;
                display: block;
            }
        }
        .products__label {
            margin-bottom: 10px;

            @include breakpoint(large) {
                margin-bottom: 18px;
                font-size: rem-calc(20);
                line-height: rem-calc(24);
            }
        }
        .quantity {
        }
    }
}

/**
 * 1. Lay out the titles vertically.
 */

.slider__panel-title {
    position: relative;
    line-height: 1;
    font-size: rem-calc(20);
    margin: 0;
    text-align: center;
    padding: $spacing 0;

    .slider__item--active & {
        display: none;
    }

    &::before {
        content: '+';
        color: $white;
        font-family: $body-font-family;
        font-weight: 300;
        font-size: rem-calc(25);
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: $spacing;
        display: inline-block;

        @include breakpoint(large up) {
            position: relative;
            top: auto;
            right: auto;
            transform: none;
            margin-bottom: $spacing--small;
        }
    }

    @include breakpoint(large up) {
        writing-mode: vertical-lr; /* 1 */
        transform: rotate(180deg);
    }
}

.slider__title {
    font-size: rem-calc(24);
    line-height: rem-calc(28);
    @include breakpoint(large) {
        font-size: rem-calc(26);
    }
}

.slider__content {
    margin-top: 20px;
}

.slider__header {
    text-align: center;
    margin-bottom: rem-calc(32);
}

.slider__header--mobile {
    display: block;
    @include breakpoint(large) {
        display: none;
    }
}

.slider__header--desktop {
    display: none;
    text-align: left;
    padding-top: 80px;
    @include breakpoint(large) {
        display: block;
    }
}

.slider__column--image {
    position: relative;
    padding: 0;
}

.slider__image {
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    pointer-events: none;
    text-align: center;

    @include breakpoint(large) {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
    }
}

.slider__image--overwritten {
    img {
        max-width: 260px;
    }

    @include breakpoint(large) {
        width: 90%;
        left: 5%;

        img {
            max-width: 100%;
        }

    }
}

.slider__column--content {
    position: relative;
    z-index: 4;
}

.slider__link {
    display: inline-block;
    margin: $spacing 0 0;
    font-weight: 500;
    font-size: rem-calc(16);

    @include link-style('white');
}

.slider__button-container {
    margin-top: $spacing;
    text-align: center;
}

.slider__button {
    margin-bottom: 0;
}


.block--two-blocks:not(.block--two-blocks--pattern) + .block--slider {
    padding-top: 0;
    margin-top: -40px;
    @include breakpoint(medium) {
        margin-top: -20px;
    }
}
