// ======= COLOR START ====== //
// Breadcrumb start
@breadcrumb-base-color: @text-color-secondary;
// Breadcrumb end

@fill-colors: {
  gray-200: @color-gray-200;
  brand-100: @color-primary-100;
  white: @color-white;
};

@main-color: {
  primary: @primary-color;
  secondary: @active-color;
  success: @success-color;
  warning: @warning-color;
  error: @error-color;
  active: @active-color;
  link: @active-color;
};
// ======= COLOR END ====== //

// Typography variables
// Start

@font-size-base: 16px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 14px;
@font-weight-type: regular, medium, semibold, bold;
@typography-font-base: 400;
@typography-font-regular: @typography-font-base;
@typography-font-medium: 500;
@typography-font-semibold: 600;
@typography-font-bold: 700;
@typography-title-margin-top: 0px;
@typography-title-margin-bottom: 0px;
// @line-height-base: 24px;

// Heading 6 sizes
@heading-1-size: ceil(@font-size-base * 3.5); // 56
@heading-2-size: ceil(@font-size-base * 3); // 48
@heading-3-size: ceil(@font-size-base * 2.5); // 40
@heading-4-size: ceil(@font-size-base * 2.25); // 36
@heading-5-size: ceil(@font-size-base * 2); // 32
@heading-6-size: ceil(@font-size-base * 2); // 32
// Title 6 sizes
@title-1-size: ceil(@font-size-base * 1.5); // 24
@title-2-size: ceil(@font-size-base * 1.5); // 24
@title-3-size: ceil(@font-size-base * 1.25); // 20
@title-4-size: ceil(@font-size-base * 1.25); // 20
@title-5-size: ceil(@font-size-base * 1.125); // 18
@title-6-size: ceil(@font-size-base * 1.125); // 18
// Subtitle 3 sizes
@subtitle-1-size: ceil(@font-size-base * 1); // 16
@subtitle-2-size: ceil(@font-size-base * 1); // 16
@subtitle-3-size: ceil(@font-size-base * 1); // 16
@subtitle-4-size: ceil(@font-size-base * 1); // 16
@subtitle-5-size: ceil(@font-size-base * 1); // 16
@subtitle-6-size: ceil(@font-size-base * 1); // 16
// Caption 2 sizes
@caption-1-size: ceil(@font-size-base * 0.875); // 14
@caption-2-size: ceil(@font-size-base * 0.875); // 14
// Note 4 sizes
@note-1-size: ceil(@font-size-base * 0.75); // 12
@note-2-size: ceil(@font-size-base * 0.75); // 12
@note-3-size: ceil(@font-size-base * 0.625); // 10
@note-4-size: ceil(@font-size-base * 0.625); // 10
// Typography size for mobile start
@mobile-heading-1-size: ceil(@font-size-base * 2.25); // 36
@mobile-heading-2-size: ceil(@font-size-base * 2); // 32
@mobile-heading-3-size: ceil(@font-size-base * 1.75); // 28
@mobile-heading-4-size: ceil(@font-size-base * 1.5); // 24
@mobile-heading-5-size: ceil(@font-size-base * 1.5); // 24
@mobile-heading-6-size: ceil(@font-size-base * 1.5); // 24

@mobile-title-1-size: ceil(@font-size-base * 1.25); // 20
@mobile-title-2-size: ceil(@font-size-base * 1.25); // 20
@mobile-title-3-size: ceil(@font-size-base * 1.25); // 20
@mobile-title-4-size: ceil(@font-size-base * 1.25); // 20
@mobile-title-5-size: ceil(@font-size-base * 1.125); // 18
@mobile-title-6-size: ceil(@font-size-base * 1.125); // 18

@mobile-subtitle-1-size: ceil(@font-size-base * 1.125); // 18
@mobile-subtitle-2-size: ceil(@font-size-base * 1.125); // 18
@mobile-subtitle-3-size: ceil(@font-size-base * 1.125); // 18
@mobile-subtitle-4-size: ceil(@font-size-base * 1); // 16
@mobile-subtitle-5-size: ceil(@font-size-base * 1); // 16
@mobile-subtitle-6-size: ceil(@font-size-base * 1); // 16

@mobile-caption-1-size: ceil(@font-size-base * 0.875); // 14
@mobile-caption-2-size: ceil(@font-size-base * 0.875); // 14

