/* init */
@blue-1: #0c63fa;
@blue-2: rgba(0, 104, 255, 65%);
@blue-3: rgba(89, 157, 255, 35%);
@blue-4: #005ade;
@blue-5: rgba(25, 128, 255, 10%);
@blue-6: #e8f2ff;
@primary-color: @blue-1;
@info-color: @blue-2;
@hover-color: @blue-4;
@heading-color: rgba(0, 0, 0, 65%);

@green-1: #57e39b;
@green-2: rgba(87, 227, 155, 65%);
@green-3: rgba(87, 227, 155, 35%);
@success-color: @green-1;

@yellow-1: #fedf40;
@yellow-2: rgba(254, 223, 64, 65%);
@yellow-3: rgba(254, 223, 64, 35%);
@warn-color: @yellow-1;

@warn-light-color: #f6b23d;
@warn-dark-color: #fa8c16;

@red-1: #eb354d;
@red-2: rgba(235, 53, 77, 65%);
@red-3: rgba(235, 53, 77, 35%);
@error-color: @red-1;
@danger-color: #c4233e;
@danger-color-hover: #f76070;
@red: @red-color03;

@gray-1: #d2d2d2;
@gray-2: #f2f2f2;
@gray-3: #fafafa;
@gray-4: #f0f1f7;
@gray-5: #f2f3f8;

@dark-text-title: rgba(0, 0, 0, 100%);
@dark-text-title-second: rgba(0, 0, 0, 85%);
@color-text-body: rgba(0, 0, 0, 65%);
@color-text-caption: rgba(0, 0, 0, 45%);
@color-text-disable: rgba(0, 0, 0, 25%);
@color-text-default: rgb(29, 33, 41);
@color-text-title: rgba(0, 0, 0, 85%);

@size-header-1: 38px;
@size-header-2: 30px;
@size-header-3: 24px;
@size-header-4: 16px;
@size-display: 20px;
@size-body: 14px;
@size-caption: 12px;

@dark-color01: #79879c;
@dark-color02: #6b7b95;
@dark-color03: #5f708a;
@dark-color04: #4a5974;
@dark-color05: #404e68;
@dark-color06: #36435c;
@dark-color07: #124191;
@dark-color08: #181d28;
@dark-color09: rgba(0, 0, 0, 30%);
@dark-color10: rgba(0, 0, 0, 50%);
@dark-color11: #241f20;
@dark-color12: #1d2129;
@dark-color13: #272e3b;

@light-color01: #f9fbfd;
@light-color02: #eff4f9;
@light-color03: #e3e9ef;
@light-color04: #d8dee5;
@light-color05: #d1d7df;
@light-color06: #ccd3db;
@light-color07: #c1c9d1;
@light-color08: #abb4be;

@green-color01: #c4e6d4;
@green-color02: #a2d8bb;
@green-color03: #1890ff;
@green-color04: #479e88;
@green-color05: #3b747a;

@blue-color01: #c7deef;
@blue-color02: #7eb8dc;
@blue-color03: #329dce;
@blue-color04: #3385b0;
@blue-color05: #326e93;

@red-color01: #fae7e5;
@red-color02: #ea8573;
@red-color03: #ca2621;
@red-color04: #ab2f29;
@red-color05: #8c3231;

@yellow-color01: #ffe1be;
@yellow-color02: #ffc781;
@yellow-color03: #f5a623;
@yellow-color04: #e0992c;
@yellow-color05: #8d663e;
@yellow-color06: #faad14;
@yellow-color07: #fff3dc;

@white: #fff;
@black: #000;
@blue-color: #124191;

/* specific color */
@dark: @dark-color07;
@dark-grey: @dark-color03;
@grey: @dark-color01;
@lightest: @light-color01;
@light: @light-color02;
@green: @green-color03;
@blue: @blue-color03;
@yellow: @yellow-color03;
@yellow-dark: @yellow-color04;
@red: @red-color03;
@red-dark: @red-color04;

@primary: @green-color03;
@sub: @blue-color03;
@warning: @yellow-color03;
@danger: @red-color03;

