// Variables
// All variables declared in this file is supposed to be customizable by the user
// This file is ignored by prettier for better alignment
// See .prettierignore
@import 'colors/light.less';
@import 'colors/dark.less';
@import 'colors/high-contrast.less';

// Controls

// Polyfill for IE 11
@ie-polyfill:           true; // @deprecated use @enable-ie-polyfill instead
@enable-ie-polyfill:    @ie-polyfill;

// CSS Resets
@reset-import:          true; // @deprecated use @enable-css-reset instead
@enable-css-reset:      @reset-import;

// Global button ripple switch
@button-ripple:         true; // @deprecated use @enable-ripple-effect instead
@enable-ripple-effect:  @button-ripple;

// Whether include styles for dark mode
@enable-dark-mode:      true;

// Media queries breakpoints
// Define the breakpoints at which your layout will change, adapting to different screen sizes.

// Small screen / phone
// @screen-sm
@screen-sm:      576px;

// Medium screen / desktop
// @screen-md
@screen-md:      768px;

// Large screen / wide desktop
// @screen-lg
@screen-lg:      992px;

// Extra large devices / extra wide desktop
// @screen-xl
@screen-xl:      1200px;

// Extra extra large devices / ultra wide desktop
// @screen-xxl
@screen-xxl:     1400px;


// Grid system
// Define your custom responsive grid.

// Number of columns in the grid.
@grid-columns:        24;
// Padding between columns. Gets divided in half for the left and right.
@grid-gutter-width:   10px;

// Container sizes
// Define the maximum width of `.container` for different screen sizes.

// Small screen / phone / tablet
@container-phone:                      (540px + @grid-gutter-width);
@container-sm:                         @container-phone;

// Medium screen / desktop
@container-desktop:                    (720px + @grid-gutter-width);
@container-md:                         @container-desktop;

// Large screen / wide desktop
@container-large-desktop:              (960px + @grid-gutter-width);
@container-lg:                         @container-large-desktop;

// Extra large devices / ultra wide desktop
@container-extra-large-desktop:        (1140px + @grid-gutter-width);
@container-xl:                         @container-large-desktop;

// Extra large devices / ultra wide desktop
@container-extra-extra-large-desktop:  (1320px + @grid-gutter-width);
@container-xxl:                        @container-large-desktop;

// Color system

// Primary palette
@base-color:      #3498ff; // @deprecated use @primary-color instead
@primary-color:   #3498ff;

// Secondary palette
@red:             #f44336;
@orange:          #fa8900;
@yellow:          #ffb300;
@green:           #4caf50;
@cyan:            #00bcd4;
@blue:            #2196f3;
@violet:          #673ab7;

// Dark mode
@primary-color-dark:  #34c3ff;

@red-dark:            #f04f43;
@orange-dark:         #ff9800;
@yellow-dark:         #ffc757;
@green-dark:          #58b15b;
@cyan-dark:           #00bcd4;
@blue-dark:           #1499ef;
@violet-dark:         #673ab7;

// High-contrast mode
@primary-color-high-contrast: #ffff00;

@red-high-contrast:           #bd1732;
@orange-high-contrast:        @orange-dark;
@yellow-high-contrast:        #ffc757;
@green-high-contrast:         #0d822c;
@cyan-high-contrast:          @cyan-dark;
@blue-high-contrast:          #1499ef;
@violet-high-contrast:        @violet-dark;

// List for looping
@spectrum: red, orange, yellow, green, cyan, blue, violet;

// Typography
// Font, line-height, and color for body text, headings, and more.

@font-family-base:      Apple-System, Arial, Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', STXihei, sans-serif;

@font-size-large:       16px;
@font-size-base:        14px;
@font-size-small:       12px;
@font-size-extra-small: 12px;

@font-size-h1: 46px;
@font-size-h2: 36px;
@font-size-h3: 28px;
@font-size-h4: 22px;
@font-size-h5: 18px;
@font-size-h6: 16px;

@line-height-h1: 62px;
@line-height-h2: 50px;
@line-height-h3: 42px;
@line-height-h4: 34px;
@line-height-h5: 24px;
@line-height-h6: 22px;

