@import '../../../styles/fills';
@import '../../../styles/mixins';
@import "../../../styles/grid.scss";
@import '../../../styles/definitions/breakpoints';

$page-orderable-item-selector: '.pageOrderableContainer_item';
$namespace: '.carousel';
$content-selector: '#{$namespace}_content';

$carousel-border-radius: 8px;
$carousel-height: 440px;
$carousel-bullet-offset: 14px;
$carousel-bullet-size: 8px;

.carousel {
    &_wrapper {
        position: relative;
        border-radius: $carousel-border-radius;
        height: var(--mobile-height, $carousel-height);

        &:before {
            @include full-window-width;
            content: "";
            background-color: var(--background-color, transparent);
            background-image: var(--background-image);
            background-position: center;
            background-size: cover;

            #{$page-orderable-item-selector} & {
                top: calc(#{$orderable-container-padding} * -1);
                bottom: calc(#{$orderable-container-padding} * -1);
                height: auto;
            }
        }
        
        @include media-md-up {
            height: var(--height, $carousel-height);
        }

        .slick {
            &-slider, &-list, &-track {
                height: 100%;
            }
            &-slide {
                & > div {
                    height: 100%;
                }
            }
            &-dots {
                display: none;
                position: absolute;
                bottom: calc($carousel-bullet-size / 2 + $carousel-bullet-offset);
                width: 100%;
                line-height: 0;
                margin: 0;
                z-index: 1;
                opacity: 0.5;
                transform: translateY(50%);
    
                @include media-sm-up {
                    display: block;
                }
    
                li {
                    width: $carousel-bullet-size;
                    height: $carousel-bullet-size;
                    margin: 0;

                    button {
                        @extend %reset-button;
                        width: 100%;
                        height: 100%;
                        border: 1px solid var(--carets-color, $black);
                        border-radius: 50%;

                        &:before {
                            display: none;
                        }

                        @include focus-outline;
                    }
                    
                    button:hover,
                    &.slick-active button {
                        background-color: var(--carets-color, $black);
                    }
    
                    &:not(:last-child) {
                        margin-right: 11px;
                    }
    
                }
            }
        }

        &--with-dots {
            .slick-slider {
                padding-bottom: $carousel-bullet-size + ($carousel-bullet-offset * 2);
            }
        }
    }
    &_content {
        height: 100%;
        position: relative;
    }
    &_btnPause {
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        opacity: 0;
        pointer-events: none;

        &:focus {
            opacity: 1;
        }
    }
    &_slide {
        height: 100%;
    }
    &_arrow {
        $arrow-default-opacity: 0.4;
        $arrow-active-opacity: 0.6;

        @extend %reset-button;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        cursor: pointer;
        z-index: 1;
        opacity: $arrow-default-opacity;

        &:hover {
            opacity: $arrow-active-opacity;
        }

        &:focus-visible {
            @include focus-outline-style;
            opacity: 1;     
        }

        &Icon {
            width: 23px;
            fill: var(--carets-color, $white);
        }

        &Text {
            @extend %sr-only;
        }

        &--prev {
            left: 14px;
    
            @include media-lg-up {
                left: 26px;
            }
        }

        &--next {
            right: 14px;
    
            @include media-lg-up {
                right: 26px;
            }
        }

        &--hidden {
            @extend %sr-only;
        }

        &--showOnHover {
            opacity: 0;

            #{$content-selector}:hover & {
                opacity: $arrow-default-opacity;

                &:focus, &:hover {
                    opacity: $arrow-active-opacity;
                }
            }
        }
    
        @include media-lg-down {
            display: none;
        }
    }
}