:root {
	--primary-color: #687bf7;
	--secondary-color: #8050ef;
	--background-color: hsla(216, 27%, 14.5%, 1);
	--widget-background-color: hsla(216, 27%, 18%, 1);
	--input-background-color: hsla(216, 27%, 16%, 1);
	--input-border-color: hsla(216, 27%, 22%, 1);
	--input-lighter-background-color: hsla(216, 27%, 20%, 1);
	--input-lighter-border-color: hsla(216, 27%, 24%, 1);
	--button-border-color-disabled: hsla(216, 27%, 22%, 1);
	--button-text-color-disabled: hsla(216, 27%, 26%, 1);
	--text-color: #7f8fa4;
	--text-color2: #fff;
	--text-color2-inverse: #000;
	--text-color-faded: rgba(255, 255, 255, 0.8);
	--text-color-opacity-0-5: rgba(255, 255, 255, 0.5);
	--active-text-color: hsla(0, 0, 80%, 1);
	--red-color: #f80759;
	--green-color: #28af60;
	--primary-gradient: linear-gradient(180deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	--button-gradient: linear-gradient(180deg, hsla(216, 27%, 60%, 1) 0%, hsla(216, 27%, 40%, 1) 100%);
	--progress-gradient: linear-gradient(90deg, var(--secondary-color) 0%, var(--primary-color) 100%);
	--border-color: #313d4f;
	--section-border-color: #313d4e;
	--pie-border-color: hsla(216, 27%, 16%, 1);
	--pie-fill-color: #3d4e83;
	--modal-close-button-color: hsla(216, 15%, 44%, 1);
	--primary-color-opacity-0-7: hsla(232, 90%, 69%, 0.7);
	--primary-color-opacity-0-5: hsla(232, 90%, 69%, 0.5);
	--primary-color-opacity-0-2: hsla(232, 90%, 69%, 0.2);
	--select-selection-box-background-color: hsla(232, 90%, 69%, 0.1);
	--select-selection-box-border-color: hsla(232, 90%, 69%, 0.2);
	--success-color: var(--green-color);
	--error-color: var(--red-color);
	--warning-color: #f7981c;
	--info-color: #1991eb;
	--link-hover-color: #5362c4;
	--timeseries-chart-background-color: #313b5e;
	--timeseries-chart-stroke: #8050ef;
	--swap-status-border-color: rgba(255, 255, 255, 0.2);
	--swap-header-hover-color: hsla(216, 27%, 80%, 1);
	--depth-chart-buy-background-color: #275049;
	--depth-chart-buy-stroke-color: #28af60;
	--depth-chart-sell-background-color: #5a2947;
	--depth-chart-sell-stroke-color: #f80759;
	--order-list-item-hover: rgba(255, 255, 255, 0.05);
	--table-row-hover-color: hsla(216, 27%, 24%, 1);
	--filter-background-color: hsla(216, 27%, 20%, 1);
}

html[data-theme='light'] {
	--background-color: hsla(0, 0%, 100%, 1);
	--widget-background-color: hsla(200, 10%, 95%, 1);
	--input-background-color: hsla(0, 0%, 97%, 1);
	--input-border-color: hsla(0, 0%, 86%, 1);
	--input-lighter-background-color: hsla(0, 0%, 86%, 1);
	--input-lighter-border-color: hsla(0, 0%, 76%, 1);
	--button-border-color-disabled: hsla(0, 0%, 88%, 1);
	--button-text-color-disabled: hsla(0, 0%, 70%, 1);
	--text-color: hsla(0, 0%, 45%, 1);
	--text-color2: #000;
	--text-color2-inverse: #fff;
	--text-color-faded: rgba(0, 0, 0, 0.8);
	--text-color-opacity-0-5: rgba(0, 0, 0, 0.5);
	--active-text-color: hsla(0, 0, 30%, 1);
	--button-gradient: linear-gradient(180deg, hsla(216, 15%, 60%, 1) 0%, hsla(216, 20%, 40%, 1) 100%);
	--border-color: hsla(200, 10%, 80%, 1);
	--section-border-color: hsla(0, 0%, 0%, 0.2);
	--pie-border-color: var(--widget-background-color);
	--pie-fill-color: var(--primary-color-opacity-0-5);
	--modal-close-button-color: hsla(216, 15%, 44%, 1);
	--timeseries-chart-background-color: var(--primary-color-opacity-0-5);
	--swap-status-border-color: rgba(0, 0, 0, 0.2);
	--swap-header-hover-color: hsla(216, 27%, 20%, 1);
	--depth-chart-buy-background-color: #e3f2ee;
	--depth-chart-buy-stroke-color: #7ac89b;
	--depth-chart-sell-background-color: #f6e1ed;
	--depth-chart-sell-stroke-color: #f53f78;
	--order-list-item-hover: rgba(0, 0, 0, 0.05);
	--table-row-hover-color: hsla(0, 0%, 91%, 1);
	--filter-background-color: hsla(200, 10%, 93%, 1);
}

@mixin icon-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--input-border-color);
	border-radius: 4px;
	color: var(--text-color);
	background-color: var(--input-background-color);
	transition: background-color 0.3s ease-in;

	&:hover {
		background-color: var(--widget-background-color);
	}

	&:active {
		background-color: var(--input-background-color);
		transition: none;
	}

	&[disabled] {
		pointer-events: none;
		color: var(--button-text-color-disabled);

		&:hover {
			color: var(--text-color);
			background: none;
		}
	}
}

@mixin absolute-center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@mixin center-vertically {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