// Computed "line-height" (`font-size` * `line-height`) for use with `margin`, `padding`, etc.
@line-height-computed:        20px;
@line-height-large-computed:  22px;

// Unit-less `line-height` for use in components like buttons.
@line-height-large:           unit((@line-height-large-computed / @font-size-large)); // ~1.375
@line-height-base:            unit((@line-height-computed / @font-size-base)); // ~1.4285714285714286
@line-height-small:           unit((@line-height-computed / @font-size-small)); // ~1.6666666666666667
@line-height-extra-small:     unit((@line-height-computed / @font-size-extra-small)); // ~1.6666666666666667

// By default, this inherits from the `<body>`.
@headings-font-family:    inherit;
@headings-font-weight:    bolder;
@headings-color:          inherit;


// Box shadows

@default-box-shadow:  0 4px 4px rgba(0, 0, 0, 0.12), 0 0 10px rgba(0, 0, 0, 0.06); // @deprecated use @box-shadow instead
@box-shadow:          @default-box-shadow;


// Spacing
// Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).

@padding-base-vertical:           8px; // @deprecated use @padding-y instead
@padding-base-horizontal:         12px; // @deprecated use @padding-x instead

@padding-large-vertical:          10px; // @deprecated use @padding-y-lg instead
@padding-large-horizontal:        16px; // @deprecated use @padding-x-lg instead

@padding-small-vertical:          5px; // @deprecated use @padding-y-sm instead
@padding-small-horizontal:        10px; // @deprecated use @padding-x-sm instead

@padding-extra-small-vertical:    2px; // @deprecated use @padding-y-xs instead
@padding-extra-small-horizontal:  8px; // @deprecated use @padding-x-xs instead

@padding-y:         @padding-base-vertical;
@padding-x:         @padding-base-horizontal;

@padding-y-lg:      @padding-large-vertical;
@padding-x-lg:      @padding-large-horizontal;

@padding-y-sm:      @padding-small-vertical;
@padding-x-sm:      @padding-small-horizontal;

@padding-y-xs:      @padding-extra-small-vertical;
@padding-x-xs:      @padding-extra-small-horizontal;

// Border radius

@border-radius-base:  6px;  // @deprecate use @border-radius instead
@border-radius:       @border-radius-base;

// Scaffolding
// Settings for some of the most global styles.

@link-hover-decoration:  underline;
@link-active-decoration: underline;

// Disabled cursor for form controls and buttons.
@cursor-disabled: not-allowed;

//  Components

// Table

@table-header-content-padding-vertical: 10px; // @deprecated use @table-header-padding-y instead
@table-header-padding-y:                @table-header-content-padding-vertical;
@table-header-padding-x:                10px;
@table-header-font-size:                @font-size-small;
@table-header-line-small:               @line-height-small; // @deprecated use @table-header-line-height instead
@table-header-line-height:              @table-header-line-small;
@table-header-sort-wrapper-margin-left: 5px;

@table-column-resize-spanner-width:                 3px;
@table-column-resize-spanner-triangle-side-length:  3px;

@table-body-content-padding-vertical:   13px; // @deprecated use @table-cell-padding-y instead
@table-content-padding-horizontal:      10px; // @deprecated use @table-cell-padding-x instead
@table-cell-padding-y:                  @table-body-content-padding-vertical;
@table-cell-padding-x:                  @table-content-padding-horizontal;
@table-cell-hover-color:                var(--rs-primary-500);

@table-scrollbar-timing-duration:       0.1s;
@table-scrollbar-width:                 10px;
@table-scrollbar-handle-width:          8px;
@table-scrollbar-handle-gap:            (@table-scrollbar-width - @table-scrollbar-handle-width)/2;

@table-loader-backdrop-color:           var(--rs-loader-backdrop);
@table-loader-transition:               0.2s ease-in;

// Buttons

@btn-font-weight:           normal;

@btn-border-radius-base:    @border-radius; // @deprecated use @btn-border-radius instead
@btn-border-radius:         @btn-border-radius-base;

@btn-transition:            color 0.2s linear, background-color 0.3s linear;
@btn-disabled-opacity:      0.3;