@mobile-note-1-size: ceil(@font-size-base * 0.875); // 14
@mobile-note-2-size: ceil(@font-size-base * 0.875); // 14
@mobile-note-3-size: ceil(@font-size-base * 0.75); // 12
@mobile-note-4-size: ceil(@font-size-base * 0.625); // 10
// Typography size for mobile end

// Line height size start
@regular-line-height: 24;

@heading-1-line-height: 80;
@heading-2-line-height: 64;
@heading-3-line-height: 56;
@heading-4-line-height: 48;
@heading-5-line-height: 40;
@heading-6-line-height: 40;

@title-line-height: 32;
@title-1-line-height: 32;
@title-2-line-height: 32;
@title-3-line-height: 28;
@title-4-line-height: 28;
@title-5-line-height: 24;
@title-6-line-height: 24;

@subtitle-line-height: 24;
@caption-line-height: 20;
@note-line-height: 20;

// Mobile line height
// Start
@mobile-heading-1-line-height: 48;
@mobile-heading-2-line-height: 40;
@mobile-heading-3-line-height: 36;
@mobile-heading-4-line-height: 32;
@mobile-heading-5-line-height: 32;
@mobile-heading-6-line-height: 32;

@mobile-title-line-height: 28;
@mobile-title-1-line-height: 28;
@mobile-title-2-line-height: 28;
@mobile-title-3-line-height: 28;
@mobile-title-4-line-height: 28;
@mobile-title-5-line-height: 24;
@mobile-title-6-line-height: 24;

@mobile-subtitle-line-height: 24;
@mobile-caption-line-height: 20;
@mobile-note-line-height: 20;
// Mobile line height end
// End
// Line height size

// Typography version 2 start
// Heading 6 sizes start
@heading-1-size-v2: ceil(@font-size-base * 3.5); // 56
@heading-2-size-v2: ceil(@font-size-base * 3); // 48
@heading-3-size-v2: ceil(@font-size-base * 2.5); // 40
@heading-4-size-v2: ceil(@font-size-base * 2); // 32
@heading-5-size-v2: ceil(@font-size-base * 1.5); // 24
@heading-6-size-v2: ceil(@font-size-base * 1.25); // 20
// Heading 6 sizes end

// TiTle 1 size start
@title-size-v2: ceil(@font-size-base * 1.125);
// TItle 1 size end

// Base 2 size start
@base-size-v2: @font-size-base;
@base-small-size-v2: ceil(@font-size-base * 0.875);
// Base 2 size end

// Caption size start
@caption-size-v2: ceil(@font-size-base * 0.75);
// Caption size end

// Tiny size start
@tiny-size-v2: ceil(@font-size-base * 0.625);
// Tiny size end

// Line height size start

// Title line height  start
@title-line-height-v2: 24;
// Title line height end

// Base 2 line height start
@base-line-height-v2: 24;
@base-small-line-height-v2: 20;
// Base 2 line height end

// Caption line height start
@caption-line-height-v2: 16;
// Caption line height end

// Tiny line height start
@tiny-line-height-v2: 16;
// Tiny line height end

// Line height size end

@heading-1-line-height-v2: 80;
@heading-2-line-height-v2: 64;
@heading-3-line-height-v2: 56;
@heading-4-line-height-v2: 40;
@heading-5-line-height-v2: 32;
@heading-6-line-height-v2: 28;

// Typography size for mobile start
@mobile-heading-1-size-v2: ceil(@font-size-base * 2.5); // 40
@mobile-heading-2-size-v2: ceil(@font-size-base * 2.25); // 36
@mobile-heading-3-size-v2: ceil(@font-size-base * 2); // 32
@mobile-heading-4-size-v2: ceil(@font-size-base * 1.75); // 28
@mobile-heading-5-size-v2: ceil(@font-size-base * 1.5); // 24
@mobile-heading-6-size-v2: ceil(@font-size-base * 1.25); // 20
// Typography size for mobile end

// Typography line height for mobile start
@mobile-heading-1-line-height-v2: 48;
@mobile-heading-2-line-height-v2: 44;
@mobile-heading-3-line-height-v2: 40;
@mobile-heading-4-line-height-v2: 36;
@mobile-heading-5-line-height-v2: 32;
@mobile-heading-6-line-height-v2: 28;
// Typography line height for mobile end

