@brizy/ui/style/theme/default.less

React elements in Brizy style

@import url("../color/index");
@import url("../variables");

// --
@primary-color: @color-primary; // primary color for all components
@primary-1: @color-primary-1;
@primary-2: @color-primary-2;
@primary-7: @color-primary-7;
@primary-color-lighten-35: @color-primary-lighten-35;
@primary-color-lighten-20: @color-primary-lighten-20;
@primary-color-tint-20: @color-primary-tint-20;
@primary-color-fade-12: @color-primary-fade-12;
@primary-color-tint-50: @color-primary-tint-50;
@primary-color-fade-80: @color-primary-fade-80;
@primary-color-fade-20: @color-primary-fade-20;
@primary-color-fade-8: @color-primary-fade-8;
@outline-color: @color-primary-fade-20;
@link-color: @primary-color; // link color
@link-hover-color: @primary-color;

@success-color: @color-green; // success state color
@success-color-1: @color-green-lightest; // ~`colorPalette('@{success-color}', 1) replacement`
@success-color-3: @color-green-secondary; // ~`colorPalette('@{success-color}', 3) replacement`
@warning-color: @color-orange; // warning state color
@warning-color-1: @color-orange-lightest; // ~`colorPalette('@{warning-color}', 1) replacement`
@warning-color-3: @color-orange-secondary; // ~`colorPalette('@{warning-color}', 1) replacement`
@info-color-1: @color-primary-1; // ~`colorPalette('@{info-color}', 1) replacement`
@info-color-3: @color-primary-3; // ~`colorPalette('@{info-color}', 3) replacement`
@error-color: @color-red; // error state color
@error-color-1: @color-red-lightest; // ~`colorPalette('@{error-color}', 1) replacement`
@error-color-3: @color-red-secondary; // ~`colorPalette('@{error-color}', 3) replacement`

@heading-color: @color-dark; // heading text color
@text-color: @color-dark; // major text color
@text-color-dark: @white-fade-85;
@text-color-secondary-dark: @white-fade-65;
@text-color-fade-40: @color-dark-fade-40;
@text-color-inverse: @color-white;
@text-color-inverse-fade-50: @white-fade-50;

@text-selection-bg: @primary-color;
@text-color-secondary: @color-gray; // secondary text color
@text-color-secondary-fade-90: @color-gray-fade-90;

@disabled-color: rgba(0, 0, 0, 0.25); // disable state color
@border-radius-base: 3px; // major border radius
@border-color-secondary: @color-gray;
@border-color-base: @color-gray-light; // major border color
@box-shadow-base: 0 3px 8px 2px rgba(0, 0, 0, 0.09); // major shadow for layers\
@box-shadow-header: 0 -4px 11px 0 rgba(0, 0, 0, 0.06); // header shadow
@background-color-dark: @color-gray-mid;
@background-color-transparent: @color-transparent;
@background-color-sections: @color-white;
@footer-secondary-background-color: @color-gray-lightest;
@text-color-secondary-dark: @color-white;

// region  Color used by default to control hover and active backgrounds and for
@primary-5: @primary-color;
// endregion

