@use '@/styles/base';

.overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background-color: rgb(0 0 0 / 50%);
}

.modal {
    z-index: 1001;
    display: flex;
    flex-direction: column;
    gap: base.$gap-md;
    width: 100%;
    height: 100%;
    padding: var(--modal-padding);
    color: var(--modal-font-color);
    background-color: var(--modal-background-color);

    @include base.larger-than-sm {
        min-width: 350px;
        max-width: 800px;
        height: auto;
        border: var(--modal-border);
        border-radius: var(--modal-border-radius);

        &.modal-sm {
            width: 30%;
            min-width: 300px;
            max-width: 400px;
        }

        &.modal-md {
            width: 50%;
            min-width: 400px;
            max-width: 500px;
        }

        &.modal-lg {
            width: 70%;
            min-width: 500px;
            max-width: 800px;
        }
    }
}

.title {
    display: flex;
    align-items: center;
    font-size: var(--modal-title-font-size);
    font-weight: var(--modal-title-font-weight);
    user-select: none;
}

.button-group {
    display: flex;
    gap: base.$gap-sm;
    justify-content: flex-end;
}