@title-color: @dark-text-title;
@second-title-color: @dark-color03;
@text-color: @primary-color;
@second-text-color: @dark-color01;
@third-text-color: @dark-color04;
@placeholder-color: @dark-color03;
@input-color: @dark-color07;
@input-bg: #f2f3f8;
@head-color: @dark-color07;

@title-color: @dark-text-title;
@second-title-color: @dark-color03;
@text-color: @primary-color;
@second-text-color: @dark-color01;
@third-text-color: @dark-color04;
@placeholder-color: @dark-color03;
@input-color: @dark-color07;
@input-bg: #f2f3f8;
@head-color: @dark-color07;

@background-color: #f0f2f5;
@icon-color: @dark-color07;
@text-color-secondary: rgba(134, 144, 156);

/*  border */
@border-color: @light-color06;
@border-hover-color: @dark-color01;
@second-border-color: @light-color02;
@border-focus-color: @green-color03;
@border-radius: 2px;
@border-color-base: rgba(0, 0, 0, 15%);

/*  input */
@input-border-color: @light-color08;
@input-hover-color: @dark-color01;
@input-focus-color: @green-color03;
@input-error-color: @red-color03;
@input-border-radius: @border-radius;

/*  background */
@bg-color: @light-color02;
@body-bg-color: @light-color02;
@th-bg-color: @light-color01;
@card-bg-color: @white;
@dashboard-bg-color: @gray-5;

/* button */
@btn-default-bg: @light-color02;
@btn-default-border: @light-color06;
@btn-default-hover-bg: @light-color03;
@btn-default-hover-border: @light-color07;
@btn-default-active-bg: @light-color08;
@btn-default-active-border: @light-color07;
@btn-primary-bg: @dark-color07;
@btn-primary-hover-bg: @dark-color07;
@btn-control-bg: @dark-color07;
@btn-control-hover-bg: @dark-color07;
@btn-danger-bg: @red-color03;
@btn-danger-active-bg: @red-color04;
@btn-flat-hover-bg: @light-color03;
@btn-flat-active-bg: @light-color04;
@text-hover: @dark-color07;

@table-expanded-row-bg: #fdfeff;
@table-row-hover-bg: #f5f8f9;
@select-option-hover-bg: #f5f7f8;

/*  shadow */
@base-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%);
@title-shadow: 0 2px 4px rgba(72, 91, 127, 40%);
@head-shadow: 0 4px 8px rgba(36, 46, 66, 10%);

@btn-text-shadow: 0 2px 4px rgba(36, 46, 66, 10%);
@btn-default-shadow: none;
@btn-default-active-shadow: inset 0 4px 8px 0 rgba(36, 46, 66, 12%);
@btn-primary-shadow: none;
@btn-primary-active-shadow: inset 0 4px 8px 0 rgba(35, 45, 65, 24%);
@btn-control-shadow: 0 8px 16px 0 rgba(35, 45, 65, 28%);
@btn-danger-shadow: 0 8px 16px 0 rgba(202, 38, 33, 28%);

@card-shadow: 0 4px 8px 0 rgba(36, 46, 66, 6%);
@card-hover-shadow: 0 6px 16px 0 rgba(33, 43, 54, 20%);
@card-selector-shadow: 0 8px 16px 0 rgba(36, 46, 66, 8%);

@tr-shadow: inset 0 2px 4px 0 rgba(72, 91, 127, 20%);
@box-shadow-base: 0 0 8px 0 rgba(0, 0, 0, 15%);

/*  font */
@font-family: system-ui, -apple-system, blinkmacsystemfont, segoe ui, roboto,
  'PingFang SC', 'Microsoft YaHei', 'Alibaba PuHuiTi', 'Dosis', 'Helvetica Neue',
  helvetica, arial, sans-serif;
@font-family-id: @font-family;
@font-family-code: 'PT Mono', monaco, menlo, consolas, 'Courier New', monospace;
@size-small: 12px;
@size-normal: 14px;
@size-medium: 16px;
@size-mid-large: 24px;
@size-large: 28px;
@body-size: @size-small;

@font-bold: 600;
@font-normal: 400;
@font-thin: 300;

/*  animation */
@trans-speed: 0.3s;

