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

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

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

	.grays(@white);

	// body
	--bg-default: var(--gray-5);
	--bg-secondary: var(--gray-6);
	--bg-inset: var(--gray-4);
	--bg-overlay: var(--gray-8);
	--bg-disabled: var(--gray-4);

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

	// border
	--border-default: var(--gray-11);
	--border-secondary: var(--gray-8);
	--border-muted: var(--gray-8);
	--border-hover: var(--gray-16);
	--border-active: var(--gray-18);
	--border-disabled: var(--gray-10);

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

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

	// hover
	--transparent: rgba(@white, 0.05);
	--transparent-hover: rgba(@white, 0.1);
	--transparent-active: rgba(@white, 0.15);

	// btn
	--btn-bg: var(--gray-9);
	--btn-bg-hover: var(--gray-10);
	--btn-bg-active: var(--gray-11);

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

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

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

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

	--switch-handle-bg: var(--gray-24);
	--switch-handle-bg-checked: var(--primary-contrast);
	--switch-handle-bg-disabled: var(--text-disabled);

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