/**
 * Color variants
 */

.badge {
    &.-primary {
        --badge--background: var(--badge--primary--background, var(--color-primary));
        --badge--border-top-color: var(
            --badge--primary--border-top-color,
            var(--color-primary-shade-50)
        );
        --badge--border-right-color: var(
            --badge--primary--border-right-color,
            var(--color-primary-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--primary--border-bottom-color,
            var(--color-primary-shade-50)
        );
        --badge--border-left-color: var(
            --badge--primary--border-left-color,
            var(--color-primary-shade-50)
        );
        --badge--color: var(--badge--primary--color, var(--contrast-text-color-primary));
    }

    &.-secondary {
        --badge--background: var(--badge--secondary--background, var(--color-secondary));
        --badge--border-top-color: var(
            --badge--secondary--border-top-color,
            var(--color-secondary-shade-50)
        );
        --badge--border-right-color: var(
            --badge--secondary--border-right-color,
            var(--color-secondary-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--secondary--border-bottom-color,
            var(--color-secondary-shade-50)
        );
        --badge--border-left-color: var(
            --badge--secondary--border-left-color,
            var(--color-secondary-shade-50)
        );
        --badge--color: var(--badge--secondary--color, var(--contrast-text-color-secondary));
    }

    &.-info {
        --badge--background: var(--badge--info--background, var(--color-info));
        --badge--border-top-color: var(--badge--info--border-top-color, var(--color-info-shade-50));
        --badge--border-right-color: var(
            --badge--info--border-right-color,
            var(--color-info-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--info--border-bottom-color,
            var(--color-info-shade-50)
        );
        --badge--border-left-color: var(
            --badge--info--border-left-color,
            var(--color-info-shade-50)
        );
        --badge--color: var(--badge--info--color, var(--contrast-text-color-info));
    }

    &.-success {
        --badge--background: var(--badge--success--background, var(--color-success));
        --badge--border-top-color: var(
            --badge--success--border-top-color,
            var(--color-success-shade-50)
        );
        --badge--border-right-color: var(
            --badge--success--border-right-color,
            var(--color-success-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--success--border-bottom-color,
            var(--color-success-shade-50)
        );
        --badge--border-left-color: var(
            --badge--success--border-left-color,
            var(--color-success-shade-50)
        );
        --badge--color: var(--badge--success--color, var(--contrast-text-color-success));
    }

    &.-warning {
        --badge--background: var(--badge--warning--background, var(--color-warning));
        --badge--border-top-color: var(
            --badge--warning--border-top-color,
            var(--color-warning-shade-50)
        );
        --badge--border-right-color: var(
            --badge--warning--border-right-color,
            var(--color-warning-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--warning--border-bottom-color,
            var(--color-warning-shade-50)
        );
        --badge--border-left-color: var(
            --badge--warning--border-left-color,
            var(--color-warning-shade-50)
        );
        --badge--color: var(--badge--warning--color, var(--contrast-text-color-warning));
    }

    &.-danger {
        --badge--background: var(--badge--danger--background, var(--color-danger));
        --badge--border-top-color: var(
            --badge--danger--border-top-color,
            var(--color-danger-shade-50)
        );
        --badge--border-right-color: var(
            --badge--danger--border-right-color,
            var(--color-danger-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--danger--border-bottom-color,
            var(--color-danger-shade-50)
        );
        --badge--border-left-color: var(
            --badge--danger--border-left-color,
            var(--color-danger-shade-50)
        );
        --badge--color: var(--badge--danger--color, var(--contrast-text-color-danger));
    }

    &.-light {
        --badge--background: var(--badge--light--background, var(--color-light));
        --badge--border-top-color: var(
            --badge--light--border-top-color,
            var(--color-light-shade-50)
        );
        --badge--border-right-color: var(
            --badge--light--border-right-color,
            var(--color-light-shade-50)
        );
        --badge--border-bottom-color: var(
            --badge--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --badge--border-left-color: var(
            --badge--light--border-left-color,
            var(--color-light-shade-50)
        );
        --badge--color: var(--badge--light--color, var(--contrast-text-color-light));
    }

    &.-dark {
        --badge--background: var(--badge--dark--background, var(--color-dark));
        --badge--border-top-color: var(--badge--dark--border-top-color, var(--color-dark-tint-50));
        --badge--border-right-color: var(
            --badge--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --badge--border-bottom-color: var(
            --badge--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --badge--border-left-color: var(
            --badge--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --badge--color: var(--badge--dark--color, var(--contrast-text-color-dark));
    }
}