// Ghost Button
@btn-ghost-border-width:    1px;

// Button Loading
@btn-loading-spin-default-diameter: 18px;
@btn-loading-spin-xs-diameter:      16px;
@btn-loading-spin-ring-wide:        3px;

// Ripple

@btn-ripple-background-color: rgba(0, 0, 0, 0.2); // @deprecated use @ripple-bg instead
@ripple-bg:                   @btn-ripple-background-color;

// Badge

@badge-dot-side-length: 8px; // @deprecated use @badge-dot-size instead
@badge-dot-size:        @badge-dot-side-length;

// Avatar

@avatar-md-side-length:   40px; // @deprecated use @avatar-size instead
@avatar-md-font-size:     18px; // @deprecated use @avatar-font-size instead
@avatar-size:             @avatar-md-side-length;
@avatar-font-size:        @avatar-md-font-size;

@avatar-lg-side-length:   60px; // @deprecated use @avatar-size-lg instead
@avatar-lg-font-size:     26px; // @deprecated use @avatar-font-size-lg instead
@avatar-size-lg:          @avatar-lg-side-length;
@avatar-font-size-lg:     @avatar-lg-font-size;

@avatar-sm-side-length:   30px; // @deprecated use @avatar-size-sm instead
@avatar-sm-font-size:     14px; // @deprecated use @avatar-sm-font-size instead
@avatar-size-sm:          @avatar-sm-side-length;
@avatar-font-size-sm:     @avatar-sm-font-size;

@avatar-xs-side-length:   20px; // @deprecated use @avatar-size-xs instead
@avatar-xs-font-size:     12px; // @deprecated use @avatar-font-size-xs instead
@avatar-size-xs:          @avatar-xs-side-length;
@avatar-font-size-xs:     @avatar-xs-font-size;

// Forms

// Form Layout
@form-group-margin-bottom:            24px;
@form-control-width:                  300px;
@form-control-label-width:            170px;
@form-control-label-margin-right:     12px;
@form-control-label-margin-bottom:    4px;
@form-help-text-inline-gap:           10px;

// Error Message
@form-error-message-padding-vertical:     4px;
@form-error-message-padding-horizontal:   8px;
@form-error-message-height:               (@form-error-message-padding-vertical*2 + @line-height-computed);
@form-error-message-font-size:            @font-size-small;
@form-error-message-triangle-width:       6px;
@form-error-message-triangle-gap:         10px;
@form-error-message-triangle-vertical:    4px;
@form-error-message-translate-distance:   2px;

// Input

@padding-base-input-vertical:   @padding-y; // @deprecated use @input-padding-y instead
@padding-base-input-horizontal: @padding-x; // @deprecated use @input-padding-x instead

@input-padding-y:               @padding-base-input-vertical;
@input-padding-x:               @padding-base-input-horizontal;
@input-border-width:            1px;
@input-transition:              border-color ease-in-out 0.3s;

// This has no effect on `<select>`s  in some browsers, due to the limited stylability of `<select>`s in CSS.
@input-border-radius:       @border-radius;

@input-height-base:         (@line-height-computed + (@padding-y * 2));
@input-height-large:        (@line-height-large-computed + (@padding-y-lg * 2));
@input-height-small:        (@line-height-computed + (@padding-y-sm * 2));
@input-height-extra-small:  (@line-height-computed + (@padding-y-xs * 2));

// InputGroup padding for add-on
@input-group-padding-for-add-on-large:        46px;
@input-group-padding-for-add-on-base:         36px;
@input-group-padding-for-add-on-small:        30px;
@input-group-padding-for-add-on-extra-small:  26px;

// Number input

@number-input-touchspin-font-size: 12px;

// Dropdowns
// Dropdown menu container and contents.

@dropdown-caret-width:        10px;
@dropdown-caret-padding:      10px;

// Divider color for between dropdown items.
@dropdown-divider-bg:         @divider-border-color;
@dropdown-shadow:             0 0 10px rgba(0, 0, 0, 0.06), 0 4px 4px rgba(0, 0, 0, 0.12);

@dropdown-menu-radius:              @border-radius;
@dropdown-menu-padding-y:           @dropdown-menu-radius;

