/* Dialog (native <dialog> + invoker commands: command="show-modal" / commandfor) */

.dialog {
    --width-sm: 420px;
    --width-lg: 1200px;

    font-weight: 400;
    color: var(--text);
    padding: var(--space-section);
    border-radius: var(--radius-md);
    border: solid 1px var(--border);
    background: var(--surface);
    box-shadow: var(--shadow);
    overflow: hidden;
    flex-direction: column;
    gap: var(--space-section);

    cursor: auto;

    margin: auto;
    width: 90%;
    max-width: var(--measure);
    max-height: 90%;

    opacity: 0;
    transform: scale(0.96);
    transition: opacity var(--transition-speed) ease-in-out,
    transform var(--transition-speed) ease-in-out,
    overlay var(--transition-speed) ease-in-out allow-discrete,
    display var(--transition-speed) ease-in-out allow-discrete;
}

.dialog[open] {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

@starting-style {
    .dialog[open] {
        opacity: 0;
        transform: scale(0.96);
    }
}

/* Backdrop */
.dialog::backdrop {
    background: rgba(0, 0, 0, 0.2);
    opacity: 0;
    transition: opacity var(--transition-speed) ease-in-out,
    overlay var(--transition-speed) ease-in-out allow-discrete,
    display var(--transition-speed) ease-in-out allow-discrete;
}

.dialog[open]::backdrop {
    opacity: 1;
}

@starting-style {
    .dialog[open]::backdrop {
        opacity: 0;
    }
}

/* Layout */

.dialog > form {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;

    gap: var(--space-section);
}

.dialog-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-inline);
    flex-shrink: 0;
}

.dialog-header .title {
    flex: 1;
}

/* Pulled up and out by the glyph's inset within the control height, so what is drawn on the buttons
   lines up with the title and the edge rather than the boxes around them. One offset serves both
   directions because an icon button is a square; a text button here would want a different right. */
.dialog-header .buttons {
    display: flex;
    margin-top: calc(var(--control-icon-inset) * -1);
    margin-right: calc(var(--control-icon-inset) * -1);
}

.dialog-main {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.dialog-footer {
    display: flex;
    align-items: center;
    gap: var(--space-tight);
}

/* Width variants */
.dialog.w-sm {
    max-width: var(--width-sm);
}

.dialog.w-md {
    max-width: var(--measure);
}

.dialog.w-lg {
    max-width: var(--width-lg);
}

.dialog.w-full {
    width: 100%;
    max-width: none;
    max-height: 100%;
    border-radius: 0;
}

/* Edge positions */

/* top */
.dialog.top {
    margin: 0;
    inset: 0 0 auto 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateY(-100%);
}

.dialog.top[open] {
    transform: translateY(0);
}

@starting-style {
    .dialog.top[open] {
        transform: translateY(-100%);
    }
}

/* bottom */
.dialog.bottom {
    margin: 0;
    inset: auto 0 0 0;
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateY(100%);
}

.dialog.bottom[open] {
    transform: translateY(0);
}

@starting-style {
    .dialog.bottom[open] {
        transform: translateY(100%);
    }
}

/* right */
.dialog.right {
    margin: 0;
    inset: 0 0 0 auto;
    width: 100%;
    height: 100%;
    max-width: var(--measure);
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateX(100%);
}

.dialog.right[open] {
    transform: translateX(0);
}

@starting-style {
    .dialog.right[open] {
        transform: translateX(100%);
    }
}

/* left */
.dialog.left {
    margin: 0;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    max-width: var(--measure);
    max-height: 100%;
    border-radius: 0;
    border: none;
    transform: translateX(-100%);
}

.dialog.left[open] {
    transform: translateX(0);
}

@starting-style {
    .dialog.left[open] {
        transform: translateX(-100%);
    }
}

.dialog-main > .validation-message {
    text-align: center;
    margin-bottom: var(--space);
}

/* Small screens */
@media (max-width: 720px) {
    .dialog {
        inset: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
        transform: none !important;
    }

    .dialog-footer {
        flex-direction: column-reverse;
    }

    .dialog-footer .btn {
        width: 100%;
    }
}