@import '../common/css_variables.scss';

$input-height: 28px !default;

:root,
[data-theme="light"] {
	--text-xs: 11px;
	--text-sm: 12px;
	--text-md: 13px;
	--text-base: 14px;
	--text-lg: 16px;
	--text-xl: 18px;
	--text-2xl: 20px;
	--text-3xl: 22px;

	--text-bold: 500;

	--navbar-height: 60px;

	// Layout Colors
	--bg-color: var(--gray-50);
	--fg-color: white;
	--navbar-bg: white;
	--fg-hover-color: var(--gray-100);
	--card-bg: var(--fg-color);
	--disabled-text-color: var(--gray-700);
	--disabled-control-bg: var(--gray-50);
	--control-bg: var(--gray-100);
	--control-bg-on-gray: var(--gray-200);
	--awesomebar-focus-bg: var(--fg-color);
	--modal-bg: white;
	--toast-bg: var(--modal-bg);
	--popover-bg: white;
	--checkbox-right-margin: var(--margin-xs);
	--base-checkbox-size: 14px;
	--custom-checkbox-size: 14px;

	--appreciation-color: var(--dark-green-600);
	--appreciation-bg: var(--dark-green-100);
	--criticism-color: var(--red-600);
	--criticism-bg: var(--red-100);

	// Error colors
	--error-bg: var(--red-50);
	--error-border: var(--red-400);

	// page
	--page-head-height: 75px;
	--page-bottom-margin: 60px;

	// input
	--input-height: #{$input-height};

	// timeline
	--timeline-item-icon-size: 34px;
	--timeline-item-left-margin: var(--margin-xl);
	--timeline-item-bottom-margin: var(--margin-sm);
	--timeline-content-max-width: 700px;
	--timeline-left-padding: calc(var(--padding-xl) + var(--timeline-item-icon-size) / 2);
}