@layer kora.components {
    .kora-toaster {
        position: fixed;
        top: var(--kora-space-4);
        right: var(--kora-space-4);
        z-index: var(--kora-z-drawer);
        display: flex;
        flex-direction: column;
        gap: var(--kora-space-2);
        max-width: min(22rem, calc(100vw - 2 * var(--kora-space-4)));
        pointer-events: none;
    }

    .kora-toast {
        display: flex;
        align-items: flex-start;
        gap: var(--kora-space-3);
        padding: var(--kora-space-3) var(--kora-space-4);
        background: rgba(255, 255, 255, 0.07);
        backdrop-filter: blur(9.5px);
        -webkit-backdrop-filter: blur(9.5px);
        border: 1px solid var(--kora-color-border);
        border-radius: var(--kora-radius-lg);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        color: var(--kora-color-text);
        pointer-events: auto;
        opacity: 0;
        transform: translateX(16px);
        transition: opacity var(--kora-duration-base) var(--kora-ease-out),
            transform var(--kora-duration-base) var(--kora-ease-out);
    }
    .kora-toast.is-visible {
        opacity: 1;
        transform: translateX(0);
    }

    .kora-toast__icon {
        display: inline-flex;
        flex: none;
        width: 1.25rem;
        height: 1.25rem;
        margin-top: 1px;
    }
    .kora-toast__icon svg {
        width: 100%;
        height: 100%;
    }
    .kora-toast--info .kora-toast__icon {
        color: var(--kora-color-accent);
    }
    .kora-toast--success .kora-toast__icon {
        color: var(--kora-color-primary);
    }
    .kora-toast--error .kora-toast__icon {
        color: var(--kora-color-danger);
    }
    .kora-toast--warning .kora-toast__icon {
        color: #f5a623;
    }

    .kora-toast--info {
        border-color: color-mix(in srgb, var(--kora-color-accent) 30%, transparent);
    }
    .kora-toast--success {
        border-color: color-mix(in srgb, var(--kora-color-primary) 40%, transparent);
    }
    .kora-toast--error {
        border-color: color-mix(in srgb, var(--kora-color-danger) 40%, transparent);
    }

    .kora-toast__content {
        flex: 1;
        min-width: 0;
    }
    .kora-toast__title {
        margin: 0;
        font-family: var(--kora-font-sans);
        font-weight: var(--kora-font-weight-medium);
        font-size: var(--kora-text-sm);
    }
    .kora-toast__message {
        margin: 2px 0 0;
        font-size: var(--kora-text-sm);
        color: var(--kora-color-text-muted);
    }

    .kora-toast__close {
        flex: none;
        background: none;
        border: none;
        color: var(--kora-color-text-muted);
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
        padding: 0 2px;
    }
    .kora-toast__close:hover {
        color: var(--kora-color-text);
    }
}