@use 'sass:math';

$prompt-space: 24;

.prompt {
    &__overlay {
        pointer-events: none;
        background-color: $color-bg-overlay;
    }

    &__overlay,
    &__content-wrapper {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    &__content-wrapper {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    &__content {
        display: flex;
        flex-direction: column;
        position: relative;
        margin: auto;
        flex: 1 1 100%;
        max-width: space(700);
        width: 100%;
        height: auto;
        background: $color-modal-overlay;
        border-radius: $border-radius-modal;
        border-color: $color-border;
        border-width: $border-width-thickness;

        h3, p {
            margin: space($prompt-space);
        }
        p {
            margin-top: 0;
        }
    }

    &__controls {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding: space($prompt-space) space(math.div($prompt-space, 2));
        border-top-color: $color-border-soft;
        border-top-width: $border-width-thickness;

        .button {
            nav-up: none;
            nav-down: none;
            margin: 0 space(math.div($prompt-space, 2));
            min-width: space(math.div(700, 3));
            text-align: center;
        }
    }
}