// region Disabled states
@disabled-color: fade(#000, 25%);
// endregion Vertical paddings

// region Fonts
@font-family: "Nunito", "Open Sans", Arial, sans-serif;
@font-variant-base: proportional-nums;

@font-size-base: 14px;
@font-size-middle: 15px;
@font-size-msm: 12px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 13px;
@font-large-font-size: 16px;

@font-weight-base: 600;
@font-weight-regular: 400;

@line-height-base: 1.7;
// endregion Fonts

// region Global Color
@controller-builder-label-color: @color-gray;
@controller-builder-icon-color: @controller-builder-label-color;
@controller-builder-background-base-field-color: @color-gray-light;
// endregion Global Color

// region Vertical paddings
@padding-lg: 24px; // containers
@padding-md: 16px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
// endregion Vertical paddings

// region Vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;
// endregion

// region Typography
@typography-title-font-weight: 600;
@typography-title-margin-top: 1.2em;
@typography-title-margin-bottom: 0.5em;
@typography-paragraph-line-height-base: 25px;
// endregion Typography

// region Headings
@heading-2-size: 19px;
@heading-3-size: 17px;
@heading-4-size: 16px;
// endregion Headings

// region Border color
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border
// endregion

// region Background color for `<body>`
@body-background: #f1f1f1;
// endregion Background

// region Layout
@layout-body-background: @body-background;
@layout-header-background: @color-white;
@layout-header-bg: ~"var(--@{BRZ_PREFIX}-global-header-color, var(--@{BRZ_PREFIX}-header-color, @{white}))";
@layout-header-padding: ~"0 var(--@{BRZ_PREFIX}-frame-content-scrollbar-width, 0) 0 0";
@layout-header__close-padding: ~"25px calc(30px - var(--@{BRZ_PREFIX}-frame-content-scrollbar-width, 0px)) 25px 30px";
@layout-header__actions-width: ~"calc(55px - var(--@{BRZ_PREFIX}-frame-content-scrollbar-width, 0px))";
@layout-header__actions-padding: ~"25px calc(30px - var(--@{BRZ_PREFIX}-frame-content-scrollbar-width, 0px)) 25px 10px";
@layout-header-height: 65px;
@layout-sider-background: @color-transparent;
@layout-content-width: 950px;
@layout-footer-background: ~"var(--@{BRZ_PREFIX}-global-footer-color, var(--@{BRZ_PREFIX}-footer-color, @{color-white}))";
@layout-footer-height: 69px;
@layout-footer-padding: ~"11px calc(15px + var(--@{BRZ_PREFIX}-frame-content-scrollbar-width, 0px)) 11px 15px;";
@layout-height: ~"var(--@{BRZ_PREFIX}-layout-height, auto)";
@layout__frame-background: ~"var(--@{BRZ_PREFIX}-global-content-color, var(--@{BRZ_PREFIX}-content-color, @{color-gray-lightest}))";
@layout__frame-sider-background: ~"var(--@{BRZ_PREFIX}-global-sider-color, var(--@{BRZ_PREFIX}-sider-color, @{color-dark}))";
@layout__frame-content-background: ~"var(--@{BRZ_PREFIX}-global-content-color, var(--@{BRZ_PREFIX}-content-color, @{color-gray-lightest}))";
@layout-default-width: @layout-content-width + 30px;
@layout__frame-wrap-max-w: ~"var(--@{BRZ_PREFIX}-frame-content-width, @{layout-default-width})";
// endregion Layout

// region Base background color for most components
@component-background: @color-white;
// endregion

// region Popover background color
@popover-menu-min-width: 177px;
@popover-menu-box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.09);
@popover-menu-border-color: rgba(151, 151, 151, 0.1);
@popover-menu-padding: 6px 18px;
@popover-menu-background: @white;
@popover-background: ~"var(--@{BRZ_PREFIX}-global-popover-background, var(--@{BRZ_PREFIX}-popover-background, @{popover-menu-background}))";
// endregion

// region Input
// vertical padding for all form controls
@control-padding-horizontal: 8px;
@control-padding-horizontal-sm: 4px;
@input-weight-base: 600;

// paddings
@input-height-sm: 30px;
@input-height-base: 38px;
@input-height-lg: 48px;
@input-padding-horizontal: 14px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: 10px;
@input-padding-horizontal-lg: 25px;
@input-padding-vertical-sm: 5.5px;
@input-padding-vertical-base: 11px;
@input-padding-vertical-lg: 14px;
@input-textarea-padding-vertical: 20px;
@input-textarea-padding-horizontal: 25px;

// color
@input-color: ~"var(--@{BRZ_PREFIX}-global-input-color, var(--@{BRZ_PREFIX}-input-color, @{text-color}))";
@input-bg: ~"var(--@{BRZ_PREFIX}-global-input-background, var(--@{BRZ_PREFIX}-input-background, @{component-background}))";
@input-placeholder-color: @color-gray-mid;
@input-icon-color: @color-gray-mid;
@input-border-color: ~"var(--@{BRZ_PREFIX}-global-input-border-color, var(--@{BRZ_PREFIX}-input-border-color, @{color-gray-light}))";
@input-number-hover-border-color: @color-gray-light;
@input-hover-border-color: @input-border-color;
@input-disabled-bg: @input-bg;
@input-disabled-color: @input-color;
@input-textarea-weight: @font-weight-regular;
@input-textarea-size: 14px;
@input-placeholder-weight: @font-weight-regular;
@input-line-height: 1.8;
@input-addon-color: ~"var(--@{BRZ_PREFIX}-global-input-color, var(--@{BRZ_PREFIX}-input-color, @{color-gray}))";

// Size
@input-font-size-small: 12px;
@input-font-size-middle: 13px;
@input-font-size-large: 15px;
@input-textarea-line-height-sm: 2;
@input-textarea-line-height: 2;
@input-textarea-line-height-lg: 1.8;
@input-textarea-height: ~"var(--@{BRZ_PREFIX}-textarea-height, 150px)";
// endregion

// region Upload
@upload-actions-color: @text-color-secondary;
// endregion