/*  size */
@nav-width: 260px;
@narrow-nav-width: 240px;
@header-height: 50px;
@body-padding-left: 16px;
@body-padding-right: 16px;
@body-padding: 16px;
@breadcrumb-height: 50px;
@footer-height: 75px;
@menu-width: @sider-width;

@icon-status-info: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMjE5MUNBIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4ek05IDUuNjgxYTEuMzEyIDEuMzEyIDAgMSAwIDAtMi42MjMgMS4zMTIgMS4zMTIgMCAwIDAgMCAyLjYyM3pNOCA3LjUxNlYxNWgyVjcuNTE2SDh6Ii8+PC9nPjwvc3ZnPg==');
@icon-status-success: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjMDBBQTcyIiBkPSJNOSAxOEE5IDkgMCAxIDEgOSAwYTkgOSAwIDAgMSAwIDE4em0tMi4xMTUtNi45NEw0LjQ5NCA4LjY3bC0xLjQxNSAxLjQxNCAzLjgwNiAzLjgwNiA3LjU0OC03LjU0OC0xLjQxNC0xLjQxNC02LjEzNCA2LjEzNHoiLz48L2c+PC9zdmc+');
@icon-status-warning: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTItM2gyNHYyNEgtMnoiLz48cGF0aCBmaWxsPSIjRjVDNDE0IiBkPSJNMTAgMGwxMCAxNy4zMkgwTDEwIDB6bTAgMTYuMDAxYTEgMSAwIDEgMCAwLTIgMSAxIDAgMCAwIDAgMnpNOSA2bC4yIDdoMS42bC4yLTdIOXoiLz48L2c+PC9zdmc+');
@icon-status-error: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCI+PGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cGF0aCBkPSJNLTMtM2gyNHYyNEgtM3oiLz48cGF0aCBmaWxsPSIjQ0EyNjIxIiBkPSJNMTIuNzI4IDBMMTggNS4yNzJ2Ny40NTZMMTIuNzI4IDE4SDUuMjcyTDAgMTIuNzI4VjUuMjcyTDUuMjcyIDBoNy40NTZ6bS0yLjMxNCA5bDMuNDY2LTMuNDY2LTEuNDE0LTEuNDE0TDkgNy41ODYgNS41MzYgNC4xMjIgNC4xMjIgNS41MzYgNy41ODYgOSA0LjEyIDEyLjQ2NmwxLjQxNCAxLjQxNEw5IDEwLjQxNGwzLjQ2NCAzLjQ2NCAxLjQxNC0xLjQxNEwxMC40MTQgOXoiLz48cGF0aCBmaWxsPSIjRkZGIiBkPSJNMTAuNDE0IDlsMy40NjQgMy40NjQtMS40MTQgMS40MTRMOSAxMC40MTQgNS41MzQgMTMuODggNC4xMiAxMi40NjYgNy41ODYgOSA0LjEyMiA1LjUzNmwxLjQxNC0xLjQxNEw5IDcuNTg2bDMuNDY2LTMuNDY2IDEuNDE0IDEuNDE0eiIvPjwvZz48L3N2Zz4=');

/*  sider */
@sider-background: #fff;
@sider-open-background: #222121;
@sider-collapsed-width: 50px;
@sider-menu-padding: 0;
@sider-menu-padding-top: 0;
@sider-border-right: 1px solid #e5e6eb;
@sider-width: 192px;
@sider-menu-item-selected-background: #f6f7fb;
@sider-sub-menu-item-margin-top: 0;
@sider-sub-menu-item-margin-bottom: 0;
@sider-sub-menu-item-selected-background: #f6f7fb;
@sider-sub-menu-item-hover-background: #f6f7fb;
@sider-menu-item-selected-border-radius: 0;
@sider-menu-item-selected-text-color: #1d2129;
@sider-menu-item-hover-dot-color: #c9cdd4;
@sider-menu-item-selected-dot-color: @primary-color;
@sider-menu-item-selected-after-border-right: 0;
@sider-sub-menu-background: #fff;
@sider-sub-menu-item-padding-left: 0;
@sider-sub-menu-item-dot-color: #c9cdd4;
@sider-trigger-background-color: rgba(0, 0, 0, 15%);
@sider-menu-title-font-size: 14px;
@sider-sub-menu-title-font-size: 13px;
@sider-sub-menu-title-color: #4e5969;

