.dialogBox {
    @include position(0, 0, 0, 0);
    @include flex(row, center, center);
    z-index: 15;
    position: absolute;
    transition: all 0.3s, visibility 0s 0.3s;
    visibility: hidden;
    opacity: 0;

    &.open {
        transition: all 0.3s, visibility 0s 0s;
        visibility: visible;
        opacity: 1;

        // Backdrop-filter is too difficult for most phones
        @include mq-desktop {
            backdrop-filter: blur(2px);
        }
    }
}

.dialog {
    @include flex(column);
    box-shadow: 0 0.15em 1.5em var(--c-background-tertiary);
    background: var(--c-background-primary);
    color: var(--c-text-primary);
    transform-origin: top center;
    transform: scale(1);
    transition: all 0.3s;
    border-radius: 0.25em;
    max-width: 22.5em;

    &.closing {
        transform: scale(0.95) translateY(-2.5vmin);
        opacity: 0;
    }

    > header {
        @include flex(row, center);
        padding: 0.75em;
        border-bottom: 2px solid var(--c-background-secondary);

        > bc-icon {
            @include size(16px);
            color: var(--c-text-primary-accent);
        }

        > p {
            @include font(600, 0.9em);
            line-height: 1.15em;
            margin-left: 0.75em;
        }
    }

    > p {
        @include font(600, 1em);
        line-height: 1.25em;
        padding: 1em;
    }

    @include mq-phones {
        width: 90vw;
    }
}

.buttonBar {
    @include flex(row, center, flex-end);
    padding: 0 1em 1em;
    width: 100%;

    > button {
        @include margin-between-h(0.5em);
        @include flex(row, center);
        @include button_small;
        @include button_color('primary');
        padding: 0.7em 1.25em;
        font-size: 0.9em;

        $types: (
                ('success', 'primary'),
                ('warning', 'yellow'),
                ('error', 'red')
        );

        @each $type in $types {
            &[data-severity="#{nth($type, 1)}"] {
                @include button_color(nth($type, 2));
            }
        }

        > bc-icon {
            margin-right: 0.5em;
        }

        > span {
            font-weight: 600;
        }
    }
}
