/**
 * Color variants
 */

.checkable-button-group {
    &.-light {
        --checkable-button-group--background: var(
            --checkable-button-group--light--background,
            var(--color-light-tint-100)
        );
        --checkable-button-group--color: var(
            --checkable-button-group--light--color,
            var(--contrast-text-color-light)
        );
        --checkable-button-group--border-top-color: var(
            --checkable-button-group--light--border-top-color,
            var(--color-light-shade-50)
        );
        --checkable-button-group--border-right-color: var(
            --checkable-button-group--light--border-right-color,
            var(--color-light-shade-50)
        );
        --checkable-button-group--border-bottom-color: var(
            --checkable-button-group--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --checkable-button-group--border-left-color: var(
            --checkable-button-group--light--border-left-color,
            var(--color-light-shade-50)
        );
    }

    &.-dark {
        --checkable-button-group--background: var(
            --checkable-button-group--dark--background,
            var(--color-dark-shade-100)
        );
        --checkable-button-group--color: var(
            --checkable-button-group--dark--color,
            var(--contrast-text-color-dark)
        );
        --checkable-button-group--border-top-color: var(
            --checkable-button-group--dark--border-top-color,
            var(--color-dark-tint-50)
        );
        --checkable-button-group--border-right-color: var(
            --checkable-button-group--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --checkable-button-group--border-bottom-color: var(
            --checkable-button-group--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --checkable-button-group--border-left-color: var(
            --checkable-button-group--dark--border-left-color,
            var(--color-dark-tint-50)
        );
    }
}