@import '../../../styles/mixins';
@import '../../../styles/grid';
@import '../../../styles/definitions/variables';
@import '../../../styles/definitions/breakpoints';
@import '../../../styles/definitions/placeholders';

// Variables
$btn-close-icon-size: 24px;


// Component Styles
$namespace: ".selectionPreview";

#{$namespace} {
    &_wrapper {
        padding-top: 16px;
        padding-bottom: 20px;

        &--fullscreen {
            height: 100%;
        }

        // Set Edition & Addons component same width
        .selectedAddon,
        .selectedEdition {
            &_details {
                @include media-md-up {
                    @include grid-width(8);
                }
                @include media-xl-up {
                    @include grid-width(9);
                }
            }
            &_price {
                @include media-md-up {
                    @include grid-width(4);
                }
                @include media-xl-up {
                    @include grid-width(3);
                }
            }
        }

        @include media-lg-up {
            padding-bottom: 30px;
            &--condensed {
                padding-top: 6px;
                padding-bottom: 24px;
            }
        }
    }
    &_content {
        position: relative;

        &--fullscreen {
            height: 100%;
        }

        @include media-xl-up {
            @include grid-width(10);
            margin-left: auto;
            margin-right: auto;
        }
    }
    &_preview {
        &Wrapper {
            display: flex;

            &--fullscreen {
                flex-direction: column;
                height: 100%;
                overflow-y: auto;
            }
        }
        &Content {
            flex-grow: 1;

            &:not(&--fullscreen) {
                padding-right: $grid-gutter-width;
            }
        }
        &Title {
            @include title-6;
            margin: 0 0 15px;
            transition: all 0.3s;
            max-height: 20px;
            &--hidden {
                max-height:0;
                margin:0;
                opacity:0;
            }

            @include media-lg-down {
                display: none;
            }
        }
        &List {
            @include media-lg-up {
                margin-top: -18px;
                &:not(&--condensed) {
                    margin-top: 12px;
                }
            }
        }
        &Item {
            &--addon {
                margin-top: 20px;
            }
        }
    }
    &_fullscreenTitle {
        @include title-2;
        margin: 0 0 20px;
        padding-right: $btn-close-icon-size + $grid-gutter-width;
    }
    &_buttons {
        display: flex;

        &:not(&--fullscreen) {
            flex-direction: column;
            align-items: flex-end;
            flex-shrink: 0;
            padding-left: $grid-gutter-width;
    
            @include media-md-down {
                @include grid-width(4);
            }
        }
        &--fullscreen {
            flex-wrap: wrap;
            justify-content: center;
            margin-top: $grid-gutter-width * 2;
        }
    }

    &_button {
        $button-padding-x: 24px;
        $icon-width: 26px;
        $icon-spacing: 16px;

        &Icon {
            position: absolute;
            left: $button-padding-x;
            top: 50%;
            transform: translateY(-50%);
            width: $icon-width;
            fill: $white;
        }
        &--with-icon {
            position: relative;

            @include media-md-up {
                .button_text {
                    padding-left: $button-padding-x + $icon-width + $icon-spacing;
                }
            }
        }
        &--fullscreen {
            $button-spacing: 3px;
            width: 50%;
            margin-top: $button-spacing;

            .button_item {
                width: 100%;
            }

            &:nth-child(even) {
                padding-left: $button-spacing;
            }
            &:nth-child(odd) {
                padding-right: $button-spacing;
            }
        }

        &:not(&--fullscreen) {
            width: 100%;
            text-align: right;
        
            &:not(:first-of-type) {
                margin-top: 12px;
            }

            @include media-md-down {
                .button_item {
                    font-size: $bodyFontSize6;
                    width: 100%;
                    min-width: 0;
                    min-height: $button_height--small;
                }
                .button_text {
                    padding: $button_padding--small;
                }
            }
        }

        @include media-md-down {
            &Icon {
                display: none;
            }
        }
    }
    &_btnCollapse {
        padding-left: calc(#{$selected-edition-img-size-mobile} + #{$selected-edition-img-spacing-mobile});
        margin-top: 5px;

        .button_item {
            font-size: 14px;
        }

        @include media-md-up {
            padding-left: calc(#{$selected-edition-img-size} + #{$selected-edition-img-spacing});
        }
    }
    &_closeFullscreen {
        position: absolute;
        top: 0;
        right: 0;
        
        &Icon {
            fill: $gray-71;
            width: $btn-close-icon-size;
        }
    }
}

// When selection preview is fullscreen the body scroll need to be disabled
body.fixed {
    @include fixed-body;
}
