/*
 * Notifications.
 *
 * One class family for two places messages appear: the flash region at the top of `<main>` (server
 * rendered, one per page load) and toasts raised by JavaScript (client side, transient). They share the
 * same four statuses, because a success that looks different depending on who drew it teaches the reader
 * nothing.
 *
 * The status is never carried by colour alone. Every variant keeps the heading row (flash) or a status
 * word (toast), and keeps its border on the reading side, so the message survives greyscale, high
 * contrast mode and colour-blindness alike. The `--{status}` modifier changes hue and tint; the text
 * stays the regular ink.
 */

.notification {
    position: relative;

    padding: var(--space-3) var(--space-4);
    background-color: var(--colour-info-surface);
    border: 1px solid var(--colour-border);
    border-inline-start-width: var(--focus-width);
    border-inline-start-color: var(--colour-info);
    border-radius: var(--radius-md);
}

.notification + .notification {
    margin-top: var(--space-3);
}

/* The heading naming the status. Present in the flash partial always; a toast without one would rely
   on colour, which is the failure this component exists to prevent. */
.notification__title {
    margin-top: 0;
    font-size: var(--text-base);
    font-weight: var(--weight-bold);
}

.notification__body {
    margin-top: var(--space-1);
    max-width: none;
}

.notification--success {
    background-color: var(--colour-success-surface);
    border-inline-start-color: var(--colour-success);
}

.notification--error {
    background-color: var(--colour-error-surface);
    border-inline-start-color: var(--colour-error);
}

.notification--warning {
    background-color: var(--colour-warning-surface);
    border-inline-start-color: var(--colour-warning);
}

/* Info is the default above; this modifier exists so a status is always explicit in markup. */
.notification--info {
    background-color: var(--colour-info-surface);
    border-inline-start-color: var(--colour-info);
}

/* ---- The flash region ------------------------------------------------------------------------ */

/* The container at the top of `<main>`. `role="status"` and `aria-live` come from the template; this is
   only the spacing. */
.flash {
    margin-bottom: var(--space-6);
}

.flash:empty {
    display: none;
}

/* ---- Toasts (JavaScript-raised) ---------------------------------------------------------------- */

/*
 * Fixed to the bottom of the viewport rather than the top, so a toast never lands where the reader's
 * eyes already are. It is announced through the same live region the flash uses, which
 * `js/core/notifications.js` owns.
 */
.notification--toast {
    position: fixed;
    inset-inline-end: var(--space-4);
    bottom: var(--space-4);
    z-index: var(--layer-overlay);

    width: min(24rem, calc(100vw - var(--space-8)));
    box-shadow: var(--shadow-overlay);
}

/* ---- Dismiss ----------------------------------------------------------------------------------- */

/* Inserted by `js/core/notifications.js` only, so it never exists for a reader without JavaScript. The
   label comes from `data-dismiss-label` on the notification element — translated server-side, because
   no script in this application contains a hard-coded string. */
.notification__dismiss {
    position: absolute;
    top: var(--space-2);
    inset-inline-end: var(--space-2);

    min-height: 1.5rem;
    min-width: 1.5rem;
    padding: var(--space-1);

    background: none;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--colour-ink-quiet);
    font-size: var(--text-sm);
    line-height: 1;
}

.notification__dismiss:hover {
    color: var(--colour-ink);
    background-color: rgba(0, 0, 0, 0.06);
}