// /**
//  * Copyright Â© Magento, Inc. All rights reserved.
//  * See COPYING.txt for license details.
//  */

//
//  Components -> Modals
//  _____________________________________________

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

@modal-title__color: @text__color;
@modal-title__border: 1px solid @color-gray-light5;

@modal-popup-title__font-size: 26px;
@modal-popup-title-mobile__font-size: @font-size__base;

@modal-slide__first__indent-left: 44px;
@modal-slide-mobile__background-color: @color-gray-light01;
@modal-overlay__background-color: fade(@color-gray20, 55%);

@modal-action-close__color: @primary__color;
@modal-action-close__font-size: 32px;
@modal-action-close__hover__color: darken(@primary__color, 10%);

@modal-slide-action-close__padding: @modal-slide-header__padding-vertical - 1rem @modal-popup__padding - 1rem;

//
//  Common
//  _____________________________________________

& when (@media-common = true) {
    .modal-header {
        position: sticky;
        top: 0;
        background: @modal__background-color;
        z-index: 2;
    }

    .modal-title {
        font-size: @modal-popup-title__font-size;
        margin: 0;
    }

    .modal-inner-wrap {
        overscroll-behavior: none;
    }

    .modal-inner-wrap, .modal-content {
        display: flex;
        flex-direction: column;
    }

    .modal-content {
        flex-grow: 1;
    }

    .modal-slide {
        max-width: 400px;
        margin-left: auto;
        max-height: 720px;

        .action-close {
            .lib-button-reset();
            .lib-button-icon(
                @icon-remove,
                @_icon-font-color: @minicart-icons-color,
                @_icon-font-size: @modal-action-close__font-size,
                @_icon-font-line-height: @modal-action-close__font-size,
                @_icon-font-text-hide: true
            );
            position: absolute;
            right: 0;
            top: 0;
            padding: @modal-slide-action-close__padding;

            &:hover {
                &:before {
                    color: @modal-action-close__hover__color;
                }
            }
        }
    }

    .modals-overlay {
        .lib-css(background-color, @modal-overlay__background-color);
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        height: 100vh;
        width: 100vw;
        opacity: 0;
        transition: opacity .3s;

        ._show ~ & {
            opacity: 1;
        }
    }

    body {
        &._has-modal {
            touch-action: none;
            -webkit-overflow-scrolling: none;
            overscroll-behavior: none;
        }
    }
}