// region Buttons
@btn-width: ~"var(--@{BRZ_PREFIX}-btn-disabled-width, fit-content)";
@btn-custom-padding: ~"var(--@{BRZ_PREFIX}-btn-custom, 0)";
@btn-font-weight: 600;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@btn-border-radius: ~"var(--@{BRZ_PREFIX}-btn-radius, 3px)";
@btn-border-width: @border-width-base;
@btn-border-style: @border-style-base;
@btn-shadow: 0 2px 0 rgba(0, 0, 0, 0.015);
@btn-primary-shadow: 0 2px 0 rgba(0, 0, 0, 0.045);
@btn-text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.12);
@btn-dashed-custom-color: @color-gray-mid;
@btn-secondary-bg-color: @color-gray;

@btn-primary-color: #fff;
@btn-primary-bg: @primary-color;

@btn-default-color: @text-color;
@btn-default-bg: transparent;
@btn-default-border: @text-color;

@btn-hover-color: @color-white;
@btn-hover-background-color: #000000;
@btn-hover-border-color: #000000;

@btn-primary-hover-color: @color-white;
@btn-primary-hover-background-color: @primary-color-fade-80;
@btn-primary-hover-border-color: @primary-color-fade-80;

@btn-danger-color: @color-white;
@btn-danger-bg: @error-color;
@btn-danger-border: @error-color;

@btn-warning-hover-color: @color-orange;
@btn-warning-border-color: @color-orange;
@btn-warning-hover-background-color: @color-orange-fade-80;
@btn-warning-hover-border-color: @color-orange-fade-80;

@btn-disable-color: @disabled-color;
@btn-disable-bg: @disabled-bg;
@btn-disable-border: @border-color-base;

@btn-default-ghost-color: @component-background;
@btn-default-ghost-bg: transparent;
@btn-default-ghost-border: @component-background;

@btn-dashed-color: ~"var(--@{BRZ_PREFIX}-btn-color, @{btn-dashed-custom-color})";
@btn-dashed-hover-color: ~"var(--@{BRZ_PREFIX}-btn-hover, @{text-color})";
@btn-link-color: ~"var(--@{BRZ_PREFIX}-btn-color, @{primary-color})";
@btn-link-hover-color: ~"var(--@{BRZ_PREFIX}-btn-hover,  @{text-color-secondary})";
@btn-ghost-color: ~"var(--@{BRZ_PREFIX}-btn-color, @{text-color})";
@btn-ghost-hover-color: ~"var(--@{BRZ_PREFIX}-btn-hover, @{text-color})";
@btn-dashed-hover-background-color: transparent;
@btn-dashed-hover-border-color: transparent;

@btn-font-size-base: 14px;
@btn-font-size-small: 11px;
@btn-line-height-base: 25px;
@btn-padding-horizontal-base: @padding-md + 20px;
@btn-padding-horizontal-lg: @btn-padding-horizontal-base;
@btn-padding-horizontal-sm: @padding-xs - 1px;
@btn-horizontal-margin-base: 0 12.5px 0 0;

@btn-height-base: 38px;
@btn-height-lg: 50px;
@btn-height-sm: 24px;

@btn-link-custom-padding: 0;
@btn-link-custom-margin: 0;
@btn-link-custom-border: none;
@btn-link-custom-line-height: 8px;

@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-sm: @btn-height-sm;

@btn-square-size: @btn-height-base;
@btn-square-size-lg: @btn-height-lg;
@btn-square-size-sm: @btn-height-sm;

@btn-link-ghost-color: @text-color-secondary;
// endregion

// region Badge
@badge-dot-size: 8px;
@badge-status-size: 8px;
@badge-text-color: @component-background;
// endregion

// region Tag
@tag-default-bg: @color-gray-mid-fade-50;
@tag-default-color: @text-color;
@tag-default-border-radius: 16px;
@tag-default-padding: 8px 12px;
@tag-removable-padding-top-bottom: 8px;
@tag-removable-padding-start: 12px;
@tag-removable-padding-end:21px;
@tag-default-line-height: 1;
@tag-default-border: none;
@tag-font-size: @font-size-msm;
// endregion

// region Dropdown
@dropdown-line-height: @line-height-base;
@dropdown-menu-bg: @component-background;
@dropdown-vertical-padding: 5px;
@dropdown-edge-child-vertical-padding: 0;
@dropdown-font-size: @font-size-sm;
@dropdown-line-height: 33px;
@dropdown-menu-min-width: 188px;
@dropdown-menu-item-padding: 6px 0px 3px;
@dropdown-menu-item-line-height: 29px;
@dropdown-menu-box-shadow: 0 3px 8px 2px rgba(0, 0, 0, 0.09);
@dropdown-menu-border-color: rgba(151, 151, 151, 0.1);
@dropdown-menu-padding: 6px 20px 6px 22px;
@dropdown-content-width: ~"var(--@{BRZ_PREFIX}-dropdown-content-width, 188px)";
@dropdown-content-offset: ~"var(--@{BRZ_PREFIX}-dropdown-content-offset, 0px)";
@dropdown-item-height: ~"var(--@{BRZ_PREFIX}-dropdown-item-height, none)";
@dropdown-item-background: ~"var(--@{BRZ_PREFIX}-global-dropdown-item-background, var(--@{BRZ_PREFIX}-dropdown-item-background, @{color-transparent}))";
@dropdown-item-hover-background: ~"var(--@{BRZ_PREFIX}-global-dropdown-item-hover-background, var(--@{BRZ_PREFIX}-dropdown-item-hover-background, @{dropdown-item-background}))";
// endregion

