@use "../common/utils" as *;
@use "../common/mixins" as *;

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition: .4s ease all;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;

    &__backdrop {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, .75);
        z-index: 10;
        width: 100vw;
        height: 100vh;
    }

    &__inner {
        position: relative;
        z-index:51;
        padding: calc-rem(25px);
        background: #FFF;
        max-height: 80vh;
        overflow-y: auto;
        border-radius: calc-rem(25px);
        width: 90vw;

        @include media-breakpoint-up(md) {
            max-width: 512px;
        }
    }

    &__title {
        margin-bottom: calc-rem(15px);

        h3 {
            font-size: clamp-font(12px, 14px);
            text-transform: uppercase;
            margin-bottom: 0;
        }
    }

    &__close {
        position: absolute;
        top: calc-rem(15px);
        right: calc-rem(15px);
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(var(--color-border), 1);
        background: #FFF;
        border-radius: 9999px;
        width: calc-rem(35px);
        height: calc-rem(35px);
        transition: background 0.2s ease;

        svg {
            width: calc-rem(20px);
            height: calc-rem(20px);

            path {
                stroke: rgba(var(--color-secondary), 1);
            }
        }

        &:hover {
            transition: background 0.2s ease;
            background: rgba(var(--color-secondary), .2);
        }
    }

    &__content {
        color: rgba(var(--color-text), .8);
        font-size: clamp-font(12px, 14px);
    }

    &__buttons {
        margin-top: calc-rem(25px);
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: calc-rem(10px);
    }
}