// Line height end

// Typography version 2 end

// Text Color start
@text-color: @color-gray-800;
@text-color-secondary: @color-gray-500;
@border-radius-base: 8px;
//Text color end

@font-weight-lighter: lighter;
@font-weight-light: 300;
@font-weight-normal: 400;
@font-weight-bold: 700;
@font-weight-bolder: bolder;
// End
// Typography variables

// Grid breakpoints
// Start
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
// less-docs-start grid breakpoints variables
@grid-breakpoints: {
  xs: 0;
  sm: 576px;
  md: 768px;
  lg: 992px;
  xl: 1200px;
};

@breakpoint-xs: ~'screen and (min-width: 0)';
@breakpoint-sm: ~'screen and (min-width: 576px)';
@breakpoint-md: ~'screen and (min-width: 768px)';
@breakpoint-lg: ~'screen and (min-width: 992px)';
@breakpoint-xl: ~'screen and (min-width: 1200px)';

@breakpoint-mobile: ~'screen and (max-width: 767px)';
@breakpoint-desktop: @breakpoint-md;
// End
// Grid breakpoints

// Spacing
// Start
// Control the default styling of most Bootstrap elements by modifying these
// variables. Mostly focused on spacing.
// You can add more entries to the @spacers map, should you need more variation.
@spacer: 2px;
@spacing: {
  0: 0;
  2: @spacer;
  4: (@spacer * 2);
  5: 5px;
  6: 6px;
  8: (@spacer * 4);
  10: (@spacer * 5);
  12: (@spacer * 6);
  16: (@spacer * 8);
  20: (@spacer * 10);
  24: (@spacer * 12);
  28: (@spacer * 14);
  32: (@spacer * 16);
  36: (@spacer * 18);
  40: (@spacer * 20);
  44: (@spacer * 22);
  48: (@spacer * 24);
  64: (@spacer * 32);
  80: (@spacer * 40);
};
// End
// Spacing

// This variable affects the `.h-*` and `.w-*` classes.
@sizes: {
  5: 5%;
  10: 10%;
  25: 25%;
  50: 50%;
  70: 70%;
  75: 75%;
  80: 80%;
  100: 100%;
  auto: auto;
};

// Border
// Start
// Define common padding and border radius sizes and more.
@border-width: 1px;
@border-color: rgba(0, 0, 0, 0.08);
@radius-size: 4px;
@border-radius: {
  0: 0;
  s: @radius-size;
  m: (@radius-size * 2);
  l: (@radius-size * 4);
  xl: (@radius-size * 6);
  xll: (@radius-size * 7);
};
// End
// Border

// Shadows
// Start
// Define common box shadow.
@shadows-bottom: {
  s: 0 1px 2px rgba(16, 24, 40, 0.05);
  m: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
  l: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
  1xl: 0 12px 16px -4px rgba(16, 24, 40, 0.08), 0 4px 6px -2px rgba(16, 24, 40, 0.03);
  2xl: 0 20px 24px -4px rgba(16, 24, 40, 0.08), 0 8px 8px -4px rgba(16, 24, 40, 0.03);
  3xl: 0 24px 48px -12px rgba(16, 24, 40, 0.18);
  4xl: 0 32px 64px -12px rgba(16, 24, 40, 0.14);
};

@shadows-top: {
  s: 0 -1px 2px rgba(16, 24, 40, 0.05);
  m: 0 -1px 3px rgba(16, 24, 40, 0.1), 0 -1px 2px rgba(16, 24, 40, 0.06);
  l: 0 -4px 8px -2px rgba(16, 24, 40, 0.1), 0 -2px 4px -2px rgba(16, 24, 40, 0.06);
  1xl: 0 -12px 16px -4px rgba(16, 24, 40, 0.08), 0 -4px 6px -2px rgba(16, 24, 40, 0.03);
  2xl: 0 -20px 24px -4px rgba(16, 24, 40, 0.08), 0 -8px 8px -4px rgba(16, 24, 40, 0.03);
  3xl: 0 -24px 48px -12px rgba(16, 24, 40, 0.18);
  4xl: 0 -32px 64px -12px rgba(16, 24, 40, 0.14);
};