// region Select
@select-border-color: @border-color-base;
@select-item-selected-font-weight: 600;
@select-dropdown-bg: @component-background;
@select-item-selected-bg: @primary-1;
@select-item-active-bg: @item-hover-bg;
@select-dropdown-vertical-padding: @dropdown-vertical-padding;
@select-dropdown-font-size: @font-size-msm;
@select-dropdown-line-height: @dropdown-line-height;
@select-dropdown-height: 38px;
@select-background: @component-background;
@select-clear-background: @select-background;
@select-selection-item-bg: @background-color-base;
@select-selection-item-border-color: @border-color-split;
@select-single-item-height-lg: 40px;
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@select-multiple-item-height-lg: 38px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
@select-padding-horizontal: 0 7px 0 16px;
@select-single-item-line-height: 51px;
@select-arrow-border-color: ~"var(--@{BRZ_PREFIX}-global-rich-text-arrow-hover, var(--@{BRZ_PREFIX}-rich-text-arrow-hover, @{color-dark}))";
@select-arrow-hover-border-color: ~"var(--@{BRZ_PREFIX}-global-rich-text-arrow-hover, var(--@{BRZ_PREFIX}-rich-text-arrow-hover, @{color-gray-mid}))";
// endregion

// region Dropdown
@dropdown-vertical-padding: 8px;
// endregion

// region Menu
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @color-gray-darkest;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: @color-gray;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @color-gray-darkest;
@menu-dark-selected-item-icon-color: @color-blue;
@menu-dark-selected-item-text-color: @color-blue;
@menu-dark-item-hover-bg: transparent;
@menu-item-vertical-margin: 0;
@menu-item-boundary-margin: 0;
@menu-item-padding: 0 16px 0 41px;
@sidebar-menu-color-base: #777f86;
// endregion

// region Tabs
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 66px;
@tabs-card-horizontal-padding: 8px @padding-md;
@tabs-card-horizontal-padding-sm: 6px @padding-md;
@tabs-title-font-size: @font-size-msm;
@tabs-ink-bar-color: @primary-color;
@tabs-horizontal-margin: 0 0 0 0;
@tabs-horizontal-margin-rtl: 0 0 0 32px;
@tabs-horizontal-padding: 20px 36px;
@tabs-horizontal-padding-lg: @padding-md 0;
@tabs-horizontal-padding-sm: @padding-xs 0;
@tabs-vertical-padding: @padding-xs @padding-lg;
@tabs-scrolling-size: 32px;
@tabs-card-gutter: 2px;
// endregion

// region Checkbox
@checkbox-size: 16px;
@checkbox-color: @color-white;
@checkbox-check-color: @color-white;
@checkbox-check-bg: @checkbox-check-color;
@checkbox-border-width: @border-width-base;
// endregion

// region Tooltip
@tooltip-max-w: ~"var(--@{BRZ_PREFIX}-tooltip-maxWidth, 195px)";
@tooltip-inner-font-size: ~"var(--@{BRZ_PREFIX}-tooltip-fontSize, 12px)";
@tooltip-inner-font-weight: ~"var(--@{BRZ_PREFIX}-tooltip-fontWeight, 600)";
@tooltip-inner-line-height: ~"var(--@{BRZ_PREFIX}-tooltip-lineHeight, 19px)";
@tooltip-inner-padding: ~"var(--@{BRZ_PREFIX}-tooltip-padding, 12px 16px)";
@tooltip-inner-border-radius: ~"var(--@{BRZ_PREFIX}-tooltip-rounded, 0)";
@tooltip-inner-letter-spacing: ~"var(--@{BRZ_PREFIX}-tooltip-letterSpacing, 0)";
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: @color-white;
// Tooltip background color
@tooltip-bg: rgba(3, 8, 15, 0.92);
// Tooltip arrow width
@tooltip-arrow-width: 5px;
// Tooltip distance with trigger
@tooltip-distance: @tooltip-arrow-width - 1px + 4px;
// Tooltip arrow color
@tooltip-arrow-color: @tooltip-bg;
// endregion

