:root {
    --ats-alert-color: var(--ats-brand-primary-gray-0);
    --ats-alert-background: var(--ats-brand-primary-gray-2);
    --ats-alert-border: var(--ats-brand-primary-gray-4);
    --ats-alert-radius: var(--ats-radius-xs);
    --ats-alert-padding: 0.625rem;
    --ats-alert-gap: 0.625rem;
    --ats-alert-line-height: 1.5em;
    --ats-alert-font-size: 0.75rem;
    --ats-alert-icon-color: var(--ats-brand-primary-gray-1);

    --ats-alert-info-background: var(--ats-brand-blue-50);
    --ats-alert-info-border: var(--ats-brand-blue-90);
    --ats-alert-info-icon-color: var(--ats-brand-blue-100);

    --ats-alert-warn-background: var(--ats-brand-yellow-50);
    --ats-alert-warn-border: var(--ats-brand-yellow-100);
    --ats-alert-warn-icon-color: var(--ats-brand-yellow-100);

    --ats-alert-error-background: var(--ats-brand-red-50);
    --ats-alert-error-border: var(--ats-brand-red-100);
    --ats-alert-error-icon-color: var(--ats-brand-red-100);
}

.ats-alert {
    --dxp-c-link-text-decoration: underline;
    align-items: baseline;
    color: var(--ats-alert-color);
    background: var(--ats-alert-background);
    border: 1px solid var(--ats-alert-border);
    border-radius: var(--ats-alert-radius);
    display: inline-flex;
    font-size: var(--ats-alert-font-size);
    gap: var(--ats-alert-gap);
    line-height: var(--ats-alert-line-height);
    padding: var(--ats-alert-padding);

    & > lightning-icon,
    & > svg {
        color: var(--ats-alert-icon-color);
        transform: translateY(-0.125rem);
    }

    & a {
        font-weight: var(--ats-font-weight-medium);
    }
}

.ats-alert-stretch {
    display: flex;
}

.ats-alert-nowrap {
    white-space: nowrap;
}

.ats-alert-info {
    background: var(--ats-alert-info-background);
    border: 1px solid var(--ats-alert-info-border);

    & > lightning-icon,
    & > svg {
        color: var(--ats-alert-info-icon-color);
    }
}

.ats-alert-warn {
    background: var(--ats-alert-warn-background);
    border: 1px solid var(--ats-alert-warn-border);

    & > lightning-icon,
    & > svg {
        color: var(--ats-alert-warn-icon-color);
    }
}

.ats-alert-error {
    background: var(--ats-alert-error-background);
    border: 1px solid var(--ats-alert-error-border);

    & > lightning-icon,
    & > svg {
        color: var(--ats-alert-error-icon-color);
    }
}