@dropdown-item-padding-vertical:    8px; // @deprecated use @dropdown-item-padding-y instead
@dropdown-item-padding-horizontal:  12px; // @deprecated use @dropdown-item-padding-x instead

@dropdown-item-padding-y:           @dropdown-item-padding-vertical;
@dropdown-item-padding-x:           @dropdown-item-padding-horizontal;

// Dropdown item content submenu icon
@dropdown-item-submenu-icon-angle-spacing:              10px;
@dropdown-item-submenu-icon-angle-width:                5px;
@dropdown-item-content-submenu-icon-angle-line-height:  @line-height-base;
@dropdown-item-content-submenu-icon-angle-size:         @font-size-base;
@dropdown-toggle-padding-right:                         (@padding-x + @dropdown-caret-width + @dropdown-caret-padding);
@dropdown-caret-icon-padding-horizontal:                9px;

// DropDownMenu offset value
@dropdown-max-height: 280px;
@dropdown-menu-lg-top: 40px;
@dropdown-menu-sm-top: 27px;
@dropdown-menu-xs-top: 21px;

// Toggle

@toggle-active-scale: 1.2;
@toggle-transition:   0.2s ease-in-out;

@toggle-md-height:                      24px;
@toggle-md-handle-gap:                  3px;
@toggle-md-min-width:                   44px;
@toggle-md-inner-font-size:             @font-size-small;
@toggle-md-handle-diameter:             (@toggle-md-height - @toggle-md-handle-gap*2);
@toggle-md-inner-line-height-computed:  @toggle-md-height;
@toggle-md-inner-line-height:           unit((@toggle-md-inner-line-height-computed / @toggle-md-inner-font-size));
@toggle-md-inner-margin:                @padding-y;

@toggle-sm-height:                      14px;
@toggle-sm-min-width:                   26px;
@toggle-sm-handle-gap:                  2px;
@toggle-sm-inner-margin:                6px;
@toggle-sm-inner-font-size:             (@font-size-small - 2);

@toggle-lg-height:                      30px;
@toggle-lg-min-width:                   55px;
@toggle-lg-handle-gap:                  4px;
@toggle-lg-inner-margin:                @padding-x-sm;
@toggle-lg-inner-font-size:             @font-size-base;

// Navs

@nav-item-transition:             color 0.3s linear, background-color 0.3s linear;

// Tab
@nav-tab-bar-width:               1px;

// Subtle
@nav-subtle-bar-width:            2px;

// Divider
@nav-divider-margin-vertical:     6px;

// Navbar

@nav-bar-padding-vertical:        18px; // @deprecated use @navbar-item-padding-y instead
@nav-bar-padding-horizontal:      16px; // @deprecated use @navbar-item-padding-x instead
@nav-bar-height:                  (@nav-bar-padding-vertical * 2 + @line-height-computed); // @deprecated use @navbar-height instead

@navbar-item-padding-y:           18px;
@navbar-item-padding-x:           16px;
@navbar-height:                   (@navbar-item-padding-y * 2 + @line-height-computed);

// Sidenav

@sidenav-item-caret-size:               16px;
@sidenav-padding-vertical:              15px;
@sidenav-children-padding-vertical:     11px;
@sidenav-padding-horizontal:            20px;
@sidenav-collapse-in-width:             100%;
@sidenav-default-width:                 56px;
@sidenav-compact-width:                 @sidenav-default-width; // TODO Replace sidenav-default-width
@sidenav-item-height:                   (@sidenav-padding-vertical * 2 + @line-height-computed);
@sidenav-menu-max-height:               (@sidenav-item-height * 40);
@sidenav-menu-animation-time:           1.5s;
@sidenav-footer-height:                 @sidenav-item-height; // Footer is same height as a sidenav item
@sidenav-level1-item-font-size:         @font-size-large;
@sidenav-level1-item-line-height:       unit((@line-height-computed / @font-size-large));
@sidenav-icon-spacing:                  20px;
@sidenav-icon-width:                    @sidenav-level1-item-font-size;
@sidenav-dropdown-toggle-caret-width:   20px;
@sidenav-collapse-transition-config:     0.2s ease-in;