@shadows-left: {
  s: -1px 0 2px rgba(16, 24, 40, 0.05);
  m: -1px 0 3px rgba(16, 24, 40, 0.1), -1px 0 2px rgba(16, 24, 40, 0.06);
  l: -4px 0 8px -2px rgba(16, 24, 40, 0.1), -2px 0 4px -2px rgba(16, 24, 40, 0.06);
  1xl: -12px 0 16px -4px rgba(16, 24, 40, 0.08), -4px 0 6px -2px rgba(16, 24, 40, 0.03);
  2xl: -20px 0 24px -4px rgba(16, 24, 40, 0.08), -8px 0 8px -4px rgba(16, 24, 40, 0.03);
  3xl: -24px 0 48px -12px rgba(16, 24, 40, 0.18);
  4xl: -32px 0 64px -12px rgba(16, 24, 40, 0.14);
};

@shadows-right: {
  s: 1px 0 2px rgba(16, 24, 40, 0.05);
  m: 1px 0 3px rgba(16, 24, 40, 0.1), 1px 0 2px rgba(16, 24, 40, 0.06);
  l: 4px 0 8px -2px rgba(16, 24, 40, 0.1), 2px 0 4px -2px rgba(16, 24, 40, 0.06);
  1xl: 12px 0 16px -4px rgba(16, 24, 40, 0.08), 4px 0 6px -2px rgba(16, 24, 40, 0.03);
  2xl: 20px 0 24px -4px rgba(16, 24, 40, 0.08), 8px 0 8px -4px rgba(16, 24, 40, 0.03);
  3xl: 24px 0 48px -12px rgba(16, 24, 40, 0.18);
  4xl: 32px 0 64px -12px rgba(16, 24, 40, 0.14);
};

@shadows-center: {
  s: 0 0 3px rgba(16, 24, 40, 0.07);
  m: 0 0 4px rgba(16, 24, 40, 0.1), 0 0 3px rgba(16, 24, 40, 0.06);
  l: 0 0 12px 2px rgba(16, 24, 40, 0.08), 0 0 6px 2px rgba(16, 24, 40, 0.04);
  1xl: 0 0 28px 8px rgba(16, 24, 40, 0.08), 0 0 10px 4px rgba(16, 24, 40, 0.03);
  2xl: 0 0 44px 8px rgba(16, 24, 40, 0.08), 0 0 16px 4px rgba(16, 24, 40, 0.03);
  3xl: 0 0 72px 12px rgba(16, 24, 40, 0.18);
  4xl: 0 0 96px 12px rgba(16, 24, 40, 0.14);
};
// End
// Shadows

// Blur and Overlay
// Start
// Define common blur and overlay.
@blur-bg-color-light: rgba(255, 255, 255, 0.6);
@blur-bg-color-dark: rgba(52, 64, 84, 0.6);
@blurs: {
  sm: 4px;
  md: 8px;
  lg: 12px;
  xl: 20px;
};
@overlay-bg-color: fade(@color-base-black, 40%);
@overlay-opacity: 0.64;
@overlay-blur: 4px;
// End
// Blur and Overlay

// Z-index master list
//
// 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.
@zindex-sticky: 1020;
@zindex-fixed: 1030;
@zindex-popover: 1060;
@zindex-tooltip: 1070;
@zindex-header: 1000;

// Utilities
// Start
// Define used common
@displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex;
@overflows: auto, hidden;
@positions: static, relative, absolute, fixed, sticky;
@mobile-max-width: 767.99px;
// End
// Utilities

/* ===========================================================================================
============================================================================================== */

// Checkbox
// Start
@checkbox-bg-disabled: @primary-color-disabled;
// End
// Checkbox

// RadioButton
// Start
@radio-bg-disabled: @primary-color-disabled;
// End
// RadioButton

/* Override variables ant start */

// Base variable
// Start
@border-color-base: @color-gray-300;
@disabled-bg: @color-gray-100;
// End
// Base variable

// Button reduce
// Start
@btn-font-size: 14px;
@btn-font-size-lg: @btn-font-size + 2px;
@btn-font-size-sm: @btn-font-size;
@btn-font-weight: @typography-font-medium;
@btn-reduce-color: @primary-color;
@btn-reduce-bg: @color-primary-25;
@btn-reduce-border: @color-primary-25;
@reduce-color-hover: color(~`colorPalette('@{color-primary-25}', 5) `);
@reduce-color-active: color(~`colorPalette('@{color-primary-25}', 7) `);
@btn-min-width: 120px;
// End
// Button reduce

