/*
 * Points the toastr notification's colors at the semantic roles in tokens.css.
 *
 * Every ordinary save in the portal reports through toastr: `toastr.success("Saved")` and
 * `toastr.error("Failed Saving!")` in public/scripts/mixins/requestsMixin.js are the pair a user
 * sees dozens of times a day. The widget is loaded from a CDN and nothing in the repo declared a
 * toast color, so those two messages were painted in toastr's own 2014 palette: #51A351 green and
 * #BD362F red, values no palette here publishes. That made the save banner the most-seen surface
 * in the product that a theme could not move.
 *
 * Must stay after the toastr stylesheet in views/head.html. Selectors are copied from
 * toastr 2.1.4 verbatim, including `#toast-container > div`, whose id outranks anything written
 * as `.toast`: repointing the toast text needs the same selector and not a tidier one.
 *
 * The status icons are white PNG data URIs baked into the widget and are left alone. They are the
 * one part of a toast the token layer cannot reach, and they read on any of the status surfaces
 * below because all four carry white text already.
 */

/* stylelint-disable selector-max-id, no-descending-specificity */

#toast-container > div {
    box-shadow: 0 0 12px var(--color-shadow-high);
    color: var(--color-text-inverse);
}

#toast-container > div:hover {
    box-shadow: 0 0 12px var(--color-shadow-navbar);
}

.toast-message a,
.toast-message label {
    color: var(--color-text-inverse);
}

.toast-message a:hover {
    color: var(--color-text-inverse-muted);
}

.toast-close-button {
    color: var(--color-text-inverse);
    text-shadow: 0 1px 0 var(--color-text-inverse);
}

.toast-close-button:hover,
.toast-close-button:focus {
    color: var(--color-text-primary);
}

/* The four status fills. `.toast` is the variant-less default, which toastr draws near-black. */
.toast {
    background-color: var(--color-surface-contrast);
}

.toast-success {
    background-color: var(--color-surface-success);
}

.toast-error {
    background-color: var(--color-surface-danger);
}

.toast-info {
    background-color: var(--color-surface-info);
}

.toast-warning {
    background-color: var(--color-surface-warning);
}

/* The timeout bar, drawn on top of the fill at 0.4 opacity. */
.toast-progress {
    background-color: var(--color-surface-contrast);
}