@sidenav-level-retract:                 9px;
@sidenav-level2-retract:                (@sidenav-padding-horizontal + @sidenav-icon-width + @sidenav-icon-spacing);
@sidenav-level3-retract:                (@sidenav-level2-retract + @sidenav-level-retract); //60 px
@sidenav-level4-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 2);
@sidenav-level5-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 3);
@sidenav-level6-retract:                (@sidenav-level2-retract + @sidenav-level-retract * 4);

// Steps

@steps-icon-diameter:                   30px;
@steps-icon-size-default-font-size:     12px;
@steps-icon-spacing:                    10px;
@steps-item-spacing:                    10px;

// This space place the steps-icon
@steps-icon-space-width:                (@steps-icon-diameter + @steps-icon-spacing);
@steps-icon-size:                       @font-size-large;
@steps-icon-line-height:                unit(((@steps-icon-diameter - 2px) / @font-size-large));
@steps-title-font-size:                 @font-size-large;
@steps-title-line-height:               unit((@steps-icon-diameter / @font-size-large));
@steps-description-margin-top:          12px;

// Small
@small-steps-icon-diameter:             24px;
@small-steps-icon-space-width:          (@small-steps-icon-diameter + @steps-icon-spacing);
@small-steps-icon-line-height:          unit(((@small-steps-icon-diameter - 2px) / @font-size-base));
@small-steps-title-line-height:         unit((@small-steps-icon-diameter / @font-size-base));
@small-steps-icon-size:                 @font-size-base;
@small-steps-description-font-size:     @font-size-small;
@small-steps-description-line-height:   @line-height-small;
@small-steps-description-margin-top:    12px;

// Checkbox

@checkbox-width-height:           16px;
@checkbox-sense-width:            10px;
@checkbox-border-radius:          3px;
@checkbox-bg:                     transparent;

// Radio

@radio-width-height:              16px;
@radio-inner-width-height:        6px;
@radio-sense-width:               10px;
@radio-border-radius:             50%;
@radio-bg:                        transparent;
@radio-label-padding-horizontal:  10px;

// Tooltips

@tooltip-max-width:             250px;
@tooltip-opacity:               1;
@tooltip-border-radius:         4px;
@tooltip-arrow-width:           6px;
@tooltip-translate-distance:    2px;

// Distance between Arrow and frame.
@tooltip-arrow-gap-lg:          10px;
@tooltip-arrow-gap-sm:          4px;


// Popovers

@popover-max-width:           250px;
@popover-border-radius:       4px;
@popover-translate-distance:  2px;

@popover-arrow-width:         6px;
@popover-arrow-outer-width:   @popover-arrow-width;
// Distance between Arrow and frame.
@popover-arrow-gap:           4px;

// Modals

// Padding applied to the modal content
@modal-content-padding:         20px;
// Margin of modal header and body
@modal-body-margin:             20px;
@modal-border-radius:           @border-radius;

@modal-title-font-size:         @font-size-large;
@modal-title-color:             var(--rs-text-primary);
@modal-title-line-height:       @line-height-large;

@modal-close-btn-size:          @font-size-small;
@modal-close-btn-line-height:   @line-height-small;
@modal-close-btn-color:         var(--rs-text-secondary);
@modal-close-btn-hover-color:   var(--rs-text-primary);

// Modal sizes
@modal-lg: 968px;
@modal-md: 800px;
@modal-sm: 600px;
@modal-xs: 400px;

@modal-full-size-margin: 60px;

// Drawer

// Padding applied to the drawer content
@drawer-content-spacing: 20px;

// Margin of modal header and body
@drawer-body-margin: 30px;

@drawer-close-btn-size:         @font-size-small;
@drawer-close-btn-line-height:  @line-height-small;
@drawer-close-btn-color:        var(--rs-text-primary);

// Drawer sizes
@drawer-horizontal-lg: @modal-lg;
@drawer-horizontal-md: @modal-md;
@drawer-horizontal-sm: @modal-sm;
@drawer-horizontal-xs: @modal-xs;

