/* BASIC SLIDER */
.ls-slider {
    --ls-button-nav-size: 2rem;
    --ls-slider-nav-elem-color: #000000;
    display: flex;
    flex: 1;
    position: relative;
    background: var(--ls-slider-bg);
}

/* BASIC SLIDE BEHAVIOURS */
.ls-slider .ls-slide, .ls-slider .ls-slide-image-text {
    --ls-transition-duration: 1s;
    transition: visibility 0s var(--ls-transition-duration), width 0s var(--ls-transition-duration), height 0s var(--ls-transition-duration);
    width: 0%;
    height: 0%;
    visibility: hidden;
    position: absolute;
    background: var(--ls-slide-bg);
}

.ls-slider .ls-slide.ls-active, .ls-slider .ls-slide-image-text.ls-active {
    width: 100%;
    height: 100%;
    
    visibility: visible;
    transition: visibility var(--ls-transition-duration) 0s;
}


/* BASIC NAV BUTTON */
.ls-button-nav {
    
    position: absolute;
    font-size: var(--ls-button-nav-size);
    top: calc(50% - calc(var(--ls-button-nav-size)/2));
    cursor: pointer;
    z-index: 10;
    opacity: 1;
    visibility: visible;
}

.ls-slider-nav-on-hover:not(:hover) .ls-button-nav {
    visibility: hidden;
    opacity: 0;
}

.ls-slider-prev-button {
    left: 1rem;
    transition: left 0.5s, opacity 0.5s, visibility 0.5s;
}

.ls-slider-nav-on-hover:not(:hover) .ls-slider-prev-button {
    left: 0rem;
}

.ls-slider-next-button {
    right: 1rem;
    transition: right 0.5s, opacity 0.5s, visibility 0.5s;
}

.ls-slider-nav-on-hover:not(:hover) .ls-slider-next-button {
    right: 0rem;
}

