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

:root,
[data-theme="light"] {
	// breakpoints
	--xxl-width: map-get($grid-breakpoints, '2xl');
	--xl-width: map-get($grid-breakpoints, 'xl');
	--lg-width: map-get($grid-breakpoints, 'lg');
	--md-width: map-get($grid-breakpoints, 'md');
	--sm-width: map-get($grid-breakpoints, 'sm');
	--xs-width: map-get($grid-breakpoints, 'xs');

	--text-bold: 500;

	--navbar-height: 60px;



	--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;

	// checkbox
	--checkbox-right-margin: var(--margin-xs);
	--checkbox-size: 14px;
	--checkbox-focus-shadow: 0 0 0 2px var(--gray-300);

	// 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);

	// mentions
	--user-mention-bg-color: var(--fg-color);
	--group-mention-bg-color: var(--bg-purple);

	// skeleton
	--skeleton-bg: var(--gray-100);

	// progress bar
	--progress-bar-bg: var(--primary);
}