@layer components {

    /* ─── Single Toast ─────────────────────────────────────────────── */

    .rtds-toast {
        --_toast-bg:          var(--toast-bg,          var(--color-background-01, var(--color-neutral-50)));
        --_toast-border-color: var(--toast-border-color, var(--color-neutral-200));
        --_toast-shadow:      var(--toast-shadow,       var(--shadow-md, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)));
        --_toast-min-width:   var(--toast-min-width,   20rem);
        --_toast-max-width:   var(--toast-max-width,   28rem);

        display: flex;
        align-items: flex-start;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        min-width: var(--_toast-min-width);
        max-width: var(--_toast-max-width);
        border-width: 1px;
        border-left-width: var(--spacing-1);
        border-style: solid;
        border-color: var(--_toast-border-color);
        background-color: var(--_toast-bg);
        box-shadow: var(--_toast-shadow);
        color: var(--color-content-01, var(--color-neutral-900));
    }

    .rtds-toast__icon {
        flex-shrink: 0;
    }

    .rtds-toast__content {
        flex: 1;
    }

    .rtds-toast__heading {
        display: block;
        font-size: inherit;
        font-weight: 600;
        margin: 0 0 var(--spacing-1);
    }

    .rtds-toast__body {
        margin: 0;
    }

    .rtds-toast__close {
        flex-shrink: 0;
        align-self: flex-start;
    }

    /* ─── Semantic type: border color + icon ────────────────────────── */

    /* Info */
    .rtds-toast--info {
        --_toast-info-border: var(--toast-info-border, var(--color-content-info, var(--color-info-dark)));
        --_toast-info-icon:   var(--toast-info-icon,   var(--color-content-info, var(--color-info-dark)));
        border-color: var(--_toast-info-border);
    }
    .rtds-toast--info .rtds-toast__icon {
        color: var(--_toast-info-icon);
    }

    /* Success */
    .rtds-toast--success {
        --_toast-success-border: var(--toast-success-border, var(--color-content-success, var(--color-success-dark)));
        --_toast-success-icon:   var(--toast-success-icon,   var(--color-content-success, var(--color-success-dark)));
        border-color: var(--_toast-success-border);
    }
    .rtds-toast--success .rtds-toast__icon {
        color: var(--_toast-success-icon);
    }

    /* Warning */
    .rtds-toast--warning {
        --_toast-warning-border: var(--toast-warning-border, var(--color-content-warn, var(--color-warn-dark)));
        --_toast-warning-icon:   var(--toast-warning-icon,   var(--color-content-warn, var(--color-warn-dark)));
        border-color: var(--_toast-warning-border);
    }
    .rtds-toast--warning .rtds-toast__icon {
        color: var(--_toast-warning-icon);
    }

    /* Error */
    .rtds-toast--error {
        --_toast-error-border: var(--toast-error-border, var(--color-content-error, var(--color-error-dark)));
        --_toast-error-icon:   var(--toast-error-icon,   var(--color-content-error, var(--color-error-dark)));
        border-color: var(--_toast-error-border);
    }
    .rtds-toast--error .rtds-toast__icon {
        color: var(--_toast-error-icon);
    }

    /* ─── Toast Container ───────────────────────────────────────────── */

    .rtds-toast-container {
        --_toast-container-offset: var(--toast-container-offset, var(--spacing-4, 1rem));
        --_toast-container-gap:    var(--toast-container-gap,    var(--spacing-2, 0.5rem));
        --_toast-container-zindex: var(--toast-container-zindex, 9000);

        position: fixed;
        z-index: var(--_toast-container-zindex);
        display: flex;
        flex-direction: column;
        gap: var(--_toast-container-gap);
    }

    .rtds-toast-container--bottom-right {
        bottom: var(--_toast-container-offset);
        right: var(--_toast-container-offset);
    }

    .rtds-toast-container--bottom-left {
        bottom: var(--_toast-container-offset);
        left: var(--_toast-container-offset);
    }

    .rtds-toast-container--top-right {
        top: var(--_toast-container-offset);
        right: var(--_toast-container-offset);
    }

    .rtds-toast-container--top-left {
        top: var(--_toast-container-offset);
        left: var(--_toast-container-offset);
    }

    /* ─── Mobile: full-width for bottom positions ───────────────────── */

    @media (max-width: 640px) {
        .rtds-toast-container--bottom-right,
        .rtds-toast-container--bottom-left {
            left: 0;
            right: 0;
            bottom: 0;
        }

        .rtds-toast-container--bottom-right .rtds-toast,
        .rtds-toast-container--bottom-left .rtds-toast {
            min-width: 0;
            max-width: none;
            width: 100%;
        }
    }
}