$product-color-black: #151918;
$product-color-low-black: #191919;
$product-color-gray: #959B8D;
$product-color-gray-1: #8A9082;
$product-color_gray-2: #B8B8B8;
$product-color_gray-3 : #C8CBC3;
$product-color_gray-4 : #ACACAC;
$product-color_white : #FFFFFF;

.font-base {
    font-family: 'ABC Diatype Mono Unlicensed Trial';
}

body.open-popup {
    overflow: hidden;
}

.rocket-out-of-stock-modal {
    font-family: 'ABC Diatype Mono Unlicensed Trial';
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 20;
    padding: 30px;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    visibility: hidden;
    transition: visibility 0s linear 0.1s, opacity 0.3s ease;

    &.open {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
        margin-top: 0 !important;
    }

    &__overlay {
        display: block !important;
        position: fixed;
        z-index: 9999;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background-color: $product-color_gray-3;
        opacity: 0.3;
        padding: 0 16px;
        backdrop-filter: blur(2px);
    }

    &__close {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        color: #000;
        font-size: 14px;
        font-weight: 300;

        @media (min-width: 768px) {
            top: 34px;
            right: 32px;
        }
    }

    &__container {
        position: relative;
        z-index: 99999;
        width: calc(100% - 32px);
        min-height: 279px;
        top: 50%;
        transform: translateY(-50%);
        margin: 0 auto;
        padding: 34px 16px 16px;
        background-color: #fff;
        text-align: left;
        overflow-y: auto; 

        button {
            &.submit-form-out-stock {
                @extend .font-base;
                background: $product-color-gray;
                border-radius: 0px;
                border: 1px solid $product-color-gray;
                color: $product-color-black;
                font-size: 14px;
                font-weight: 400;
                line-height: 12px;
                letter-spacing: -0.56px;    
                margin: 16px 0 0;
                min-height: auto;
                padding: 12px;
                width: 100%;
                cursor: pointer;
                &:hover {
                    background: $product-color-gray-1;
                }
            }
        }

        .field {
            display: flex;

            &:before,
            &:after {
                display: none;
            }

            input {
                background: #fff;
                border-radius: 0px;
                font-size: 12px;
                height: auto;
                line-height: 15px;
                margin: 0;
                padding: 10.5px 12px;
                font-weight: 400;
                letter-spacing: -0.36px;
                width: 100%;
                font-family: "ABC Diatype Mono Unlicensed Trial";
                border: 1px solid $product-color_gray-3;

                &::placeholder {
                    opacity: 1;
                    color: $product-color-black;
                    font-size: 12px;
                    line-height: 15px;
                    font-weight: 400;
                    letter-spacing: -0.36px;
                    font-family: "ABC Diatype Mono Unlicensed Trial";
                }
    
                &:focus {
                    box-shadow: none;
                }
            }
        }

        .text-book__small {
            font-size: 12px;
            line-height: 15px;
            letter-spacing: -0.36px;
        }

        .rocket-out-of-stock-modal__container-note {
            color: #959b8d;
        }

        &-title {
            @extend .font-base;
            font-size: 16px;
            font-weight: 400;
            letter-spacing: -0.48px;
            line-height: 21px;
            color: $product-color-black;
        }

        &-subtitle {
            margin-bottom: 32px;
            color: $product-color-black;
        }

        &-note {
            margin: 16px 0 0;
        }
    }
}

@media (min-width: 768px) {
    .rocket-out-of-stock-modal {
        &__close {
            top: 22px;
            right: 23px;
        }

        &__container {
            width: 458px;
            min-height: 267px;
            padding: 42px 24px 24px;

            button {
                padding: 12px;
                margin: 15px 0 0;
            }

            &-title {
                font-size: 20px;
                line-height: 22px;
                letter-spacing: -1px;
            }
        }
    }
}