@drawer-vertical-lg: 568px;
@drawer-vertical-md: 480px;
@drawer-vertical-sm: 400px;
@drawer-vertical-xs: 290px;

// Modal full size margin
@drawer-full-size-margin: 60px;

// Message
// Define alert colors, border radius, and padding.

@message-padding:             20px;
@message-border-radius:       @border-radius;

@message-title-size:          @font-size-base;
@message-link-font-weight:    bold;

@message-icon-size:           @font-size-small;
@message-icon-large-size:     24px;
@message-icon-margin-right:   10px;

@message-close-btn-size:      12px;
@message-close-btn-padding:   8px 8px 0;

// toaster

@toast-ns:          ~'rs-toast';
@toast-box-shadow:  @box-shadow;
@toast-spacing:     24px;

// Notification

@notify-padding:                20px;
@notify-border-radius:          @border-radius;
@notify-box-shadow:             @box-shadow;
@notify-max-width:              400px;
@notify-close-btn-font-size:    12px;
@notify-close-btn-margin:       8px;
@notify-title-font-size:        @font-size-large;
@notify-title-icon-size:        24px;
@notify-title-icon-margin:      10px;
@notify-title-description-gap:  8px;

// Loaders

@loader-default-diameter:           @loader-sm-diameter;
@loader-default-content-font-size:  @font-size-small;

@loader-lg-diameter:                64px;
@loader-lg-content-font-size:       @font-size-large;

@loader-md-diameter:                36px;
@loader-md-content-font-size:       @font-size-base;

@loader-sm-diameter:                18px;
@loader-sm-content-font-size:       @font-size-base;

@loader-xs-diameter:                16px;
@loader-xs-content-font-size:       @font-size-small;

// spinner
@loader-spin-ring-width:            3px;

// spin animation time
@loader-duration-fast:              0.4s;
@loader-duration-normal:            0.6s;
@loader-duration-slow:              0.8s;

// spacing
@loader-content-spin-spacing-horizontal:    12px;
@loader-content-spin-spacing-vertical:      10px;
@loader-content-spin-spacing-horizontal-xs: 10px;

// Progress

@progress-line-padding-vertical:        8px;
@progress-line-padding-horizontal:      12px;
@progress-font-size:                    @font-size-large;
@progress-bar-height:                   10px;
@progress-element-gap:                  12px;
@progress-bg-transition:                0.2s ease-in-out;

// Uploader

@uploader-file-list-margin-top:             10px;
@uploader-file-item-icon-font-size:         22px;
@uploader-file-item-icon-margin:            12px;
@uploader-file-item-icon-margin-plus:       22px;
@uploader-base-padding:                     8px;
@uploader-picture-side-length:              66px;
@uploader-picture-item-gap:                 10px;
@uploader-picture-remove-button-radius:     24px;
@uploader-picture-text-preview-side-length: 50px;

// Panel

@panel-padding:                 20px;
@panel-header-font-size:        16px;
@panel-split-line-color:        @dropdown-divider-bg;
@panel-accodion-transition:     0.3s linear;
@panel-box-shadow:              @box-shadow;

// Timeline

