// fix owl carousel issue on mobile - not being able to scroll verticaly
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item{
    -ms-touch-action: auto;
        touch-action: auto;
}
// make all owl items same height
.owl-carousel{

    .owl-stage-outer {
        height: 100%;
    }
    .owl-stage {
		display: flex;
        height: 100%;
	}
	.owl-item {
		display: flex;
		flex: 1 0 auto;
        height: 100%;
	}
}



// SLIDER
.slider{

    @include desktop{
        position: relative;
        display: flex;
        min-height: 100vh;
        min-height: calc(100vh - 3rem); // 3rem = header__top height
        max-width: $container-width--large;
        margin: 0 auto;
        padding: 6rem 0;

        // right gradient
        &:before{
            content: '';
            z-index: -1;
            position: absolute;
            top: 0;
            right: 0;
            width: 50%;
            width: calc(50% + 18rem);
            height: 100%;
            background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));
        }
    }
}



// IMAGE SLIDER
.image-slider{
    overflow: hidden; // for mouse animation
    position: relative;

    @include desktop{
        flex-grow: 0;
        flex-shrink: 0;
        width: 50%;
    }
}
.image-slider__slides{
    background: $grey--dark;

    @include desktop{
        height: 100%;
    }
}
.image-slider__slide{
    display: block;
    width: 100%;
    object-fit: cover;

    @include mobile{
        height: 18rem;
    }
    @include desktop{
        height: 100%;
    }
}

.image-slider__nav{
    z-index: 2; // higher than owl
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
}
.image-slider__prev,
.image-slider__next{
    // reset button styles
    @include block-selection;
    cursor: pointer;
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    appearance: none;
    border-radius: 0;

    width: 6rem;
    height: 6rem;
    padding: 2.25rem;

    svg{
        z-index: 2; // higher than fill animation
        position: relative;
        display: block;
        width: 1.5rem;
        height: 1.5rem;
        fill: white;
    }

    @include desktop{
        position: relative;

        // fill animation
        &:before{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: white;
            transform: scaleX(0);
            transition: transform 0.45s $easing--medium;
        }

        svg{
            transition-duration: 0.45s;
            transition-timing-function: $easing--medium;
            transition-property: fill, transform;
        }

        // hover
        &:hover:before{
            transform: scaleX(1);
        }
        &:hover svg{
            fill: $grey--dark;
        }
    }
}
.image-slider__prev{
    background: lighten($grey--dark, 10%);

    @include desktop{

        &:before{
            transform-origin: left;
        }
        &:hover:before{
            transform-origin: right;
        }
        &:hover svg{
            transform: translate3d(-0.75rem, 0, 0);
        }
    }
}
.image-slider__next{
    background: $grey--dark;

    @include desktop{

        &:before{
            transform-origin: right;
        }
        &:hover:before{
            transform-origin: left;
        }
        &:hover svg{
            transform: translate3d(0.75rem, 0, 0);
        }
    }
}



// TEXT SLIDER
.text-slider{

    @include mobile{
        background: linear-gradient(45deg, adjust-hue($main, -20%), adjust-hue($main, 20%));
    }
    @include desktop{
        position: relative;
        flex-grow: 0;
        flex-shrink: 0;
        width: 50%;
    }
}

.text-slider__indicator{
    display: flex;
    justify-content: space-between;
    color: white;

    div{
        overflow: hidden;
        display: flex;
        height: 1.5rem;
        padding: 0 0.75rem;
        font-weight: 700;
        font-size: 0.875rem;
        color: $main;
        background: white;
        border-radius: 0.75rem;
    }
    ul{
        // reset list style
        margin: 0;
        padding: 0;
        list-style: none;
    }
    li{
        opacity: 0;
        transition-duration: 0.45s;
        transition-timing-function: $easing--medium;
        transition-property: opacity, transform; // transform in js
    }
    li.current{
        opacity: 1;
    }
    span{
        display: block;
        line-height: $font-leading;

        &:before{
            content: '/';
            margin: 0 0.25rem;
        }
    }

    p{
        margin-top: 0;
    }

    @include mobile{
        padding: 1.5rem 1.5rem 0 1.5rem;
    }

    @include desktop{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-top: 2.25rem;
        padding-bottom: 2.25rem;
    }
    @include desktop--small{
        padding-left: 3rem;
        padding-right: 3rem;
    }
    @include desktop--large{
        padding-left: 6rem;
        padding-right: 6rem;
    }
}

.text-slider__slides{
    overflow: hidden;
    display: flex;
    align-items: center;

    @include mobile{
        padding: 6rem 0;
    }
    @include desktop{
        height: 100%;
        padding: 3rem 0 9rem 0;
    }
}
.text-slider__slide{
    flex-grow: 0;
    flex-shrink: 0;
    width: 100%;
    padding: 0 1.5rem;
    color: white;

    // hide
    visibility: hidden;
    opacity: 0;
    transform: translate3d(0, 0.75rem, 0);
    transition-duration: 0.45s;
    transition-timing-function: $easing;
    transition-property: opacity, transform;

    .h2{
        margin-top: 0;
    }
    .h2 span.word{
        display: inline-block;
        // hide
        opacity: 0;
        transform: translate3d(0, calc(0.25rem * var(--word-index)), 0);
        transition-duration: 0.45s;
        transition-timing-function: $easing;
        transition-property: opacity, transform;
    }
    p{
        margin-top: 3rem;
    }
    .button{
        margin-top: 3rem;
    }

    @include desktop--small{
        padding: 0 3rem;
    }
    @include desktop--large{
        padding: 0 6rem;
    }
}
.text-slider__slide.current{
    order: -1; // move flex item on first position

    // show
    visibility: visible;
    opacity: 1;
    transform: translate3d(0, 0, 0);

    .h2 span.word{
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}