/**
 * Color variants
 */

.tabs {
    &.-light {
        --tabs--background: var(--tabs--light--background, var(--color-white));
        --tabs--border-top-color: var(--tabs--light--border-top-color, var(--color-light-shade-50));
        --tabs--border-right-color: var(
            --tabs--light--border-right-color,
            var(--color-light-shade-50)
        );
        --tabs--border-bottom-color: var(
            --tabs--light--border-bottom-color,
            var(--color-light-shade-50)
        );
        --tabs--border-left-color: var(
            --tabs--light--border-left-color,
            var(--color-light-shade-50)
        );
        --tabs--color: var(--tabs--light--color, var(--contrast-text-color-white));
        --tabs--title--background: var(--tabs--light--title--background, var(--color-white));
        --tabs--title--active--background: var(
            --tabs--light--title--active--background,
            var(--color-gray-50)
        );
        --tabs--title--hover--background: var(
            --tabs--hover--light--title--background,
            var(--color-gray-50)
        );
    }

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