/**
 * Color variants
 */

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

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