/*
 * Muhdo.Common.Blazor toasts.
 *
 * Link once in index.html: <link href="_content/Muhdo.Common.Blazor/css/muhdo-toasts.css?v=<package version>" rel="stylesheet" />
 *
 * Theming: every value is read as var(--muhdo-toast-X, <Bootstrap 5.3 variable>, <literal>) and none is declared on
 * :root here, so an app maps its own tokens in a :root block and that always wins, whatever the link order:
 *
 *   :root {
 *     --muhdo-toast-z-index: 9999;
 *     --muhdo-toast-success: var(--ok);  --muhdo-toast-success-tint: var(--ok-tint);
 *     ...
 *   }
 *
 * Tokens: --muhdo-toast-z-index, -width, -offset, -gap, -bg, -fg, -border-color, -radius, -shadow, -font-size,
 * -progress-height, -close-color, -close-size, and per level (info, success, warning, error) the accent
 * --muhdo-toast-<level> and the icon chip background --muhdo-toast-<level>-tint.
 *
 * Every rule is class-qualified with its own margin resets, so theme element rules (p, button, i) loaded after
 * this file can't reach inside a toast.
 */

.muhdo-toasts {
    position: fixed;
    z-index: var(--muhdo-toast-z-index, 1090);
    display: flex;
    flex-direction: column;
    gap: var(--muhdo-toast-gap, 0.5rem);
    box-sizing: border-box;
    width: var(--muhdo-toast-width, 22rem);
    max-width: calc(100vw - 2 * var(--muhdo-toast-offset, 1rem));
    margin: 0;
    padding: 0;
    pointer-events: none;
}

.muhdo-toasts-top-right {
    top: var(--muhdo-toast-offset, 1rem);
    right: var(--muhdo-toast-offset, 1rem);
}

.muhdo-toasts-top-left {
    top: var(--muhdo-toast-offset, 1rem);
    left: var(--muhdo-toast-offset, 1rem);
}

