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

$configurator-zindex: 1;
$configurator-section-spacing: 54px;
$configurator-section-spacing-xs: 24px;

@mixin sticky-wrapper-shadow($position: top) {
    $y: 3px;

    @if $position == 'bottom' {
        $y: $y * -1;
    }

    box-shadow: 0 $y 6px 0px rgba($black, 0.1);
}

$namespace: ".productConfigurator";

#{$namespace} {
    &_container {
        &--with-preview-sticky-bottom {
            padding-bottom: calc(var(--previewHeight, 0px) + 10px);
        }
    }
    &_preview-sticky {
        z-index: $configurator-zindex + 2;

        height: var(--stickyheight);

        &--sticky-top {
            position: sticky;
            top: 0;
        }
        &--sticky-bottom {
            $padding-x: 16px;
            right: 0;
            left: 0;
            bottom: 0;
            padding-right: $padding-x;
            padding-left: $padding-x;
            position: fixed;
        }
        &--fullscreen {
            top: 0;
        }
    }
    &_preview {
        position: relative;

        &--sticky-bottom {
           
            &:before {
                @include sticky-wrapper-shadow(bottom);
            }
        }
        
        &--with-boxshadow#{&}--sticky-top {
            &:before {
                @include sticky-wrapper-shadow();
            }
        }

        &:before {
            content: "";
            @include background-faintGray;
            @include full-window-width;
        }

        @include media-md-up {
            padding-top: 20px;
            padding-bottom: 6px;
        }
    }
    &_backAction {
        position: relative;
        transition: all 0.3s;
        max-height: 30px;

        #{$namespace}_preview--is-condensed & {
            max-height:0;
            opacity:0;
        }

        &Link {
            @include button-link($dark-gray, $deepest-gray, $primary-color, $primary-color);
            position: relative;
            font-size: 14px;
            display: inline-flex;
            align-items: center;
        }
        &Icon {
            width: 7px;
            margin-right: 16px;
        }

        @include media-xl-up {
            padding-left: 12px;
        }

        @include media-lg-down {
            margin-top: 15px;
            margin-bottom: 15px;

            &:before {
                content: "";
                @include background-white;
                @include full-window-width;
            }
        }
    }
    &_configurator {
        position: relative;
        z-index: $configurator-zindex;
        margin-top: $configurator-section-spacing-xs;

        @include media-lg-up {
            margin-top: $configurator-section-spacing;
        }
    }
    &_addons {
        margin-top: $configurator-section-spacing-xs;

        @include media-lg-up {
            margin-top: $configurator-section-spacing;
        }
    }
    &_btnShowEditions {
        position: relative;
        width: 100%;
        margin: 0 auto;
        text-align: center;

        &Icon {
            width: 27px;
            margin-left: 11px;
        }

        .button_item {
            position: relative;
            padding: 0 23px;
            background-color: $white;
        }

        &:before {
            content: "";
            position: absolute;
            top: 50%;
            right: $grid-gutter-width;
            left: $grid-gutter-width;
            height: 1px;
            background-color: $gray-92;
            transform: translateY(-50%);
        }

        @include media-lg-up {
            @include grid-width(8);
        }
    }
    &_btnBackTop {
        position: fixed;
        bottom: var(--previewHeight, 110px);
        right: 12px;
        width: 50px;
        padding-bottom: 50px;
        z-index: $configurator-zindex + 1;
        opacity: 0;
        transition: opacity 0.3s ease;

        &--visible {
            opacity: 1;
        }

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