// Carousel // // //

.owl-carousel, .owl-carousel-landing_page {

&[data-dots="true"] {
    margin-bottom: 60px;
}

// Navigation
.owl-nav {

        button.owl-prev,
        button.owl-next {
                @include transition;
                background: rgba($canalplus, .4);
                position: absolute;
                border-radius: 50%;
                top: 50%;
                width: 4rem;
                height: 4rem;
                text-align: center;
                z-index: 20;

                &::before {
                        display: block;
                        position: absolute;
                        top: 0;
                        right: 0;
                        bottom: 0;
                        left: 0;
                        line-height: 4rem;
                        font-family: 'icomoon';
                        font-size: 1.8rem;
                        color: $white;
                }

                &:hover {
                        background: rgba($canalplus, .5);
                }

                span {
                        display: none;
                }
        }

        .owl-prev {
                @include translate(0,-50%);
                left: ($grid-gutter-width / 2);

                &::before { content: "\ebfb" }

            &[class*="disabled"] {
                @include translate(-100%, -50%);
                opacity: 0;
                visibility: hidden;
                        z-index: 10;
            }
        }

        .owl-next {
                @include translate(0,-50%);
                right: ($grid-gutter-width / 2);

                &::before { content: "\ebfc" }

            &[class*="disabled"] {
                        @include translate(100%, -50%);
                        opacity: 0;
                        visibility: hidden;
                        z-index: 10;
            }
        }

}

}

// Dots .owl-carousel-inside-project-toto {

.owl-nav{
        &.disabled {
                display: none;
        }
}

} .owl-dots {

@include translate(0,50%);
position: absolute;
bottom: -30px;
width: 100%;
text-align: center;

&.disabled {
        display: none;
}

.owl-dot {
        display: inline-block;
        vertical-align: top;

        span {
                display: block;
                width: 8px;
                height: 8px;
                margin: 10px;
                border-radius: 50%;
                background: rgba($canalplus,0.2);
                @include transition();
        }

        &:hover {
                span {
                        background: rgba($canalplus, 0.4);
                }
        }

        &.active {
                span {
                        background: $canalplus;
                        @include scale(1.5);
                }
        }

}

}

.owl-carousel-single {

.owl-stage-outer {
    @extend %floating;
    border-radius: $border-radius;
    overflow: hidden;
}

.owl-nav {
    button.owl-prev,
    button.owl-next {
            background: $primary;
            width: 5.5rem;
            height: 5.5rem;

            &::before {
                    line-height: 5.5rem;
            }

            &:hover {
                    background: rgba($primary, .9);
            }
    }

    .owl-prev {
            @include translate(-50%,-50%);
            left: 0;
    }

    .owl-next {
            @include translate(50%,-50%);
            right: 0;
    }
}

}

.owl-carousel-library {

// Navigation
.owl-nav {
        margin-top: 1rem;

        button.owl-prev,
        button.owl-next {
                @include translate(0,0);
                position: static;
                border-radius: $border-radius;
                background: none;
                border: $border-width solid transparent;

                &::before {
                        color: $canalplus;
                }

                &:hover {
                        background: transparent;
                        border-color: $border-color;
                }
        }

        .owl-prev,
        .owl-nav {
            &[class*="disabled"] {
                @include translate(0, 0);
                visibility: visible;
                opacity: .5;
            }
        }

}

}

// library navigation for text white .text-white {

.owl-carousel-library {
        .owl-nav {
                button.owl-prev,
                button.owl-next {
                        &:hover {
                                border-color: $text-white-border;
                        }

                        &::before {
                                color: $white;
                        }
                }
        }
}

}

// General .owl-carousel, .owl-carousel-landing_page {

.owl-stage-outer {

        .owl-stage {

                .owl-item {
                        @include transition();
                        counter-increment: owlItem;

                        img {
                                width: auto;
                                max-width: 100%;
                        }
                }
        }
}

&.visible {
        .owl-stage-outer { overflow: visible; }
}

&.accent {
        .owl-item {
                opacity: .25;

                &.active {
                        opacity: 1;
                }
        }
}

}