.em-admin-toast-region {
    position: fixed;
    top: calc(var(--em-admin-header-height) + var(--em-admin-space-4));
    right: var(--em-admin-space-6);
    z-index: 200;
    display: flex;
    flex-direction: column;
    gap: var(--em-admin-space-3);
    width: min(380px, calc(100vw - var(--em-admin-space-8)));
    pointer-events: none;
}

.em-admin-toast-region:empty {
    display: none;
}

.em-admin-toast {
    display: flex;
    align-items: flex-start;
    gap: var(--em-admin-space-3);
    padding: var(--em-admin-space-3) var(--em-admin-space-4);
    background-color: var(--em-admin-surface);
    border: 1px solid var(--em-admin-border);
    border-left-width: 3px;
    border-radius: var(--em-admin-radius-lg);
    box-shadow:
        0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 10px 25px -5px rgba(0, 0, 0, 0.12);
    font-family: var(--em-admin-font-family);
    font-size: var(--em-admin-font-size-sm);
    line-height: var(--em-admin-line-height-normal);
    color: var(--em-admin-text-primary);
    pointer-events: auto;
    animation: em-admin-toast-in 200ms ease-out;
}

/*
 * Icons come in via th:replace and only carry .em-admin-icon. Size them by
 * their place in the toast rather than adding a class the fragment can't set.
 */
.em-admin-toast > .em-admin-icon {
    flex: none;
    width: 18px;
    height: 18px;
    margin-top: 1px;
}

.em-admin-toast__message {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.em-admin-toast__dismiss {
    flex: none;
    padding: 0;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    border-radius: var(--em-admin-radius-sm);
    color: var(--em-admin-text-muted);
    font-size: var(--em-admin-font-size-lg);
    line-height: 1;
    cursor: pointer;
}

.em-admin-toast__dismiss:hover {
    background-color: var(--em-admin-color-gray-100);
    color: var(--em-admin-text-primary);
}

.em-admin-toast__dismiss:focus-visible {
    outline: 2px solid var(--em-admin-focus-ring);
    outline-offset: 1px;
}

.em-admin-toast--success {
    background-color: var(--em-admin-status-success-bg);
    border-color: var(--em-admin-status-success-border);
    color: var(--em-admin-status-success-text);
}

.em-admin-toast--success > .em-admin-icon {
    color: var(--em-admin-status-success-icon);
}

.em-admin-toast--warning {
    background-color: var(--em-admin-status-warning-bg);
    border-color: var(--em-admin-status-warning-border);
    color: var(--em-admin-status-warning-text);
}

.em-admin-toast--warning > .em-admin-icon {
    color: var(--em-admin-status-warning-icon);
}

.em-admin-toast--danger {
    background-color: var(--em-admin-status-danger-bg);
    border-color: var(--em-admin-status-danger-border);
    color: var(--em-admin-status-danger-text);
}

.em-admin-toast--danger > .em-admin-icon {
    color: var(--em-admin-status-danger-icon);
}

.em-admin-toast--info {
    background-color: var(--em-admin-status-info-bg);
    border-color: var(--em-admin-status-info-border);
    color: var(--em-admin-status-info-text);
}

.em-admin-toast--info > .em-admin-icon {
    color: var(--em-admin-status-info-icon);
}

.em-admin-toast.is-leaving {
    opacity: 0;
    transform: translateX(8px);
    transition:
        opacity 160ms ease-in,
        transform 160ms ease-in;
}

@keyframes em-admin-toast-in {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 640px) {
    .em-admin-toast-region {
        right: var(--em-admin-space-3);
        left: var(--em-admin-space-3);
        width: auto;
    }
}

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

    .em-admin-toast.is-leaving {
        transition: none;
    }
}