@import (reference) "./common.less";

.light-mode() {
	--primary: @primary-light;
	--primary-contrast: contrast(@primary-light);
	--primary-hover: lighten(@primary-light, 5%);
	--primary-active: lighten(@primary-light, 10%);
	--primary-disabled: darken(@primary-light, 10%);
	--primary-muted: rgba(@primary-light, 0.1);
	--primary-muted-color: var(--primary-800);
	--primary-muted-hover: rgba(@primary-light, 0.2);
	--primary-muted-active: rgba(@primary-light, 0.3);
	.shades(~"primary", @primary-light, false);

	--complementary: @complementary-light;
	--complementary-contrast: contrast(@complementary-light);
	--complementary-hover: lighten(@complementary-light, 5%);
	--complementary-active: lighten(@complementary-light, 10%);
	.shades(~"complementary", @complementary-light, false);

	.grays(@black);

	// body
	--bg-default: var(--gray-0);
	--bg-secondary: var(--gray-4);
	--bg-inset: var(--gray-0);
	--bg-overlay: var(--gray-1);
	--bg-disabled: var(--gray-10);

	// text
	--text-default: var(--gray-22);
	--text-emphasis: var(--gray-24);
	--text-secondary: var(--gray-19);
	--text-placeholder: var(--gray-20);
	--text-disabled: var(--gray-20);
	--text-inverse: var(--gray-1);

	// border
	--border-default: var(--gray-12);
	--border-secondary: var(--gray-9);
	--border-muted: var(--gray-7);
	--border-hover: var(--gray-14);
	--border-active: var(--gray-16);
	--border-disabled: var(--gray-12);

	// shadow
	--shadow-color: rgba(@black, 0.1);

	// tooltip
	--tooltip-color: var(--text-inverse);
	--tooltip-bg: rgba(@black, 0.8);

	// hover
	--transparent: rgba(@black, 0.05);
	--transparent-hover: rgba(@black, 0.1);
	--transparent-active: rgba(@black, 0.2);

	// btn
	--btn-bg: var(--gray-4);
	--btn-bg-hover: var(--gray-6);
	--btn-bg-active: var(--gray-8);

	// alert
	--alert-color-info: var(--azure-900);
	--alert-color-success: var(--green-900);
	--alert-color-danger: var(--yellow-900);
	--alert-color-error: var(--red-900);

	--alert-bg-info: rgba(@azure, 0.1);
	--alert-bg-success: rgba(@green, 0.1);
	--alert-bg-danger: rgba(@yellow, 0.1);
	--alert-bg-error: rgba(@red, 0.1);

	--alert-border-info: var(--azure-200);
	--alert-border-success: var(--green-200);
	--alert-border-danger: var(--yellow-200);
	--alert-border-error: var(--red-200);

	// switch
	--switch-bg: var(--gray-12);
	--switch-bg-disabled: var(--gray-14);
	--switch-bg-checked: var(--primary);
	--switch-bg-checked-disabled: var(--primary-700);

	--switch-handle-bg: var(--gray-0);
	--switch-handle-bg-checked: var(--primary-contrast);
	--switch-handle-bg-disabled: var(--gray-10);

	// rate
	--rate-placeholder: var(--gray-12);
	--rate-star: lighten(@hue-50, 5%);
}