@layer components {
    .rtds-alert {
        --_alert-bg: var(--alert-bg, var(--color-background-01, var(--color-neutral-50)));
        display: flex;
        align-items: flex-start;
        gap: var(--spacing-3);
        padding: var(--spacing-4);
        border-width: 1px;
        border-left-width: var(--spacing-1);
        border-style: solid;
        background-color: var(--_alert-bg);
        color: var(--color-content-01, var(--color-neutral-900));
    }

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

    .rtds-alert__content {
        flex: 1;
    }

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

    .rtds-alert__body {
        margin: 0;
    }

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

    .rtds-alert__body a {
        color: var(--color-link-primary, var(--color-primary-500));
        text-decoration: underline;
    }

    .rtds-alert__body a:hover {
        color: var(--color-link-primary-hover, var(--color-primary-600));
        text-decoration: none;
    }

    /* Info */
    .rtds-alert--info {
        --_alert-info-border: var(--alert-info-border, var(--color-content-info,    var(--color-info-dark)));
        --_alert-info-icon:   var(--alert-info-icon,   var(--color-content-info,    var(--color-info-dark)));
        border-color: var(--_alert-info-border);
    }
    .rtds-alert--info .rtds-alert__icon {
        color: var(--_alert-info-icon);
    }

    /* Success */
    .rtds-alert--success {
        --_alert-success-border: var(--alert-success-border, var(--color-content-success, var(--color-success-dark)));
        --_alert-success-icon:   var(--alert-success-icon,   var(--color-content-success, var(--color-success-dark)));
        border-color: var(--_alert-success-border);
    }
    .rtds-alert--success .rtds-alert__icon {
        color: var(--_alert-success-icon);
    }

    /* Warning */
    .rtds-alert--warning {
        --_alert-warning-border: var(--alert-warning-border, var(--color-content-warn, var(--color-warn-dark)));
        --_alert-warning-icon:   var(--alert-warning-icon,   var(--color-content-warn, var(--color-warn-dark)));
        border-color: var(--_alert-warning-border);
    }
    .rtds-alert--warning .rtds-alert__icon {
        color: var(--_alert-warning-icon);
    }

    /* Error */
    .rtds-alert--error {
        --_alert-error-border: var(--alert-error-border, var(--color-content-error,  var(--color-error-dark)));
        --_alert-error-icon:   var(--alert-error-icon,   var(--color-content-error,  var(--color-error-dark)));
        border-color: var(--_alert-error-border);
    }
    .rtds-alert--error .rtds-alert__icon {
        color: var(--_alert-error-icon);
    }
}