@time-line-item-content-margin-left:      12px;
@time-line-dot-side-length:               10px;
@time-line-item-padding-left:             (@time-line-item-content-margin-left + @time-line-dot-side-length);
@time-line-tail-width:                    2px;
@time-line-item-content-padding-bottom:   18px;
@time-line-dot-center-gap:                ((@line-height-computed - @time-line-dot-side-length) / 2);
@time-line-content-side-offset:           (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
@time-line-alternate-time-offset:         (@time-line-dot-side-length / 2 + @time-line-item-content-margin-left);
@time-line-tail-min-height:               (@line-height-computed + @time-line-item-content-padding-bottom); // 20 + 18 = 38

// Tag

@tag-gap: 10px;

// List

@list-border-width: 1px;

// Divider

@divider-horizontal-margin:           24px;
@divider-with-text-horizontal-margin: 30px;
@divider-text-space:                  12px;
@divider-vertical-margin:             12px;
@divider-border-color:                var(--rs-border-primary); // TODO: Deprecate, use --rs-divider-border

// Pickers

// prefixs
@picker-prefix:                     ~'rs-picker';
@select-picker-prefix:              ~'picker-select';
@check-picker-prefix:               ~'picker-check';
@calendar-picker-prefix:            ~'calendar';
@cascader-picker-prefix:            ~'picker-cascader';
@cascader-multi-picker-prefix:      ~'picker-multi-cascader';
@tree-picker-prefix:                ~'tree';
@check-tree-picker-prefix:          ~'check-tree';
@date-range-picker-prefix:          ~'picker-daterange';
@date-picker-prefix:                ~'picker-date';
@input-picker-prefix:               ~'picker-input';
@multi-input-picker-prefix:         ~'picker-tag';
// Calendar Picker Name Space
@clpns:                             ~'rs-@{calendar-picker-prefix}';
// Check picker name space
@ckpns:                             ~'rs-@{check-picker-prefix}';

@picker-none-padding:               6px 12px 12px;
@picker-transition:                 @input-transition;
@picker-shadow:                     var(--rs-dropdown-shadow);
@picker-value-count-border-radius:  10px;
@picker-value-count-padding:        8px;
@picker-value-count-margin:         4px;

// Picker content width
@picker-content-min-width:            200px;
@picker-search-bar-icon-width:        @font-size-base;
@picker-default-toggle-border-width:  1px;
@picker-toggle-clean-width:           12px;
@picker-toggle-clean-right:           30px;

@picker-menu-padding:                     12px;

@picker-item-content-padding-vertical:    8px;
@picker-item-content-padding-horizontal:  @picker-menu-padding;
@picker-item-transition:                  color 0.3s linear, background-color 0.3s linear;

// group title
@picker-group-children-padding-left:    26px;
@picker-group-select-menu-gap:          6px;
@picker-group-select-menu-lin-color:    @dropdown-divider-bg;

// Picker
@picker-select-menu-item-selected-font-weight: bold;

// Check Picker

@picker-check-checkbox-gap:               10px;
@picker-children-check-item-padding-left: 14px;
@picker-check-item-content-padding-left:  @picker-item-content-padding-horizontal+@checkbox-width-height+ @picker-check-checkbox-gap;

// Tree Picker

@picker-tree-padding:                 12px;
@picker-tree-node-padding-vertical:   @padding-y;
@picker-tree-node-padding-horizontal: @padding-x;
@picker-tree-node-font-size:          14px;
@picker-tree-node-line-height:        22px;
@picker-tree-node-height:             (@line-height-computed + @picker-tree-node-padding-vertical * 2);
@picker-tree-arrow-down-width:        8px;
@picker-tree-arrow-down-gap:          8px;

// Calendar

@calendar-header-width:                           280px;
@calendar-picker-padding:                         12px;
@calendar-picker-view-padding-top:                4px;
@calendar-header-title-margin:                    4px;
@calendar-meridian-border-width:                  1px;
@calendar-table-cell-padding:                     1px;
@calendar-table-cell-content-font-size:           @font-size-base;
@calendar-table-cell-content-line-height:         @line-height-base;
@calendar-table-cell-content-padding:             5px;
@calendar-table-cell-content-today-border-width:  1px;
@calendar-month-dropdown-row-border-color:        @divider-border-color;
@calendar-dropdown-top:                           44px; // @calendar-picker-padding + content-height + gap
@calendar-month-dropdown-border:                  @divider-border-color;
@calendar-in-menu-content-side-length:            30px;
@calendar-panel-cell-height:                      100px;
@calendar-panel-compact-cell-height:              50px;
@calendar-panel-border-radius:                    6px;
@calendar-panel-today-active-side-length:         @line-height-computed;
@calendar-toolbar-border-color:                   @divider-border-color;

// DatePicker
@datepicker-calendar-padding-y:     12px;
@datepicker-calendar-padding-x:     12px;

@datepicker-calendar-cell-gap-y:    2px;
@datepicker-calendar-cell-gap-x:    2px;

// DateRange Picker

@date-range-picker-header-padding-horizontal:     12px;
@date-range-picker-header-padding-vertical:       8px;
@date-range-picker-header-font-size:              @font-size-base;
@date-range-picker-header-line-height:            @line-height-base;
@date-range-picker-calendar-default-width:        255px;

// Input Picker

@input-picker-toggle-height:            (@line-height-computed + @padding-y * 2); // 20px + 8px*2 = 36px  the same with md button
@input-picker-toggle-content-height:    (@input-picker-toggle-height - (@picker-default-toggle-border-width * 2));

// TagPicker

@tag-picker-toggle-content-height:          @input-height-extra-small;
@tag-picker-content-padding-vertical-all:   (@input-picker-toggle-content-height - @tag-picker-toggle-content-height);
@tag-picker-content-padding-vertical:       (@tag-picker-content-padding-vertical-all / 2); // (34 -24)/2
@tag-picker-content-padding-horizontal:     6px;

// Cascader
@cascader-search-panel-max-height:          300px;
@cascader-row-content-padding-horizontal:   @picker-item-content-padding-horizontal;

// Slider

@slider-bar-side-length:              6px;
@slider-handle-diameter:              12px;
@slider-handle-border-width:          2px;
@slider-handle-dragging-box-shadow:   none;
@slider-calibration-diameter:         8px;
@slider-calibration-border-width:     2px;
@slider-mark-margin-top:              9px;
@slider-handle-transition:            0.3s ease-in-out;

// Breadcrumbs

@breadcrumb-font-size:        @font-size-small;
@breadcrumb-separator-margin: 4px;

// Carousel

@carousel-animation-duration:       0.3s;
@carousel-toolbar-wrapper-margin:   17px; // @carousel-handler-margin + @carousel-handler-wrapper-margin = 20px
@carousel-handler-transition:       background @carousel-animation-duration linear;
@carousel-handler-margin:           3px;
@carousel-handler-sense-width:      @carousel-handler-margin;
@carousel-dot-wrapper-side-length:  1.2vw; // 1.2% of the screen width.
@carousel-dot-side-length:          10px;
@carousel-bar-width:                18px;
@carousel-bar-height:               4px;
@carousel-bar-active-width:         28px;

// Rate

@rate-xs-font-size: 18px;
@rate-sm-font-size: 24px;
@rate-md-font-size: 30px;
@rate-lg-font-size: 36px;

//-- Z-index master list
// Keep this section at the bottom of this file for easier lookup
//
// Warning: Avoid customizing these values. They're used for a bird's eye view
// of components dependent on the z-axis and are designed to all work together.
//
// Note: These variables are not generated into the Customizer.
//

@zindex-date-range-picker-calendar-dropdown:  1;
@zindex-date-range-picker-table-cell-content: 1;
@zindex-badge-content:                        1;
@zindex-input:                                2;
@zindex-input-group-icon:                     4;
@zindex-dropdown:                             5;
@zindex-picker-toggle:                        5; // The same with zindex-dropdown
@zindex-picker-input:                         (@zindex-picker-toggle + 1); // Greater than picker toggle
@zindex-picker-menu:                          (@zindex-picker-toggle + 2); // Greater than picker toggle and input
@zindex-dropdown-a:                           10;
@zindex-list-helper:                          99;
@zindex-navbar:                               1000;
@zindex-navbar-fixed:                         1030;
@zindex-modal:                                1050;
@zindex-drawer:                               1050;
@zindex-drawer-background:                    @zindex-drawer;
@zindex-popover:                              1060;
@zindex-tooltip:                              1070;
@zindex-notification:                         1080;

//#==== Uploader
@zindex-uploader-picture-preview:         1;
@zindex-uploader-picture-loading-wrapper: 2;
@zindex-uploader-picture-error-wrapper:   3;
@zindex-uploader-picture-remove-button:   4;

//#==== Form
@zindex-form-error-message: 5;

//#==== Table
@zindex-table-body-row-wrapper:       0;
@zindex-table-header-row-wrapper:     2;
@zindex-table-column-resize-spanner:  3;
@zindex-table-cell-group-fixed:       4;
@zindex-table-row-cell-group-shadow:  5;
@zindex-table-mouse-area:             6;

//#=== Rate
@zindex-rate-character-before: 1;