/**
 * Color variants
 */

.alert {
    &.-info {
        --alert--background: var(--alert--info--background, var(--color-info-100));
        --alert--border-top-color: var(--alert--info--border-top-color, var(--color-info-500));
        --alert--border-right-color: var(--alert--info--border-right-color, var(--color-info-500));
        --alert--border-bottom-color: var(
            --alert--info--border-bottom-color,
            var(--color-info-500)
        );
        --alert--border-left-color: var(--alert--info--border-left-color, var(--color-info-500));
        --alert--color: var(--alert--info--color, var(--color-info-800));
    }

    &.-success {
        --alert--background: var(--alert--success--background, var(--color-success-100));
        --alert--border-top-color: var(
            --alert--success--border-top-color,
            var(--color-success-500)
        );
        --alert--border-right-color: var(
            --alert--success--border-right-color,
            var(--color-success-500)
        );
        --alert--border-bottom-color: var(
            --alert--success--border-bottom-color,
            var(--color-success-500)
        );
        --alert--border-left-color: var(
            --alert--success--border-left-color,
            var(--color-success-500)
        );
        --alert--color: var(--alert--success--color, var(--color-success-800));
    }

    &.-warning {
        --alert--background: var(--alert--warning--background, var(--color-warning-100));
        --alert--border-top-color: var(
            --alert--warning--border-top-color,
            var(--color-warning-500)
        );
        --alert--border-right-color: var(
            --alert--warning--border-right-color,
            var(--color-warning-500)
        );
        --alert--border-bottom-color: var(
            --alert--warning--border-bottom-color,
            var(--color-warning-500)
        );
        --alert--border-left-color: var(
            --alert--warning--border-left-color,
            var(--color-warning-500)
        );
        --alert--color: var(--alert--warning--color, var(--color-warning-800));
    }

    &.-danger {
        --alert--background: var(--alert--danger--background, var(--color-danger-100));
        --alert--border-top-color: var(--alert--danger--border-top-color, var(--color-danger-500));
        --alert--border-right-color: var(
            --alert--danger--border-right-color,
            var(--color-danger-500)
        );
        --alert--border-bottom-color: var(
            --alert--danger--border-bottom-color,
            var(--color-danger-500)
        );
        --alert--border-left-color: var(
            --alert--danger--border-left-color,
            var(--color-danger-500)
        );
        --alert--color: var(--alert--danger--color, var(--color-danger-800));
    }
}