// Overlay
// Start
@modal-mask-bg: @overlay-bg-color;
@tooltip-bg: @overlay-bg-color;
@modal-mask-bg: @overlay-bg-color;
// End
// Overlay

// Common
// Start
@border-radius-base: 8px;
// End
// Common

// Padding
// Start
@padding-lg: 28px; // containers
@padding-md: 20px; // small containers and buttons
@padding-sm: 16px; // Form controls and items
@padding-xs: 12px; // small items
@padding-xss: 8px; // more small
// End
// Padding

// Margin
// Start
@margin-lg: 28px; // containers
@margin-md: 20px; // small containers and buttons
@margin-sm: 16px; // Form controls and items
@margin-xs: 12px; // small items
@margin-xss: 8px; // more small
// End
// Margin

// Height
// Start
@height-lg: 48px;
@height-base: 40px;
@height-sm: 32px;
// End
// Height

// Link
// Start
@link-color: @active-color;
@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
// End
// Link

// Input color
// Start
@input-bg-status-error: @color-error-25;
@input-border-status-error: @color-error-500;
@input-border-color: @color-gray-300;
@input-disabled-bg: @color-gray-100;
@input-padding-lg: 12px;
@input-padding-vertical-sm: 6px;
@input-padding-horizontal-sm: 12px;
@input-padding-vertical-base: 8px;
@input-padding-horizontal-base: 12px;
// End
// Input color

// Checkbox
// Start
@checkbox-border-width: 1.5px;
@checkbox-size: 20px;
// End
// Checkbox

// Radio
// Start
@radio-size: 20px;
@radio-border-width: 1.5px;
// End
// Radio

// Toggle
// Start
@switch-min-width: 40px;
@switch-height: 16px;
@switch-border-radius: 16px;
@switch-sm-height: 10px;
@switch-inner-margin-max: 24px;
@switch-inner-margin-min: 4px;
@switch-bg-disabled: @primary-color-disabled;
// End
// Toggle

//Chips
// Start
@tag-default-bg: @color-gray-100;
@tag-border-radius: 32px;
@tag-default-color: @color-gray-500;
@tag-line-height: 20px;
@tag-close-icon-size: 20px;
// End
//Chips

// Status
// Start
@status-default-bg: @color-gray-100;
@status-border-radius: 4px;
@status-default-color: @color-gray-500;
@status-line-height: 20px;
// End
//Status

// Breadcrumb
// Start
@breadcrumb-separator-margin: 4px;
@breadcrumb-base-color: @text-color-secondary;
@breadcrumb-last-item-color: @primary-color;
// End
// Breadcrumb

//Pagination
// Start
@pagination-item-size: 40px;
@pagination-item-border-radius: 4px;
@pagination-item-link-font-size: 24px;
// End
//Pagination

// Form Item
// Start
@form-text-error-size: @note-1-size;
@form-text-error-weight: @typography-font-regular;
@form-item-label-font-size: @caption-1-size;
@form-item-label-line-height: @caption-line-height * 1px;
@form-item-label-font-weight: @typography-font-medium;
// End
// Form Item

// Steps
// Start
@steps-icon-size: 20px;
@steps-icon-font-size: @caption-1-size;
@steps-title-line-height: @caption-line-height*1px;
@steps-small-icon-size: 20px;
@steps-icon-custom-font-size: @caption-1-size;
@steps-vertical-tail-width: 9px;
@steps-vertical-tail-width-sm: 9px;
@steps-width-base: 2px;
@steps-icon-line-height: 16px;
@process-tail-color: @color-gray-300;
@steps-icon-top: 0px;
// End
// Steps

// Message
// Start
@message-border-radius-base: 8px;
// End
// Message

// Collapse
// Start
@collapse-header-padding: 16px;
@collapse-header-height: 56px;
@collapse-header-padding-extra: 48px;
// End
// Collapse

// Drawer
// Start
@drawer-title-font-size: @title-4-size * 1px;
@drawer-title-line-height: @title-4-line-height * 1px;
@drawer-footer-padding-vertical: 16px;
@drawer-footer-padding-horizontal: 16px;
// End
// Drawer