// region Table
@table-header-sort-active-bg: @white-darken-3;
@table-header-filter-active-bg: @white-darken-5;
@table-border-radius-base: 0;
@table-header-color: @text-color-secondary;
@table-row-hover-bg: @white;
@table-wrapper-padding: 20px 0 50px 0;
@table-row-background-color-odd: ~"var(--@{BRZ_PREFIX}-global-table-rows-odd-bg-color, var(--@{BRZ_PREFIX}-table-rows-odd-bg-color, @{color-white}))";
@table-row-background-color-even: ~"var(--@{BRZ_PREFIX}-global-table-rows-even-bg-color, var(--@{BRZ_PREFIX}-table-rows-even-bg-color, @{color-white}))";
@table-column-background-color-odd: ~"var(--@{BRZ_PREFIX}-global-table-columns-odd-bg-color, var(--@{BRZ_PREFIX}-table-columns-odd-bg-color, @{color-transparent}))";
@table-column-background-color-even: ~"var(--@{BRZ_PREFIX}-global-table-columns-even-bg-color, var(--@{BRZ_PREFIX}-table-columns-even-bg-color, @{color-transparent}))";
@table-selected-row-hover-bg: @color-primary-1-darken-2;
// endregion

// region Card
@card-height: ~"var(--@{BRZ_PREFIX}-global-card-height, var(--@{BRZ_PREFIX}-card--height, auto))";
@card-width: ~"var(--@{BRZ_PREFIX}-global-card-width, var(--@{BRZ_PREFIX}-card--width, auto))";
@card-z-index: ~"var(--@{BRZ_PREFIX}-global-card-z-index, var(--@{BRZ_PREFIX}-card--z-index, inherit))";
@card-border-radius: ~"var(--@{BRZ_PREFIX}-global-card-border-radius, var(--@{BRZ_PREFIX}-card-border-radius, 2px))";
@card-border: ~"var(--@{BRZ_PREFIX}-global-card-border-width, var(--@{BRZ_PREFIX}-card-border-width, 1px)) var(--@{BRZ_PREFIX}-global-card-border-style, var(--@{BRZ_PREFIX}-card-border-style, solid)) var(--@{BRZ_PREFIX}-global-card-border-color, var(--@{BRZ_PREFIX}-card-border-color, @{color-gray-light}))";
@card-shadow: @box-shadow-base;
@card-box-shadow: ~"var(--@{BRZ_PREFIX}-global-card-box-shadow, var(--@{BRZ_PREFIX}-card-box-shadow, 0 2px 8px 0 rgba(0, 0, 0, 0.08)))";
@card-background-color: ~"var(--@{BRZ_PREFIX}-global-card-background, var(--@{BRZ_PREFIX}-card-background, @{color-white}))";
@card-background-color-hover: ~"var(--@{BRZ_PREFIX}-global-card-background-hover, var(--@{BRZ_PREFIX}-card-background-hover, @{card-background-color}))";
// endregion

// region Pagination
@pagination-item-bg: @component-background;
@pagination-item-size: @height-base;
@pagination-item-size-sm: 24px;
@pagination-font-family: @font-family;
@pagination-font-weight-active: 600;
@pagination-item-bg-active: transparent;
@pagination-item-link-bg: transparent;
@pagination-border-color: transparent;
// endregion

// region Breadcrumb
@breadcrumb-base-color: @color-gray;
@breadcrumb-last-item-color: @breadcrumb-base-color;
@breadcrumb-font-size: 19px;
@breadcrumb-link-color: @text-color;
@breadcrumb-link-color-hover: @text-color;
@breadcrumb-separator-color: @breadcrumb-base-color;
@breadcrumb-separator-margin: 0 15px;
// endregion

// region Switch
@switch-min-width: 44px;
@switch-color: @color-dark;
@switch-checked-bg: ~"var(--@{BRZ_PREFIX}-global-switch-color, var(--@{BRZ_PREFIX}-switch-color, @{primary-color}))";
// endregion

// region Sider
@layout-sider-background-light: transparent;
// endregion

// region Result
@result-text-font-size: 19px;
@result-title-color: #171b22;
@result-subTitle-color: #515a69;
@result-subTitle-line-height: 36px;
@result-text-line-height: 36px;
// endregion

// region Search Result Preview Component
@search-result-padding-component: 25px 30px;
@search-result-background-component: @component-background;
// endregion