.muhdo-toasts-top-center {
    top: var(--muhdo-toast-offset, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

.muhdo-toasts-bottom-right {
    right: var(--muhdo-toast-offset, 1rem);
    bottom: var(--muhdo-toast-offset, 1rem);
}

.muhdo-toasts-bottom-left {
    bottom: var(--muhdo-toast-offset, 1rem);
    left: var(--muhdo-toast-offset, 1rem);
}

.muhdo-toasts-bottom-center {
    bottom: var(--muhdo-toast-offset, 1rem);
    left: 50%;
    transform: translateX(-50%);
}

.muhdo-toast {
    --muhdo-toast-accent: var(--muhdo-toast-info, var(--bs-info, #0dcaf0));
    --muhdo-toast-accent-tint: var(--muhdo-toast-info-tint, var(--bs-info-bg-subtle, #cff4fc));
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    box-sizing: border-box;
    margin: 0;
    padding: 0.75rem 0.5rem 0.875rem 0.75rem;
    overflow: hidden;
    pointer-events: auto;
    font-size: var(--muhdo-toast-font-size, 0.875rem);
    line-height: 1.45;
    text-align: start;
    color: var(--muhdo-toast-fg, var(--bs-body-color, #212529));
    background: var(--muhdo-toast-bg, var(--bs-body-bg, #fff));
    border: 1px solid var(--muhdo-toast-border-color, var(--bs-border-color-translucent, rgba(0, 0, 0, 0.175)));
    border-inline-start: 4px solid var(--muhdo-toast-accent);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    border-start-end-radius: var(--muhdo-toast-radius, var(--bs-border-radius-lg, 0.5rem));
    border-end-end-radius: var(--muhdo-toast-radius, var(--bs-border-radius-lg, 0.5rem));
    box-shadow: var(--muhdo-toast-shadow, var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15)));
    animation: muhdo-toast-in 0.2s ease-out;
}

.muhdo-toast.muhdo-toast-success {
    --muhdo-toast-accent: var(--muhdo-toast-success, var(--bs-success, #198754));
    --muhdo-toast-accent-tint: var(--muhdo-toast-success-tint, var(--bs-success-bg-subtle, #d1e7dd));
}

.muhdo-toast.muhdo-toast-warning {
    --muhdo-toast-accent: var(--muhdo-toast-warning, var(--bs-warning, #ffc107));
    --muhdo-toast-accent-tint: var(--muhdo-toast-warning-tint, var(--bs-warning-bg-subtle, #fff3cd));
}

.muhdo-toast.muhdo-toast-error {
    --muhdo-toast-accent: var(--muhdo-toast-error, var(--bs-danger, #dc3545));
    --muhdo-toast-accent-tint: var(--muhdo-toast-error-tint, var(--bs-danger-bg-subtle, #f8d7da));
}

.muhdo-toast .muhdo-toast-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.875rem;
    height: 1.875rem;
    margin: 0;
    padding: 0;
    border-radius: 50%;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--muhdo-toast-accent);
    background: var(--muhdo-toast-accent-tint);
}

.muhdo-toast .muhdo-toast-icon > i {
    margin: 0;
    font-size: inherit;
    line-height: 1;
}

.muhdo-toast .muhdo-toast-icon > svg,
.muhdo-toast .muhdo-toast-icon > img {
    width: 1.125rem;
    height: 1.125rem;
}

.muhdo-toast .muhdo-toast-body {
    flex: 1 1 auto;
    align-self: center;
    min-width: 0;
    margin: 0;
    overflow-wrap: anywhere;
}

.muhdo-toast .muhdo-toast-title {
    margin: 0 0 0.125rem;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: inherit;
}

.muhdo-toast .muhdo-toast-message,
.muhdo-toast .muhdo-toast-message p {
    margin: 0;
}

.muhdo-toast .muhdo-toast-close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    margin: -0.125rem 0 0;
    padding: 0;
    border: 0;
    border-radius: 0.25rem;
    background: none;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    line-height: 0;
    color: var(--muhdo-toast-close-color, currentColor);
    opacity: 0.55;
    cursor: pointer;
}

.muhdo-toast .muhdo-toast-close:hover,
.muhdo-toast .muhdo-toast-close:focus-visible {
    opacity: 1;
    background: rgba(127, 127, 127, 0.12);
}

/* !important: Magellan's Hyper theme has `button, a { outline: none !important }`. currentColor keeps 3:1 contrast on
   every level, where a yellow warning accent would not. */
.muhdo-toast .muhdo-toast-close:focus-visible {
    outline: 2px solid currentColor !important;
    outline-offset: 1px;
}

.muhdo-toast .muhdo-toast-close svg {
    display: block;
    width: var(--muhdo-toast-close-size, 0.625rem);
    height: var(--muhdo-toast-close-size, 0.625rem);
    fill: none;
    stroke: currentColor;
}

.muhdo-toast .muhdo-toast-progress {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: var(--muhdo-toast-progress-height, 3px);
    background: var(--muhdo-toast-accent);
    transform-origin: left center;
    animation: muhdo-toast-progress var(--muhdo-toast-progress-duration, 5000ms) linear var(--muhdo-toast-progress-delay, 0ms) forwards;
}

.muhdo-toast .muhdo-toast-progress:dir(rtl) {
    transform-origin: right center;
}

.muhdo-toast-pausable:is(:hover, :focus-within) .muhdo-toast-progress {
    animation-play-state: paused;
}

.muhdo-toast-sr {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.muhdo-toast-sr p {
    margin: 0;
}

@keyframes muhdo-toast-in {
    from {
        opacity: 0;
        transform: translateY(-0.25rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes muhdo-toast-progress {
    from {
        transform: scaleX(1);
    }

    to {
        transform: scaleX(0);
    }
}

@media (max-width: 575.98px) {
    .muhdo-toasts {
        right: var(--muhdo-toast-offset, 1rem);
        left: var(--muhdo-toast-offset, 1rem);
        width: auto;
        max-width: none;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .muhdo-toast {
        animation: none;
    }

    .muhdo-toast .muhdo-toast-icon .mdi-spin::before {
        animation: none;
    }
}

@media (forced-colors: active) {
    .muhdo-toast {
        border-color: CanvasText;
    }

    .muhdo-toast .muhdo-toast-progress {
        background: Highlight;
        forced-color-adjust: none;
    }
}