/**
 * Color variants
 */

.toggle {
    &.-light {
        --toggle--background: var(--toggle--light--background, var(--color-light));
        --toggle--border-top-color: var(
            --toggle--light--border-top-color,
            var(--color-light-shade-50)
        );
        --toggle--border-right-color: var(
            --toggle--light--border-right-color,
            var(--color-light-shade-50)
        );
        --toggle--border-bottom-color: var(
            --toggle--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --toggle--border-left-color: var(
            --toggle--light--border-left-color,
            var(--color-light-shade-50)
        );
        --toggle--indicator--background: var(
            --toggle--light--indicator--background,
            var(--color-white)
        );
        --toggle--label--color: var(
            --toggle--light--label--color,
            var(--contrast-text-color-white)
        );

        --toggle--checked--background: var(
            --toggle--light--checked--background,
            var(--color-primary)
        );
        --toggle--checked--border-top-color: var(
            --toggle--light--checked--border-top-color,
            var(--color-primary-shade-50)
        );
        --toggle--checked--border-right-color: var(
            --toggle--light--checked--border-right-color,
            var(--color-primary-shade-50)
        );
        --toggle--checked--border-bottom-color: var(
            --toggle--light--checked--border-bottom-color,
            var(--color-primary-shade-50)
        );
        --toggle--checked--border-left-color: var(
            --toggle--light--checked--border-left-color,
            var(--color-primary-shade-50)
        );

        --toggle--disabled--background: var(
            --toggle--light--disabled--background,
            var(--color-light-shade-50)
        );
        --toggle--disabled--border-top-color: var(
            --toggle--light--disabled--border-top-color,
            var(--color-light-shade-50)
        );
        --toggle--disabled--border-right-color: var(
            --toggle--light--disabled--border-right-color,
            var(--color-light-shade-50)
        );
        --toggle--disabled--border-bottom-color: var(
            --toggle--light--disabled--border-bottom-color,
            var(--color-light-shade-50)
        );
        --toggle--disabled--border-left-color: var(
            --toggle--light--disabled--border-left-color,
            var(--color-light-shade-50)
        );
        --toggle--disabled--indicator--background: var(
            --toggle--disabled--light--indicator--background,
            var(--color-gray-50)
        );
        --toggle--disabled--label--color: var(
            --toggle--light--disabled--label--color,
            var(--text-color-weak)
        );

        --toggle--checked--disabled--background: var(
            --toggle--light--checked--disabled--background,
            var(--color-primary-200)
        );
        --toggle--checked--disabled--border-color: var(
            --toggle--light--checked--disabled--border-color,
            var(--color-primary-300)
        );
        --toggle--checked--disabled--indicator--background: var(
            --toggle--checked--light--indicator--disabled--background,
            var(--color-gray-50)
        );
    }

    &.-dark {
        --toggle--background: var(--toggle--dark--background, var(--color-dark));
        --toggle--border-top-color: var(
            --toggle--dark--border-top-color,
            var(--color-dark-tint-50)
        );
        --toggle--border-right-color: var(
            --toggle--dark--border-right-color,
            var(--color-dark-tint-50)
        );
        --toggle--border-bottom-color: var(
            --toggle--dark--border-bottom-color,
            var(--color-dark-tint-50)
        );
        --toggle--border-left-color: var(
            --toggle--dark--border-left-color,
            var(--color-dark-tint-50)
        );
        --toggle--indicator--background: var(
            --toggle--light--indicator--background,
            var(--color-white)
        );
        --toggle--label--color: var(--toggle--dark--label--color, var(--contrast-text-color-dark));

        --toggle--checked--background: var(
            --toggle--dark--checked--background,
            var(--color-primary)
        );
        --toggle--checked--border-top-color: var(
            --toggle--dark--checked--border-top-color,
            var(--color-primary-tint-50)
        );
        --toggle--checked--border-right-color: var(
            --toggle--dark--checked--border-right-color,
            var(--color-primary-tint-50)
        );
        --toggle--checked--border-bottom-color: var(
            --toggle--dark--checked--border-bottom-color,
            var(--color-primary-tint-50)
        );
        --toggle--checked--border-left-color: var(
            --toggle--dark--checked--border-left-color,
            var(--color-primary-tint-50)
        );

        --toggle--disabled--background: var(
            --toggle--dark--disabled--background,
            var(--color-dark-tint-100)
        );
        --toggle--disabled--border-color: var(
            --toggle--dark--disabled--border-color,
            var(--color-dark-tint-50)
        );
        --toggle--disabled--indicator--background: var(
            --toggle--dark--disabled--indicator--background,
            var(--color-gray-400)
        );
        --toggle--disabled--label--color: var(
            --toggle--dark--disabled--label--color,
            var(--text-color-weak)
        );

        --toggle--checked--disabled--background: var(
            --toggle--dark--checked--disabled--background,
            var(--color-primary-800)
        );
        --toggle--checked--disabled--border-color: var(
            --toggle--dark--checked--disabled--border-color,
            var(--color-primary-900)
        );
        --toggle--checked--disabled--indicator--background: var(
            --toggle--dark--checked--disabled--indicator--background,
            var(--color-gray-300)
        );
    }
}