// region Shape Text
@shape-text-align-items: ~"var(--@{BRZ_PREFIX}-shape-text-align, flex-start)";
@shape-text-content-loading-height: ~"var(--@{BRZ_PREFIX}-shape-text-content--loading-size, 16px)";
@shape-text-hover-color: ~"var(--@{BRZ_PREFIX}-global-shape-text-hover-color, var(--@{BRZ_PREFIX}-shape-text-hover-color, inherit))";
@shape-text-hover-border-color: ~"var(--@{BRZ_PREFIX}-global-shape-text-hover-color, var(--@{BRZ_PREFIX}-shape-text-hover-color, @{color-blue-mid}))";
@shape-text__source-boxed-padding: ~"var(--@{BRZ_PREFIX}-shape-text-size, 10px)";
@shape-text__source-loading-size: ~"var(--@{BRZ_PREFIX}-shape-text-source-loading, 36px)";
// endregion

// region Upload
@upload-small-picture: 76.8px;
@upload-middle-picture: 118px;
@upload-large-picture-width: 260px;
@upload-large-picture-height: 125px;
@upload-xlarge-picture: 215px;
// endregion

// region MultiUpload
@multi-upload__virtualized-list-item: 160px;
@multi-upload__virtualized-list-gap: ~"calc(2vw - var(--@{BRZ_PREFIX}-grid-list-row-gap, 0px)) 2vw";
@multi-upload__virtualized-wrapper-item-padding: ~"var(--@{BRZ_PREFIX}-grid-item-padding-top, 0) var(--@{BRZ_PREFIX}-grid-item-padding-right, 0) var(--@{BRZ_PREFIX}-grid-item-padding-bottom, 0) var(--@{BRZ_PREFIX}-grid-item-padding-left, 0)";
// endregion

// region ImageWithCaption
@image-caption-width: ~"var(--@{BRZ_PREFIX}-image-with-caption-width, 100%)";
@image-caption-height: ~"var(--@{BRZ_PREFIX}-image-with-caption-height, auto)";
@image-caption-figcaption-width: ~"var(--@{BRZ_PREFIX}-image-with-caption-figcaption-width, auto)";
@image-caption-figcaption-height: ~"var(--@{BRZ_PREFIX}-image-with-caption-figcaption-height, auto)";
// endregion

// region ImagePointer
@image-pointer-max-w: ~"var(--@{BRZ_PREFIX}-image-pointer-max-width, 100%)";
@image-pointer-max-h: ~"var(--@{BRZ_PREFIX}-image-pointer-max-height, 100%)";
@image-pointer__loading-container-width: ~"var(--@{BRZ_PREFIX}-image-pointer-width, 100%)";
@image-pointer__loading-container-height: ~"var(--@{BRZ_PREFIX}-image-pointer-height, 100%)";
@image-pointer__error-width: ~"var(--@{BRZ_PREFIX}-image-pointer-width, 100%)";
@image-pointer__error-height: ~"var(--@{BRZ_PREFIX}-image-pointer-height, 100%)";
// endregion

// region NavList
@navigation-list-font-size: 11px;
@navlist-bg: ~"var(--@{BRZ_PREFIX}-global-nav-list-btn-wrapper-color, var(--@{BRZ_PREFIX}-nav-list-btn-wrapper-color, transparent))";
// endregion

