

@import '../fills';
@import '../mixins';
@import '../definitions/variables';
@import '../definitions/placeholders';
@import '../definitions/breakpoints';
@import '../definitions/typography';

// Product Configurator
@mixin shared-edition-addon-list {
    &_wrapper {
        position: relative;

        .slick {
            $slick-zindex: 1;
            $slick-arrow-size: 44px;
            $slick-arrow-position-x: -$slick-arrow-size * 0.6;

            &-list {
                margin-left: $grid-gutter-width * -1;
                margin-right: $grid-gutter-width * -1;
                z-index: $slick-zindex;
            }
            &-track {
                display: flex;
            }
            &-slide {
                display: flex;
                height: auto;
                float: none;
                padding-left: $grid-gutter-width;
                padding-right: $grid-gutter-width;

                & > div {
                    width: 100%;
                }
            }
            &-arrow {
                position: absolute;
                top: 50%;
                width: $slick-arrow-size;
                height: $slick-arrow-size;
                background-color: $gray-78;
                border-radius: 50%;
                z-index: $slick-zindex + 1;
                
                &.slick-prev {
                    left: $slick-arrow-position-x;
                }
                &.slick-next {
                    right: $slick-arrow-position-x;
                }
                &.slick-disabled {
                    opacity: 0;
                }
                &:before {
                    display: none;
                }
                .button_item {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 100%;
                    height: 100%;
                    padding: 0;
                }
            }
            &-arrow-left,
            &-arrow-right {
                height: 22px;
                fill: $white;
            }
            &-dots {
                $dot-size: 10px;
                position: relative;
                bottom: auto;
                padding: 10px;
                z-index: $slick-zindex + 1;
                & > li {
                    width: auto;
                    height: auto;
                    padding: 0;
                    margin: 0;
                    button {
                        padding-left: 4px;
                        padding-right: 4px;
                        width: $dot-size;
                        height: $dot-size;
                        
                        &:before {
                            width: $dot-size;
                            height: $dot-size;
                            line-height: $dot-size;
                        }
                    }
                    &:not(:first-of-type) {
                        margin-left: 6px;
                    }
                }
            }
        }
    }
    &_header {
        display: flex;
        align-items: baseline;
        margin: 0 0 12px;

        @include media-lg-up {
            margin-bottom: 24px;
        }

        &Link {
            @include button-link($primary-color);
            flex-shrink: 0;
            margin-left: auto;
            font-size: 14px;
            
            @include media-lg-up {
                display: none;
            }
        }
        &--no-title {
            @include media-lg-up {
                margin-bottom: 0;
            }
        }
        &--no-title:not(#{&}--with-link) {
            margin-bottom: 0;
        }
    }
    &_content {
        @include media-md-down {
            $spacing: 20px;
            padding-left: $spacing;
            padding-right: $spacing;
        }
    }
    &_title {
        @include title-2;
        flex-grow: 1;
        margin: 0;

        &--with-link:not(#{&}--hidden) {
            @include media-lg-down {
                margin-right: 20px;
            }
        }
        &--hidden {
            @extend %sr-only;
        }
        @include media-md-up {
            font-size: $headingFontSize1;
        }
    }
    &_dots {
        position: relative;
        width: 100%;
        margin-top: $grid-gutter-height;
    }
}

@mixin shared-edition-addon-item {
    &_container {
        position: relative;
        display: flex;
        flex-direction: column;
        height: 100%;
    }
    &_main {
        position: relative;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        padding: $edition-padding-y $edition-padding-x;

        &--with-buttons {
            padding-bottom: $edition-with-button-padding-bottom;
        }

        .slick-list & {
            // Undo grid's same height feature, no need inside carousel
            height: auto;
        }
    }
    &_header {
        // Undo grid's same height feature, no need inside carousel
        .slick-list & {
            height: auto;
        }
    }
    &_contract {
        display: inline-block;
        margin-top: 6px;
    }
    &_otherPrice {
        margin-top: 14px;
    }
    &_actionsWrapper {
        position: relative;
        margin-top: $edition-padding-y;
        text-align: center;
    }
    &_buttonWrapper {
        margin-top: $edition-button-margin-top;
        text-align: center;
        
        .button_item {
            min-width: 0;
            width: 100%;
            max-width: 192px;
        }
    }
    &_actionLink {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        margin-top: calc(#{$edition-with-button-padding-bottom} / 2);
        transform: translateY(-50%);
        text-align: center;

        .button_item {
            font-size: $headingFontSize5;
        }
    }
}

@mixin selected-edition-addon {
    &_wrapper {
        @include media-md-up {
            display: flex;
            align-content: flex-start;
            justify-content: space-between;
        }
    }
    &_thumbnailWrapper {
        flex-shrink: 0;
        margin-right: $selected-edition-img-spacing-mobile;
        height: $selected-edition-img-size-mobile;
        width: $selected-edition-img-size-mobile;
        overflow: hidden;

        @include media-md-up {
            height: $selected-edition-img-size;
            width: $selected-edition-img-size;
            margin-right: $selected-edition-img-spacing;
        }
    }
    &_details {
        display: flex;

        &--with-pricing {
            @include media-md-up {
                padding-right: $grid-gutter-width;
            }
        }
    }
    &_content {
        @include text-5;
        line-height: 1.2em;
    }
    &_title {
        @include title-5;
        margin: 0;
        line-height: 1.25;

        @include media-md-up {
            @include title-3;
            margin: 0;
        }
    }
    &_description {
        @include media-md-down {
            display: none;
        }
        @include media-md-up {
            margin-top: 7px;
        }
    }
    &_price {
        @include media-md-down {
            display: none;
        }

        @include media-md-up {
            padding-left: $grid-gutter-width;
        }
    }
}