@layer components {
    .toast-region {
        position: fixed;
        inset-block-end: var(--space-4);
        inset-inline: var(--space-4);
        display: grid;
        gap: var(--space-2);
        justify-items: center;
        z-index: 60;
        pointer-events: none;
    }

    .toast {
        pointer-events: auto;
        display: flex;
        align-items: center;
        gap: var(--space-3);
        background: var(--soil);
        color: var(--haze);
        padding: var(--space-3) var(--space-4);
        border-radius: var(--radius-m);
        box-shadow: var(--shadow-3);
        max-width: 32rem;
    }

    .toast-success {
        border-inline-start: 4px solid var(--moss);
    }

    .toast-error {
        border-inline-start: 4px solid var(--kalyna);
    }
}