// region Icon
@icon-color: ~"var(--@{BRZ_PREFIX}-global-icon-color, var(--@{BRZ_PREFIX}-icon-color, @{color-gray}))";
@icon-hover-color: ~"var(--@{BRZ_PREFIX}-global-icon-hover-color, var(--@{BRZ_PREFIX}-icon-hover-color, @{icon-color}))";
@icon-size: ~"var(--@{BRZ_PREFIX}-icon-size, 16px)";
@icon-image-source: ~"var(--@{BRZ_PREFIX}-icon-image-source,none)";
@icon-image-filter: ~"var(
  --@{BRZ_PREFIX}-icon-image-color,
  invert(53%) sepia(12%) saturate(287%) hue-rotate(166deg) brightness(90%) contrast(82%)
)";
@icon-image-hover-filter: ~"var(
  --@{BRZ_PREFIX}-icon-image-hover-color,
  invert(53%) sepia(12%) saturate(287%) hue-rotate(166deg) brightness(90%) contrast(82%)
)";
// endregion
// region IconArrow
@icon-arrow-border-top: ~"6px solid var(--@{BRZ_PREFIX}-global-icon-arrow-color, var(--@{BRZ_PREFIX}-icon-arrow-color, @{color-gray-mid}))";
// endregion
// region IconSet
@iconset-gap: ~"var(--@{BRZ_PREFIX}-iconset-gap, 0)";
@iconset-background: ~"var(--@{BRZ_PREFIX}-global-iconset-background, var(--@{BRZ_PREFIX}-iconset-background, @{color-white}))";
// endregion
// Typography
@brz-typography-font-size-xsmall: 12px;
@brz-typography-font-size-small: 13px;
@brz-typography-font-size-middle: 14px;
@brz-typography-font-size-large: 15px;
@brz-typography-font-size-xlarge: 16px;
@brz-typography-font-size-xxlarge: 19px;
@brz-typography-paragraph-color: ~"var(--@{BRZ_PREFIX}-global-typography-paragraph-color, var(--@{BRZ_PREFIX}-typography-paragraph-color, @{color-gray}))";
@brz-typography-paragraph-hover-color: ~"var(--@{BRZ_PREFIX}-global-typography-paragraph-hover-color, var(--@{BRZ_PREFIX}-typography-paragraph-hover-color, @{brz-typography-paragraph-color}))";
@brz-typography-text-color: ~"var(--@{BRZ_PREFIX}-global-typography-text-color, var(--@{BRZ_PREFIX}-typography-text-color, @{color-gray}))";
@brz-typography-text-hover-color: ~"var(--@{BRZ_PREFIX}-global-typography-text-hover-color, var(--@{BRZ_PREFIX}-typography-text-hover-color, @{brz-typography-text-color}))";
@brz-typography-title-color: ~"var(--@{BRZ_PREFIX}-global-typography-title-color, var(--@{BRZ_PREFIX}-typography-title-color, @{color-dark}))";
@brz-typography-title-hover-color: ~"var(--@{BRZ_PREFIX}-global-typography-title-hover-color, var(--@{BRZ_PREFIX}-typography-title-hover-color, @{brz-typography-title-color}))";
@brz-typography-link-color: ~"var(--@{BRZ_PREFIX}-global-typography-link-color, var(--@{BRZ_PREFIX}-typography-link-color, @{color-blue}))";
@brz-typography-link-hover-color: ~"var(--@{BRZ_PREFIX}-global-typography-link-hover-color, var(--@{BRZ_PREFIX}-typography-link-hover-color, @{brz-typography-link-color}))";
// Typography Line Height
@brz-typography-line-height: 1.5;
@br-typography-title-line-height: 1.2;
// Heading
@heading-4-size: @brz-typography-font-size-large;
// Card Padding
// Desktop
@card-desktop-padding-custom-top: ~"var(--@{BRZ_PREFIX}-card-custom-size-desktop-top, 0px)";
@card-desktop-padding-custom-right: ~"var(--@{BRZ_PREFIX}-card-custom-size-desktop-right, 0px)";
@card-desktop-padding-custom-bottom: ~"var(--@{BRZ_PREFIX}-card-custom-size-desktop-bottom, 0px)";
@card-desktop-padding-custom-left: ~"var(--@{BRZ_PREFIX}-card-custom-size-desktop-left, 0px)";
// Tablet
@card-tablet-padding-custom-top: ~"var(--@{BRZ_PREFIX}-card-custom-size-tablet-top, 0px)";
@card-tablet-padding-custom-right: ~"var(--@{BRZ_PREFIX}-card-custom-size-tablet-right, 0px)";
@card-tablet-padding-custom-bottom: ~"var(--@{BRZ_PREFIX}-card-custom-size-tablet-bottom, 0px)";
@card-tablet-padding-custom-left: ~"var(--@{BRZ_PREFIX}-card-custom-size-tablet-left, 0px)";
// Mobile
@card-mobile-padding-custom-top: ~"var(--@{BRZ_PREFIX}-card-custom-size-mobile-top, 0px)";
@card-mobile-padding-custom-right: ~"var(--@{BRZ_PREFIX}-card-custom-size-mobile-right, 0px)";
@card-mobile-padding-custom-bottom: ~"var(--@{BRZ_PREFIX}-card-custom-size-mobile-bottom, 0px)";
@card-mobile-padding-custom-left: ~"var(--@{BRZ_PREFIX}-card-custom-size-mobile-left, 0px)";
// Fields Placeholder
@field-placeholder-small: 0 @input-padding-horizontal-sm;
@field-placeholder-middle: 0 @input-padding-horizontal;
@field-placeholder-large: 0 @input-padding-horizontal-lg;
@field-placeholder-font-size-middle: @input-font-size-middle;
@field-placeholder-font-size-small: @input-font-size-small;
@field-placeholder-font-size-large: @input-font-size-large;
@field-placeholder-line-height: 1;
@field-placeholder-line-height-lg: 1;
@field-placeholder-line-height-sm: 1;
@field-placeholder-height: 38px;
@field-placeholder-height-lg: 48px;
@field-placeholder-height-sm: 28px;
@field-placeholder-border: ~"@{border-width-base} @{border-style-base} var(--@{BRZ_PREFIX}-global-field-placeholder-border, var(--@{BRZ_PREFIX}-field-placeholder-border, @{input-border-color}))";
// Toolbars
@brz-toolbar-option-label-color: #828b92;
@brz-toolbar-option-controls-max-width: 144px;
@brz-toolbar-general-background-color: #383e48;
@toolbar__textarea-height: ~"var(--@{BRZ_PREFIX}-toolbar--textarea-height, 55px)";
@toolbar__popover-width: ~"var(--@{BRZ_PREFIX}-popover--width, 255px)";
// Inline
// Inline Spacing
@brz-inline-desktop-spacing-custom: ~"var(--@{BRZ_PREFIX}-inline--desktop-spacing-custom, 0px)";
@brz-inline-tablet-spacing-custom: ~"var(--@{BRZ_PREFIX}-inline--tablet-spacing-custom, 0px)";
@brz-inline-mobile-spacing-custom: ~"var(--@{BRZ_PREFIX}-inline--mobile-spacing-custom, 0px)";
// Inline Columns
@brz-inline-desktop-columns: ~"var(--@{BRZ_PREFIX}-inline--desktop-columns, auto)";
@brz-inline-tablet-columns: ~"var(--@{BRZ_PREFIX}-inline--tablet-columns, @{brz-inline-desktop-columns})";
@brz-inline-mobile-columns: ~"var(--@{BRZ_PREFIX}-inline--mobile-columns, @{brz-inline-tablet-columns})";
// Notifications
@brz-notification-offsetX: var(--offset-x, 0px);
//RichText
@rich-text-height: ~"var(--@{BRZ_PREFIX}-rich-text-height, 150px)";
@rich-text-height-small: 125px;
@rich-text-height-middle: 192px;
@rich-text-height-large: 300px;
@rich-text-size: 14px;
@rich-text-bg: ~"var(--@{BRZ_PREFIX}-global-rich-text-background, var(--@{BRZ_PREFIX}-rich-text-background, @{color-white}))";
@rich-text-content-color: ~"var(--@{BRZ_PREFIX}-global-rich-text-content-color, @{color-dark})";
@rich-text-bg-disabled: ~"var(--@{BRZ_PREFIX}-global-rich-text-background-disabled, @{color-white})";
@rich-text-color: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-color, #444)";
@rich-text-placeholder-color: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-color, @{color-gray-mid})";
@rich-text-color-selected: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-color-selected, #06c)";
@rich-text-color-expanded: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-color-expanded, #ccc)";
@rich-text-picker-border: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-border, @{color-transparent})";
@rich-text-picker-border-expanded: ~"var(--@{BRZ_PREFIX}-global-rich-text-picker-border-expanded, #ccc)";
// region space
@space-padding: ~"var(--@{BRZ_PREFIX}-space-top, 0) var(--@{BRZ_PREFIX}-space-right, 0) var(--@{BRZ_PREFIX}-space-bottom, 0) var(--@{BRZ_PREFIX}-space-left, 0)";
// endregion
// region TimePicker
@picker-basic-cell-hover-with-range-color: @primary-color-lighten-35;
@picker-date-hover-range-border-color: @primary-color-lighten-20;
// endregion
// region Slider
@slider-handle-color-focus: @primary-color-tint-20;
@slider-handle-color-focus-shadow: @primary-color-fade-12;
@slider-dot-border-color-active: @primary-color-tint-50;
// endregion
// region Image
@image-preview-operation-disabled-color: @white-fade-45;
// endregion
//region Calendar
@calendar-item-active-bg-fade-20: @color-primary-1-fade-20;
//endregion
//region COdeMirror
@codemirror-bg: ~"var(--@{BRZ_PREFIX}-global-codemirror-bg, #ffffff)";
@codemirror-color: ~"var(--@{BRZ_PREFIX}-global-codemirror-color, #000000)";
@codemirror-qualifier: ~"var(--@{BRZ_PREFIX}-global-codemirror-qualifier, #00c699)";
@codemirror-property: ~"var(--@{BRZ_PREFIX}-global-codemirror-property, #aca6fb)";
@codemirror-keyword: ~"var(--@{BRZ_PREFIX}-global-codemirror-keyword, #008000)";
@codemirror-number: ~"var(--@{BRZ_PREFIX}-global-codemirror-number, #ff662d)";
@codemirror-variable: ~"var(--@{BRZ_PREFIX}-global-codemirror-variable, #ff20f9)";
@codemirror-atom: ~"var(--@{BRZ_PREFIX}-global-codemirror-atom, #ff662d)";
@codemirror-comment: ~"var(--@{BRZ_PREFIX}-global-codemirror-comment, #4b4b4b)";
@codemirror-selection: ~"var(--@{BRZ_PREFIX}-global-codemirror-selection, #d7d4f0)";