@box-shadow01: 0 2px 10px 0 rgba(1, 32, 87, 50%);

//layout
@layout-header-color: @dark-color12;
@layout-text-color: @white;
@layout-link-color: @white;
@layout-header-menu-background-color: @layout-header-color;
@layout-header-menu-text-color: @white;
@layout-header-menu-text-hover-color: @white;
@layout-header-menu-search-background: #282e39;
@layout-header-menu-search-text-color: @white;
@layout-header-menu-search-icon: #86909c;
@layout-header-menu-region-hover: #e8f2ff;
@layout-header-color-hover: @dark-color09;
@layout-selected-color: #111418;
@layout-header-logo-wrapper-width: 141px;
@layout-header-logo-image-height: 20px;

.layout-header-menu-search-border {
  border: none;
}

//products
@products-icon-background: #272e3b;
@products-icon-hover-background: @primary-color;
@products-header-title-color: #fff;
@products-title-color: #c9cdd4;
@products-sub-title-color: #86909c;
@products-icon-fill-color: #c9cdd4;
@products-drawer-background-1: #101319;
@products-drawer-hover-background-1: #101319;
@products-drawer-divider-color-1: #101319;
@products-drawer-sub-title-hover-background: hsla(0deg, 0%, 100%, 10%);
@products-drawer-sub-title-hover-color: #fff;
@products-drawer-background-2: #1b1e24;
@products-drawer-header-title: #fff;
@products-drawer-left-icon: #0053ec;
@products-drawer-close-icon: #fff;
@products-drawer-search-icon: #838383;
@products-drawer-search-box-shadow: 0 0 0 2px rgba(12, 99, 250, 20%);
@products-drawer-search-placeholder-color: #86909c;
@products-drawer-search-border-color: #e9e9e9;
@products-drawer-search-border: none;
@products-drawer-search-hover-border-color: #e9e9e9;
@products-drawer-search-background: #1d2129;
@products-drawer-search-input-color: @white;
@products-column-width: @sider-width;

// breadcrumb
@breadcrumb-item-font-size: 14px;

// overview padding
@overview-padding: 16px;

// table
// @table-header-default-button-background: @background-color;
// @table-header-search-input-background: @background-color;
// @table-header-search-input-border-color: @primary-color;
@table-header-default-button-background: #fff;
@table-header-default-button-background-gray: #f6f7fb;
@table-header-default-button-border: #fff;
@table-header-default-button-color: #1d2129;
@table-header-search-input-background: #fff;
@table-header-search-input-border-color: #fff;
@table-header-search-input-font-size: 12px;
@table-header-danger-button-color: @error-color;
@table-header-disable-button-color: #c9cdd4;
@table-header-disable-button-border: #fff;
@table-header-disable-button-background: #fff;
@table-row-selected-background: #f1f2f6;
@table-checkbox-size: 12px;

//form
@form-item-label-color: @dark-color13;
@form-item-magic-input-wrapper-border-color: #d9d9d9;

//avatar-dropdown
@avatar-color: #1d2129;
@avatar-dropdown-background-color: @dark-color12;
@avatar-dropdown-text-color: @white;
@avatar-dropdown-button-color: @white;
@avatar-dropdown-property-text-color: #86909c;
@avatar-dropdown-copy-icon-color: @white;
@avatar-dropdown-hover-background-color: @dark-color09;
@avatar-dropdown-hover-text-color: @white;
@avatar-dropdown-button-disabled-color: #86909c;
@avatar-dropdown-divider-color: rgba(134, 144, 156, 20%);

.vertical-center {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* login */
@login-error: #a43a39;

@money-color: #f50;

:export {
  primaryColor: @primary-color;
  successColor: @success-color;
  warnColor: @warn-color;
  warnDarkColor: @warn-dark-color;
  warnLightColor: @warn-light-color;
  errorColor: @error-color;
  dangerColor: @danger-color;
  moneyColor: @money-color;
  infoColor: @info-color;
  headerHeight: @header-height;
  productsColumnWidth: @products-column-width;
}