/**
 * Color variants
 */

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

        --dropdown--item--hover--background: var(
            --dropdown--light--item--hover--background,
            var(--color-gray-50)
        );
        --dropdown--item--hover--color: var(
            --dropdown--light--item--hover--color,
            var(--dropdown--color)
        );

        --dropdown--item--active--background: var(
            --dropdown--light--item--active--background,
            var(--color-gray-50)
        );
        --dropdown--item--active--color: var(
            --dropdown--light--item--active--color,
            var(--dropdown--color)
        );

        --dropdown--item--disabled--background: var(
            --dropdown--light--item--disabled--background,
            transparent
        );
        --dropdown--item--disabled--color: var(
            --dropdown--light--item--disabled--color,
            var(--text-color-weak)
        );

        --dropdown--header--background: var(
            --dropdown--light--header--background,
            var(--color-gray-50)
        );
        --dropdown--footer--background: var(
            --dropdown--light--footer--background,
            var(--color-gray-50)
        );
    }

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

        --dropdown--item--hover--background: var(
            --dropdown--dark--item--hover--background,
            var(--color-dark-tint-50)
        );
        --dropdown--item--hover--color: var(
            --dropdown--dark--item--hover--color,
            var(--dropdown--color)
        );

        --dropdown--item--active--background: var(
            --dropdown--dark--item--active--background,
            var(--color-dark-tint-50)
        );
        --dropdown--item--active--color: var(
            --dropdown--dark--item--active--color,
            var(--dropdown--color)
        );

        --dropdown--item--disabled--background: var(
            --dropdown--dark--item--disabled--background,
            transparent
        );
        --dropdown--item--disabled--color: var(
            --dropdown--dark--item--disabled--color,
            var(--text-color-weak)
        );

        --dropdown--header--background: var(
            --dropdown--dark--header--background,
            var(--color-dark-tint-50)
        );
        --dropdown--footer--background: var(
            --dropdown--dark--footer--background,
            var(--color-dark-tint-50)
        );
    }
}