@import '../../../styles/definitions/breakpoints';
@import '../../../styles/mixins';
@import '../../../styles/fills';

$namespace: '.productImageViewer';
$wrapper-selector: '#{$namespace}_wrapper';
$wrapper-carets-selector: '#{$wrapper-selector}--carets';

#{$namespace} {
    &_wrapper {
        display: flex;
        flex-direction: column;

        &--vertical {
            flex-direction: row-reverse;
        }

        &--horizontal {
            .slick {
                &-prev {
                    left: -30px;
                }
                &-next {
                    right: -30px;
                }
            }
        }

        &--titles {
            .slick {
                &-arrow {
                    top: 100%;
                    transform: none;
                }
            }
        }

        &--carets {
            .slick {
                &-prev {
                    left: 21px;
                }
                &-next {
                    right: 21px;
                }
            }
        }

        .slick {
            &-list {
                overflow: hidden;
            }
            &-arrow {
                width: auto;
                height: auto;
                z-index: 2;

                &:before {
                    display: none;
                }
            }

            &-dots {
                margin: 0;
                position: relative;
                height: 37px;
                bottom: 0;
                li {
                    margin: 0;
                    color: transparent;
                    background-color: transparent;
    
                    button {
                        margin: 0;
                        width: 8px;
                        height: 8px;
                        @include border-gray;
                        border-radius: 4px;
                        padding: 0;
                        top: 50%;
                        left: 50%;
                        &:before {
                            content: "";
                        }
                    }
            
                    &:hover,
                    &.slick-active {
                        button {
                            color: transparent;
                            @include background-primary;
                            @include border-primary;
    
                        }
    
                    }
                }
            }
        }
    }

    &_main {
        width: 100%;
        &--vertical#{&}--with-thumbnail-nav {
            width: calc(100% - 110px);
        }

        .slick {
            &-list {
                height: 258px;
                @include media-md-up {
                    height: 356px;
                }
            }
            &-track,
            &-slide,
            &-slide > div {
                height: 100%;
            }
            &-list {
                border-radius: 3px;
                @include border-gray;
            }
            
        }
        // to be able to interact with individual images, we need to deactivate non-active slide's events
        // because they are stacked with opacity, and thus clickable even if not visible
        .slick-slide:not(.slick-active) {
            pointer-events: none;
        }
    }

    &_slide {
        height: 100%;
    }

    &_thumbnailNav {
        &--vertical {
            width: 110px;
        }
    }

    &_slideContent {
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        img {
            max-height: 100%;
            max-width: 100%;
        }
    }

    &_slideImage {
        object-fit: cover;
        max-width: 100%;
        max-height: 100%;
        height: auto;
        width: auto;
        margin: 0 auto;
    }

    &_arrow {
        display: none;
        @extend %reset-button;
        cursor: pointer;
        width: 18px;
        opacity: 0.75;

        &--caretOnly {
            width: 50px;
        }

        &Text {
            @extend %sr-only;
        }

        path {
            @include fill-primary;

            #{$wrapper-carets-selector} & {
                fill: $white;
            }
        }

        &:hover, &:focus {
            opacity: 1;

            path {
                @include fill-primary-hover;

                #{$wrapper-carets-selector} & {
                    fill: $white;
                }
            }
        }

        .slick-disabled & {
            opacity: 0.1;
            cursor: default;
        }

        @include media-lg-up {
            display: block;
        }
    }

    &_title {
        padding: 0 20px;
        text-align: center;
        @include title-3;
        transition: opacity 0.1s;
        &--transition {
            opacity: 0;   
        }
    }

    &_thumbnailSlider {
        &--horizontal {
            max-width: var(--thumbnail-nav-max-width, 100%);
            margin-top: 10px;

            .slick-slide {
                padding: 0 5px;
                &.slick-active {
                    margin-right: var(--thumbnail-slider-margin);
                }
            }
            .slick-list {
                margin: 0 -5px;
                &:after, &:before {
                    content: " ";
                    position: absolute;
                    top: 0;
                    height: 100%;
                    width: 5px;
                    background: $white;
                    z-index: 1000;
                }
                &:before {
                    left: 0;
                }
                &:after {
                    right: 0;
                    width: 4px;
                }
            }
        }
        &--vertical {
            margin-right: 10px;

            .slick-slide {
                padding: 5px 0;

            }
            .slick-track {    
                top: -5px;
            }
            .productImageViewer_thumbnail {
                height: 65px;
            }
        }
    }
}
