//
// Styles for minipage popup
// __________________________

//
//  Variables
//  --------------------------------------------

@ampage-border__color: #b2b2b2;
@ampage-notice__background: #fffae5;
@ampage-popup-border__color: #ebeef5;
@ampage-popup-text__color: #333;
@ampage-close-icon__background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTMiIGhlaWdodD0iMTMiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0iTTEgMWwxMSAxMW0wLTExTDEgMTIiIHN0cm9rZT0iI0IyQjJCMiIgc3Ryb2tlLXdpZHRoPSIxLjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIvPjwvc3ZnPg==) no-repeat center;

//
//  Common
//  ----------------------------------------------

& when (@media-common = true) {
    .amrelated-popup-container {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.15);
    }

    .amrelated-bundle-popup {
        & {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 9999;
            box-sizing: border-box;
            max-width: 315px;
            height: auto;
            overflow: hidden;
            padding: 0 0 13px;
            text-align: center;
            background: #fff;
            border-radius: 9px;
            box-shadow: 0 5px 10px rgba(0, 0, 0, .25);
            .lib-css(transform, translate(-50%, -50%), 1);
        }

        .close {
            position: absolute;
            top: 18px;
            right: 18px;
            z-index: 9;
            width: 12px;
            height: 12px;
            font-size: 21px;
            color: rgba(0, 0, 0, .25);
            .lib-css(background, @ampage-close-icon__background);
            cursor: pointer;
        }

        .amrelated-products-wrapper {
            & {
                height: 100%;
                max-height: 80vh;
                overflow-y: auto;
                padding-bottom: 80px;
            }

            &:last-child:after {
                display: none;
            }

            .product-options-bottom .actions,
            .box-tocart .actions {
                display: block;
            }
        }

        .amrelated-notice {
            z-index: 99;
            max-width: 60%;
            margin: 0 auto;
            padding: 10px 20px;
            border-radius: 0 0 7px 7px;
            font-size: 14px;
            .lib-css(background, @ampage-notice__background);
        }

        .amrelated-popup-tocart-wrapper {
            & {
                position: absolute;
                bottom: 0;
                width: 100%;
                box-sizing: border-box;
                padding: 15px;
                z-index: 10;
                background-color: #fff;
                text-align: right;
            }

            .action {
                display: inline-block;
                padding: 15px;
                font-size: 18px;
            }
        }
    }

    .amrelated-product-container {
        & {
            position: relative;
        }

        &:after {
            position: absolute;
            left: 0;
            bottom: 0;
            display: block;
            width: 68%;
            height: 1px;
            margin-left: 16%;
            background-color: #c5c5c5;
            content: '';
        }

        &:last-child:after {
            display: none;
        }

        .amrelated-product-message {
            display: none;
        }

        .amrelated-image-wrapper {
            max-width: 150px;
            margin: 15px auto;
        }
    }

    .amrelated-product-info {
        & {
            width: 100%;
        }

        .amrelated-info.-top,
        .amrelated-info.-bottom {
            padding: 0 20px;
            text-align: left;
        }

        .box-tocart .actions,
        .action.back.customization,
        .block-bundle-summary,
        .tocart {
            display: none;
        }

        .bundle-options-wrapper {
            margin-top: 25px;
        }

        .bundle-options-wrapper input[type="radio"] {
            width: 15px;
        }

        .bundle-options-wrapper p.required {
            color: #e02b27;
        }

        .bundle-options-wrapper .field.qty > .label {
            display: inline-block;
            margin: 10px 0 8px;
            font-weight: 600;
        }

        .bundle-options-wrapper .input-text.qty {
            text-align: center;
            width: 54px;
        }

        /* rewrite magento styles*/
        .product-options-bottom .price-box .price-container .price,
        .product-info-price .price-box .price-container .price {
            font-size: 22px;
            font-weight: 600;
            line-height: 22px;
        }

        &.giftcard .amrelated-price{
            display: none;
        }

        &.giftcard .amrelated-info.-bottom .product-options-bottom .price-box {
            display: block;
        }
    }

    .amrelated-image-container {
        & {
            box-sizing: border-box;
            width: initial;
            margin: 0 25px 10px;
            .lib-css(border, 1px solid @ampage-border__color);
        }

        > .product-item-photo {
            display: block;
            width: 60%;
            margin: auto;
        }

        .product-image-container {
            vertical-align: middle;
        }
    }

    .amrelated-info.-top {
        & {
            margin: 0;
        }

        > .amrelated-title {
            margin-bottom: 5px;
            font-size: 20px;
        }

        > .amrelated-rating .rating-summary {
            vertical-align: text-bottom;
        }

        > .amrelated-price,
        > .amrelated-price .price {
            font-size: 24px;
            font-weight: bold;
        }

        .reviews-actions .action {
            margin-left: 15px;
            font-size: 14px;
            color: #000;
        }
    }

    .amrelated-info.-bottom {
        > .amrelated-description {
            margin: 0 25px;
            font-size: 12px;
        }

        .swatch-attribute {
            margin-bottom: 20px;
        }

        .product-options-bottom .price-box {
            display: none;
        }

        /* don't hide grouped price*/
        .product-options-bottom .grouped .price-box {
            display: block;
        }
    }

    .amrelated-products-block {
        & {
            overflow: hidden auto;
            margin: 20px 15px 27px;
            max-height: 366px;
            border-bottom: 1px solid @ampage-popup-border__color;
        }

        > .amrelated-product {
            display: flex;
            margin-bottom: 20px;
        }

        .amrelated-content {
            color: @ampage-popup-text__color;
            text-align: left;
        }

        .amrelated-name {
            .am-word-break;

            font-size: 16px;
            line-height: 20px;
        }

        .amrelated-image-wrapper {
            display: flex;
            margin-right: 10px;
            border: 1px solid @ampage-popup-border__color;
        }
    }

    .amrelated-products-block .amrelated-qty {
        & {
            display: flex;
            align-items: center;
            margin: 5px 0 0;
        }

        .amrelated-title {
            font-weight: 800;
            font-size: 12px;
            line-height: 19px;
        }

        .amrelated-value {
            margin-left: 10px;
            font-size: 14px;
            line-height: 19px;
        }
    }
}

