/*
 * Overlays: dialogs and drawers (native <dialog>, dialog_controller.js) and tooltips.
 */
@layer components {
    .dialog {
        --dialog-width: var(--dialog-width-md);

        width: min(var(--dialog-width), calc(100vw - 2 * var(--space-4)));
        max-height: calc(100vh - 2 * var(--space-8));
        /* Centred, as browsers do by default (page styles would override it). */
        margin: auto;
        padding: 0;
        border: var(--border-width-thin) solid var(--color-border);
        border-radius: var(--dialog-radius);
        background: var(--color-bg-surface);
        color: var(--color-text);
        box-shadow: var(--shadow-lg);
    }

    .dialog[open] {
        display: flex;
        flex-direction: column;
        animation: dialog-in var(--duration-normal) var(--easing-emphasized);
    }

    .dialog::backdrop {
        background: var(--color-bg-overlay);
        animation: fade-in var(--duration-normal) var(--easing-standard);
    }

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

    .dialog-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-3);
        padding: var(--space-5) var(--space-6) 0;
    }

    .dialog-header h2 {
        margin: 0;
        font-size: var(--font-size-xl);
    }

    .dialog-body {
        flex: 1;
        overflow-y: auto;
        padding: var(--space-4) var(--space-6);
    }

    .dialog-body > :last-child {
        margin-bottom: 0;
    }

    .dialog-footer {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: var(--space-3);
        padding: 0 var(--space-6) var(--space-5);
    }

    /* Drawer: a dialog sliding from the side. */
    .dialog.drawer {
        --dialog-width: 24rem;

        height: 100vh;
        max-height: none;
        margin: 0 0 0 auto;
        border-radius: 0;
        animation-name: drawer-in;
    }

    @keyframes dialog-in {
        from { opacity: 0; transform: translateY(0.75rem) scale(0.98); }
    }

    @keyframes drawer-in {
        from { transform: translateX(100%); }
    }

    @keyframes fade-in {
        from { opacity: 0; }
    }

    /* Tooltip: <span class="tooltip"><button aria-describedby="t1">…</button><span role="tooltip" id="t1">…</span></span> */
    .tooltip {
        position: relative;
        display: inline-flex;
    }

    .tooltip [role="tooltip"] {
        position: absolute;
        bottom: calc(100% + var(--space-2));
        left: 50%;
        z-index: var(--z-index-tooltip);
        width: max-content;
        max-width: var(--tooltip-max-width);
        padding: var(--space-1-5) var(--space-2);
        border-radius: var(--radius-sm);
        background: var(--color-bg-inverse);
        color: var(--color-text-inverse);
        font-size: var(--font-size-xs);
        line-height: var(--font-line-height-snug);
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, 0.25rem);
        transition: opacity var(--duration-fast) var(--easing-standard), transform var(--duration-fast) var(--easing-standard);
    }

    .tooltip:hover [role="tooltip"],
    .tooltip:focus-within [role="tooltip"] {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}