.toast-host {
    position: fixed;
    display: block;
    right: 32px;
    top: 32px;
    bottom: 32px;
    overflow: auto;
    width: 20%;
    min-width: 128px;
    max-width: 300px;
    z-index: 9999;
    pointer-events: none;
}

.toast-container {
    display: block;
    transition: max-height 1s linear,
                padding-top 1s linear,
                padding-bottom 1s linear,
                opacity 1s linear;
    max-height: 200px;
    /* Never actually seen: toast-host.js always adds .toast-success
       or .toast-error, and both set their own. Kept as an inverted
       panel so a plain toast, if one is ever raised, comes out
       high-contrast in either theme rather than transparent. */
    background: var(--ink);
    color: var(--ground);
    border-radius: 8px;
    padding: 12px 16px;
    margin: 8px 0;
    box-shadow: 0 4px 6px var(--shadow);
    word-wrap: break-word;
    box-sizing: border-box;
    opacity: 1;
    pointer-events: auto;
    overflow: hidden;
}

/* The stripe is a stronger version of the fill, and it has to get
   stronger in BOTH directions - darker on a light theme, lighter on a
   dark one - or it disappears into its own toast. Mixing towards
   --ink does exactly that without spending two more tokens on a
   5px border, because --ink is dark in light themes and light in
   dark ones. */
.toast-success {
    background-color: var(--ok);
    color: var(--on-status);
    border-left: 5px solid color-mix(in srgb, var(--ok) 65%, var(--ink));
}

.toast-error {
    background-color: var(--danger);
    color: var(--on-status);
    border-left: 5px solid color-mix(in srgb, var(--danger) 65%, var(--ink));
}

.toast-hiding {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
}