.ls-slider-prev-button::before {
    color: var(--ls-slider-nav-elem-color);
    content: "\e996";
    font-family: 'ls_opac_icon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ls-slider-next-button::before {
    color: var(--ls-slider-nav-elem-color);
    content: "\e997";
    font-family: 'ls_opac_icon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
  
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.ls-slider-nav-puce-wrapper {
    position: absolute;
    z-index: 10;
    bottom: 10%;
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    visibility: visible;
    opacity: 1;
    transition: bottom 0.5s, opacity 0.5s, visibility 0.5s;
}

.ls-slider-nav-on-hover:not(:hover) .ls-slider-nav-puce-wrapper{
    bottom: 0;
    visibility: hidden;
    opacity: 0;
}

.ls-slider-nav-puce {
    cursor: pointer;
    background-color: var(--ls-slider-nav-elem-color);
    border-radius: 50%;
    width: 1rem;
    height: 1rem;
    opacity: 0.4;
}

.ls-slider-nav-puce.ls-active {
    opacity: 0.8;
}

/* CLASSIQUE SLIDE */
.ls-slider.ls-slide-animation_ls-classique-slide .ls-slide, .ls-slider.ls-slide-animation_ls-classique-slide .ls-slide-image-text .ls-slide-text-image-bg {
    --start-position: 100%;
    --end-position: -100%;
}

.ls-slider.ls-slide-animation_ls-classique-slide .ls-slide:not(.ls-active), .ls-slider.ls-slide-animation_ls-classique-slide .ls-slide-image-text:not(.ls-active) .ls-slide-text-image-bg {
    opacity: 0;
    top: 0;
    left: var(--start-position);
    transition: opacity var(--ls-transition-duration) 0s, 
                left var(--ls-transition-duration) 0s, 
                visibility 0s var(--ls-transition-duration), 
                width 0s var(--ls-transition-duration), 
                height 0s var(--ls-transition-duration);
}

.ls-slider.ls-slide-animation_ls-classique-slide .ls-slide.ls-last-active:not(.ls-active), .ls-slider.ls-slide-animation_ls-classique-slide .ls-slide-image-text.ls-last-active:not(.ls-active) .ls-slide-text-image-bg {
    left: var(--end-position);
}

.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-classique-slide .ls-slide.ls-last-active:not(.ls-active), 
.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-classique-slide .ls-slide-image-text.ls-last-active:not(.ls-active) .ls-slide-text-image-bg {
    left: var(--start-position);
}

@keyframes classiqueSlideFromLeft {
    from {
        left: var(--start-position);
    }
}

@keyframes classiqueSlideFromRight {
    from {
        left: var(--end-position);
    }
}

.ls-slider.ls-slide-animation_ls-classique-slide .ls-slide.ls-active, 
.ls-slider.ls-slide-animation_ls-classique-slide .ls-slide-image-text.ls-active .ls-slide-text-image-bg {
    left: 0%;
    top: 0;
    opacity: 100;
    transition: opacity var(--ls-transition-duration) 0s,
                visibility var(--ls-transition-duration) 0s;
    animation: classiqueSlideFromLeft var(--ls-transition-duration);
    z-index: 1;
}

.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-classique-slide .ls-slide.ls-classique-slide.ls-active,
.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-classique-slide .ls-slide-image-text.ls-classique-slide.ls-active .ls-slide-text-image-bg{
    animation: classiqueSlideFromRight var(--ls-transition-duration);
}


/* UPDOWN SLIDE */

.ls-slider.ls-slide-animation_ls-updown-slide .ls-slide, .ls-slider.ls-slide-animation_ls-updown-slide .ls-slide-image-text .ls-slide-text-image-bg {
    --start-position: -100%;
    --end-position: 100%;
}

.ls-slider.ls-slide-animation_ls-updown-slide .ls-slide:not(.ls-active), .ls-slider.ls-slide-animation_ls-updown-slide .ls-slide-image-text:not(.ls-active) .ls-slide-text-image-bg {
    opacity: 0;
    left: 0;
    top: var(--start-position);
    transition: opacity var(--ls-transition-duration) 0s, 
                top var(--ls-transition-duration) 0s, 
                visibility 0s var(--ls-transition-duration), 
                width 0s var(--ls-transition-duration), 
                height 0s var(--ls-transition-duration);
}

.ls-slider.ls-slide-animation_ls-updown-slide .ls-slide.ls-last-active:not(.ls-active), .ls-slider.ls-slide-animation_ls-updown-slide .ls-slide-image-text.ls-last-active:not(.ls-active) .ls-slide-text-image-bg {
    top: var(--end-position);
}

.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-updown-slide .ls-slide.ls-last-active:not(.ls-active), 
.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-updown-slide .ls-slide-image-text.ls-last-active:not(.ls-active) .ls-slide-text-image-bg {
    top: var(--start-position);
}

@keyframes updownSlideFromTop {
    from {
        top: var(--start-position);
    }
}

@keyframes updownSlideFromBottom {
    from {
        top: var(--end-position);
    }
}

.ls-slider.ls-slide-animation_ls-updown-slide .ls-slide.ls-active, 
.ls-slider.ls-slide-animation_ls-updown-slide .ls-slide-image-text.ls-active .ls-slide-text-image-bg {
    top: 0%;
    left: 0;
    opacity: 100;
    transition: opacity var(--ls-transition-duration) 0s,
                visibility var(--ls-transition-duration) 0s;
    animation: updownSlideFromTop var(--ls-transition-duration);
}

.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-updown-slide .ls-slide.ls-active,
.ls-slider.ls-slide-from-prev.ls-slide-animation_ls-updown-slide .ls-slide-image-text.ls-active .ls-slide-text-image-bg{
    animation: updownSlideFromBottom var(--ls-transition-duration);
}
/* SLIDE IMAGE + TEXT BASICS */

.ls-slide-image-text {
    position: relative;
}

.ls-slide-text-image-bg .wp-block-cover__inner-container {
    display: none;
}

.ls-slide-image-text .ls-slide-text-image-bg {
    height: 100%;
    width: 100%;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    min-height: 0px;
}
.ls-slide-image-text .ls-slide-text-image-content-wrapper {
    z-index: 2;
}