// Modal confirm
// Start
@modal-confirm-title-font-size: @title-4-size;
@modal-confirm-icon-font-size: 48px;
@modal-confirm-body-padding: 24px;
@modal-header-padding-vertical: 24px;
@modal-header-padding-horizontal: 24px;
@modal-header-padding: @modal-header-padding-vertical 34px 0 @modal-header-padding-horizontal;
@modal-body-padding: 24px 24px 0 24px;
@modal-footer-padding-vertical: 24px;
@modal-footer-padding-horizontal: 24px;
// End
// Modal confirm

// Spin
// Start
@bg-back-drop-loading: rgba(0, 0, 0, 0.1);
// End
// Spin

// Bottom Sheet
// Start
@bottom-sheet-border-radius: 16px 16px 0px 0px;
@bottom-sheet-width-indicator: 32px;
@bottom-sheet-border-radius-indicator: 100px;
@bottom-sheet-height-indicator: 4px;
//End
//Bottom Sheet

// MenuList
// Start
@min-height-menu-list: 56px;
// End
// MenuList

// Tooltip
// Start
@tooltip-radius-base: 12px;
@tooltip-box-shadow: @shadows-center[3xl];
// End
// Tooltip

//Avatar
// Start
@avatar-size-base: 56px;
@avatar-font-size-base: 28px;
@avatar-bg: @color-gray-300;
@avatar-color: @color-base-white;
// End
//Avatar

//Process
//Start
@progress-remaining-color: @color-primary-25;
//End
//Process

//Table
//Start
@table-header-color: @color-gray-800;
@table-header-bg: @color-gray-50;
@table-border-color: @color-gray-200;
@table-header-padding-title: 0px 12px;
@table-height: 48px;
//End
//Table

//Slider
// Start
@slider-rail-background-color: @color-gray-100;
@slider-track-background-color: @primary-color;
@slider-track-background-color-hover: @primary-color;
@slider-handle-background-color: @primary-color;
@slider-track-background-color-hover: @primary-color;
@slider-handle-color-hover: @primary-color;
@slider-handle-color: @primary-color;
@slider-handle-color-focus: @primary-color;
@slider-rail-background-disabled-color: @color-gray-100;
@slider-disabled-color: @color-gray-300;
@slider-dot-disabled-color: @color-gray-300;
@slider-handle-shadow: 0px 0.5px 1px rgba(0, 0, 0, 0.12), 0px 1px 4px rgba(0, 0, 0, 0.24);
@slider-handle-margin-top: -8px;
@slider-handle-margin-left: -8px;
@slider-handle-size: 20px;
@slider-border: 4px;
@slider-margin: 8px;
// End
//Slider

//Date picker
// Start
@picker-panel-cell-height: 32px;
@picker-panel-cell-width: 52px;
@picker-panel-period-cell-width-wrap: 38px;
@picker-panel-period-cell-height: 45px;
@picker-panel-period-cell-width: 84px;
@picker-border-cell: 100%;
@picker-border-color: @color-gray-200;
@font-size-button-icon: 24px;
//Date picker
// End
// popover
//Start
@popover-min-height: 24px;
@popover-box-shadow: @shadows-center[3xl];
@popover-border-radius: 12px;
//End
//popover

//Carousel
//Start
@carousel-dot-width: 24px;
@carousel-dot-height: 4px;
@carousel-dot-radius: @carousel-dot-height;
//End
//Carousel

//Ratting
//Start
@rate-star-color: #ffbe1b;
@rate-star-size: 48px;
@rate-star-bg: @color-gray-200;
//End
//Rating

//Button
// Start
@btn-disable-color: @color-gray-400;
//End
//Button

// Header start
@layout-header-height: 72px;
@layout-header-padding: 0 32px;
@layout-header-background: @color-base-white;
// Header end

// Footer start
@layout-footer-background: @color-base-white;
@layout-footer-max-width: 1050px;
// Footer end

// Notify as Toast start
@notification-padding-vertical: 12px;
@notification-padding-horizontal: 12px;
@notification-bg-color: @color-gray-600;
// Notify as Toast end

// Divider start
@divider-color: @color-gray-100;
// Divider end

// Select box start
@select-single-item-height-lg: 48px;
// select box end

/* Override variables ant end */