//
//  Mobile +
//  --------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__s) {
    .amrelated-popup-container {
        .amrelated-bundle-popup {
            margin: 0 auto;
            padding: 0 0 13px;
            width: 400px;
            max-width: initial;
        }

        .amrelated-info.-top {
            margin-top: 15px;
        }
    }
}

//
//  Tablet +
//  --------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__m) {
    .amrelated-popup-container .amrelated-bundle-popup {
        & {
            min-width: 700px;
            max-width: initial;
        }

        .amrelated-product-info {
            margin-top: 60px;
            min-height: 450px;
        }
    }

    .amrelated-product-info {
        .amrelated-info.-top {
            float: right;
            margin: 0;
            width: 50%;
        }

        .amrelated-info.-bottom {
            clear: both;
            float: right;
            margin-bottom: 20px;
            width: 50%;
        }

        .amrelated-info.-top,
        .amrelated-info.-bottom {
            padding: 0 20px 0 0;
            box-sizing: border-box;
        }
    }

    .amrelated-info.-top {
        .amrelated-title {
            margin-bottom: 10px;
            font-size: 24px;
        }

        .product-reviews-summary {
            margin-bottom: 10px;
        }

        .product-reviews-summary .action {
            margin-left: 10px;
        }
    }

    .amrelated-info.-bottom {
        .amrelated-description {
            margin: 5px 0 0;
            font-size: 14px;
        }

        .product-add-form {
            padding: 0;
            margin: 0;
        }
    }

    .amrelated-product-info .amrelated-image-container {
        & {
            position: absolute;
            left: 0;
            margin: 0;
            padding: 0 25px;
            width: 50%;
            border: 0;
            box-sizing: border-box;
        }

        > .product-item-photo {
            width: 100%;
            border: 0;
        }

        .product-image-container {
            .lib-css(border, 1px solid @ampage-border__color);
        }
    }

    .amrelated-products-block {
        margin-right: 27px;
        margin-left: 27px;
    }
}

//
//  Desktop +
//  --------------------------------------------

.media-width(@extremum, @break) when (@extremum = 'min') and (@break = @screen__l) {
    .amrelated-popup-container .amrelated-bundle-popup  {
        width: 820px;
    }

    .amrelated-product-info {
        .amrelated-info.-top,
        .amrelated-info.-bottom {
            padding: 0 35px 0 0;
        }
    }

    .amrelated-product-info .amrelated-image-container {
        .amrelated-image-container {
            padding: 0 25px 0 35px;
        }

        > .product-item-photo {
            text-align: left;
        }
    }
}