@layer components{
    .toast {
        background-color: var(--surface-primary);
        border: 1px solid var(--border);
        color: var(--foreground-primary);
        box-shadow: var(--shadow-lg);
        border-radius: var(--widget-radius);
    }

    .toast-warning{
        border-left: 4px solid var(--warning);
        background-color: var(--warning);
        color: var(--color-white);
    }

    .toast-success{
        border-left: 4px solid var(--success);
        background-color: var(--success);
        color: var(--color-white);
    }

    .toast-error{
        border-left: 4px solid var(--destructive);
        background-color: var(--destructive);
        color: var(--color-white);
    }

    .toast-info{
        border-left: 4px solid var(--info);
        background-color: var(--info);
        color: var(--color-white);
    }

    .toast-message{
        font-size: var(--font-size-base);
    }
}