// screen
@screen-xs: 480px;
@screen-sm: 768px;
@screen-md: 992px;
@screen-lg: 1200px;

@icon-tiny-size: 8px;
@icon-xsmall-size: 12px;
@icon-small-size: 18px;
@icon-middle-size: 24px;
@icon-large-size: 32px;
@icon-full-size: 48px;

@icon-media-tiny-size: 12px;
@icon-media-xsmall-size: 18px;
@icon-media-small-size: 24px;
@icon-media-middle-size: 32px;
@icon-media-large-size: 48px;

@color-blue: #b5d6fd;
@color-background-selection: @color-blue;
@color-dark: #4c4c4c;
@color-white: #fff;
@color-red: #ff3b3b;

:root {
	--color-white: @color-white;
	--color-gray: #eeeeee;
	--color-purple: #8120f7;
	--color-gray-dark: #a5a5a5;
	--color-dark: @color-dark;
	--color-blue: @color-blue;
	--color-light-blue: fadeout(@color-blue, 50%);
	--color-red: @color-red;
	--color-light-red: fadeout(@color-red, 60%);

	--color-default: var(--color-dark);
	--color-text: #222222;
	--color-label: #a7a8ab;
	--color-error: var(--color-red);

	--color-border: var(--color-gray);
	--color-border-dark: var(--color-dark);
	--color-border-focus: #ff45a1;

	//--color-border-selected: #ff45a1;
	--color-border-selected: #545557;
	--color-border-active: #b5b5b5;

	--color-selection: var(--color-dark);
	--color-selection-area: #bdbdbd;

	--color-separator: var(--color-border);
	--color-placeholder: #bdbdbd;
	--color-panel: #fafafa;
	--color-resizer: #c8c8c8;

	--color-background-default: var(--color-white);
	--color-background-gray: var(--color-gray);
	--color-background-gray-hover: #f8f8f8;
	--color-background-hover: #7d0edf;
	--color-background-button-hover: #e0e0e0;
	--color-background-button-hover-opacity30: rgba(236, 235, 233, 0.3);
	--color-background-progress: #b91f1f;
	--color-background-filebrowser-folders: #3f3f3f;
	--color-background-active: #2196f3;
	--color-background-selection: @color-blue;
	--color-background-selection_opacity50: fadeout(@color-blue, 0.5);

	--color-source-area: #323232;

	--color-button-background-hover: #dcdcdc;
	--color-button-background-hover_opacity40: rgba(220, 220, 220, 0.4);
	--color-button-background-hover_opacity60: rgba(220, 220, 220, 0.6);

	//--font-default: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
	--font-default: 'Poppins';

	--font-size-default: 12px;
	--font-size-small: 11px;
	--font-size-large: calc(var(--font-size-default) * 3);

	--color-text-icons: rgba(0, 0, 0, 0.75);
	--color-icon: var(--color-dark);

	--padding-default: 8px;
	--padding-jodit-root: 40px;
	--margin-default: 12px;
	--input-padding-default: 14px;

	--border-radius-default: 4px;

	//z-index
	--z-index-full-size: 100000;
	--z-index-popup: 10000001;
	--z-index-dialog-overlay: 20000003;
	--z-index-dialog: 20000004;
	--z-index-context-menu: 30000005;
	--z-index-tooltip: 30000006;

	--icon-loader-size: 48px;

	--width_element_default: 24px;
	--height_element_default: 24px;

	// dark theme
	--dark_background_color: #575757;
	--dark-text-color: var(--color-white);
	--dark_background_ligher: #787878;
	--dark_background_darknes: #353535;
	--dark_border_color: #444;
	--dark_text_color: #d1cccc;
	--dark_text_color_opacity80: rgba(209, 204, 204, 0.8);
	--dark_text_color_opacity50: rgba(209, 204, 204, 0.5);
	--dark_icon_color: #c0c0c0;
	--dark_toolbar_color: #5f5c5c;
	--dark_toolbar_seperator_color1: rgba(81, 81, 81, 0.41);
	--dark_toolbar_seperator_color2: #686767;
	--dark_toolbar_seperator_color_opacity80: rgba(104, 103, 103, 0.8);
	--dark_toolbar_seperator_color3: rgba(104, 103, 103, 0.75);
	--dark_color-border-selected: #152f5f;

	--width-default: 180px;
	--width-input-min: var(--width-default);

	// Input
	--input-height: 44px;
	--input-background-color: #f8f8f8;

	--button-icon-size: @icon-middle-size;
	--margin-v: 8px;
	// --button-df-size: calc((var(--button-icon-size) - 4px) * 2);
	// --button-size: calc(
	// 	var(--button-icon-size) + var(--button-df-size) + var(--margin-v) * 2
	// );
	--button-size: calc(var(--button-icon-size) * 2 + 6px);

	--focus-input-box-shadow: 0 0 0 0.05rem rgba(0, 123, 255, 0.25);
}