pragma-messages {
    @include flex();
    @include flex-column();

    padding: $default-padding;
    position: fixed;
    top: 25%;
    left: 50%;
    max-width: 25rem;
    width: 100%;
    height: 10rem;
    background: var(--color-ui-4);
    border-color: var(--color-ui-2-50);

    will-change: transform;
    transition: 0.2s transform ease-out;
    transform: translate(-50%, -25%);

    z-index: 1000;

    .message-body {
        @include stretch()
    }

    .toolbar {
        justify-content: flex-end;
    }
}


pragma-messages.closed {
    transform: translate(-50%, -100vh);
}