// color palettes
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
@blue-6: #1890ff;
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);

@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
@purple-6: #722ed1;
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);

@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);

@green-1: color(~`colorPalette('@{green-6}', 1) `);
@green-2: color(~`colorPalette('@{green-6}', 2) `);
@green-3: color(~`colorPalette('@{green-6}', 3) `);
@green-4: color(~`colorPalette('@{green-6}', 4) `);
@green-5: color(~`colorPalette('@{green-6}', 5) `);
@green-6: #52c41a;
@green-7: color(~`colorPalette('@{green-6}', 7) `);
@green-8: color(~`colorPalette('@{green-6}', 8) `);
@green-9: color(~`colorPalette('@{green-6}', 9) `);
@green-10: color(~`colorPalette('@{green-6}', 10) `);

@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
@magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);

// alias of magenta
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
@pink-6: #eb2f96;
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);

@red-1: color(~`colorPalette('@{red-6}', 1) `);
@red-2: color(~`colorPalette('@{red-6}', 2) `);
@red-3: color(~`colorPalette('@{red-6}', 3) `);
@red-4: color(~`colorPalette('@{red-6}', 4) `);
@red-5: color(~`colorPalette('@{red-6}', 5) `);
@red-6: #f5222d;
@red-7: color(~`colorPalette('@{red-6}', 7) `);
@red-8: color(~`colorPalette('@{red-6}', 8) `);
@red-9: color(~`colorPalette('@{red-6}', 9) `);
@red-10: color(~`colorPalette('@{red-6}', 10) `);

@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
@orange-6: #fa8c16;
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);

@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);

@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
@volcano-6: #fa541c;
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);

@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
@geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);

@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
@lime-6: #a0d911;
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);

@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
@gold-6: #faad14;
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
@gold-10: color(~`colorPalette('@{gold-6}', 10) `);

@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
purple;

// The prefix to use on all css classes from ant.
@ant-prefix: ant;

// An override for the html selector for theme prefixes
@html-selector: html;

// -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
@success-color: @green-6;
@processing-color: @blue-6;
@error-color: @red-6;
@highlight-color: @red-6;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(
  ~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused

// Base Scaffolding Variables
// ---

// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: fade(@black, 65%);
@text-color-secondary: fade(@black, 45%);
@text-color-warning: @gold-7;
@text-color-danger: @red-7;
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@line-height-base: 1.5;
@border-radius-base: 4px;
@border-radius-sm: 2px;

// 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

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: @primary-1;

// ICONFONT
@iconfont-css-prefix: anticon;

// LINK
@link-color: @primary-color;
@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
@link-decoration: none;
@link-hover-decoration: none;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border

// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: @primary-color;

@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color

// Disabled states
@disabled-color: fade(#000, 25%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(#fff, 35%);

// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-1-down;
@shadow-1-up: 0 -2px 8px @shadow-color;
@shadow-1-down: 0 2px 8px @shadow-color;
@shadow-1-left: -2px 0 8px @shadow-color;
@shadow-1-right: 2px 0 8px @shadow-color;
@shadow-2: 0 4px 12px @shadow-color;

// Buttons
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@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-primary-color: #fff;
@btn-primary-bg: @primary-color;

@btn-default-color: @text-color;
@btn-default-bg: #fff;
@btn-default-border: @border-color-base;

@btn-danger-color: @error-color;
@btn-danger-bg: @background-color-base;
@btn-danger-border: @border-color-base;

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

@btn-padding-base: 0 @padding-md - 1px;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-base;
@btn-padding-lg: @btn-padding-base;
@btn-padding-sm: 0 @padding-xs - 1px;

@btn-height-base: 32px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;

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

@btn-group-border: @primary-5;

// Checkbox
@checkbox-size: 16px;
@checkbox-color: @primary-color;
@checkbox-check-color: #fff;
@checkbox-border-width: @border-width-base;

// Empty
@empty-font-size: @font-size-base;

// Radio
@radio-size: 16px;
@radio-dot-color: @primary-color;

// Radio buttons
@radio-button-bg: @btn-default-bg;
@radio-button-checked-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;

// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

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

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

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);

// Grid system
@grid-columns: 24;
@grid-gutter-width: 0;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-footer-background: @layout-body-background;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-footer-padding: 24px 50px;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-background: #002140;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;
// Layout light theme
@layout-sider-background-light: #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light: @text-color;

// z-index list, order by `z-index`
@zindex-table-fixed: auto;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-badge: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-tooltip: 1060;

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @heading-color;
@form-item-margin-bottom: 24px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;

// Input
// ---
@input-height-base: 32px;
@input-height-lg: 40px;
@input-height-sm: 24px;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: 4px;
@input-padding-vertical-sm: 1px;
@input-padding-vertical-lg: 6px;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-border-color: @border-color-base;
@input-bg: #fff;
@input-number-handler-active-bg: #f4f4f4;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-color;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;

// Select
// ---
@select-border-color: @border-color-base;
@select-item-selected-font-weight: 600;

// Tooltip
// ---
// Tooltip max width
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: #fff;
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// 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;

// Popover
// ---
// Popover body background color
@popover-bg: #fff;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 177px;
// Popover arrow width
@popover-arrow-width: 6px;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
// Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
// Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;

// Modal
// --
@modal-body-padding: 24px;
@modal-header-bg: @component-background;
@modal-footer-bg: tranparent;
@modal-mask-bg: fade(@black, 65%);

// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-text-color: @text-color;

// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-popup-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @primary-color;

// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 20px;
@spin-dot-size-lg: 32px;

// Table
// --
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, 0.01);
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-border-radius-base: @border-radius-base;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;

// TimePicker
// ---
@time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base;

// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;

// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 6px;
@badge-text-color: @component-background;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-actions-background: @background-color-light;
@card-background: #cfd8dc;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm;

// Comment
// ---
@comment-padding-base: 16px 0;
@comment-nest-indent: 44px;
@comment-author-name-color: @text-color-secondary;
@comment-author-time-color: #ccc;
@comment-action-color: @text-color-secondary;
@comment-action-hover-color: #595959;

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @primary-color;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
@tabs-ink-bar-color: @primary-color;
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-padding: 12px 16px;
@tabs-horizontal-padding-lg: 16px;
@tabs-horizontal-padding-sm: 8px 16px;
@tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @primary-color;
@tabs-hover-color: @primary-5;
@tabs-active-color: @primary-7;

// BackTop
// ---
@back-top-color: #fff;
@back-top-bg: @text-color-secondary;
@back-top-hover-bg: @text-color;

// Avatar
// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;

// Switch
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
@switch-shadow-color: fade(#00230b, 20%);

// Pagination
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;
@pagination-item-bg-active: transparent;

// PageHeader
// ---
@page-header-padding-horizontal: 24px;
@page-header-padding-vertical: 16px;

// Breadcrumb
// ---
@breadcrumb-base-color: @text-color-secondary;
@breadcrumb-last-item-color: @text-color;
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-base;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;

// Slider
// ---
@slider-margin: 14px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;

// Tree
// ---
@tree-title-height: 24px;
@tree-child-padding: 18px;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @primary-color;

// Collapse
// ---
@collapse-header-padding: 12px 16px 12px 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;

// Skeleton
// ---
@skeleton-color: #f2f2f2;

// Transfer
// ---
@transfer-disabled-bg: @disabled-bg;

// Message
// ---
@message-notice-content-padding: 10px 16px;

// Motion
// ---
@wave-animation-width: 6px;

// Alert
// ---
@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
@alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
@alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
@alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
@alert-error-icon-color: @error-color;

// List
// ---
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;

// Statistic
// ---
@statistic-title-font-size: @font-size-base;
@statistic-content-font-size: 24px;
@statistic-unit-font-size: 16px;
@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;

// Drawer
// ---
@drawer-header-padding: 16px 24px;
@drawer-body-padding: 24px;

// Mixins
// --------------------------------------------------
// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: @color;
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

.iconfont-mixin() {
  display: inline-block;
  color: @icon-color;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  > * {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &::before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);
  font-size: 12px;
  // IE9
  font-size: ~'@{size} \9';
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~'@{keyframeName}Out';
    animation-play-state: running;
    pointer-events: none;
  }
}

.reset-component() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @text-color;
  font-size: @font-size-base;
  font-variant: @font-variant-base;
  line-height: @line-height-base;
  list-style: none;
  font-feature-settings: @font-feature-settings-base;
}

.text-truncate() {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.textOverflow() {
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
}

.textOverflowMulti(@line: 3, @bg: #fff) {
  overflow: hidden;
  position: relative;
  line-height: 1.5em;
  max-height: @line * 1.5em;
  text-align: justify;
  margin-right: -1em;
  padding-right: 1em;
  &:before {
    background: @bg;
    content: '...';
    padding: 0 1px;
    position: absolute;
    right: 14px;
    bottom: 0;
  }
  &:after {
    background: white;
    content: '';
    margin-top: 0.2em;
    position: absolute;
    right: 14px;
    width: 1em;
    height: 1em;
  }
}

@white: #fff;
@black: #000;

// grey
@grey-1: #ffffff;
@grey-2: #fafafa;
@grey-3: #f5f5f5;
@grey-4: #e8e8e8;
@grey-5: #d9d9d9;
@grey-6: #bfbfbf;
@grey-7: #8c8c8c;
@grey-8: #595959;
@grey-9: #262626;
@grey-10: #000000;

@color-light-position: 2;
@color-basic-position: 3;
@color-dark-position: 4;
@color-no-list: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10;

@colors: red @red-5 @red-6 @red-7,
volcano @volcano-5 @volcano-6 @volcano-7,
orange @orange-5 @orange-6 @orange-7,
gold @gold-5 @gold-6 @gold-7,
yellow @yellow-5 @yellow-6 @yellow-7,
lime @lime-5 @lime-6 @lime-7,
green @green-5 @green-6 @green-7,
cyan @cyan-5 @cyan-6 @cyan-7,
blue @blue-5 @blue-6 @blue-7,
geekblue @geekblue-5 @geekblue-6 @geekblue-7,
purple @purple-5 @purple-6 @purple-7,
magenta @magenta-5 @magenta-6 @magenta-7,
grey @grey-5 @grey-6 @grey-7;

// Alias
@aliasColors: primary blue,
success green,
error red,
warning yellow;

// Grey patch
@greyColorer: lighter @grey-3,
darker @grey-9;

// Layout Gutter
@layout-gutter: 8px;

@xs: @layout-gutter / 2;
@sm: @layout-gutter;
@md: @layout-gutter * 2;
@lg: @layout-gutter * 3;

@grid-breakpoints: xs @screen-xs,
sm @screen-sm,
md @screen-md,
lg @screen-lg,
xl @screen-xl;

@mobile-min: @screen-md-min;
@mobile-max: @screen-md-min - 1px;

// spaceing
@spacings: 0 0,
xs @xs,
sm @sm,
md @md,
lg @lg;

// type
@ul-ol-margin: 18px;

// position
@zindex-base: @zindex-back-top - 1;
@zindex-fixed: @zindex-base;
@zindex: @zindex-base;

@overflows: auto, hidden;
@positions: static, relative, absolute, fixed, sticky;

// 文本
@text-xs: @font-size-base - 2; // 12px
@text-sm: @font-size-base + 0; // 14px
@text-md: @font-size-base + 2; // 16px
@text-lg: @font-size-base + 4; // 18px
@text-xl: @font-size-base + 8; // 22px
@text-xxl: @font-size-base + 12; // 26px

// icon
@icon-sm: @font-size-base * 2; // 14px * 2 = 28px
@icon-md: @font-size-base * 4; // 14px * 4 = 56px
@icon-lg: @font-size-base * 6; // 14px * 6 = 84px
@icon-xl: @font-size-base * 8; // 14px * 8 = 112px
@icon-xxl: @font-size-base * 10; // 14px * 10 = 140px

// 宽度
@widths: xs @layout-gutter * 10, // 80px
sm @layout-gutter * 20, // 160px
md @layout-gutter * 30, // 240px
lg @layout-gutter * 40, // 320px
xl @layout-gutter * 50, // 400px
xxl @layout-gutter * 60, // 480px
10 10%,
20 20%,
30 30%,
40 40%,
50 50%,
60 60%,
70 70%,
80 80%,
90 90%,
100 100%;

// 圆角
@border-radius-md: @border-radius-base; // 4px
@border-radius-lg: @border-radius-base + 2px; // 6px

@muted-color: @grey-7;

// Colors
@white: #fff;
@black: #000;

// scrollbar
@scrollbar-enabled: true;
@scrollbar-width: 6px;
@scrollbar-height: 6px;
@scrollbar-track-color: #6e6e6e;
@scrollbar-thumb-color: rgb(255, 255, 255);
@scrollbar-table-enabled: false;

// type
// ==========

// font-size
// https://ant.design/docs/spec/font-cn#字号
@font-size-large: @font-size-base + 8; // 20px
@font-size-small: @font-size-base; // 12px

@h1-font-size: @font-size-base + 20; // 32px
@h2-font-size: @font-size-base + 12; // 24px
@h3-font-size: @font-size-base + 8; // 20px
@h4-font-size: @font-size-base + 4; // 16px
@h5-font-size: @font-size-base + 2; // 14px
@h6-font-size: @font-size-base; // 12px

@enable-all-colors: true;

// Code
@code-border-color: #eee;
@code-bg: #f7f7f7;

@drawer-xl: 1200px;
@drawer-lg: 900px;
@drawer-md: 600px;
@drawer-sm: 300px;

@modal-xl: 1200px;
@modal-lg: 900px;
@modal-md: 600px;
@modal-sm: 300px;

@preserve-white-spaces-enabled: true;
// 搜索框与表格
@preserve-sf-and-st-spaces: @layout-gutter * 2;
// 按钮间
@preserve-buttons-spaces: @layout-gutter;

// table
@nz-table-img-radius: 4px;
@nz-table-img-margin-right: 4px;
@nz-table-img-max-height: 32px;
@nz-table-img-max-width: 32px;
@nz-table-rep-max-width: @mobile-max;
@nz-table-rep-min-width: @nz-table-rep-max-width + 1;
@nz-table-rep-header-background: @border-color-split;
@nz-table-rep-even-background: #f9f9f9;
@nz-table-rep-padding-vertical: @table-padding-vertical / 2;
@nz-table-rep-padding-horizontal: @table-padding-horizontal / 2;
@nz-table-rep-column-name-width: 100px;
@nz-table-rep-column-name-text-align: right;
@nz-table-rep-column-name-padding-right: 8px;
@nz-table-rep-column-name-color: rgba(0, 0, 0, 0.5);

// Forced to turn off Modal animation
@forced-turn-off-nz-modal-animation-enabled: false;

// antd
/* stylelint-disable at-rule-empty-line-before,at-rule-name-space-after,at-rule-no-unknown */
/* stylelint-disable no-duplicate-selectors */
/* stylelint-disable */
.bezierEasingMixin() {
  @functions: ~`(function() {
  var NEWTON_ITERATIONS = 4;
  var NEWTON_MIN_SLOPE = 0.001;
  var SUBDIVISION_PRECISION = 0.0000001;
  var SUBDIVISION_MAX_ITERATIONS = 10;

  var kSplineTableSize = 11;
  var kSampleStepSize = 1.0 / (kSplineTableSize - 1.0);

  var float32ArraySupported = typeof Float32Array === 'function';

  function A (aA1, aA2) { return 1.0 - 3.0 * aA2 + 3.0 * aA1; }
  function B (aA1, aA2) { return 3.0 * aA2 - 6.0 * aA1; }
  function C (aA1)      { return 3.0 * aA1; }

  // Returns x(t) given t, x1, and x2, or y(t) given t, y1, and y2.
  function calcBezier (aT, aA1, aA2) { return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; }

  // Returns dx/dt given t, x1, and x2, or dy/dt given t, y1, and y2.
  function getSlope (aT, aA1, aA2) { return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); }

  function binarySubdivide (aX, aA, aB, mX1, mX2) {
    var currentX, currentT, i = 0;
    do {
      currentT = aA + (aB - aA) / 2.0;
      currentX = calcBezier(currentT, mX1, mX2) - aX;
      if (currentX > 0.0) {
        aB = currentT;
      } else {
        aA = currentT;
      }
    } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS);
    return currentT;
  }

  function newtonRaphsonIterate (aX, aGuessT, mX1, mX2) {
   for (var i = 0; i < NEWTON_ITERATIONS; ++i) {
     var currentSlope = getSlope(aGuessT, mX1, mX2);
     if (currentSlope === 0.0) {
       return aGuessT;
     }
     var currentX = calcBezier(aGuessT, mX1, mX2) - aX;
     aGuessT -= currentX / currentSlope;
   }
   return aGuessT;
  }

  var BezierEasing = function (mX1, mY1, mX2, mY2) {
    if (!(0 <= mX1 && mX1 <= 1 && 0 <= mX2 && mX2 <= 1)) {
      throw new Error('bezier x values must be in [0, 1] range');
    }

    // Precompute samples table
    var sampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize);
    if (mX1 !== mY1 || mX2 !== mY2) {
      for (var i = 0; i < kSplineTableSize; ++i) {
        sampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2);
      }
    }

    function getTForX (aX) {
      var intervalStart = 0.0;
      var currentSample = 1;
      var lastSample = kSplineTableSize - 1;

      for (; currentSample !== lastSample && sampleValues[currentSample] <= aX; ++currentSample) {
        intervalStart += kSampleStepSize;
      }
      --currentSample;

      // Interpolate to provide an initial guess for t
      var dist = (aX - sampleValues[currentSample]) / (sampleValues[currentSample + 1] - sampleValues[currentSample]);
      var guessForT = intervalStart + dist * kSampleStepSize;

      var initialSlope = getSlope(guessForT, mX1, mX2);
      if (initialSlope >= NEWTON_MIN_SLOPE) {
        return newtonRaphsonIterate(aX, guessForT, mX1, mX2);
      } else if (initialSlope === 0.0) {
        return guessForT;
      } else {
        return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize, mX1, mX2);
      }
    }

    return function BezierEasing (x) {
      if (mX1 === mY1 && mX2 === mY2) {
        return x; // linear
      }
      // Because JavaScript number are imprecise, we should guarantee the extremes are right.
      if (x === 0) {
        return 0;
      }
      if (x === 1) {
        return 1;
      }
      return calcBezier(getTForX(x), mY1, mY2);
    };
  };

  this.colorEasing = BezierEasing(0.26, 0.09, 0.37, 0.18);
  // less 3 requires a return
  return '';
})()`;
}

// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();

/* stylelint-disable declaration-bang-space-before,no-duplicate-selectors,string-no-newline */
.tinyColorMixin() {
  @functions: ~`(function() {
// TinyColor v1.4.1
// https://github.com/bgrins/TinyColor
// 2016-07-07, Brian Grinstead, MIT License
var trimLeft = /^\s+/,
    trimRight = /\s+$/,
    tinyCounter = 0,
    mathRound = Math.round,
    mathMin = Math.min,
    mathMax = Math.max,
    mathRandom = Math.random;

function tinycolor (color, opts) {

    color = (color) ? color : '';
    opts = opts || { };

    // If input is already a tinycolor, return itself
    if (color instanceof tinycolor) {
       return color;
    }
    // If we are called as a function, call using new instead
    if (!(this instanceof tinycolor)) {
        return new tinycolor(color, opts);
    }

    var rgb = inputToRGB(color);
    this._originalInput = color,
    this._r = rgb.r,
    this._g = rgb.g,
    this._b = rgb.b,
    this._a = rgb.a,
    this._roundA = mathRound(100*this._a) / 100,
    this._format = opts.format || rgb.format;
    this._gradientType = opts.gradientType;

    // Don't let the range of [0,255] come back in [0,1].
    // Potentially lose a little bit of precision here, but will fix issues where
    // .5 gets interpreted as half of the total, instead of half of 1
    // If it was supposed to be 128, this was already taken care of by inputToRgb
    if (this._r < 1) { this._r = mathRound(this._r); }
    if (this._g < 1) { this._g = mathRound(this._g); }
    if (this._b < 1) { this._b = mathRound(this._b); }

    this._ok = rgb.ok;
    this._tc_id = tinyCounter++;
}

tinycolor.prototype = {
    isDark: function() {
        return this.getBrightness() < 128;
    },
    isLight: function() {
        return !this.isDark();
    },
    isValid: function() {
        return this._ok;
    },
    getOriginalInput: function() {
      return this._originalInput;
    },
    getFormat: function() {
        return this._format;
    },
    getAlpha: function() {
        return this._a;
    },
    getBrightness: function() {
        //http://www.w3.org/TR/AERT#color-contrast
        var rgb = this.toRgb();
        return (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
    },
    getLuminance: function() {
        //http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
        var rgb = this.toRgb();
        var RsRGB, GsRGB, BsRGB, R, G, B;
        RsRGB = rgb.r/255;
        GsRGB = rgb.g/255;
        BsRGB = rgb.b/255;

        if (RsRGB <= 0.03928) {R = RsRGB / 12.92;} else {R = Math.pow(((RsRGB + 0.055) / 1.055), 2.4);}
        if (GsRGB <= 0.03928) {G = GsRGB / 12.92;} else {G = Math.pow(((GsRGB + 0.055) / 1.055), 2.4);}
        if (BsRGB <= 0.03928) {B = BsRGB / 12.92;} else {B = Math.pow(((BsRGB + 0.055) / 1.055), 2.4);}
        return (0.2126 * R) + (0.7152 * G) + (0.0722 * B);
    },
    setAlpha: function(value) {
        this._a = boundAlpha(value);
        this._roundA = mathRound(100*this._a) / 100;
        return this;
    },
    toHsv: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        return { h: hsv.h * 360, s: hsv.s, v: hsv.v, a: this._a };
    },
    toHsvString: function() {
        var hsv = rgbToHsv(this._r, this._g, this._b);
        var h = mathRound(hsv.h * 360), s = mathRound(hsv.s * 100), v = mathRound(hsv.v * 100);
        return (this._a == 1) ?
          "hsv("  + h + ", " + s + "%, " + v + "%)" :
          "hsva(" + h + ", " + s + "%, " + v + "%, "+ this._roundA + ")";
    },
    toHsl: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        return { h: hsl.h * 360, s: hsl.s, l: hsl.l, a: this._a };
    },
    toHslString: function() {
        var hsl = rgbToHsl(this._r, this._g, this._b);
        var h = mathRound(hsl.h * 360), s = mathRound(hsl.s * 100), l = mathRound(hsl.l * 100);
        return (this._a == 1) ?
          "hsl("  + h + ", " + s + "%, " + l + "%)" :
          "hsla(" + h + ", " + s + "%, " + l + "%, "+ this._roundA + ")";
    },
    toHex: function(allow3Char) {
        return rgbToHex(this._r, this._g, this._b, allow3Char);
    },
    toHexString: function(allow3Char) {
        return '#' + this.toHex(allow3Char);
    },
    toHex8: function(allow4Char) {
        return rgbaToHex(this._r, this._g, this._b, this._a, allow4Char);
    },
    toHex8String: function(allow4Char) {
        return '#' + this.toHex8(allow4Char);
    },
    toRgb: function() {
        return { r: mathRound(this._r), g: mathRound(this._g), b: mathRound(this._b), a: this._a };
    },
    toRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ")" :
          "rgba(" + mathRound(this._r) + ", " + mathRound(this._g) + ", " + mathRound(this._b) + ", " + this._roundA + ")";
    },
    toPercentageRgb: function() {
        return { r: mathRound(bound01(this._r, 255) * 100) + "%", g: mathRound(bound01(this._g, 255) * 100) + "%", b: mathRound(bound01(this._b, 255) * 100) + "%", a: this._a };
    },
    toPercentageRgbString: function() {
        return (this._a == 1) ?
          "rgb("  + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%)" :
          "rgba(" + mathRound(bound01(this._r, 255) * 100) + "%, " + mathRound(bound01(this._g, 255) * 100) + "%, " + mathRound(bound01(this._b, 255) * 100) + "%, " + this._roundA + ")";
    },
    toName: function() {
        if (this._a === 0) {
            return "transparent";
        }

        if (this._a < 1) {
            return false;
        }

        return hexNames[rgbToHex(this._r, this._g, this._b, true)] || false;
    },
    toFilter: function(secondColor) {
        var hex8String = '#' + rgbaToArgbHex(this._r, this._g, this._b, this._a);
        var secondHex8String = hex8String;
        var gradientType = this._gradientType ? "GradientType = 1, " : "";

        if (secondColor) {
            var s = tinycolor(secondColor);
            secondHex8String = '#' + rgbaToArgbHex(s._r, s._g, s._b, s._a);
        }

        return "progid:DXImageTransform.Microsoft.gradient("+gradientType+"startColorstr="+hex8String+",endColorstr="+secondHex8String+")";
    },
    toString: function(format) {
        var formatSet = !!format;
        format = format || this._format;

        var formattedString = false;
        var hasAlpha = this._a < 1 && this._a >= 0;
        var needsAlphaFormat = !formatSet && hasAlpha && (format === "hex" || format === "hex6" || format === "hex3" || format === "hex4" || format === "hex8" || format === "name");

        if (needsAlphaFormat) {
            // Special case for "transparent", all other non-alpha formats
            // will return rgba when there is transparency.
            if (format === "name" && this._a === 0) {
                return this.toName();
            }
            return this.toRgbString();
        }
        if (format === "rgb") {
            formattedString = this.toRgbString();
        }
        if (format === "prgb") {
            formattedString = this.toPercentageRgbString();
        }
        if (format === "hex" || format === "hex6") {
            formattedString = this.toHexString();
        }
        if (format === "hex3") {
            formattedString = this.toHexString(true);
        }
        if (format === "hex4") {
            formattedString = this.toHex8String(true);
        }
        if (format === "hex8") {
            formattedString = this.toHex8String();
        }
        if (format === "name") {
            formattedString = this.toName();
        }
        if (format === "hsl") {
            formattedString = this.toHslString();
        }
        if (format === "hsv") {
            formattedString = this.toHsvString();
        }

        return formattedString || this.toHexString();
    },
    clone: function() {
        return tinycolor(this.toString());
    },

    _applyModification: function(fn, args) {
        var color = fn.apply(null, [this].concat([].slice.call(args)));
        this._r = color._r;
        this._g = color._g;
        this._b = color._b;
        this.setAlpha(color._a);
        return this;
    },
    lighten: function() {
        return this._applyModification(lighten, arguments);
    },
    brighten: function() {
        return this._applyModification(brighten, arguments);
    },
    darken: function() {
        return this._applyModification(darken, arguments);
    },
    desaturate: function() {
        return this._applyModification(desaturate, arguments);
    },
    saturate: function() {
        return this._applyModification(saturate, arguments);
    },
    greyscale: function() {
        return this._applyModification(greyscale, arguments);
    },
    spin: function() {
        return this._applyModification(spin, arguments);
    },

    _applyCombination: function(fn, args) {
        return fn.apply(null, [this].concat([].slice.call(args)));
    },
    analogous: function() {
        return this._applyCombination(analogous, arguments);
    },
    complement: function() {
        return this._applyCombination(complement, arguments);
    },
    monochromatic: function() {
        return this._applyCombination(monochromatic, arguments);
    },
    splitcomplement: function() {
        return this._applyCombination(splitcomplement, arguments);
    },
    triad: function() {
        return this._applyCombination(triad, arguments);
    },
    tetrad: function() {
        return this._applyCombination(tetrad, arguments);
    }
};

// If input is an object, force 1 into "1.0" to handle ratios properly
// String input requires "1.0" as input, so 1 will be treated as 1
tinycolor.fromRatio = function(color, opts) {
    if (typeof color == "object") {
        var newColor = {};
        for (var i in color) {
            if (color.hasOwnProperty(i)) {
                if (i === "a") {
                    newColor[i] = color[i];
                }
                else {
                    newColor[i] = convertToPercentage(color[i]);
                }
            }
        }
        color = newColor;
    }

    return tinycolor(color, opts);
};

// Given a string or object, convert that input to RGB
// Possible string inputs:
//
//     "red"
//     "#f00" or "f00"
//     "#ff0000" or "ff0000"
//     "#ff000000" or "ff000000"
//     "rgb 255 0 0" or "rgb (255, 0, 0)"
//     "rgb 1.0 0 0" or "rgb (1, 0, 0)"
//     "rgba (255, 0, 0, 1)" or "rgba 255, 0, 0, 1"
//     "rgba (1.0, 0, 0, 1)" or "rgba 1.0, 0, 0, 1"
//     "hsl(0, 100%, 50%)" or "hsl 0 100% 50%"
//     "hsla(0, 100%, 50%, 1)" or "hsla 0 100% 50%, 1"
//     "hsv(0, 100%, 100%)" or "hsv 0 100% 100%"
//
function inputToRGB(color) {

    var rgb = { r: 0, g: 0, b: 0 };
    var a = 1;
    var s = null;
    var v = null;
    var l = null;
    var ok = false;
    var format = false;

    if (typeof color == "string") {
        color = stringInputToObject(color);
    }

    if (typeof color == "object") {
        if (isValidCSSUnit(color.r) && isValidCSSUnit(color.g) && isValidCSSUnit(color.b)) {
            rgb = rgbToRgb(color.r, color.g, color.b);
            ok = true;
            format = String(color.r).substr(-1) === "%" ? "prgb" : "rgb";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.v)) {
            s = convertToPercentage(color.s);
            v = convertToPercentage(color.v);
            rgb = hsvToRgb(color.h, s, v);
            ok = true;
            format = "hsv";
        }
        else if (isValidCSSUnit(color.h) && isValidCSSUnit(color.s) && isValidCSSUnit(color.l)) {
            s = convertToPercentage(color.s);
            l = convertToPercentage(color.l);
            rgb = hslToRgb(color.h, s, l);
            ok = true;
            format = "hsl";
        }

        if (color.hasOwnProperty("a")) {
            a = color.a;
        }
    }

    a = boundAlpha(a);

    return {
        ok: ok,
        format: color.format || format,
        r: mathMin(255, mathMax(rgb.r, 0)),
        g: mathMin(255, mathMax(rgb.g, 0)),
        b: mathMin(255, mathMax(rgb.b, 0)),
        a: a
    };
}

// Conversion Functions
// --------------------

// rgbToHsl, rgbToHsv, hslToRgb, hsvToRgb modified from:
// <http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript>

// rgbToRgb
// Handle bounds / percentage checking to conform to CSS color spec
// <http://www.w3.org/TR/css3-color/>
// *Assumes:* r, g, b in [0, 255] or [0, 1]
// *Returns:* { r, g, b } in [0, 255]
function rgbToRgb(r, g, b){
    return {
        r: bound01(r, 255) * 255,
        g: bound01(g, 255) * 255,
        b: bound01(b, 255) * 255
    };
}

// rgbToHsl
// Converts an RGB color value to HSL.
// *Assumes:* r, g, and b are contained in [0, 255] or [0, 1]
// *Returns:* { h, s, l } in [0,1]
function rgbToHsl(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, l = (max + min) / 2;

    if(max == min) {
        h = s = 0; // achromatic
    }
    else {
        var d = max - min;
        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }

        h /= 6;
    }

    return { h: h, s: s, l: l };
}

// hslToRgb
// Converts an HSL color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and l are contained [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
function hslToRgb(h, s, l) {
    var r, g, b;

    h = bound01(h, 360);
    s = bound01(s, 100);
    l = bound01(l, 100);

    function hue2rgb(p, q, t) {
        if(t < 0) t += 1;
        if(t > 1) t -= 1;
        if(t < 1/6) return p + (q - p) * 6 * t;
        if(t < 1/2) return q;
        if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
        return p;
    }

    if(s === 0) {
        r = g = b = l; // achromatic
    }
    else {
        var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
        var p = 2 * l - q;
        r = hue2rgb(p, q, h + 1/3);
        g = hue2rgb(p, q, h);
        b = hue2rgb(p, q, h - 1/3);
    }

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHsv
// Converts an RGB color value to HSV
// *Assumes:* r, g, and b are contained in the set [0, 255] or [0, 1]
// *Returns:* { h, s, v } in [0,1]
function rgbToHsv(r, g, b) {

    r = bound01(r, 255);
    g = bound01(g, 255);
    b = bound01(b, 255);

    var max = mathMax(r, g, b), min = mathMin(r, g, b);
    var h, s, v = max;

    var d = max - min;
    s = max === 0 ? 0 : d / max;

    if(max == min) {
        h = 0; // achromatic
    }
    else {
        switch(max) {
            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
            case g: h = (b - r) / d + 2; break;
            case b: h = (r - g) / d + 4; break;
        }
        h /= 6;
    }
    return { h: h, s: s, v: v };
}

// hsvToRgb
// Converts an HSV color value to RGB.
// *Assumes:* h is contained in [0, 1] or [0, 360] and s and v are contained in [0, 1] or [0, 100]
// *Returns:* { r, g, b } in the set [0, 255]
 function hsvToRgb(h, s, v) {

    h = bound01(h, 360) * 6;
    s = bound01(s, 100);
    v = bound01(v, 100);

    var i = Math.floor(h),
        f = h - i,
        p = v * (1 - s),
        q = v * (1 - f * s),
        t = v * (1 - (1 - f) * s),
        mod = i % 6,
        r = [v, q, p, p, t, v][mod],
        g = [t, v, v, q, p, p][mod],
        b = [p, p, t, v, v, q][mod];

    return { r: r * 255, g: g * 255, b: b * 255 };
}

// rgbToHex
// Converts an RGB color to hex
// Assumes r, g, and b are contained in the set [0, 255]
// Returns a 3 or 6 character hex
function rgbToHex(r, g, b, allow3Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    // Return a 3 character hex if possible
    if (allow3Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0);
    }

    return hex.join("");
}

// rgbaToHex
// Converts an RGBA color plus alpha transparency to hex
// Assumes r, g, b are contained in the set [0, 255] and
// a in [0, 1]. Returns a 4 or 8 character rgba hex
function rgbaToHex(r, g, b, a, allow4Char) {

    var hex = [
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16)),
        pad2(convertDecimalToHex(a))
    ];

    // Return a 4 character hex if possible
    if (allow4Char && hex[0].charAt(0) == hex[0].charAt(1) && hex[1].charAt(0) == hex[1].charAt(1) && hex[2].charAt(0) == hex[2].charAt(1) && hex[3].charAt(0) == hex[3].charAt(1)) {
        return hex[0].charAt(0) + hex[1].charAt(0) + hex[2].charAt(0) + hex[3].charAt(0);
    }

    return hex.join("");
}

// rgbaToArgbHex
// Converts an RGBA color to an ARGB Hex8 string
// Rarely used, but required for "toFilter()"
function rgbaToArgbHex(r, g, b, a) {

    var hex = [
        pad2(convertDecimalToHex(a)),
        pad2(mathRound(r).toString(16)),
        pad2(mathRound(g).toString(16)),
        pad2(mathRound(b).toString(16))
    ];

    return hex.join("");
}

// equals
// Can be called with any tinycolor input
tinycolor.equals = function (color1, color2) {
    if (!color1 || !color2) { return false; }
    return tinycolor(color1).toRgbString() == tinycolor(color2).toRgbString();
};

tinycolor.random = function() {
    return tinycolor.fromRatio({
        r: mathRandom(),
        g: mathRandom(),
        b: mathRandom()
    });
};

// Modification Functions
// ----------------------
// Thanks to less.js for some of the basics here
// <https://github.com/cloudhead/less.js/blob/master/lib/less/functions.js>

function desaturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s -= amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function saturate(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.s += amount / 100;
    hsl.s = clamp01(hsl.s);
    return tinycolor(hsl);
}

function greyscale(color) {
    return tinycolor(color).desaturate(100);
}

function lighten (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l += amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

function brighten(color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var rgb = tinycolor(color).toRgb();
    rgb.r = mathMax(0, mathMin(255, rgb.r - mathRound(255 * - (amount / 100))));
    rgb.g = mathMax(0, mathMin(255, rgb.g - mathRound(255 * - (amount / 100))));
    rgb.b = mathMax(0, mathMin(255, rgb.b - mathRound(255 * - (amount / 100))));
    return tinycolor(rgb);
}

function darken (color, amount) {
    amount = (amount === 0) ? 0 : (amount || 10);
    var hsl = tinycolor(color).toHsl();
    hsl.l -= amount / 100;
    hsl.l = clamp01(hsl.l);
    return tinycolor(hsl);
}

// Spin takes a positive or negative amount within [-360, 360] indicating the change of hue.
// Values outside of this range will be wrapped into this range.
function spin(color, amount) {
    var hsl = tinycolor(color).toHsl();
    var hue = (hsl.h + amount) % 360;
    hsl.h = hue < 0 ? 360 + hue : hue;
    return tinycolor(hsl);
}

// Combination Functions
// ---------------------
// Thanks to jQuery xColor for some of the ideas behind these
// <https://github.com/infusion/jQuery-xcolor/blob/master/jquery.xcolor.js>

function complement(color) {
    var hsl = tinycolor(color).toHsl();
    hsl.h = (hsl.h + 180) % 360;
    return tinycolor(hsl);
}

function triad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 120) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 240) % 360, s: hsl.s, l: hsl.l })
    ];
}

function tetrad(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 90) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 180) % 360, s: hsl.s, l: hsl.l }),
        tinycolor({ h: (h + 270) % 360, s: hsl.s, l: hsl.l })
    ];
}

function splitcomplement(color) {
    var hsl = tinycolor(color).toHsl();
    var h = hsl.h;
    return [
        tinycolor(color),
        tinycolor({ h: (h + 72) % 360, s: hsl.s, l: hsl.l}),
        tinycolor({ h: (h + 216) % 360, s: hsl.s, l: hsl.l})
    ];
}

function analogous(color, results, slices) {
    results = results || 6;
    slices = slices || 30;

    var hsl = tinycolor(color).toHsl();
    var part = 360 / slices;
    var ret = [tinycolor(color)];

    for (hsl.h = ((hsl.h - (part * results >> 1)) + 720) % 360; --results; ) {
        hsl.h = (hsl.h + part) % 360;
        ret.push(tinycolor(hsl));
    }
    return ret;
}

function monochromatic(color, results) {
    results = results || 6;
    var hsv = tinycolor(color).toHsv();
    var h = hsv.h, s = hsv.s, v = hsv.v;
    var ret = [];
    var modification = 1 / results;

    while (results--) {
        ret.push(tinycolor({ h: h, s: s, v: v}));
        v = (v + modification) % 1;
    }

    return ret;
}

// Utility Functions
// ---------------------

tinycolor.mix = function(color1, color2, amount) {
    amount = (amount === 0) ? 0 : (amount || 50);

    var rgb1 = tinycolor(color1).toRgb();
    var rgb2 = tinycolor(color2).toRgb();

    var p = amount / 100;

    var rgba = {
        r: ((rgb2.r - rgb1.r) * p) + rgb1.r,
        g: ((rgb2.g - rgb1.g) * p) + rgb1.g,
        b: ((rgb2.b - rgb1.b) * p) + rgb1.b,
        a: ((rgb2.a - rgb1.a) * p) + rgb1.a
    };

    return tinycolor(rgba);
};

// Readability Functions
// ---------------------
// <http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef (WCAG Version 2)

// contrast
// Analyze the 2 colors and returns the color contrast defined by (WCAG Version 2)
tinycolor.readability = function(color1, color2) {
    var c1 = tinycolor(color1);
    var c2 = tinycolor(color2);
    return (Math.max(c1.getLuminance(),c2.getLuminance())+0.05) / (Math.min(c1.getLuminance(),c2.getLuminance())+0.05);
};

// isReadable
// Ensure that foreground and background color combinations meet WCAG2 guidelines.
// The third argument is an optional Object.
//      the 'level' property states 'AA' or 'AAA' - if missing or invalid, it defaults to 'AA';
//      the 'size' property states 'large' or 'small' - if missing or invalid, it defaults to 'small'.
// If the entire object is absent, isReadable defaults to {level:"AA",size:"small"}.

// *Example*
//    tinycolor.isReadable("#000", "#111") => false
//    tinycolor.isReadable("#000", "#111",{level:"AA",size:"large"}) => false
tinycolor.isReadable = function(color1, color2, wcag2) {
    var readability = tinycolor.readability(color1, color2);
    var wcag2Parms, out;

    out = false;

    wcag2Parms = validateWCAG2Parms(wcag2);
    switch (wcag2Parms.level + wcag2Parms.size) {
        case "AAsmall":
        case "AAAlarge":
            out = readability >= 4.5;
            break;
        case "AAlarge":
            out = readability >= 3;
            break;
        case "AAAsmall":
            out = readability >= 7;
            break;
    }
    return out;

};

// mostReadable
// Given a base color and a list of possible foreground or background
// colors for that base, returns the most readable color.
// Optionally returns Black or White if the most readable color is unreadable.
// *Example*
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:false}).toHexString(); // "#112255"
//    tinycolor.mostReadable(tinycolor.mostReadable("#123", ["#124", "#125"],{includeFallbackColors:true}).toHexString();  // "#ffffff"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"large"}).toHexString(); // "#faf3f3"
//    tinycolor.mostReadable("#a8015a", ["#faf3f3"],{includeFallbackColors:true,level:"AAA",size:"small"}).toHexString(); // "#ffffff"
tinycolor.mostReadable = function(baseColor, colorList, args) {
    var bestColor = null;
    var bestScore = 0;
    var readability;
    var includeFallbackColors, level, size ;
    args = args || {};
    includeFallbackColors = args.includeFallbackColors ;
    level = args.level;
    size = args.size;

    for (var i= 0; i < colorList.length ; i++) {
        readability = tinycolor.readability(baseColor, colorList[i]);
        if (readability > bestScore) {
            bestScore = readability;
            bestColor = tinycolor(colorList[i]);
        }
    }

    if (tinycolor.isReadable(baseColor, bestColor, {"level":level,"size":size}) || !includeFallbackColors) {
        return bestColor;
    }
    else {
        args.includeFallbackColors=false;
        return tinycolor.mostReadable(baseColor,["#fff", "#000"],args);
    }
};

// Big List of Colors
// ------------------
// <http://www.w3.org/TR/css3-color/#svg-color>
var names = tinycolor.names = {
    aliceblue: "f0f8ff",
    antiquewhite: "faebd7",
    aqua: "0ff",
    aquamarine: "7fffd4",
    azure: "f0ffff",
    beige: "f5f5dc",
    bisque: "ffe4c4",
    black: "000",
    blanchedalmond: "ffebcd",
    blue: "00f",
    blueviolet: "8a2be2",
    brown: "a52a2a",
    burlywood: "deb887",
    burntsienna: "ea7e5d",
    cadetblue: "5f9ea0",
    chartreuse: "7fff00",
    chocolate: "d2691e",
    coral: "ff7f50",
    cornflowerblue: "6495ed",
    cornsilk: "fff8dc",
    crimson: "dc143c",
    cyan: "0ff",
    darkblue: "00008b",
    darkcyan: "008b8b",
    darkgoldenrod: "b8860b",
    darkgray: "a9a9a9",
    darkgreen: "006400",
    darkgrey: "a9a9a9",
    darkkhaki: "bdb76b",
    darkmagenta: "8b008b",
    darkolivegreen: "556b2f",
    darkorange: "ff8c00",
    darkorchid: "9932cc",
    darkred: "8b0000",
    darksalmon: "e9967a",
    darkseagreen: "8fbc8f",
    darkslateblue: "483d8b",
    darkslategray: "2f4f4f",
    darkslategrey: "2f4f4f",
    darkturquoise: "00ced1",
    darkviolet: "9400d3",
    deeppink: "ff1493",
    deepskyblue: "00bfff",
    dimgray: "696969",
    dimgrey: "696969",
    dodgerblue: "1e90ff",
    firebrick: "b22222",
    floralwhite: "fffaf0",
    forestgreen: "228b22",
    fuchsia: "f0f",
    gainsboro: "dcdcdc",
    ghostwhite: "f8f8ff",
    gold: "ffd700",
    goldenrod: "daa520",
    gray: "808080",
    green: "008000",
    greenyellow: "adff2f",
    grey: "808080",
    honeydew: "f0fff0",
    hotpink: "ff69b4",
    indianred: "cd5c5c",
    indigo: "4b0082",
    ivory: "fffff0",
    khaki: "f0e68c",
    lavender: "e6e6fa",
    lavenderblush: "fff0f5",
    lawngreen: "7cfc00",
    lemonchiffon: "fffacd",
    lightblue: "add8e6",
    lightcoral: "f08080",
    lightcyan: "e0ffff",
    lightgoldenrodyellow: "fafad2",
    lightgray: "d3d3d3",
    lightgreen: "90ee90",
    lightgrey: "d3d3d3",
    lightpink: "ffb6c1",
    lightsalmon: "ffa07a",
    lightseagreen: "20b2aa",
    lightskyblue: "87cefa",
    lightslategray: "789",
    lightslategrey: "789",
    lightsteelblue: "b0c4de",
    lightyellow: "ffffe0",
    lime: "0f0",
    limegreen: "32cd32",
    linen: "faf0e6",
    magenta: "f0f",
    maroon: "800000",
    mediumaquamarine: "66cdaa",
    mediumblue: "0000cd",
    mediumorchid: "ba55d3",
    mediumpurple: "9370db",
    mediumseagreen: "3cb371",
    mediumslateblue: "7b68ee",
    mediumspringgreen: "00fa9a",
    mediumturquoise: "48d1cc",
    mediumvioletred: "c71585",
    midnightblue: "191970",
    mintcream: "f5fffa",
    mistyrose: "ffe4e1",
    moccasin: "ffe4b5",
    navajowhite: "ffdead",
    navy: "000080",
    oldlace: "fdf5e6",
    olive: "808000",
    olivedrab: "6b8e23",
    orange: "ffa500",
    orangered: "ff4500",
    orchid: "da70d6",
    palegoldenrod: "eee8aa",
    palegreen: "98fb98",
    paleturquoise: "afeeee",
    palevioletred: "db7093",
    papayawhip: "ffefd5",
    peachpuff: "ffdab9",
    peru: "cd853f",
    pink: "ffc0cb",
    plum: "dda0dd",
    powderblue: "b0e0e6",
    purple: "800080",
    rebeccapurple: "663399",
    red: "f00",
    rosybrown: "bc8f8f",
    royalblue: "4169e1",
    saddlebrown: "8b4513",
    salmon: "fa8072",
    sandybrown: "f4a460",
    seagreen: "2e8b57",
    seashell: "fff5ee",
    sienna: "a0522d",
    silver: "c0c0c0",
    skyblue: "87ceeb",
    slateblue: "6a5acd",
    slategray: "708090",
    slategrey: "708090",
    snow: "fffafa",
    springgreen: "00ff7f",
    steelblue: "4682b4",
    tan: "d2b48c",
    teal: "008080",
    thistle: "d8bfd8",
    tomato: "ff6347",
    turquoise: "40e0d0",
    violet: "ee82ee",
    wheat: "f5deb3",
    white: "fff",
    whitesmoke: "f5f5f5",
    yellow: "ff0",
    yellowgreen: "9acd32"
};

// Make it easy to access colors via hexNames[hex]
var hexNames = tinycolor.hexNames = flip(names);

// Utilities
// ---------

// { 'name1': 'val1' } becomes { 'val1': 'name1' }
function flip(o) {
    var flipped = { };
    for (var i in o) {
        if (o.hasOwnProperty(i)) {
            flipped[o[i]] = i;
        }
    }
    return flipped;
}

// Return a valid alpha value [0,1] with all invalid values being set to 1
function boundAlpha(a) {
    a = parseFloat(a);

    if (isNaN(a) || a < 0 || a > 1) {
        a = 1;
    }

    return a;
}

// Take input from [0, n] and return it as [0, 1]
function bound01(n, max) {
    if (isOnePointZero(n)) { n = "100%"; }

    var processPercent = isPercentage(n);
    n = mathMin(max, mathMax(0, parseFloat(n)));

    // Automatically convert percentage into number
    if (processPercent) {
        n = parseInt(n * max, 10) / 100;
    }

    // Handle floating point rounding errors
    if ((Math.abs(n - max) < 0.000001)) {
        return 1;
    }

    // Convert into [0, 1] range if it isn't already
    return (n % max) / parseFloat(max);
}

// Force a number between 0 and 1
function clamp01(val) {
    return mathMin(1, mathMax(0, val));
}

// Parse a base-16 hex value into a base-10 integer
function parseIntFromHex(val) {
    return parseInt(val, 16);
}

// Need to handle 1.0 as 100%, since once it is a number, there is no difference between it and 1
// <http://stackoverflow.com/questions/7422072/javascript-how-to-detect-number-as-a-decimal-including-1-0>
function isOnePointZero(n) {
    return typeof n == "string" && n.indexOf('.') != -1 && parseFloat(n) === 1;
}

// Check to see if string passed in is a percentage
function isPercentage(n) {
    return typeof n === "string" && n.indexOf('%') != -1;
}

// Force a hex value to have 2 characters
function pad2(c) {
    return c.length == 1 ? '0' + c : '' + c;
}

// Replace a decimal with it's percentage value
function convertToPercentage(n) {
    if (n <= 1) {
        n = (n * 100) + "%";
    }

    return n;
}

// Converts a decimal to a hex value
function convertDecimalToHex(d) {
    return Math.round(parseFloat(d) * 255).toString(16);
}
// Converts a hex value to a decimal
function convertHexToDecimal(h) {
    return (parseIntFromHex(h) / 255);
}

var matchers = (function() {

    // <http://www.w3.org/TR/css3-values/#integers>
    var CSS_INTEGER = "[-\\+]?\\d+%?";

    // <http://www.w3.org/TR/css3-values/#number-value>
    var CSS_NUMBER = "[-\\+]?\\d*\\.\\d+%?";

    // Allow positive/negative integer/number.  Don't capture the either/or, just the entire outcome.
    var CSS_UNIT = "(?:" + CSS_NUMBER + ")|(?:" + CSS_INTEGER + ")";

    // Actual matching.
    // Parentheses and commas are optional, but not required.
    // Whitespace can take the place of commas or opening paren
    var PERMISSIVE_MATCH3 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";
    var PERMISSIVE_MATCH4 = "[\\s|\\(]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")[,|\\s]+(" + CSS_UNIT + ")\\s*\\)?";

    return {
        CSS_UNIT: new RegExp(CSS_UNIT),
        rgb: new RegExp("rgb" + PERMISSIVE_MATCH3),
        rgba: new RegExp("rgba" + PERMISSIVE_MATCH4),
        hsl: new RegExp("hsl" + PERMISSIVE_MATCH3),
        hsla: new RegExp("hsla" + PERMISSIVE_MATCH4),
        hsv: new RegExp("hsv" + PERMISSIVE_MATCH3),
        hsva: new RegExp("hsva" + PERMISSIVE_MATCH4),
        hex3: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex6: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/,
        hex4: /^#?([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/,
        hex8: /^#?([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})([0-9a-fA-F]{2})$/
    };
})();

// isValidCSSUnit
// Take in a single string / number and check to see if it looks like a CSS unit
// (see matchers above for definition).
function isValidCSSUnit(color) {
    return !!matchers.CSS_UNIT.exec(color);
}

// stringInputToObject
// Permissive string parsing.  Take in a number of formats, and output an object
// based on detected format.  Returns { r, g, b } or { h, s, l } or { h, s, v}
function stringInputToObject(color) {

    color = color.replace(trimLeft, '').replace(trimRight, '').toLowerCase();
    var named = false;
    if (names[color]) {
        color = names[color];
        named = true;
    }
    else if (color == 'transparent') {
        return { r: 0, g: 0, b: 0, a: 0, format: "name" };
    }

    // Try to match string input using regular expressions.
    // Keep most of the number bounding out of this function - don't worry about [0,1] or [0,100] or [0,360]
    // Just return an object and let the conversion functions handle that.
    // This way the result will be the same whether the tinycolor is initialized with string or object.
    var match;
    if ((match = matchers.rgb.exec(color))) {
        return { r: match[1], g: match[2], b: match[3] };
    }
    if ((match = matchers.rgba.exec(color))) {
        return { r: match[1], g: match[2], b: match[3], a: match[4] };
    }
    if ((match = matchers.hsl.exec(color))) {
        return { h: match[1], s: match[2], l: match[3] };
    }
    if ((match = matchers.hsla.exec(color))) {
        return { h: match[1], s: match[2], l: match[3], a: match[4] };
    }
    if ((match = matchers.hsv.exec(color))) {
        return { h: match[1], s: match[2], v: match[3] };
    }
    if ((match = matchers.hsva.exec(color))) {
        return { h: match[1], s: match[2], v: match[3], a: match[4] };
    }
    if ((match = matchers.hex8.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            a: convertHexToDecimal(match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex6.exec(color))) {
        return {
            r: parseIntFromHex(match[1]),
            g: parseIntFromHex(match[2]),
            b: parseIntFromHex(match[3]),
            format: named ? "name" : "hex"
        };
    }
    if ((match = matchers.hex4.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            a: convertHexToDecimal(match[4] + '' + match[4]),
            format: named ? "name" : "hex8"
        };
    }
    if ((match = matchers.hex3.exec(color))) {
        return {
            r: parseIntFromHex(match[1] + '' + match[1]),
            g: parseIntFromHex(match[2] + '' + match[2]),
            b: parseIntFromHex(match[3] + '' + match[3]),
            format: named ? "name" : "hex"
        };
    }

    return false;
}

function validateWCAG2Parms(parms) {
    // return valid WCAG2 parms for isReadable.
    // If input parms are invalid, return {"level":"AA", "size":"small"}
    var level, size;
    parms = parms || {"level":"AA", "size":"small"};
    level = (parms.level || "AA").toUpperCase();
    size = (parms.size || "small").toLowerCase();
    if (level !== "AA" && level !== "AAA") {
        level = "AA";
    }
    if (size !== "small" && size !== "large") {
        size = "small";
    }
    return {"level":level, "size":size};
}

this.tinycolor = tinycolor;

})()`;
}

// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.tinyColorMixin();

// We create a very complex algorithm which take the place of original tint/shade color system
// to make sure no one can understand it 👻
// and create an entire color palette magicly by inputing just a single primary color.
// We are using bezier-curve easing function and some color manipulations like tint/shade/darken/spin
.colorPaletteMixin() {
  @functions: ~`(function() {
  var hueStep = 2;
  var saturationStep = 16;
  var saturationStep2 = 5;
  var brightnessStep1 = 5;
  var brightnessStep2 = 15;
  var lightColorCount = 5;
  var darkColorCount = 4;

  var getHue = function(hsv, i, isLight) {
    var hue;
    if (hsv.h >= 60 && hsv.h <= 240) {
      hue = isLight ? hsv.h - hueStep * i : hsv.h + hueStep * i;
    } else {
      hue = isLight ? hsv.h + hueStep * i : hsv.h - hueStep * i;
    }
    if (hue < 0) {
      hue += 360;
    } else if (hue >= 360) {
      hue -= 360;
    }
    return Math.round(hue);
  };
  var getSaturation = function(hsv, i, isLight) {
    var saturation;
    if (isLight) {
      saturation = Math.round(hsv.s * 100) - saturationStep * i;
    } else if (i == darkColorCount) {
      saturation = Math.round(hsv.s * 100) + saturationStep;
    } else {
      saturation = Math.round(hsv.s * 100) + saturationStep2 * i;
    }
    if (saturation > 100) {
      saturation = 100;
    }
    if (isLight && i === lightColorCount && saturation > 10) {
      saturation = 10;
    }
    if (saturation < 6) {
      saturation = 6;
    }
    return Math.round(saturation);
  };
  var getValue = function(hsv, i, isLight) {
    if (isLight) {
      return Math.round(hsv.v * 100) + brightnessStep1 * i;
    }
    return Math.round(hsv.v * 100) - brightnessStep2 * i;
  };

  this.colorPalette = function(color, index) {
    var isLight = index <= 6;
    var hsv = tinycolor(color).toHsv();
    var i = isLight ? lightColorCount + 1 - index : index - lightColorCount - 1;
    return tinycolor({
      h: getHue(hsv, i, isLight),
      s: getSaturation(hsv, i, isLight),
      v: getValue(hsv, i, isLight),
    }).toHexString();
  };
})()`;
}

// It is hacky way to make this function will be compiled preferentially by less
// resolve error: `ReferenceError: colorPalette is not defined`
// https://github.com/ant-design/ant-motion/issues/44
.colorPaletteMixin();

// color palettes
@blue-1: color(~`colorPalette('@{blue-6}', 1) `);
@blue-2: color(~`colorPalette('@{blue-6}', 2) `);
@blue-3: color(~`colorPalette('@{blue-6}', 3) `);
@blue-4: color(~`colorPalette('@{blue-6}', 4) `);
@blue-5: color(~`colorPalette('@{blue-6}', 5) `);
@blue-6: #1890ff;
@blue-7: color(~`colorPalette('@{blue-6}', 7) `);
@blue-8: color(~`colorPalette('@{blue-6}', 8) `);
@blue-9: color(~`colorPalette('@{blue-6}', 9) `);
@blue-10: color(~`colorPalette('@{blue-6}', 10) `);

@purple-1: color(~`colorPalette('@{purple-6}', 1) `);
@purple-2: color(~`colorPalette('@{purple-6}', 2) `);
@purple-3: color(~`colorPalette('@{purple-6}', 3) `);
@purple-4: color(~`colorPalette('@{purple-6}', 4) `);
@purple-5: color(~`colorPalette('@{purple-6}', 5) `);
@purple-6: #722ed1;
@purple-7: color(~`colorPalette('@{purple-6}', 7) `);
@purple-8: color(~`colorPalette('@{purple-6}', 8) `);
@purple-9: color(~`colorPalette('@{purple-6}', 9) `);
@purple-10: color(~`colorPalette('@{purple-6}', 10) `);

@cyan-1: color(~`colorPalette('@{cyan-6}', 1) `);
@cyan-2: color(~`colorPalette('@{cyan-6}', 2) `);
@cyan-3: color(~`colorPalette('@{cyan-6}', 3) `);
@cyan-4: color(~`colorPalette('@{cyan-6}', 4) `);
@cyan-5: color(~`colorPalette('@{cyan-6}', 5) `);
@cyan-6: #13c2c2;
@cyan-7: color(~`colorPalette('@{cyan-6}', 7) `);
@cyan-8: color(~`colorPalette('@{cyan-6}', 8) `);
@cyan-9: color(~`colorPalette('@{cyan-6}', 9) `);
@cyan-10: color(~`colorPalette('@{cyan-6}', 10) `);

@green-1: color(~`colorPalette('@{green-6}', 1) `);
@green-2: color(~`colorPalette('@{green-6}', 2) `);
@green-3: color(~`colorPalette('@{green-6}', 3) `);
@green-4: color(~`colorPalette('@{green-6}', 4) `);
@green-5: color(~`colorPalette('@{green-6}', 5) `);
@green-6: #52c41a;
@green-7: color(~`colorPalette('@{green-6}', 7) `);
@green-8: color(~`colorPalette('@{green-6}', 8) `);
@green-9: color(~`colorPalette('@{green-6}', 9) `);
@green-10: color(~`colorPalette('@{green-6}', 10) `);

@magenta-1: color(~`colorPalette('@{magenta-6}', 1) `);
@magenta-2: color(~`colorPalette('@{magenta-6}', 2) `);
@magenta-3: color(~`colorPalette('@{magenta-6}', 3) `);
@magenta-4: color(~`colorPalette('@{magenta-6}', 4) `);
@magenta-5: color(~`colorPalette('@{magenta-6}', 5) `);
@magenta-6: #eb2f96;
@magenta-7: color(~`colorPalette('@{magenta-6}', 7) `);
@magenta-8: color(~`colorPalette('@{magenta-6}', 8) `);
@magenta-9: color(~`colorPalette('@{magenta-6}', 9) `);
@magenta-10: color(~`colorPalette('@{magenta-6}', 10) `);

// alias of magenta
@pink-1: color(~`colorPalette('@{pink-6}', 1) `);
@pink-2: color(~`colorPalette('@{pink-6}', 2) `);
@pink-3: color(~`colorPalette('@{pink-6}', 3) `);
@pink-4: color(~`colorPalette('@{pink-6}', 4) `);
@pink-5: color(~`colorPalette('@{pink-6}', 5) `);
@pink-6: #eb2f96;
@pink-7: color(~`colorPalette('@{pink-6}', 7) `);
@pink-8: color(~`colorPalette('@{pink-6}', 8) `);
@pink-9: color(~`colorPalette('@{pink-6}', 9) `);
@pink-10: color(~`colorPalette('@{pink-6}', 10) `);

@red-1: color(~`colorPalette('@{red-6}', 1) `);
@red-2: color(~`colorPalette('@{red-6}', 2) `);
@red-3: color(~`colorPalette('@{red-6}', 3) `);
@red-4: color(~`colorPalette('@{red-6}', 4) `);
@red-5: color(~`colorPalette('@{red-6}', 5) `);
@red-6: #f5222d;
@red-7: color(~`colorPalette('@{red-6}', 7) `);
@red-8: color(~`colorPalette('@{red-6}', 8) `);
@red-9: color(~`colorPalette('@{red-6}', 9) `);
@red-10: color(~`colorPalette('@{red-6}', 10) `);

@orange-1: color(~`colorPalette('@{orange-6}', 1) `);
@orange-2: color(~`colorPalette('@{orange-6}', 2) `);
@orange-3: color(~`colorPalette('@{orange-6}', 3) `);
@orange-4: color(~`colorPalette('@{orange-6}', 4) `);
@orange-5: color(~`colorPalette('@{orange-6}', 5) `);
@orange-6: #fa8c16;
@orange-7: color(~`colorPalette('@{orange-6}', 7) `);
@orange-8: color(~`colorPalette('@{orange-6}', 8) `);
@orange-9: color(~`colorPalette('@{orange-6}', 9) `);
@orange-10: color(~`colorPalette('@{orange-6}', 10) `);

@yellow-1: color(~`colorPalette('@{yellow-6}', 1) `);
@yellow-2: color(~`colorPalette('@{yellow-6}', 2) `);
@yellow-3: color(~`colorPalette('@{yellow-6}', 3) `);
@yellow-4: color(~`colorPalette('@{yellow-6}', 4) `);
@yellow-5: color(~`colorPalette('@{yellow-6}', 5) `);
@yellow-6: #fadb14;
@yellow-7: color(~`colorPalette('@{yellow-6}', 7) `);
@yellow-8: color(~`colorPalette('@{yellow-6}', 8) `);
@yellow-9: color(~`colorPalette('@{yellow-6}', 9) `);
@yellow-10: color(~`colorPalette('@{yellow-6}', 10) `);

@volcano-1: color(~`colorPalette('@{volcano-6}', 1) `);
@volcano-2: color(~`colorPalette('@{volcano-6}', 2) `);
@volcano-3: color(~`colorPalette('@{volcano-6}', 3) `);
@volcano-4: color(~`colorPalette('@{volcano-6}', 4) `);
@volcano-5: color(~`colorPalette('@{volcano-6}', 5) `);
@volcano-6: #fa541c;
@volcano-7: color(~`colorPalette('@{volcano-6}', 7) `);
@volcano-8: color(~`colorPalette('@{volcano-6}', 8) `);
@volcano-9: color(~`colorPalette('@{volcano-6}', 9) `);
@volcano-10: color(~`colorPalette('@{volcano-6}', 10) `);

@geekblue-1: color(~`colorPalette('@{geekblue-6}', 1) `);
@geekblue-2: color(~`colorPalette('@{geekblue-6}', 2) `);
@geekblue-3: color(~`colorPalette('@{geekblue-6}', 3) `);
@geekblue-4: color(~`colorPalette('@{geekblue-6}', 4) `);
@geekblue-5: color(~`colorPalette('@{geekblue-6}', 5) `);
@geekblue-6: #2f54eb;
@geekblue-7: color(~`colorPalette('@{geekblue-6}', 7) `);
@geekblue-8: color(~`colorPalette('@{geekblue-6}', 8) `);
@geekblue-9: color(~`colorPalette('@{geekblue-6}', 9) `);
@geekblue-10: color(~`colorPalette('@{geekblue-6}', 10) `);

@lime-1: color(~`colorPalette('@{lime-6}', 1) `);
@lime-2: color(~`colorPalette('@{lime-6}', 2) `);
@lime-3: color(~`colorPalette('@{lime-6}', 3) `);
@lime-4: color(~`colorPalette('@{lime-6}', 4) `);
@lime-5: color(~`colorPalette('@{lime-6}', 5) `);
@lime-6: #a0d911;
@lime-7: color(~`colorPalette('@{lime-6}', 7) `);
@lime-8: color(~`colorPalette('@{lime-6}', 8) `);
@lime-9: color(~`colorPalette('@{lime-6}', 9) `);
@lime-10: color(~`colorPalette('@{lime-6}', 10) `);

@gold-1: color(~`colorPalette('@{gold-6}', 1) `);
@gold-2: color(~`colorPalette('@{gold-6}', 2) `);
@gold-3: color(~`colorPalette('@{gold-6}', 3) `);
@gold-4: color(~`colorPalette('@{gold-6}', 4) `);
@gold-5: color(~`colorPalette('@{gold-6}', 5) `);
@gold-6: #faad14;
@gold-7: color(~`colorPalette('@{gold-6}', 7) `);
@gold-8: color(~`colorPalette('@{gold-6}', 8) `);
@gold-9: color(~`colorPalette('@{gold-6}', 9) `);
@gold-10: color(~`colorPalette('@{gold-6}', 10) `);

@preset-colors: pink, magenta, red, volcano, orange, yellow, gold, cyan, lime, green, blue, geekblue,
purple;

// The prefix to use on all css classes from ant.
@ant-prefix: ant;

// An override for the html selector for theme prefixes
@html-selector: html;

// -------- Colors -----------
@primary-color: @blue-6;
@info-color: @blue-6;
@success-color: @green-6;
@processing-color: @blue-6;
@error-color: @red-6;
@highlight-color: @red-6;
@warning-color: @gold-6;
@normal-color: #d9d9d9;
@white: #fff;
@black: #000;

// Color used by default to control hover and active backgrounds and for
// alert info backgrounds.
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(
  ~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused

// Base Scaffolding Variables
// ---

// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB',
'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@text-color: fade(@black, 65%);
@text-color-secondary: fade(@black, 45%);
@text-color-warning: @gold-7;
@text-color-danger: @red-7;
@text-color-inverse: @white;
@icon-color: inherit;
@icon-color-hover: fade(@black, 75%);
@heading-color: fade(#000, 85%);
@heading-color-dark: fade(@white, 100%);
@text-color-dark: fade(@white, 85%);
@text-color-secondary-dark: fade(@white, 65%);
@font-variant-base: tabular-nums;
@font-feature-settings-base: 'tnum';
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: 12px;
@heading-1-size: ceil(@font-size-base * 2.71);
@heading-2-size: ceil(@font-size-base * 2.14);
@heading-3-size: ceil(@font-size-base * 1.71);
@heading-4-size: ceil(@font-size-base * 1.42);
@line-height-base: 1.5;
@border-radius-base: 4px;
@border-radius-sm: 2px;

// 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

// vertical padding for all form controls
@control-padding-horizontal: @padding-sm;
@control-padding-horizontal-sm: @padding-xs;

// The background colors for active and hover states for things like
// list items or table cells.
@item-active-bg: @primary-1;
@item-hover-bg: @primary-1;

// ICONFONT
@iconfont-css-prefix: anticon;

// LINK
@link-color: #1890ff; //@primary-color;
@link-hover-color: color(~`colorPalette('@{link-color}', 5) `);
@link-active-color: color(~`colorPalette('@{link-color}', 7) `);
@link-decoration: none;
@link-hover-decoration: none;

// Animation
@ease-base-out: cubic-bezier(0.7, 0.3, 0.1, 1);
@ease-base-in: cubic-bezier(0.9, 0, 0.3, 0.7);
@ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
@ease-in: cubic-bezier(0.55, 0.055, 0.675, 0.19);
@ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
@ease-out-back: cubic-bezier(0.12, 0.4, 0.29, 1.46);
@ease-in-back: cubic-bezier(0.71, -0.46, 0.88, 0.6);
@ease-in-out-back: cubic-bezier(0.71, -0.46, 0.29, 1.46);
@ease-out-circ: cubic-bezier(0.08, 0.82, 0.17, 1);
@ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.34);
@ease-in-out-circ: cubic-bezier(0.78, 0.14, 0.15, 0.86);
@ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
@ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
@ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);

// Border color
@border-color-base: hsv(0, 0, 85%); // base border outline a component
@border-color-split: hsv(0, 0, 91%); // split border inside a component
@border-color-inverse: @white;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border

// Outline
@outline-blur-size: 0;
@outline-width: 2px;
@outline-color: @primary-color;

@background-color-light: hsv(0, 0, 98%); // background of header and selected item
@background-color-base: hsv(0, 0, 96%); // Default grey background color

// Disabled states
@disabled-color: fade(#000, 25%);
@disabled-bg: @background-color-base;
@disabled-color-dark: fade(#fff, 35%);

// Shadow
@shadow-color: rgba(0, 0, 0, 0.15);
@shadow-color-inverse: @component-background;
@box-shadow-base: @shadow-1-down;
@shadow-1-up: 0 -2px 8px @shadow-color;
@shadow-1-down: 0 2px 8px @shadow-color;
@shadow-1-left: -2px 0 8px @shadow-color;
@shadow-1-right: 2px 0 8px @shadow-color;
@shadow-2: 0 4px 12px @shadow-color;

// Buttons
@btn-font-weight: 400;
@btn-border-radius-base: @border-radius-base;
@btn-border-radius-sm: @border-radius-base;
@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-primary-color: #fff;
@btn-primary-bg: #1890ff; //@primary-color;

@btn-default-color: @text-color;
@btn-default-bg: #fff;
@btn-default-border: @border-color-base;

@btn-danger-color: @error-color;
@btn-danger-bg: @background-color-base;
@btn-danger-border: @border-color-base;

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

@btn-padding-base: 0 @padding-md - 1px;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-base;
@btn-padding-lg: @btn-padding-base;
@btn-padding-sm: 0 @padding-xs - 1px;

@btn-height-base: 32px;
@btn-height-lg: 40px;
@btn-height-sm: 24px;

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

@btn-group-border: @primary-5;

// Checkbox
@checkbox-size: 16px;
@checkbox-color: @primary-color;
@checkbox-check-color: #fff;
@checkbox-border-width: @border-width-base;

// Empty
@empty-font-size: @font-size-base;

// Radio
@radio-size: 16px;
@radio-dot-color: @primary-color;

// Radio buttons
@radio-button-bg: @btn-default-bg;
@radio-button-checked-bg: @btn-default-bg;
@radio-button-color: @btn-default-color;
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;

// Media queries breakpoints
// Extra small screen / phone
@screen-xs: 480px;
@screen-xs-min: @screen-xs;

// Small screen / tablet
@screen-sm: 576px;
@screen-sm-min: @screen-sm;

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

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

// Extra large screen / full hd
@screen-xl: 1200px;
@screen-xl-min: @screen-xl;

// Extra extra large screen / large desktop
@screen-xxl: 1600px;
@screen-xxl-min: @screen-xxl;

// provide a maximum
@screen-xs-max: (@screen-sm-min - 1px);
@screen-sm-max: (@screen-md-min - 1px);
@screen-md-max: (@screen-lg-min - 1px);
@screen-lg-max: (@screen-xl-min - 1px);
@screen-xl-max: (@screen-xxl-min - 1px);

// Grid system
@grid-columns: 24;
@grid-gutter-width: 0;

// Layout
@layout-body-background: #f0f2f5;
@layout-header-background: #001529;
@layout-footer-background: @layout-body-background;
@layout-header-height: 64px;
@layout-header-padding: 0 50px;
@layout-footer-padding: 24px 50px;
@layout-sider-background: @layout-header-background;
@layout-trigger-height: 48px;
@layout-trigger-background: #002140;
@layout-trigger-color: #fff;
@layout-zero-trigger-width: 36px;
@layout-zero-trigger-height: 42px;
// Layout light theme
@layout-sider-background-light: #fff;
@layout-trigger-background-light: #fff;
@layout-trigger-color-light: @text-color;

// z-index list, order by `z-index`
@zindex-table-fixed: auto;
@zindex-affix: 10;
@zindex-back-top: 10;
@zindex-badge: 10;
@zindex-picker-panel: 10;
@zindex-popup-close: 10;
@zindex-modal: 1000;
@zindex-modal-mask: 1000;
@zindex-message: 1010;
@zindex-notification: 1010;
@zindex-popover: 1030;
@zindex-dropdown: 1050;
@zindex-picker: 1050;
@zindex-tooltip: 1060;

// Animation
@animation-duration-slow: 0.3s; // Modal
@animation-duration-base: 0.2s;
@animation-duration-fast: 0.1s; // Tooltip

// Form
// ---
@label-required-color: @highlight-color;
@label-color: @heading-color;
@form-item-margin-bottom: 24px;
@form-item-trailing-colon: true;
@form-vertical-label-padding: 0 0 8px;
@form-vertical-label-margin: 0;

// Input
// ---
@input-height-base: 32px;
@input-height-lg: 40px;
@input-height-sm: 24px;
@input-padding-horizontal: @control-padding-horizontal - 1px;
@input-padding-horizontal-base: @input-padding-horizontal;
@input-padding-horizontal-sm: @control-padding-horizontal-sm - 1px;
@input-padding-horizontal-lg: @input-padding-horizontal;
@input-padding-vertical-base: 4px;
@input-padding-vertical-sm: 1px;
@input-padding-vertical-lg: 6px;
@input-placeholder-color: hsv(0, 0, 75%);
@input-color: @text-color;
@input-border-color: @border-color-base;
@input-bg: #fff;
@input-number-handler-active-bg: #f4f4f4;
@input-addon-bg: @background-color-light;
@input-hover-border-color: @primary-color;
@input-disabled-bg: @disabled-bg;
@input-outline-offset: 0 0;

// Select
// ---
@select-border-color: @border-color-base;
@select-item-selected-font-weight: 600;

// Tooltip
// ---
// Tooltip max width
@tooltip-max-width: 250px;
// Tooltip text color
@tooltip-color: #fff;
// Tooltip background color
@tooltip-bg: rgba(0, 0, 0, 0.75);
// 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;

// Popover
// ---
// Popover body background color
@popover-bg: #fff;
// Popover text color
@popover-color: @text-color;
// Popover maximum width
@popover-min-width: 177px;
// Popover arrow width
@popover-arrow-width: 6px;
// Popover arrow color
@popover-arrow-color: @popover-bg;
// Popover outer arrow width
// Popover outer arrow color
@popover-arrow-outer-color: @popover-bg;
// Popover distance with trigger
@popover-distance: @popover-arrow-width + 4px;

// Modal
// --
@modal-body-padding: 24px;
@modal-header-bg: @component-background;
@modal-footer-bg: tranparent;
@modal-mask-bg: fade(@black, 65%);

// Progress
// --
@progress-default-color: @processing-color;
@progress-remaining-color: @background-color-base;
@progress-text-color: @text-color;

// Menu
// ---
@menu-inline-toplevel-item-height: 40px;
@menu-item-height: 40px;
@menu-collapsed-width: 80px;
@menu-bg: @component-background;
@menu-popup-bg: @component-background;
@menu-item-color: @text-color;
@menu-highlight-color: @primary-color;
@menu-item-active-bg: @item-active-bg;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
// dark theme
@menu-dark-color: @text-color-secondary-dark;
@menu-dark-bg: @layout-header-background;
@menu-dark-arrow-color: #fff;
@menu-dark-submenu-bg: #000c17;
@menu-dark-highlight-color: #fff;
@menu-dark-item-active-bg: @primary-color;

// Spin
// ---
@spin-dot-size-sm: 14px;
@spin-dot-size: 20px;
@spin-dot-size-lg: 32px;

// Table
// --
@table-header-bg: @background-color-light;
@table-header-color: @heading-color;
@table-header-sort-bg: @background-color-base;
@table-body-sort-bg: rgba(0, 0, 0, 0.01);
@table-row-hover-bg: @primary-1;
@table-selected-row-bg: #fafafa;
@table-expanded-row-bg: #fbfbfb;
@table-padding-vertical: 16px;
@table-padding-horizontal: 16px;
@table-border-radius-base: @border-radius-base;

// Tag
// --
@tag-default-bg: @background-color-light;
@tag-default-color: @text-color;
@tag-font-size: @font-size-sm;

// TimePicker
// ---
@time-picker-panel-column-width: 56px;
@time-picker-panel-width: @time-picker-panel-column-width * 3;
@time-picker-selected-bg: @background-color-base;

// Carousel
// ---
@carousel-dot-width: 16px;
@carousel-dot-height: 3px;
@carousel-dot-active-width: 24px;

// Badge
// ---
@badge-height: 20px;
@badge-dot-size: 6px;
@badge-font-size: @font-size-sm;
@badge-font-weight: normal;
@badge-status-size: 6px;
@badge-text-color: @component-background;

// Rate
// ---
@rate-star-color: @yellow-6;
@rate-star-bg: @border-color-split;

// Card
// ---
@card-head-color: @heading-color;
@card-head-background: transparent;
@card-head-padding: 16px;
@card-inner-head-padding: 12px;
@card-padding-base: 24px;
@card-actions-background: @background-color-light;
@card-background: #cfd8dc;
@card-shadow: 0 2px 8px rgba(0, 0, 0, 0.09);
@card-radius: @border-radius-sm;

// Comment
// ---
@comment-padding-base: 16px 0;
@comment-nest-indent: 44px;
@comment-author-name-color: @text-color-secondary;
@comment-author-time-color: #ccc;
@comment-action-color: @text-color-secondary;
@comment-action-hover-color: #595959;

// Tabs
// ---
@tabs-card-head-background: @background-color-light;
@tabs-card-height: 40px;
@tabs-card-active-color: @primary-color;
@tabs-title-font-size: @font-size-base;
@tabs-title-font-size-lg: @font-size-lg;
@tabs-title-font-size-sm: @font-size-base;
@tabs-ink-bar-color: @primary-color;
@tabs-bar-margin: 0 0 16px 0;
@tabs-horizontal-margin: 0 32px 0 0;
@tabs-horizontal-padding: 12px 16px;
@tabs-horizontal-padding-lg: 16px;
@tabs-horizontal-padding-sm: 8px 16px;
@tabs-vertical-padding: 8px 24px;
@tabs-vertical-margin: 0 0 16px 0;
@tabs-scrolling-size: 32px;
@tabs-highlight-color: @primary-color;
@tabs-hover-color: @primary-5;
@tabs-active-color: @primary-7;

// BackTop
// ---
@back-top-color: #fff;
@back-top-bg: @text-color-secondary;
@back-top-hover-bg: @text-color;

// Avatar
// ---
@avatar-size-base: 32px;
@avatar-size-lg: 40px;
@avatar-size-sm: 24px;
@avatar-font-size-base: 18px;
@avatar-font-size-lg: 24px;
@avatar-font-size-sm: 14px;
@avatar-bg: #ccc;
@avatar-color: #fff;
@avatar-border-radius: @border-radius-base;

// Switch
// ---
@switch-height: 22px;
@switch-sm-height: 16px;
@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
@switch-shadow-color: fade(#00230b, 20%);

// Pagination
// ---
@pagination-item-size: 32px;
@pagination-item-size-sm: 24px;
@pagination-font-family: Arial;
@pagination-font-weight-active: 500;
@pagination-item-bg-active: transparent;

// PageHeader
// ---
@page-header-padding-horizontal: 24px;
@page-header-padding-vertical: 16px;

// Breadcrumb
// ---
@breadcrumb-base-color: @text-color-secondary;
@breadcrumb-last-item-color: @text-color;
@breadcrumb-font-size: @font-size-base;
@breadcrumb-icon-font-size: @font-size-base;
@breadcrumb-link-color: @text-color-secondary;
@breadcrumb-link-color-hover: @primary-5;
@breadcrumb-separator-color: @text-color-secondary;
@breadcrumb-separator-margin: 0 @padding-xs;

// Slider
// ---
@slider-margin: 14px 6px 10px;
@slider-rail-background-color: @background-color-base;
@slider-rail-background-color-hover: #e1e1e1;
@slider-track-background-color: @primary-3;
@slider-track-background-color-hover: @primary-4;
@slider-handle-color: @primary-3;
@slider-handle-color-hover: @primary-4;
@slider-handle-color-focus: tint(@primary-color, 20%);
@slider-handle-color-focus-shadow: fade(@primary-color, 20%);
@slider-handle-color-tooltip-open: @primary-color;
@slider-dot-border-color: @border-color-split;
@slider-dot-border-color-active: tint(@primary-color, 50%);
@slider-disabled-color: @disabled-color;
@slider-disabled-background-color: @component-background;

// Tree
// ---
@tree-title-height: 24px;
@tree-child-padding: 18px;
@tree-directory-selected-color: #fff;
@tree-directory-selected-bg: @primary-color;

// Collapse
// ---
@collapse-header-padding: 12px 16px 12px 40px;
@collapse-header-bg: @background-color-light;
@collapse-content-padding: @padding-md;
@collapse-content-bg: @component-background;

// Skeleton
// ---
@skeleton-color: #f2f2f2;

// Transfer
// ---
@transfer-disabled-bg: @disabled-bg;

// Message
// ---
@message-notice-content-padding: 10px 16px;

// Motion
// ---
@wave-animation-width: 6px;

// Alert
// ---
@alert-success-border-color: ~`colorPalette('@{success-color}', 3) `;
@alert-success-bg-color: ~`colorPalette('@{success-color}', 1) `;
@alert-success-icon-color: @success-color;
@alert-info-border-color: ~`colorPalette('@{info-color}', 3) `;
@alert-info-bg-color: ~`colorPalette('@{info-color}', 1) `;
@alert-info-icon-color: @info-color;
@alert-warning-border-color: ~`colorPalette('@{warning-color}', 3) `;
@alert-warning-bg-color: ~`colorPalette('@{warning-color}', 1) `;
@alert-warning-icon-color: @warning-color;
@alert-error-border-color: ~`colorPalette('@{error-color}', 3) `;
@alert-error-bg-color: ~`colorPalette('@{error-color}', 1) `;
@alert-error-icon-color: @error-color;

// List
// ---
@list-header-background: transparent;
@list-footer-background: transparent;
@list-empty-text-padding: @padding-md;
@list-item-padding: @padding-sm 0;
@list-item-meta-margin-bottom: @padding-md;
@list-item-meta-avatar-margin-right: @padding-md;
@list-item-meta-title-margin-bottom: @padding-sm;

// Statistic
// ---
@statistic-title-font-size: @font-size-base;
@statistic-content-font-size: 24px;
@statistic-unit-font-size: 16px;
@statistic-font-family: Tahoma, 'Helvetica Neue', @font-family;

// Drawer
// ---
@drawer-header-padding: 16px 24px;
@drawer-body-padding: 24px;

// Mixins
// --------------------------------------------------
// Sizing shortcuts

.size(@width; @height) {
  width: @width;
  height: @height;
}

.square(@size) {
  .size(@size; @size);
}

// Compatibility for browsers.

// Placeholder text
.placeholder(@color: @input-placeholder-color) {
  // Firefox
  &::-moz-placeholder {
    color: @color;
    opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
  }
  // Internet Explorer 10+
  &:-ms-input-placeholder {
    color: @color;
  }
  // Safari and Chrome
  &::-webkit-input-placeholder {
    color: @color;
  }
}

// mixins for clearfix
// ------------------------
.clearfix() {
  zoom: 1;
  &::before,
  &::after {
    content: '';
    display: table;
  }
  &::after {
    clear: both;
  }
}

.iconfont-mixin() {
  display: inline-block;
  color: @icon-color;
  font-style: normal;
  line-height: 0;
  text-align: center;
  text-transform: none;
  vertical-align: -0.125em; // for SVG icon, see https://blog.prototypr.io/align-svg-icons-to-text-and-say-goodbye-to-font-icons-d44b3d7b26b4
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  > * {
    line-height: 1;
  }

  svg {
    display: inline-block;
  }

  &::before {
    display: none; // dont display old icon.
  }

  & &-icon {
    display: block;
  }
}

// for iconfont font size
// fix chrome 12px bug, support ie
.iconfont-size-under-12px(@size, @rotate: 0deg) {
  display: inline-block;
  @font-scale: unit(@size / 12px);
  font-size: 12px;
  // IE9
  font-size: ~'@{size} \9';
  transform: scale(@font-scale) rotate(@rotate);
  :root & {
    font-size: @font-size-sm; // reset IE9 and above
  }
}

.motion-common(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.motion-common-leave(@duration: @animation-duration-base) {
  animation-duration: @duration;
  animation-fill-mode: both;
}

.make-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common(@duration);
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common-leave(@duration);
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~'@{keyframeName}Out';
    animation-play-state: running;
    pointer-events: none;
  }
}

.reset-component() {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: @text-color;
  font-size: @font-size-base;
  font-variant: @font-variant-base;
  line-height: @line-height-base;
  list-style: none;
  font-feature-settings: @font-feature-settings-base;
}

/* stylelint-disable at-rule-no-unknown */

// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
// styles targeting irrelevant browsers while applying new styles.
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css

// HTML & Body reset
@{html-selector},
body {
  .square(100%);
}

// remove the clear button of a text input control in IE10+
input::-ms-clear,
input::-ms-reveal {
  display: none;
}

// Document
//
// 1. Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
// 2. Change the default font family in all browsers.
// 3. Correct the line height in all browsers.
// 4. Prevent adjustments of font size after orientation changes in IE on Windows Phone and in iOS.
// 5. Setting @viewport causes scrollbars to overlap content in IE11 and Edge, so
//    we force a non-overlapping, non-auto-hiding scrollbar to counteract.
// 6. Change the default tap highlight to be completely transparent in iOS.

*,
*::before,
*::after {
  box-sizing: border-box; // 1
}

@{html-selector} {
  font-family: sans-serif; // 2
  line-height: 1.15; // 3
  -webkit-text-size-adjust: 100%; // 4
  -ms-text-size-adjust: 100%; // 4
  -ms-overflow-style: scrollbar; // 5
  -webkit-tap-highlight-color: fade(@black, 0%); // 6
}

// IE10+ doesn't honor `<meta name="viewport">` in some cases.
@-ms-viewport {
  width: device-width;
}

// Shim for "new" HTML5 structural elements to display correctly (IE10, older browsers)
article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

// Body
//
// 1. remove the margin in all browsers.
// 2. As a best practice, apply a default `body-background`.

body {
  margin: 0; // 1
  color: @text-color;
  font-size: @font-size-base;
  font-family: @font-family;
  font-variant: @font-variant-base;
  line-height: @line-height-base;
  background-color: @body-background; // 2
  font-feature-settings: @font-feature-settings-base;
}

// Suppress the focus outline on elements that cannot be accessed via keyboard.
// This prevents an unwanted focus outline from appearing around elements that
// might still respond to pointer events.
//
// Credit: https://github.com/suitcss/base
[tabindex='-1']:focus {
  outline: none !important;
}

// Content grouping
//
// 1. Add the correct box sizing in Firefox.
// 2. Show the overflow in Edge and IE.

hr {
  box-sizing: content-box; // 1
  height: 0; // 1
  overflow: visible; // 2
}

//
// Typography
//

// remove top margins from headings
//
// By default, `<h1>`-`<h6>` all receive top and bottom margins. We nuke the top
// margin for easier control within type scales as it avoids margin collapsing.
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
  margin-bottom: 0.5em;
  color: @heading-color;
  font-weight: 500;
}

// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
// bottom margin to use `em` units instead of `em`.
p {
  margin-top: 0;
  margin-bottom: 1em;
}

// Abbreviations
//
// 1. remove the bottom border in Firefox 39-.
// 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
// 3. Add explicit cursor to indicate changed behavior.
// 4. Duplicate behavior to the data-* attribute for our tooltip plugin

abbr[title],
abbr[data-original-title] {
  // 4
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
  border-bottom: 0; // 1
  cursor: help; // 3
}

address {
  margin-bottom: 1em;
  font-style: normal;
  line-height: inherit;
}

input[type='text'],
input[type='password'],
input[type='number'],
textarea {
  -webkit-appearance: none;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1em;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 500;
}

dd {
  margin-bottom: 0.5em;
  margin-left: 0; // Undo browser default
}

blockquote {
  margin: 0 0 1em;
}

dfn {
  font-style: italic; // Add the correct font style in Android 4.3-
}

b,
strong {
  font-weight: bolder; // Add the correct font weight in Chrome, Edge, and Safari
}

small {
  font-size: 80%; // Add the correct font size in all browsers
}

//
// Prevent `sub` and `sup` elements from affecting the line height in
// all browsers.
//

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

//
// Links
//

a {
  color: @link-color;
  text-decoration: @link-decoration;
  background-color: transparent; // remove the gray background on active links in IE 10.
  outline: none;
  cursor: pointer;
  transition: color 0.3s;
  -webkit-text-decoration-skip: objects; // remove gaps in links underline in iOS 8+ and Safari 8+.

  &:hover {
    color: @link-hover-color;
  }

  &:active {
    color: @link-active-color;
  }

  &:active,
  &:hover {
    text-decoration: @link-hover-decoration;
    outline: 0;
  }

  &[disabled] {
    color: @disabled-color;
    cursor: not-allowed;
    pointer-events: none;
  }
}

//
// Code
//

pre,
code,
kbd,
samp {
  font-size: 1em; // Correct the odd `em` font sizing in all browsers.
  font-family: @code-family;
}

pre {
  // remove browser default top margin
  margin-top: 0;
  // Reset browser default of `1em` to use `em`s
  margin-bottom: 1em;
  // Don't allow content to break outside
  overflow: auto;
}

//
// Figures
//
figure {
  // Apply a consistent margin strategy (matches our type styles).
  margin: 0 0 1em;
}

//
// Images and content
//

img {
  vertical-align: middle;
  border-style: none; // remove the border on images inside links in IE 10-.
}

svg:not(:root) {
  overflow: hidden; // Hide the overflow in IE
}

// Avoid 300ms click delay on touch devices that support the `touch-action` CSS property.
//
// In particular, unlike most other browsers, IE11+Edge on Windows 10 on touch devices and IE Mobile 10-11
// DON'T remove the click delay when `<meta name="viewport" content="width=device-width">` is present.
// However, they DO support emoving the click delay via `touch-action: manipulation`.
// See:
// * https://getbootstrap.com/docs/4.0/content/reboot/#click-delay-optimization-for-touch
// * http://caniuse.com/#feat=css-touch-action
// * https://patrickhlauke.github.io/touch/tests/results/#suppressing-300ms-delay

a,
area,
button,
[role='button'],
input:not([type='range']),
label,
select,
summary,
textarea {
  touch-action: manipulation;
}

//
// Tables
//

table {
  border-collapse: collapse; // Prevent double borders
}

caption {
  padding-top: 0.75em;
  padding-bottom: 0.3em;
  color: @text-color-secondary;
  text-align: left;
  caption-side: bottom;
}

th {
  // Matches default `<td>` alignment by inheriting from the `<body>`, or the
  // closest parent with a set `text-align`.
  text-align: inherit;
}

//
// Forms
//

input,
button,
select,
optgroup,
textarea {
  margin: 0; // remove the margin in Firefox and Safari
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible; // Show the overflow in Edge
}

button,
select {
  text-transform: none; // remove the inheritance of text transform in Firefox
}

// 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
//    controls in Android 4.
// 2. Correct the inability to style clickable types in iOS and Safari.
button,
@{html-selector} [type="button"], /* 1 */
[type="reset"],
[type="submit"] {
  -webkit-appearance: button; // 2
}

// remove inner border and padding from Firefox, but don't restore the outline like Normalize.
button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type='radio'],
input[type='checkbox'] {
  box-sizing: border-box; // 1. Add the correct box sizing in IE 10-
  padding: 0; // 2. remove the padding in IE 10-
}

input[type='date'],
input[type='time'],
input[type='datetime-local'],
input[type='month'] {
  // remove the default appearance of temporal inputs to avoid a Mobile Safari
  // bug where setting a custom line-height prevents text from being vertically
  // centered within the input.
  // See https://bugs.webkit.org/show_bug.cgi?id=139848
  // and https://github.com/twbs/bootstrap/issues/11266
  -webkit-appearance: listbox;
}

textarea {
  overflow: auto; // remove the default vertical scrollbar in IE.
  // Textareas should really only resize vertically so they don't break their (horizontal) containers.
  resize: vertical;
}

fieldset {
  // Browsers set a default `min-width: min-content;` on fieldsets,
  // unlike e.g. `<div>`s, which have `min-width: 0;` by default.
  // So we reset that to ensure fieldsets behave more like a standard block element.
  // See https://github.com/twbs/bootstrap/issues/12359
  // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
  min-width: 0;
  margin: 0;
  // Reset the default outline behavior of fieldsets so they don't affect page layout.
  padding: 0;
  border: 0;
}

// 1. Correct the text wrapping in Edge and IE.
// 2. Correct the color inheritance from `fieldset` elements in IE.
legend {
  display: block;
  width: 100%;
  max-width: 100%; // 1
  margin-bottom: 0.5em;
  padding: 0;
  color: inherit; // 2
  font-size: 1.5em;
  line-height: inherit;
  white-space: normal; // 1
}

progress {
  vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
}

// Correct the cursor style of incement and decement buttons in Chrome.
[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
  height: auto;
}

[type='search'] {
  // This overrides the extra rounded corners on search inputs in iOS so that our
  // `.form-control` class can properly style them. Note that this cannot simply
  // be added to `.form-control` as it's not specific enough. For details, see
  // https://github.com/twbs/bootstrap/issues/11586.
  outline-offset: -2px; // 2. Correct the outline style in Safari.
  -webkit-appearance: none;
}

//
// remove the inner padding and cancel buttons in Chrome and Safari on macOS.
//

[type='search']::-webkit-search-cancel-button,
[type='search']::-webkit-search-decoration {
  -webkit-appearance: none;
}

//
// 1. Correct the inability to style clickable types in iOS and Safari.
// 2. Change font properties to `inherit` in Safari.
//

::-webkit-file-upload-button {
  font: inherit; // 2
  -webkit-appearance: button; // 1
}

//
// Correct element displays
//

output {
  display: inline-block;
}

summary {
  display: list-item; // Add the correct display in all browsers
}

template {
  display: none; // Add the correct display in IE
}

// Always hide an element with the `hidden` HTML attribute (from PureCSS).
// Needed for proper display in IE 10-.
[hidden] {
  display: none !important;
}

mark {
  padding: 0.2em;
  background-color: @yellow-1;
}

::selection {
  color: @text-color-inverse;
  background: @primary-color;
}

// Utility classes
.clearfix {
  .clearfix();
}

.@{iconfont-css-prefix} {
  .iconfont-mixin();

  &[tabindex] {
    cursor: pointer;
  }
}

.@{iconfont-css-prefix}-spin::before {
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
}

.@{iconfont-css-prefix}-spin {
  display: inline-block;
  animation: loadingCircle 1s infinite linear;
}

.fade-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: linear;
  }
  .@{className}-leave {
    animation-timing-function: linear;
  }
}

.fade-motion(fade, antFade);

@keyframes antFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes antFadeOut {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

.move-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-circ;
  }
}

.move-motion(move-up, antMoveUp);
.move-motion(move-down, antMoveDown);
.move-motion(move-left, antMoveLeft);
.move-motion(move-right, antMoveRight);

@keyframes antMoveDownIn {
  0% {
    transform: translateY(100%);
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveDownOut {
  0% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    transform-origin: 0 0;
    opacity: 0;
  }
}

@keyframes antMoveLeftIn {
  0% {
    transform: translateX(-100%);
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveLeftOut {
  0% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    transform-origin: 0 0;
    opacity: 0;
  }
}

@keyframes antMoveRightIn {
  0% {
    transform: translateX(100%);
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveRightOut {
  0% {
    transform: translateX(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    transform-origin: 0 0;
    opacity: 0;
  }
}

@keyframes antMoveUpIn {
  0% {
    transform: translateY(-100%);
    transform-origin: 0 0;
    opacity: 0;
  }
  100% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
}

@keyframes antMoveUpOut {
  0% {
    transform: translateY(0%);
    transform-origin: 0 0;
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    transform-origin: 0 0;
    opacity: 0;
  }
}

@keyframes loadingCircle {
  100% {
    transform: rotate(360deg);
  }
}

[ant-click-animating='true'],
[ant-click-animating-without-extra-node='true'] {
  position: relative;
}

[ant-click-animating-without-extra-node='true']::after,
.ant-click-animating-node {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  display: block;
  border: 0 solid @primary-color;
  border-radius: inherit;
  opacity: 0.2;
  animation: fadeEffect 2s @ease-out-circ, waveEffect 0.4s @ease-out-circ;
  animation-fill-mode: forwards;
  pointer-events: none;
  content: '';
}

@keyframes waveEffect {
  100% {
    top: -@wave-animation-width;
    right: -@wave-animation-width;
    bottom: -@wave-animation-width;
    left: -@wave-animation-width;
    border-width: @wave-animation-width;
  }
}

@keyframes fadeEffect {
  100% {
    opacity: 0;
  }
}

.slide-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-out-quint;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-quint;
  }
}

.slide-motion(slide-up, antSlideUp);
.slide-motion(slide-down, antSlideDown);
.slide-motion(slide-left, antSlideLeft);
.slide-motion(slide-right, antSlideRight);

@keyframes antSlideUpIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes antSlideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}

@keyframes antSlideDownIn {
  0% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
}

@keyframes antSlideDownOut {
  0% {
    transform: scaleY(1);
    transform-origin: 100% 100%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0.8);
    transform-origin: 100% 100%;
    opacity: 0;
  }
}

@keyframes antSlideLeftIn {
  0% {
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes antSlideLeftOut {
  0% {
    transform: scaleX(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(0.8);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}

@keyframes antSlideRightIn {
  0% {
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleX(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
}

@keyframes antSlideRightOut {
  0% {
    transform: scaleX(1);
    transform-origin: 100% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleX(0.8);
    transform-origin: 100% 0%;
    opacity: 0;
  }
}

.swing-motion(@className, @keyframeName) {
  .@{className}-enter,
  .@{className}-appear {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active,
  .@{className}-appear.@{className}-appear-active {
    animation-name: ~'@{keyframeName}In';
    animation-play-state: running;
  }
}

.swing-motion(swing, antSwing);

@keyframes antSwingIn {
  0%,
  100% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-5px);
  }
  80% {
    transform: translateX(5px);
  }
}

.zoom-motion(@className, @keyframeName, @duration: @animation-duration-base) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    transform: scale(0); // need this by yiminghe
    opacity: 0;
    animation-timing-function: @ease-out-circ;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-out-circ;
  }
}

// For Modal, Select choosen item
.zoom-motion(zoom, antZoom);
// For Popover, Popconfirm, Dropdown
.zoom-motion(zoom-big, antZoomBig);
// For Tooltip
.zoom-motion(zoom-big-fast, antZoomBig, @animation-duration-fast);

.zoom-motion(zoom-up, antZoomUp);
.zoom-motion(zoom-down, antZoomDown);
.zoom-motion(zoom-left, antZoomLeft);
.zoom-motion(zoom-right, antZoomRight);

@keyframes antZoomIn {
  0% {
    transform: scale(0.2);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes antZoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.2);
    opacity: 0;
  }
}

@keyframes antZoomBigIn {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes antZoomBigOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0.8);
    opacity: 0;
  }
}

@keyframes antZoomUpIn {
  0% {
    transform: scale(0.8);
    transform-origin: 50% 0%;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 0%;
  }
}

@keyframes antZoomUpOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 0%;
  }
  100% {
    transform: scale(0.8);
    transform-origin: 50% 0%;
    opacity: 0;
  }
}

@keyframes antZoomLeftIn {
  0% {
    transform: scale(0.8);
    transform-origin: 0% 50%;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform-origin: 0% 50%;
  }
}

@keyframes antZoomLeftOut {
  0% {
    transform: scale(1);
    transform-origin: 0% 50%;
  }
  100% {
    transform: scale(0.8);
    transform-origin: 0% 50%;
    opacity: 0;
  }
}

@keyframes antZoomRightIn {
  0% {
    transform: scale(0.8);
    transform-origin: 100% 50%;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform-origin: 100% 50%;
  }
}

@keyframes antZoomRightOut {
  0% {
    transform: scale(1);
    transform-origin: 100% 50%;
  }
  100% {
    transform: scale(0.8);
    transform-origin: 100% 50%;
    opacity: 0;
  }
}

@keyframes antZoomDownIn {
  0% {
    transform: scale(0.8);
    transform-origin: 50% 100%;
    opacity: 0;
  }
  100% {
    transform: scale(1);
    transform-origin: 50% 100%;
  }
}

@keyframes antZoomDownOut {
  0% {
    transform: scale(1);
    transform-origin: 50% 100%;
  }
  100% {
    transform: scale(0.8);
    transform-origin: 50% 100%;
    opacity: 0;
  }
}

// For common/openAnimation
.ant-motion-collapse {
  overflow: hidden;
  &-active {
    transition: height 0.15s @ease-in-out, opacity 0.15s @ease-in-out !important;
  }
}

// cdk overlay
.cdk-overlay-container {
  pointer-events: none;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  position: fixed;
  z-index: 1000;
}

.cdk-overlay-backdrop {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
  opacity: 0;
  position: absolute;
  pointer-events: auto;
  z-index: 1000;
}

.cdk-overlay-pane {
  position: absolute;
  pointer-events: auto;
  z-index: 1000; // Give an opportunity to the content own to manage their z-index such as Modal
}

.cdk-overlay-connected-position-bounding-box {
  position: absolute;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  min-width: 1px;
  min-height: 1px;
}

// Used when disabling global scrolling.
.cdk-global-scrollblock {
  position: fixed;

  // Necessary for the content not to lose its width. Note that we're using 100%, instead of
  // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
  // that the element had before we made it `fixed`.
  width: 100%;

  // Note: this will always add a scrollbar to whatever element it is on, which can
  // potentially result in double scrollbars. It shouldn't be an issue, because we won't
  // block scrolling on a page that doesn't have a scrollbar in the first place.
  overflow-y: scroll;

  // https://github.com/angular/material2/issues/15051
  body {
    overflow-x: visible;
  }
}

.nz-overlay-transparent-backdrop {
  &, &.cdk-overlay-backdrop-showing {
    opacity: 0;
  }
}

textarea.cdk-textarea-autosize-measuring {
  height: auto !important;
  overflow: hidden !important;
  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
  // measurement. We just have to account for it later and subtract it off the final result.
  padding: 2px 0 !important;
  box-sizing: content-box !important;
}

.nz-animate-disabled {
  // drawer
  &.ant-drawer {
    &.ant-drawer-open .ant-drawer-mask {
      animation: none;
      transition: none;
    }

    & > * {
      transition: none;
    }
  }

  // modal
  .ant-modal-mask, .ant-modal {
    animation: none;
    transition: none;

    &.zoom-enter, &.zoom-leave,
    &.zoom-enter-active, &.zoom-leave-active {
      animation: none;
      transition: none;
    }
  }

  // menu
  &.ant-menu {
    transition: none;

    .ant-menu-item, .ant-menu-submenu-title {
      transition: none;
    }

    .ant-menu-item .anticon, .ant-menu-submenu-title .anticon {
      transition: none;

      & + span {
        transition: none;
      }
    }
  }

  // tabs
  &.ant-tabs {
    .ant-tabs-top-content.ant-tabs-content-animated,
    .ant-tabs-bottom-content.ant-tabs-content-animated,
    .ant-tabs-top-content > .ant-tabs-tabpane,
    .ant-tabs-bottom-content > .ant-tabs-tabpane,
    &.ant-tabs-left .ant-tabs-ink-bar-animated,
    &.ant-tabs-right .ant-tabs-ink-bar-animated,
    &.ant-tabs-top .ant-tabs-ink-bar-animated,
    &.ant-tabs-bottom .ant-tabs-ink-bar-animated {
      transition: none;
    }
  }
}

@icon-prefix-cls: ~'@{ant-prefix}-icon';

.@{ant-prefix}-affix {
  position: fixed;
  z-index: @zindex-affix;
}

@alert-prefix-cls: ~'@{ant-prefix}-alert';

@alert-message-color: @heading-color;
@alert-text-color: @text-color;
@alert-close-color: @text-color-secondary;
@alert-close-hover-color: @icon-color-hover;

.@{alert-prefix-cls} {
  .reset-component;
  position: relative;
  padding: 8px 15px 8px 37px;
  border-radius: @border-radius-base;

  &&-no-icon {
    padding: 8px 15px;
  }

  &&-closable {
    padding-right: 30px;
  }

  &-icon {
    position: absolute;
    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
    left: 16px;
  }

  &-description {
    display: none;
    font-size: @font-size-base;
    line-height: 22px;
  }

  &-success {
    background-color: @alert-success-bg-color;
    border: @border-width-base @border-style-base @alert-success-border-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-success-icon-color;
    }
  }

  &-info {
    background-color: @alert-info-bg-color;
    border: @border-width-base @border-style-base @alert-info-border-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-info-icon-color;
    }
  }

  &-warning {
    background-color: @alert-warning-bg-color;
    border: @border-width-base @border-style-base @alert-warning-border-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-warning-icon-color;
    }
  }

  &-error {
    background-color: @alert-error-bg-color;
    border: @border-width-base @border-style-base @alert-error-border-color;
    .@{alert-prefix-cls}-icon {
      color: @alert-error-icon-color;
    }
  }

  &-close-icon {
    position: absolute;
    top: 8px;
    right: 16px;
    overflow: hidden;
    font-size: @font-size-sm;
    line-height: 22px;
    cursor: pointer;

    .@{iconfont-css-prefix}-close {
      color: @alert-close-color;
      transition: color 0.3s;
      &:hover {
        color: @alert-close-hover-color;
      }
    }
  }

  &-close-text {
    position: absolute;
    right: 16px;
  }

  &-with-description {
    position: relative;
    padding: 15px 15px 15px 64px;
    color: @alert-text-color;
    line-height: @line-height-base;
    border-radius: @border-radius-base;
  }

  &-with-description&-no-icon {
    padding: 15px;
  }

  &-with-description &-icon {
    position: absolute;
    top: 16px;
    left: 24px;
    font-size: 24px;
  }

  &-with-description &-close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-with-description &-message {
    display: block;
    margin-bottom: 4px;
    color: @alert-message-color;
    font-size: @font-size-lg;
  }

  &-with-description &-description {
    display: block;
  }

  &&-close {
    height: 0 !important;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    transform-origin: 50% 0;
    transition: all 0.3s @ease-in-out-circ;
  }

  &-slide-up-leave {
    animation: antAlertSlideUpOut 0.3s @ease-in-out-circ;
    animation-fill-mode: both;
  }

  &-banner {
    margin-bottom: 0;
    border: 0;
    border-radius: 0;
  }
}

@keyframes antAlertSlideUpIn {
  0% {
    transform: scaleY(0);
    transform-origin: 0% 0%;
    opacity: 0;
  }
  100% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
}

@keyframes antAlertSlideUpOut {
  0% {
    transform: scaleY(1);
    transform-origin: 0% 0%;
    opacity: 1;
  }
  100% {
    transform: scaleY(0);
    transform-origin: 0% 0%;
    opacity: 0;
  }
}

@anchor-border-width: 2px;

.@{ant-prefix}-anchor {
  .reset-component;
  position: relative;
  padding-left: @anchor-border-width;

  &-wrapper {
    margin-left: -4px;
    padding-left: 4px;
    overflow: auto;
    background-color: @component-background;
  }

  &-ink {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    &::before {
      position: relative;
      display: block;
      width: @anchor-border-width;
      height: 100%;
      margin: 0 auto;
      background-color: @border-color-split;
      content: ' ';
    }
    &-ball {
      position: absolute;
      left: 50%;
      display: none;
      width: 8px;
      height: 8px;
      background-color: @component-background;
      border: 2px solid @primary-color;
      border-radius: 8px;
      transform: translateX(-50%);
      transition: top 0.3s ease-in-out;
      &.visible {
        display: inline-block;
      }
    }
  }

  &.fixed &-ink &-ink-ball {
    display: none;
  }

  &-link {
    padding: 7px 0 7px 16px;
    line-height: 1.143;

    &-title {
      position: relative;
      display: block;
      margin-bottom: 6px;
      overflow: hidden;
      color: @text-color;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;

      &:only-child {
        margin-bottom: 0;
      }
    }

    &-active > &-title {
      color: @primary-color;
    }
  }

  &-link &-link {
    padding-top: 5px;
    padding-bottom: 5px;
  }
}

@avatar-prefix-cls: ~'@{ant-prefix}-avatar';

.@{avatar-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  overflow: hidden;
  color: @avatar-color;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
  background: @avatar-bg;

  &-image {
    background: transparent;
  }

  .avatar-size(@avatar-size-base, @avatar-font-size-base);

  &-lg {
    .avatar-size(@avatar-size-lg, @avatar-font-size-lg);
  }

  &-sm {
    .avatar-size(@avatar-size-sm, @avatar-font-size-sm);
  }

  &-square {
    border-radius: @avatar-border-radius;
  }

  & > img {
    display: block;
    width: 100%;
    height: 100%;
  }
}

.avatar-size(@size, @font-size) {
  width: @size;
  height: @size;
  line-height: @size;
  border-radius: 50%;

  &-string {
    position: absolute;
    left: 50%;
    transform-origin: 0 center;
  }

  &.@{avatar-prefix-cls}-icon {
    font-size: @font-size;
  }
}

@backtop-prefix-cls: ~'@{ant-prefix}-back-top';

.@{backtop-prefix-cls} {
  .reset-component;
  position: fixed;
  right: 100px;
  bottom: 50px;
  z-index: @zindex-back-top;
  width: 40px;
  height: 40px;
  cursor: pointer;

  &-content {
    width: 40px;
    height: 40px;
    overflow: hidden;
    color: @back-top-color;
    text-align: center;
    background-color: @back-top-bg;
    border-radius: 20px;
    transition: all 0.3s @ease-in-out;

    &:hover {
      background-color: @back-top-hover-bg;
      transition: all 0.3s @ease-in-out;
    }
  }

  &-icon {
    width: 14px;
    height: 16px;
    margin: 12px auto;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAoCAYAAACWwljjAAAABGdBTUEAALGPC/xhBQAAAbtJREFUWAntmMtKw0AUhhMvS5cuxILgQlRUpIggIoKIIoigG1eC+AA+jo+i6FIXBfeuXIgoeKVeitVWJX5HWhhDksnUpp3FDPyZk3Nm5nycmZKkXhAEOXSA3lG7muTeRzmfy6HneUvIhnYkQK+Q9NhAA0Opg0vBEhjBKHiyb8iGMyQMOYuK41BcBSypAL+MYXSKjtFAW7EAGEO3qN4uMQbbAkXiSfRQJ1H6a+yhlkKRcAoVFYiweYNjtCVQJJpBz2GCiPt7fBOZQpFgDpUikse5HgnkM4Fi4QX0Fpc5wf9EbLqpUCy4jMoJSXWhFwbMNgWKhVbRhy5jirhs9fy/oFhgHVVTJEs7RLZ8sSEoJm6iz7SZDMbJ+/OKERQTttCXQRLToRUmrKWCYuA2+jbN0MB4OQobYShfdTCgn/sL1K36M7TLrN3n+758aPy2rrpR6+/od5E8tf/A1uLS9aId5T7J3CNYihkQ4D9PiMdMC7mp4rjB9kjFjZp8BlnVHJBuO1yFXIV0FdDF3RlyFdJVQBdv5AxVdIsq8apiZ2PyYO1EVykesGfZEESsCkweyR8MUW+V8uJ1gkYipmpdP1pm2aJVPEGzAAAAAElFTkSuQmCC) ~'100%/100%' no-repeat;
  }
}

@media screen and (max-width: @screen-md) {
  .@{backtop-prefix-cls} {
    right: 60px;
  }
}

@media screen and (max-width: @screen-xs) {
  .@{backtop-prefix-cls} {
    right: 20px;
  }
}

@badge-prefix-cls: ~'@{ant-prefix}-badge';
@number-prefix-cls: ~'@{ant-prefix}-scroll-number';

.@{badge-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  color: unset;
  line-height: 1;

  &-count {
    z-index: @zindex-badge;
    min-width: @badge-height;
    height: @badge-height;
    padding: 0 6px;
    color: @badge-text-color;
    font-weight: @badge-font-weight;
    font-size: @badge-font-size;
    line-height: @badge-height;
    white-space: nowrap;
    text-align: center;
    background: @highlight-color;
    border-radius: @badge-height / 2;
    box-shadow: 0 0 0 1px @shadow-color-inverse;
    a,
    a:hover {
      color: @badge-text-color;
    }
  }

  &-multiple-words {
    padding: 0 8px;
  }

  &-dot {
    z-index: @zindex-badge;
    width: @badge-dot-size;
    height: @badge-dot-size;
    background: @highlight-color;
    border-radius: 100%;
    box-shadow: 0 0 0 1px @shadow-color-inverse;
  }

  &-count,
  &-dot,
  .@{number-prefix-cls}-custom-component {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(50%, -50%);
    transform-origin: 100% 0%;
  }

  &-status {
    line-height: inherit;
    vertical-align: baseline;

    &-dot {
      position: relative;
      top: -1px;
      display: inline-block;
      width: @badge-status-size;
      height: @badge-status-size;
      vertical-align: middle;
      border-radius: 50%;
    }
    &-success {
      background-color: @success-color;
    }
    &-processing {
      position: relative;
      background-color: @processing-color;
      &::after {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border: 1px solid @processing-color;
        border-radius: 50%;
        animation: antStatusProcessing 1.2s infinite ease-in-out;
        content: '';
      }
    }
    &-default {
      background-color: @normal-color;
    }
    &-error {
      background-color: @error-color;
    }
    &-warning {
      background-color: @warning-color;
    }

    // mixin to iterate over colors and create CSS class for each one
    .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
      .make-color-classes(@i - 1);
      @color: extract(@preset-colors, @i);
      @darkColor: '@{color}-6';
      &-@{color} {
        background: @@darkColor;
      }
    }
    .make-color-classes();

    &-text {
      margin-left: 8px;
      color: @text-color;
      font-size: @font-size-base;
    }
  }

  &-zoom-appear,
  &-zoom-enter {
    animation: antZoomBadgeIn 0.3s @ease-out-back;
    animation-fill-mode: both;
  }

  &-zoom-leave {
    animation: antZoomBadgeOut 0.3s @ease-in-back;
    animation-fill-mode: both;
  }

  &-not-a-wrapper {
    &:not(.@{badge-prefix-cls}-status) {
      vertical-align: middle;
    }

    .@{ant-prefix}-scroll-number {
      position: relative;
      top: auto;
      display: block;
    }

    .@{badge-prefix-cls}-count {
      transform: none;
    }
  }
}

@keyframes antStatusProcessing {
  0% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

.@{number-prefix-cls} {
  overflow: hidden;
  &-only {
    display: inline-block;
    height: @badge-height;
    transition: all 0.3s @ease-in-out;
    > p {
      height: @badge-height;
      margin: 0;
    }
  }

  &-symbol {
    vertical-align: top;
  }
}

@keyframes antZoomBadgeIn {
  0% {
    transform: scale(0) translate(50%, -50%);
    opacity: 0;
  }
  100% {
    transform: scale(1) translate(50%, -50%);
  }
}

@keyframes antZoomBadgeOut {
  0% {
    transform: scale(1) translate(50%, -50%);
  }
  100% {
    transform: scale(0) translate(50%, -50%);
    opacity: 0;
  }
}

@breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';

.@{breadcrumb-prefix-cls} {
  .reset-component;
  color: @breadcrumb-base-color;
  font-size: @breadcrumb-font-size;

  .@{iconfont-css-prefix} {
    font-size: @breadcrumb-icon-font-size;
  }

  a {
    color: @breadcrumb-link-color;
    transition: color 0.3s;
    &:hover {
      color: @breadcrumb-link-color-hover;
    }
  }

  & > span:last-child {
    color: @breadcrumb-last-item-color;
  }

  & > span:last-child &-separator {
    display: none;
  }

  &-separator {
    margin: @breadcrumb-separator-margin;
    color: @breadcrumb-separator-color;
  }

  &-link {
    > .@{iconfont-css-prefix} + span {
      margin-left: 4px;
    }
  }
}

// mixins for button
// ------------------------
.button-size(@height; @padding; @font-size; @border-radius) {
  height: @height;
  padding: @padding;
  font-size: @font-size;
  border-radius: @border-radius;
}

.button-disabled() {
  &-disabled,
  &.disabled,
  &[disabled] {
    &,
    &:hover,
    &:focus,
    &:active,
    &.active {
      .button-color(@btn-disable-color; @btn-disable-bg; @btn-disable-border);
      text-shadow: none;
      box-shadow: none;
    }
  }
}

.button-variant-primary(@color; @background) {
  .button-color(@color; @background; @background);
  text-shadow: @btn-text-shadow;
  box-shadow: @btn-primary-shadow;

  &:hover,
  &:focus {
    .button-color(
      @color; ~`colorPalette('@{background}', 5) `; ~`colorPalette('@{background}', 5) `
    );
  }

  &:active,
  &.active {
    .button-color(
      @color; ~`colorPalette('@{background}', 7) `; ~`colorPalette('@{background}', 7) `
    );
  }

  .button-disabled();
}

.button-variant-other(@color; @background; @border) {
  .button-color(@color; @background; @border);

  &:hover,
  &:focus {
    .button-color(
      ~`colorPalette('@{btn-primary-bg}', 5) `; @background; ~`colorPalette('@{btn-primary-bg}', 5)
        `
    );
  }
  &:active,
  &.active {
    .button-color(
      ~`colorPalette('@{btn-primary-bg}', 7) `; @background; ~`colorPalette('@{btn-primary-bg}', 7)
        `
    );
  }
  .button-disabled();
}

.button-variant-danger(@color; @background; @border) {
  .button-color(@color; @background; @border);
  &:hover {
    .button-color(
      @btn-primary-color; ~`colorPalette('@{color}', 5) `; ~`colorPalette('@{color}', 5) `
    );
  }
  &:focus {
    .button-color(
      ~`colorPalette('@{color}', 5) `; @component-background; ~`colorPalette('@{color}', 5) `
    );
  }
  &:active,
  &.active {
    .button-color(
      @btn-primary-color; ~`colorPalette('@{color}', 7) `; ~`colorPalette('@{color}', 7) `
    );
  }
  .button-disabled();
}

.button-variant-ghost(@color) {
  .button-color(@color; transparent; @color);
  text-shadow: none;
  &:hover,
  &:focus {
    .button-color(~`colorPalette('@{color}', 5) `; transparent; ~`colorPalette('@{color}', 5) `);
  }
  &:active,
  &.active {
    .button-color(~`colorPalette('@{color}', 7) `; transparent; ~`colorPalette('@{color}', 7) `);
  }
  .button-disabled();
}

.button-color(@color; @background; @border) {
  color: @color;
  background-color: @background;
  border-color: @border;
  // a inside Button which only work in Chrome
  // http://stackoverflow.com/a/17253457
  > a:only-child {
    color: currentColor;
    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: transparent;
      content: '';
    }
  }
}

.button-group-base(@btnClassName) {
  position: relative;
  display: inline-block;
  > .@{btnClassName},
  > span > .@{btnClassName} {
    position: relative;
    &:hover,
    &:focus,
    &:active,
    &.active {
      z-index: 2;
    }
    &:disabled {
      z-index: 0;
    }
  }
  // size
  &-lg > .@{btnClassName},
  &-lg > span > .@{btnClassName} {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; 0);
    line-height: @btn-height-lg - 2px;
  }
  &-sm > .@{btnClassName},
  &-sm > span > .@{btnClassName} {
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; 0);
    line-height: @btn-height-sm - 2px;
    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }
}

// Base styles of buttons
// --------------------------------------------------
.btn() {
  position: relative;
  display: inline-block;
  font-weight: @btn-font-weight;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  border: @btn-border-width @btn-border-style transparent;
  box-shadow: @btn-shadow;
  cursor: pointer;
  transition: all 0.3s @ease-in-out;
  user-select: none;
  touch-action: manipulation;
  .button-size(@btn-height-base; @btn-padding-base; @font-size-base; @btn-border-radius-base);
  > .@{iconfont-css-prefix} {
    line-height: 1;
  }
  &,
  &:active,
  &:focus {
    outline: 0;
  }
  &:not([disabled]):hover {
    text-decoration: none;
  }
  &:not([disabled]):active {
    outline: 0;
    box-shadow: none;
  }
  &.disabled,
  &[disabled] {
    cursor: not-allowed;
    > * {
      pointer-events: none;
    }
  }
  &-lg {
    .button-size(@btn-height-lg; @btn-padding-lg; @btn-font-size-lg; @btn-border-radius-base);
  }
  &-sm {
    .button-size(@btn-height-sm; @btn-padding-sm; @btn-font-size-sm; @btn-border-radius-sm);
  }
}

// primary button style
.btn-primary() {
  .button-variant-primary(@btn-primary-color; @btn-primary-bg);
}

// default button style
.btn-default() {
  .button-variant-other(@btn-default-color; @btn-default-bg; @btn-default-border);
  &:hover,
  &:focus,
  &:active,
  &.active {
    text-decoration: none;
    background: @btn-default-bg;
  }
}

// ghost button style
.btn-ghost() {
  .button-variant-other(@btn-ghost-color, @btn-ghost-bg, @btn-ghost-border);
}

// dashed button style
.btn-dashed() {
  .button-variant-other(@btn-default-color, @btn-default-bg, @btn-default-border);
  border-style: dashed;
}

// danger button style
.btn-danger() {
  .button-variant-danger(@btn-danger-color, @btn-danger-bg, @btn-danger-border);
}

// round button
.btn-round(@btnClassName: btn) {
  .button-size(@btn-circle-size; 0 @btn-circle-size / 2; @font-size-base + 2px; @btn-circle-size);
  &.@{btnClassName}-lg {
    .button-size(
      @btn-circle-size-lg; 0 @btn-circle-size-lg / 2; @btn-font-size-lg + 2px; @btn-circle-size-lg
    );
  }
  &.@{btnClassName}-sm {
    .button-size(
      @btn-circle-size-sm; 0 @btn-circle-size-sm / 2; @font-size-base; @btn-circle-size-sm
    );
  }
}

// circle button: the content only contains icon
.btn-circle(@btnClassName: btn) {
  .square(@btn-circle-size);
  .button-size(@btn-circle-size; 0; @font-size-base + 2px; 50%);
  &.@{btnClassName}-lg {
    .square(@btn-circle-size-lg);
    .button-size(@btn-circle-size-lg; 0; @btn-font-size-lg + 2px; 50%);
  }
  &.@{btnClassName}-sm {
    .square(@btn-circle-size-sm);
    .button-size(@btn-circle-size-sm; 0; @font-size-base; 50%);
  }
}

// Horizontal button groups styl
// --------------------------------------------------
.btn-group(@btnClassName: btn) {
  .button-group-base(@btnClassName);
  .@{btnClassName} + .@{btnClassName},
  .@{btnClassName} + &,
  span + .@{btnClassName},
  .@{btnClassName} + span,
  > span + span,
  & + .@{btnClassName},
  & + & {
    margin-left: -1px;
  }
  .@{btnClassName}-primary + .@{btnClassName}:not(.@{btnClassName}-primary):not([disabled]) {
    border-left-color: transparent;
  }
  .@{btnClassName} {
    border-radius: 0;
  }
  > .@{btnClassName}:first-child,
  > span:first-child > .@{btnClassName} {
    margin-left: 0;
  }
  > .@{btnClassName}:only-child {
    border-radius: @btn-border-radius-base;
  }
  > span:only-child > .@{btnClassName} {
    border-radius: @btn-border-radius-base;
  }
  > .@{btnClassName}:first-child:not(:last-child),
  > span:first-child:not(:last-child) > .@{btnClassName} {
    border-top-left-radius: @btn-border-radius-base;
    border-bottom-left-radius: @btn-border-radius-base;
  }
  > .@{btnClassName}:last-child:not(:first-child),
  > span:last-child:not(:first-child) > .@{btnClassName} {
    border-top-right-radius: @btn-border-radius-base;
    border-bottom-right-radius: @btn-border-radius-base;
  }
  &-sm {
    > .@{btnClassName}:only-child {
      border-radius: @btn-border-radius-sm;
    }
    > span:only-child > .@{btnClassName} {
      border-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:first-child:not(:last-child),
    > span:first-child:not(:last-child) > .@{btnClassName} {
      border-top-left-radius: @btn-border-radius-sm;
      border-bottom-left-radius: @btn-border-radius-sm;
    }
    > .@{btnClassName}:last-child:not(:first-child),
    > span:last-child:not(:first-child) > .@{btnClassName} {
      border-top-right-radius: @btn-border-radius-sm;
      border-bottom-right-radius: @btn-border-radius-sm;
    }
  }
  & > & {
    float: left;
  }
  & > &:not(:first-child):not(:last-child) > .@{btnClassName} {
    border-radius: 0;
  }
  & > &:first-child:not(:last-child) {
    > .@{btnClassName}:last-child {
      padding-right: 8px;
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }
  & > &:last-child:not(:first-child) > .@{btnClassName}:first-child {
    padding-left: 8px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }
}

@btn-prefix-cls: ~'@{ant-prefix}-btn';

// for compatible
@btn-ghost-color: @text-color;
@btn-ghost-bg: transparent;
@btn-ghost-border: @border-color-base;

// Button styles
// -----------------------------
.@{btn-prefix-cls} {
  // Fixing https://github.com/ant-design/ant-design/issues/12978
  // It is a render problem of chrome, which is only happened in the codesandbox demo
  // 0.001px solution works and I don't why
  line-height: @line-height-base - 0.001;
  .btn;
  .btn-default;

  // Make sure that the target of Button's click event always be `button`
  // Ref: https://github.com/ant-design/ant-design/issues/7034
  > i,
  > span {
    display: inline-block;
    pointer-events: none;
  }

  &-primary {
    .btn-primary;

    .@{btn-prefix-cls}-group &:not(:first-child):not(:last-child) {
      border-right-color: @btn-group-border;
      border-left-color: @btn-group-border;

      &:disabled {
        border-color: @btn-default-border;
      }
    }

    .@{btn-prefix-cls}-group &:first-child {
      &:not(:last-child) {
        border-right-color: @btn-group-border;
        &[disabled] {
          border-right-color: @btn-default-border;
        }
      }
    }

    .@{btn-prefix-cls}-group &:last-child:not(:first-child),
    .@{btn-prefix-cls}-group & + & {
      border-left-color: @btn-group-border;
      &[disabled] {
        border-left-color: @btn-default-border;
      }
    }
  }

  &-ghost {
    .btn-ghost;
  }

  &-dashed {
    .btn-dashed;
  }

  &-danger {
    .btn-danger;
  }

  &-round {
    .btn-round(@btn-prefix-cls);
  }

  &-circle,
  &-circle-outline {
    .btn-circle(@btn-prefix-cls);
  }

  &::before {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: 1;
    display: none;
    background: @component-background;
    border-radius: inherit;
    opacity: 0.35;
    transition: opacity 0.2s;
    pointer-events: none;
    content: '';
  }

  .@{iconfont-css-prefix} {
    transition: margin-left 0.3s @ease-in-out;

    // Follow icon blur under windows. Change the render.
    // https://github.com/ant-design/ant-design/issues/13924
    &.@{iconfont-css-prefix}-plus,
    &.@{iconfont-css-prefix}-minus {
      > svg {
        shape-rendering: optimizeSpeed;
      }
    }
  }

  &&-loading::before {
    display: block;
  }

  &&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    position: relative;
    padding-left: 29px;
    pointer-events: none;
    .@{iconfont-css-prefix}:not(:last-child) {
      margin-left: -14px;
    }
  }

  &-sm&-loading:not(&-circle):not(&-circle-outline):not(&-icon-only) {
    padding-left: 24px;
    .@{iconfont-css-prefix} {
      margin-left: -17px;
    }
  }

  &-group {
    .btn-group(@btn-prefix-cls);
  }

  &:not(&-circle):not(&-circle-outline) &-icon-only {
    padding-right: 8px;
    padding-left: 8px;
  }

  // http://stackoverflow.com/a/21281554/3040605
  &:focus > span,
  &:active > span {
    position: relative;
  }

  // To ensure that a space will be placed between character and `Icon`.
  > .@{iconfont-css-prefix} + span,
  > span + .@{iconfont-css-prefix} {
    margin-left: 8px;
  }

  &-background-ghost {
    color: @component-background;
    background: transparent !important;
    border-color: @component-background;
  }

  &-background-ghost&-primary {
    .button-variant-ghost(@btn-primary-bg);
  }

  &-background-ghost&-danger {
    .button-variant-ghost(@btn-danger-color);
  }

  &-two-chinese-chars::first-letter {
    letter-spacing: 0.34em;
  }

  &-two-chinese-chars > *:not(.@{iconfont-css-prefix}) {
    margin-right: -0.34em;
    letter-spacing: 0.34em;
  }

  &-block {
    width: 100%;
  }

  // https://github.com/ant-design/ant-design/issues/12681
  &:empty {
    vertical-align: top;
  }
}

a.@{btn-prefix-cls} {
  line-height: @btn-height-base - 2px;
  &-lg {
    line-height: @btn-height-lg - 2px;
  }
  &-sm {
    line-height: @btn-height-sm - 2px;
  }
}

@card-prefix-cls: ~'@{ant-prefix}-card';
@card-head-height: 48px;
@card-hover-border: fade(@black, 9%);

@gradient-min: fade(@card-background, 20%);
@gradient-max: fade(@card-background, 40%);

.@{card-prefix-cls} {
  .reset-component;
  position: relative;
  background: @component-background;
  border-radius: @card-radius;
  transition: all 0.3s;

  &-hoverable {
    cursor: pointer;
    &:hover {
      border-color: @card-hover-border;
      box-shadow: @card-shadow;
    }
  }

  &-bordered {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-head {
    min-height: @card-head-height;
    margin-bottom: -1px; // Fix card grid overflow bug: https://gw.alipayobjects.com/zos/rmsportal/XonYxBikwpgbqIQBeuhk.png
    padding: 0 @card-padding-base;
    color: @card-head-color;
    font-weight: 500;
    font-size: @font-size-lg;
    background: @card-head-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @card-radius @card-radius 0 0;
    .clearfix;

    &-wrapper {
      display: flex;
      align-items: center;
    }

    &-title {
      display: inline-block;
      flex: 1;
      padding: @card-head-padding 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .@{ant-prefix}-tabs {
      clear: both;
      margin-bottom: -17px;
      color: @text-color;
      font-weight: normal;
      font-size: @font-size-base;

      &-bar {
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-extra {
    float: right;
    // https://stackoverflow.com/a/22429853/3040605
    margin-left: auto;
    padding: @card-head-padding 0;
    color: @text-color;
    font-weight: normal;
    font-size: @font-size-base;
  }

  &-body {
    padding: @card-padding-base;
    .clearfix;
  }

  &-contain-grid:not(&-loading) &-body {
    margin: -1px 0 0 -1px;
    padding: 0;
  }

  &-grid {
    float: left;
    width: 33.33%;
    padding: @card-padding-base;
    border: 0;
    border-radius: 0;
    box-shadow: 1px 0 0 0 @border-color-split, 0 1px 0 0 @border-color-split,
    1px 1px 0 0 @border-color-split, 1px 0 0 0 @border-color-split inset,
    0 1px 0 0 @border-color-split inset;
    transition: all 0.3s;
    &:hover {
      position: relative;
      z-index: 1;
      box-shadow: @box-shadow-base;
    }
  }

  &-contain-tabs > &-head &-head-title {
    min-height: @card-head-height - @card-head-padding;
    padding-bottom: 0;
  }

  &-contain-tabs &-extra {
    padding-bottom: 0;
  }

  &-cover {
    > * {
      display: block;
      width: 100%;
    }
    img {
      border-radius: @card-radius @card-radius 0 0;
    }
  }

  &-actions {
    margin: 0;
    padding: 0;
    list-style: none;
    background: @card-actions-background;
    border-top: @border-width-base @border-style-base @border-color-split;
    .clearfix;

    & > li {
      float: left;
      margin: 12px 0;
      color: @text-color-secondary;
      text-align: center;

      & > span {
        position: relative;
        display: inline-block;
        min-width: 32px;
        font-size: 14px;
        line-height: 22px;
        cursor: pointer;

        &:hover {
          color: @primary-color;
          transition: color 0.3s;
        }

        & > .anticon {
          font-size: 16px;
          line-height: 22px;
        }

        a {
          display: inline-block;
          width: 100%;
          color: @text-color-secondary;
          line-height: 22px;

          &:hover {
            color: @primary-color;
          }
        }
      }

      &:not(:last-child) {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }
  }

  &-type-inner &-head {
    padding: 0 @card-padding-base;
    background: @background-color-light;

    &-title {
      padding: @card-inner-head-padding 0;
      font-size: @font-size-base;
    }
  }

  &-type-inner &-body {
    padding: 16px @card-padding-base;
  }

  &-type-inner &-extra {
    padding: @card-inner-head-padding + 1.5px 0;
  }

  &-meta {
    margin: -4px 0;
    .clearfix;

    &-avatar {
      float: left;
      padding-right: 16px;
    }

    &-detail {
      overflow: hidden;
      > div:not(:last-child) {
        margin-bottom: 8px;
      }
    }

    &-title {
      overflow: hidden;
      color: @card-head-color;
      font-weight: 500;
      font-size: @font-size-lg;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-description {
      color: @text-color-secondary;
    }
  }

  &-loading {
    overflow: hidden;
  }

  &-loading &-body {
    user-select: none;
  }

  &-loading-content {
    p {
      margin: 0;
    }
  }

  &-loading-block {
    height: 14px;
    margin: 4px 0;
    background: linear-gradient(90deg, @gradient-min, @gradient-max, @gradient-min);
    background-size: 600% 600%;
    border-radius: @card-radius;
    animation: card-loading 1.4s ease infinite;
  }
}

@keyframes card-loading {
  0%,
  100% {
    background-position: 0 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@card-head-height-sm: 36px;
@card-padding-base-sm: @card-padding-base / 2;
@card-head-padding-sm: @card-head-padding / 2;
@card-head-font-size-sm: @font-size-base;

.@{card-prefix-cls}-small {
  > .@{card-prefix-cls}-head {
    min-height: @card-head-height-sm;
    padding: 0 @card-padding-base-sm;
    font-size: @card-head-font-size-sm;

    > .@{card-prefix-cls}-head-wrapper {
      > .@{card-prefix-cls}-head-title {
        padding: @card-head-padding-sm 0;
      }
      > .@{card-prefix-cls}-extra {
        padding: @card-head-padding-sm 0;
        font-size: @card-head-font-size-sm;
      }
    }
  }
  > .@{card-prefix-cls}-body {
    padding: @card-padding-base-sm;
  }
}

// style dependencies

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

// card style
.@{tab-prefix-cls} {
  &&-card &-card-bar &-nav-container {
    height: @tabs-card-height;
  }
  &&-card &-card-bar &-ink-bar {
    visibility: hidden;
  }
  &&-card &-card-bar &-tab {
    height: @tabs-card-height;
    margin: 0;
    margin-right: 2px;
    padding: 0 16px;
    line-height: @tabs-card-height - 2px;
    background: @tabs-card-head-background;
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base @border-radius-base 0 0;
    transition: all 0.3s @ease-in-out;
  }
  &&-card &-card-bar &-tab-active {
    height: @tabs-card-height;
    color: @tabs-card-active-color;
    background: @component-background;
    border-color: @border-color-split;
    border-bottom: @border-width-base solid @component-background;
  }
  &&-card &-card-bar &-tab-inactive {
    padding: 0;
  }
  &&-card &-card-bar &-nav-wrap {
    margin-bottom: 0;
  }
  &&-card &-card-bar &-tab &-close-x {
    width: 16px;
    height: 16px;
    height: @font-size-base;
    margin-right: -5px;
    margin-left: 3px;
    overflow: hidden;
    color: @text-color-secondary;
    font-size: @font-size-sm;
    vertical-align: middle;
    transition: all 0.3s;
    &:hover {
      color: @heading-color;
    }
  }

  &&-card &-card-content > &-tabpane,
  &&-editable-card &-card-content > &-tabpane {
    transition: none !important;
    &-inactive {
      overflow: hidden;
    }
  }

  &&-card &-card-bar &-tab:hover .@{iconfont-css-prefix}-close {
    opacity: 1;
  }

  &-extra-content {
    line-height: @tabs-card-height;

    .@{tab-prefix-cls}-new-tab {
      position: relative;
      width: 20px;
      height: 20px;
      color: @text-color;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      border: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-sm;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        color: @tabs-card-active-color;
        border-color: @tabs-card-active-color;
      }
      svg {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        margin: auto;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4669
  &-vertical&-card &-card-bar&-left-bar,
  &-vertical&-card &-card-bar&-right-bar {
    .@{tab-prefix-cls}-nav-container {
      height: auto;
    }
    .@{tab-prefix-cls}-tab {
      margin-bottom: 8px;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      &-active {
        padding-bottom: 4px;
      }
      &:last-child {
        margin-bottom: 8px;
      }
    }
    .@{tab-prefix-cls}-new-tab {
      width: 90%;
    }
  }

  &-vertical&-card&-left &-card-bar&-left-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-right: 0;
    }
    .@{tab-prefix-cls}-tab {
      margin-right: 1px;
      border-right: 0;
      border-radius: @border-radius-base 0 0 @border-radius-base;
      &-active {
        margin-right: -1px;
        padding-right: 18px;
      }
    }
  }

  &-vertical&-card&-right &-card-bar&-right-bar {
    .@{tab-prefix-cls}-nav-wrap {
      margin-left: 0;
    }
    .@{tab-prefix-cls}-tab {
      margin-left: 1px;
      border-left: 0;
      border-radius: 0 @border-radius-base @border-radius-base 0;
      &-active {
        margin-left: -1px;
        padding-left: 18px;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  & &-card-bar&-bottom-bar &-tab {
    border-top: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
  }

  & &-card-bar&-bottom-bar &-tab-active {
    padding-top: 1px;
    padding-bottom: 0;
    color: @primary-color;
  }
}

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

.@{tab-prefix-cls} {
  .reset-component;
  position: relative;
  overflow: hidden;
  .clearfix;

  &-ink-bar {
    position: absolute;
    bottom: 1px;
    left: 0;
    z-index: 1;
    box-sizing: border-box;
    height: 2px;
    background-color: @tabs-ink-bar-color;
    transform-origin: 0 0;
  }

  &-bar {
    margin: @tabs-bar-margin;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    outline: none;
    transition: padding 0.3s @ease-in-out;
  }

  &-nav-container {
    position: relative;
    box-sizing: border-box;
    margin-bottom: -1px;
    overflow: hidden;
    font-size: @tabs-title-font-size;
    line-height: @line-height-base;
    white-space: nowrap;
    transition: padding 0.3s @ease-in-out;
    .clearfix;

    &-scrolling {
      padding-right: @tabs-scrolling-size;
      padding-left: @tabs-scrolling-size;
    }
  }

  // https://github.com/ant-design/ant-design/issues/9104
  &-bottom &-bottom-bar {
    margin-top: 16px;
    margin-bottom: 0;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-bottom: none;
  }

  &-bottom &-bottom-bar &-ink-bar {
    top: 1px;
    bottom: auto;
  }

  &-bottom &-bottom-bar &-nav-container {
    margin-top: -1px;
    margin-bottom: 0;
  }

  &-tab-prev,
  &-tab-next {
    position: absolute;
    z-index: 2;
    width: 0;
    height: 100%;
    color: @text-color-secondary;
    text-align: center;
    background-color: transparent;
    border: 0;
    cursor: pointer;
    opacity: 0;
    transition: width 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
    user-select: none;
    pointer-events: none;

    &.@{tab-prefix-cls}-tab-arrow-show {
      width: @tabs-scrolling-size;
      height: 100%;
      opacity: 1;
      pointer-events: auto;
    }

    &:hover {
      color: @text-color;
    }

    &-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-weight: bold;
      font-style: normal;
      font-variant: normal;
      line-height: inherit;
      text-align: center;
      text-transform: none;
      transform: translate(-50%, -50%);

      &-target {
        display: block;
        .iconfont-size-under-12px(10px);
      }
    }
  }

  &-tab-btn-disabled {
    cursor: not-allowed;
    &,
    &:hover {
      color: @disabled-color;
    }
  }

  &-tab-next {
    right: 2px;
  }

  &-tab-prev {
    left: 0;
    :root & {
      filter: none;
    }
  }

  &-nav-wrap {
    margin-bottom: -1px;
    overflow: hidden;
  }

  &-nav-scroll {
    overflow: hidden;
    white-space: nowrap;
  }

  &-nav {
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    margin: 0;
    padding-left: 0;
    list-style: none;
    transition: transform 0.3s @ease-in-out;

    &::before,
    &::after {
      display: table;
      content: ' ';
    }

    &::after {
      clear: both;
    }

    .@{tab-prefix-cls}-tab {
      position: relative;
      display: inline-block;
      box-sizing: border-box;
      height: 100%;
      margin: @tabs-horizontal-margin;
      padding: @tabs-horizontal-padding;
      text-decoration: none;
      cursor: pointer;

      transition: color 0.3s @ease-in-out;

      &:last-child {
        margin-right: 0;
      }

      &:hover {
        color: @tabs-hover-color;
      }

      &:active {
        color: @tabs-active-color;
      }

      .@{iconfont-css-prefix} {
        margin-right: 8px;
      }

      &-disabled {
        &,
        &:hover {
          color: @disabled-color;
          cursor: not-allowed;
        }
      }

      &-active {
        color: @tabs-highlight-color;
        font-weight: 500;
      }
    }
  }

  .@{tab-prefix-cls}-large-bar {
    .@{tab-prefix-cls}-nav-container {
      font-size: @tabs-title-font-size-lg;
    }
    .@{tab-prefix-cls}-tab {
      padding: @tabs-horizontal-padding-lg;
    }
  }

  .@{tab-prefix-cls}-small-bar {
    .@{tab-prefix-cls}-nav-container {
      font-size: @tabs-title-font-size-sm;
    }
    .@{tab-prefix-cls}-tab {
      padding: @tabs-horizontal-padding-sm;
    }
  }

  // Horizontal Content
  .@{tab-prefix-cls}-top-content,
  .@{tab-prefix-cls}-bottom-content {
    width: 100%;

    > .@{tab-prefix-cls}-tabpane {
      flex-shrink: 0;
      width: 100%;
      opacity: 1;
      transition: opacity 0.45s;
    }

    > .@{tab-prefix-cls}-tabpane-inactive {
      height: 0;
      padding: 0 !important;
      opacity: 0;
      pointer-events: none;
      input {
        visibility: hidden;
      }
    }

    &.@{tab-prefix-cls}-content-animated {
      display: flex;
      flex-direction: row;
      transition: margin-left 0.3s @ease-in-out;
      will-change: margin-left;
    }
  }

  // Vertical Bar
  .@{tab-prefix-cls}-left-bar,
  .@{tab-prefix-cls}-right-bar {
    height: 100%;
    border-bottom: 0;
    &-tab-prev,
    &-tab-next {
      width: @tabs-scrolling-size;
      height: 0;
      transition: height 0.3s @ease-in-out, opacity 0.3s @ease-in-out, color 0.3s @ease-in-out;
    }
    &-tab-prev.@{tab-prefix-cls}-tab-arrow-show,
    &-tab-next.@{tab-prefix-cls}-tab-arrow-show {
      width: 100%;
      height: @tabs-scrolling-size;
    }

    .@{tab-prefix-cls}-tab {
      display: block;
      float: none;
      margin: @tabs-vertical-margin;
      padding: @tabs-vertical-padding;

      &:last-child {
        margin-bottom: 0;
      }
    }

    .@{tab-prefix-cls}-extra-content {
      text-align: center;
    }

    .@{tab-prefix-cls}-nav-scroll {
      width: auto;
    }

    .@{tab-prefix-cls}-nav-container,
    .@{tab-prefix-cls}-nav-wrap {
      height: 100%;
    }

    .@{tab-prefix-cls}-nav-container {
      margin-bottom: 0;

      &.@{tab-prefix-cls}-nav-container-scrolling {
        padding: @tabs-scrolling-size 0;
      }
    }

    .@{tab-prefix-cls}-nav-wrap {
      margin-bottom: 0;
    }

    .@{tab-prefix-cls}-nav {
      width: 100%;
    }

    .@{tab-prefix-cls}-ink-bar {
      top: 0;
      bottom: auto;
      left: auto;
      width: 2px;
      height: auto;
    }

    .@{tab-prefix-cls}-tab-next {
      bottom: 0;
      width: 100%;
      height: @tabs-scrolling-size;
    }

    .@{tab-prefix-cls}-tab-prev {
      top: 0;
      width: 100%;
      height: @tabs-scrolling-size;
    }
  }

  // Vertical Content
  .@{tab-prefix-cls}-left-content,
  .@{tab-prefix-cls}-right-content {
    width: auto;
    margin-top: 0 !important;
    overflow: hidden;
  }

  // Vertical - Left
  .@{tab-prefix-cls}-left-bar {
    float: left;
    margin-right: -1px;
    margin-bottom: 0;
    border-right: @border-width-base @border-style-base @border-color-split;
    .@{tab-prefix-cls}-tab {
      text-align: right;
    }
    .@{tab-prefix-cls}-nav-container {
      margin-right: -1px;
    }
    .@{tab-prefix-cls}-nav-wrap {
      margin-right: -1px;
    }
    .@{tab-prefix-cls}-ink-bar {
      right: 1px;
    }
  }
  .@{tab-prefix-cls}-left-content {
    padding-left: 24px;
    border-left: @border-width-base @border-style-base @border-color-split;
  }

  // Vertical - Right
  .@{tab-prefix-cls}-right-bar {
    float: right;
    margin-bottom: 0;
    margin-left: -1px;
    border-left: @border-width-base @border-style-base @border-color-split;
    .@{tab-prefix-cls}-nav-container {
      margin-left: -1px;
    }
    .@{tab-prefix-cls}-nav-wrap {
      margin-left: -1px;
    }
    .@{tab-prefix-cls}-ink-bar {
      left: 1px;
    }
  }
  .@{tab-prefix-cls}-right-content {
    padding-right: 24px;
    border-right: @border-width-base @border-style-base @border-color-split;
  }
}

.@{tab-prefix-cls}-top .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-bottom .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform 0.3s @ease-in-out, width 0.3s @ease-in-out, left 0.3s @ease-in-out;
}

.@{tab-prefix-cls}-left .@{tab-prefix-cls}-ink-bar-animated,
.@{tab-prefix-cls}-right .@{tab-prefix-cls}-ink-bar-animated {
  transition: transform 0.3s @ease-in-out, height 0.3s @ease-in-out, top 0.3s @ease-in-out;
}

// No animation
.tabs-no-animation() {
  > .@{tab-prefix-cls}-content-animated {
    margin-left: 0 !important;
    transform: none !important;
  }
  > .@{tab-prefix-cls}-tabpane-inactive {
    display: none;
  }
}

.no-flex,
.@{tab-prefix-cls}-no-animation {
  > .@{tab-prefix-cls}-content {
    .tabs-no-animation();
  }
}

.@{tab-prefix-cls}-left-content,
.@{tab-prefix-cls}-right-content {
  .tabs-no-animation();
}

// mixins for grid system
// ------------------------
.make-row(@gutter: @grid-gutter-width) {
  position: relative;
  height: auto;
  margin-right: (@gutter / -2);
  margin-left: (@gutter / -2);
  .clearfix;
}

.make-grid-columns() {
  .col(@index) {
    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
    @item: ~'.@{ant-prefix}-col-@{index}, .@{ant-prefix}-col-xs-@{index}, .@{ant-prefix}-col-sm-@{index}, .@{ant-prefix}-col-md-@{index}, .@{ant-prefix}-col-lg-@{index}';
    .col((@index + 1), ~'@{list}, @{item}');
  }
  .col(@index, @list) when (@index > @grid-columns) {
    @{list} {
      position: relative;
      // Prevent columns from collapsing when empty
      min-height: 1px;
      padding-right: (@grid-gutter-width / 2);
      padding-left: (@grid-gutter-width / 2);
    }
  }
  .col(1);
}

.float-grid-columns(@class) {
  .col(@index) {
    // initial
    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
    .col((@index + 1), @item);
  }
  .col(@index, @list) when (@index =< @grid-columns) {
    // general
    @item: ~'.@{ant-prefix}-col@{class}-@{index}';
    .col((@index + 1), ~'@{list}, @{item}');
  }
  .col(@index, @list) when (@index > @grid-columns) {
    // terminal
    @{list} {
      flex: 0 0 auto;
      float: left;
    }
  }
  .col(1); // kickstart it
}

.loop-grid-columns(@index, @class) when (@index > 0) {
  .@{ant-prefix}-col@{class}-@{index} {
    display: block;
    box-sizing: border-box;
    width: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-push-@{index} {
    left: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-pull-@{index} {
    right: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-offset-@{index} {
    margin-left: percentage((@index / @grid-columns));
  }
  .@{ant-prefix}-col@{class}-order-@{index} {
    order: @index;
  }
  .loop-grid-columns((@index - 1), @class);
}

.loop-grid-columns(@index, @class) when (@index = 0) {
  .@{ant-prefix}-col@{class}-@{index} {
    display: none;
  }
  .@{ant-prefix}-col-push-@{index} {
    left: auto;
  }
  .@{ant-prefix}-col-pull-@{index} {
    right: auto;
  }
  .@{ant-prefix}-col@{class}-push-@{index} {
    left: auto;
  }
  .@{ant-prefix}-col@{class}-pull-@{index} {
    right: auto;
  }
  .@{ant-prefix}-col@{class}-offset-@{index} {
    margin-left: 0;
  }
  .@{ant-prefix}-col@{class}-order-@{index} {
    order: 0;
  }
}

.make-grid(@class: ~'') {
  .float-grid-columns(@class);
  .loop-grid-columns(@grid-columns, @class);
}

// Grid system
.@{ant-prefix}-row {
  .make-row();
  display: block;
  box-sizing: border-box;
}

.@{ant-prefix}-row-flex {
  display: flex;
  flex-flow: row wrap;

  &::before,
  &::after {
    display: flex;
  }
}

// x轴原点
.@{ant-prefix}-row-flex-start {
  justify-content: flex-start;
}

// x轴居中
.@{ant-prefix}-row-flex-center {
  justify-content: center;
}

// x轴反方向
.@{ant-prefix}-row-flex-end {
  justify-content: flex-end;
}

// x轴平分
.@{ant-prefix}-row-flex-space-between {
  justify-content: space-between;
}

// x轴有间隔地平分
.@{ant-prefix}-row-flex-space-around {
  justify-content: space-around;
}

// 顶部对齐
.@{ant-prefix}-row-flex-top {
  align-items: flex-start;
}

// 居中对齐
.@{ant-prefix}-row-flex-middle {
  align-items: center;
}

// 底部对齐
.@{ant-prefix}-row-flex-bottom {
  align-items: flex-end;
}

.@{ant-prefix}-col {
  position: relative;
}

.make-grid-columns();
.make-grid();

// Extra small grid
//
// Columns, offsets, pushes, and pulls for extra small devices like
// smartphones.

.make-grid(-xs);

// Small grid
//
// Columns, offsets, pushes, and pulls for the small device range, from phones
// to tablets.

@media (min-width: @screen-sm-min) {
  .make-grid(-sm);
}

// Medium grid
//
// Columns, offsets, pushes, and pulls for the desktop device range.

@media (min-width: @screen-md-min) {
  .make-grid(-md);
}

// Large grid
//
// Columns, offsets, pushes, and pulls for the large desktop device range.

@media (min-width: @screen-lg-min) {
  .make-grid(-lg);
}

// Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xl-min) {
  .make-grid(-xl);
}

// Extra Extra Large grid
//
// Columns, offsets, pushes, and pulls for the full hd device range.

@media (min-width: @screen-xxl-min) {
  .make-grid(-xxl);
}

.@{ant-prefix}-carousel {
  .reset-component;

  .slick-slider {
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
  }
  .slick-list {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    overflow: hidden;

    &:focus {
      outline: none;
    }

    &.dragging {
      cursor: pointer;
    }

    .slick-slide {
      pointer-events: none;

      &.slick-active {
        pointer-events: auto;
      }
    }
  }
  .slick-slider .slick-track,
  .slick-slider .slick-list {
    transform: translate3d(0, 0, 0);
  }

  .slick-track {
    position: relative;
    top: 0;
    left: 0;
    display: block;

    &::before,
    &::after {
      display: table;
      content: '';
    }

    &::after {
      clear: both;
    }

    .slick-loading & {
      visibility: hidden;
    }
  }
  .slick-slide {
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;
    [dir='rtl'] & {
      float: right;
    }
    img {
      display: block;
    }
    &.slick-loading img {
      display: none;
    }

    &.dragging img {
      pointer-events: none;
    }
  }

  .slick-initialized .slick-slide {
    display: block;
  }

  .slick-loading .slick-slide {
    visibility: hidden;
  }

  .slick-vertical .slick-slide {
    display: block;
    height: auto;
    border: @border-width-base @border-style-base transparent;
  }
  .slick-arrow.slick-hidden {
    display: none;
  }

  // Arrows
  .slick-prev,
  .slick-next {
    position: absolute;
    top: 50%;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -10px;
    padding: 0;
    color: transparent;
    font-size: 0;
    line-height: 0;
    background: transparent;
    border: 0;
    outline: none;
    cursor: pointer;
    &:hover,
    &:focus {
      color: transparent;
      background: transparent;
      outline: none;
      &::before {
        opacity: 1;
      }
    }
    &.slick-disabled::before {
      opacity: 0.25;
    }
  }

  .slick-prev {
    left: -25px;
    &::before {
      content: '←';
    }
  }

  .slick-next {
    right: -25px;
    &::before {
      content: '→';
    }
  }

  // Dots
  .slick-dots {
    position: absolute;
    bottom: 12px;
    display: block;
    width: 100%;
    height: @carousel-dot-height;
    margin: 0;
    padding: 0;
    text-align: center;
    list-style: none;
    li {
      position: relative;
      display: inline-block;
      margin: 0 2px;
      padding: 0;
      text-align: center;
      vertical-align: top;
      button {
        display: block;
        width: @carousel-dot-width;
        height: @carousel-dot-height;
        padding: 0;
        color: transparent;
        font-size: 0;
        background: @component-background;
        border: 0;
        border-radius: 1px;
        outline: none;
        cursor: pointer;
        opacity: 0.3;
        transition: all 0.5s;
        &:hover,
        &:focus {
          opacity: 0.75;
        }
      }
      &.slick-active button {
        width: @carousel-dot-active-width;
        background: @component-background;
        opacity: 1;
        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }
  }
}

.@{ant-prefix}-carousel-vertical {
  .slick-dots {
    top: 50%;
    right: 12px;
    bottom: auto;
    width: @carousel-dot-height;
    height: auto;
    transform: translateY(-50%);
    li {
      margin: 0 2px;
      vertical-align: baseline;
      button {
        width: @carousel-dot-height;
        height: @carousel-dot-width;
      }
      &.slick-active button {
        width: @carousel-dot-height;
        height: @carousel-dot-active-width;
      }
    }
  }
}

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-checkbox') {
  @checkbox-inner-prefix-cls: ~'@{checkbox-prefix-cls}-inner';
  // 一般状态
  .@{checkbox-prefix-cls} {
    .reset-component;
    position: relative;
    top: -0.09em;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
    outline: none;
    cursor: pointer;

    .@{checkbox-prefix-cls}-wrapper:hover &-inner,
    &:hover &-inner,
    &-input:focus + &-inner {
      border-color: @checkbox-color;
    }

    &-checked::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid @checkbox-color;
      border-radius: @border-radius-sm;
      visibility: hidden;
      animation: antCheckboxEffect 0.36s ease-in-out;
      animation-fill-mode: both;
      content: '';
    }

    &:hover::after,
    .@{checkbox-prefix-cls}-wrapper:hover &::after {
      visibility: visible;
    }

    &-inner {
      position: relative;
      top: 0;
      left: 0;
      display: block;
      width: @checkbox-size;
      height: @checkbox-size;
      background-color: @checkbox-check-color;
      border: @checkbox-border-width @border-style-base @border-color-base;
      border-radius: @border-radius-sm;
      // Fix IE checked style
      // https://github.com/ant-design/ant-design/issues/12597
      border-collapse: separate;
      transition: all 0.3s;

      &::after {
        @check-width: (@checkbox-size / 14) * 5px;
        @check-height: (@checkbox-size / 14) * 8px;
        position: absolute;
        top: 50%;
        left: 21%;
        display: table;
        width: @check-width;
        height: @check-height;
        border: 2px solid @checkbox-check-color;
        border-top: 0;
        border-left: 0;
        transform: rotate(45deg) scale(0) translate(-50%, -50%);
        opacity: 0;
        transition: all 0.1s @ease-in-back, opacity 0.1s;
        content: ' ';
      }
    }

    &-input {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      cursor: pointer;
      opacity: 0;
    }
  }

  // 选中状态
  .@{checkbox-prefix-cls}-checked .@{checkbox-inner-prefix-cls}::after {
    position: absolute;
    display: table;
    border: 2px solid @checkbox-check-color;
    border-top: 0;
    border-left: 0;
    transform: rotate(45deg) scale(1) translate(-50%, -50%);
    opacity: 1;
    transition: all 0.2s @ease-out-back 0.1s;
    content: ' ';
  }

  .@{checkbox-prefix-cls}-checked {
    .@{checkbox-inner-prefix-cls} {
      background-color: @checkbox-color;
      border-color: @checkbox-color;
    }
  }

  .@{checkbox-prefix-cls}-disabled {
    cursor: not-allowed;

    &.@{checkbox-prefix-cls}-checked {
      .@{checkbox-inner-prefix-cls}::after {
        border-color: @disabled-color;
        animation-name: none;
      }
    }

    .@{checkbox-prefix-cls}-input {
      cursor: not-allowed;
    }

    .@{checkbox-inner-prefix-cls} {
      background-color: @input-disabled-bg;
      border-color: @border-color-base !important;
      &::after {
        border-color: @input-disabled-bg;
        border-collapse: separate;
        animation-name: none;
      }
    }

    & + span {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }

  .@{checkbox-prefix-cls}-wrapper {
    .reset-component;
    display: inline-block;
    line-height: unset;
    cursor: pointer;
    & + & {
      margin-left: 8px;
    }
  }

  .@{checkbox-prefix-cls}-wrapper + span,
  .@{checkbox-prefix-cls} + span {
    padding-right: 8px;
    padding-left: 8px;
  }

  .@{checkbox-prefix-cls}-group {
    .reset-component;
    display: inline-block;
    &-item {
      display: inline-block;
      margin-right: 8px;
      &:last-child {
        margin-right: 0;
      }
    }
    &-item + &-item {
      margin-left: 0;
    }
  }

  // 半选状态
  .@{checkbox-prefix-cls}-indeterminate {
    .@{checkbox-inner-prefix-cls} {
      background-color: #fff;
      border-color: @border-color-base;
    }
    .@{checkbox-inner-prefix-cls}::after {
      @indeterminate-width: @checkbox-size - 8px;
      @indeterminate-height: @checkbox-size - 8px;
      top: 50%;
      left: 50%;
      width: @indeterminate-width;
      height: @indeterminate-height;
      background-color: @checkbox-color;
      border: 0;
      transform: translate(-50%, -50%) scale(1);
      opacity: 1;
      content: ' ';
    }

    &.@{checkbox-prefix-cls}-disabled .@{checkbox-inner-prefix-cls}::after {
      background-color: @disabled-color;
      border-color: @disabled-color;
    }
  }
}

@keyframes antCheckboxEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.antCheckboxFn();

@collapse-prefix-cls: ~'@{ant-prefix}-collapse';

.@{collapse-prefix-cls} {
  .reset-component;
  background-color: @collapse-header-bg;
  border: @border-width-base @border-style-base @border-color-base;
  border-bottom: 0;
  border-radius: @border-radius-base;

  & > &-item {
    border-bottom: @border-width-base @border-style-base @border-color-base;

    &:last-child {
      &,
      & > .@{collapse-prefix-cls}-header {
        border-radius: 0 0 @border-radius-base @border-radius-base;
      }
    }

    > .@{collapse-prefix-cls}-header {
      position: relative;
      padding: @collapse-header-padding;
      color: @heading-color;
      line-height: 22px;
      cursor: pointer;
      transition: all 0.3s;

      .@{collapse-prefix-cls}-arrow {
        .iconfont-mixin();
        position: absolute;
        top: 50%;
        left: @padding-md;
        display: inline-block;
        margin-top: 2px;
        font-size: @font-size-sm;
        line-height: 46px;
        transform: translateY(-50%);

        & svg {
          transition: transform 0.24s;
        }
      }

      .@{collapse-prefix-cls}-extra {
        float: right;
      }

      &:focus {
        outline: none;
      }
    }

    &.@{collapse-prefix-cls}-no-arrow {
      > .@{collapse-prefix-cls}-header {
        padding-left: 12px;
      }
    }
  }

  &-anim-active {
    transition: height 0.2s @ease-out;
  }

  &-content {
    overflow: hidden;
    color: @text-color;
    background-color: @collapse-content-bg;
    border-top: @border-width-base @border-style-base @border-color-base;

    & > &-box {
      padding: @collapse-content-padding;
    }

    &-inactive {
      display: none;
    }
  }

  &-item:last-child {
    > .@{collapse-prefix-cls}-content {
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-borderless {
    background-color: @component-background;
    border: 0;
  }

  &-borderless > &-item {
    border-bottom: 1px solid @border-color-base;
  }

  &-borderless > &-item:last-child,
  &-borderless > &-item:last-child &-header {
    border-radius: 0;
  }

  &-borderless > &-item > &-content {
    background-color: transparent;
    border-top: 0;
  }

  &-borderless > &-item > &-content > &-content-box {
    padding-top: 4px;
  }

  & &-item-disabled > &-header {
    &,
    & > .arrow {
      color: @disabled-color;
      cursor: not-allowed;
    }
  }
}

@comment-prefix-cls: ~'@{ant-prefix}-comment';

.@{comment-prefix-cls} {
  position: relative;

  &-inner {
    display: flex;
    padding: @comment-padding-base;
  }

  &-avatar {
    position: relative;
    flex-shrink: 0;
    margin-right: 12px;
    cursor: pointer;
    img {
      width: 32px;
      height: 32px;
      border-radius: 50%;
    }
  }

  &-content {
    position: relative;
    flex: 1 1 auto;
    min-width: 1px;
    font-size: 14px;
    word-wrap: break-word;

    &-author {
      display: flex;
      justify-content: flex-start;
      margin-bottom: 4px;
      font-size: 14px;
      & > a,
      & > span {
        height: 18px;
        padding-right: 8px;
        font-size: 12px;
        line-height: 18px;
      }

      &-name {
        color: @comment-author-name-color;
        font-size: 14px;
        transition: color 0.3s;
        > * {
          color: @comment-author-name-color;
          &:hover {
            color: @comment-author-name-color;
          }
        }
      }

      &-time {
        color: @comment-author-time-color;
        white-space: nowrap;
        cursor: auto;
      }
    }

    &-detail p {
      white-space: pre-wrap;
    }
  }

  &-actions {
    margin-top: 12px;
    padding-left: 0;
    > li {
      display: inline-block;
      color: @comment-action-color;
      > span {
        padding-right: 10px;
        color: @comment-action-color;
        font-size: 12px;
        cursor: pointer;
        transition: color 0.3s;
        user-select: none;
        &:hover {
          color: @comment-action-hover-color;
        }
      }
    }
  }

  &-nested {
    margin-left: @comment-nest-indent;
  }
}

@input-affix-width: 19px;

// size mixins for input
.input-lg() {
  height: @input-height-lg;
  padding: @input-padding-vertical-lg @input-padding-horizontal-lg;
  font-size: @font-size-lg;
}

.input-sm() {
  height: @input-height-sm;
  padding: @input-padding-vertical-sm @input-padding-horizontal-sm;
}

// input status
// == when focus or actived
.active(@color: @outline-color) {
  border-color: ~`colorPalette('@{color}', 5) `;
  border-right-width: @border-width-base !important;
  outline: 0;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@color, 20%);
}

// == when hoverd
.hover(@color: @input-hover-border-color) {
  border-color: ~`colorPalette('@{color}', 5) `;
  border-right-width: @border-width-base !important;
}

.disabled() {
  color: @disabled-color;
  background-color: @input-disabled-bg;
  cursor: not-allowed;
  opacity: 1;
  &:hover {
    .hover(@input-border-color);
  }
}

// Basic style for input
.input() {
  position: relative;
  display: inline-block;
  width: 100%;
  height: @input-height-base;
  padding: @input-padding-vertical-base @input-padding-horizontal-base;
  color: @input-color;
  font-size: @font-size-base;
  line-height: @line-height-base;
  background-color: @input-bg;
  background-image: none;
  border: @border-width-base @border-style-base @input-border-color;
  border-radius: @border-radius-base;
  transition: all 0.3s;
  .placeholder(); // Reset placeholder

  &:hover {
    .hover();
  }

  &:focus {
    .active();
  }

  &-disabled {
    .disabled();
  }

  &[disabled] {
    .disabled();
  }

  // Reset height for `textarea`s
  textarea& {
    max-width: 100%; // prevent textearea resize from coming out of its container
    height: auto;
    min-height: @input-height-base;
    vertical-align: bottom;
    transition: all 0.3s, height 0s;
  }

  // Size
  &-lg {
    .input-lg();
  }

  &-sm {
    .input-sm();
  }
}

// label input
.input-group(@inputClass) {
  position: relative;
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;

  // Undo padding and float of grid classes
  &[class*='col-'] {
    float: none;
    padding-right: 0;
    padding-left: 0;
  }

  > [class*='col-'] {
    padding-right: 8px;
    &:last-child {
      padding-right: 0;
    }
  }

  &-addon,
  &-wrap,
  > .@{inputClass} {
    display: table-cell;

    &:not(:first-child):not(:last-child) {
      border-radius: 0;
    }
  }

  &-addon,
  &-wrap {
    width: 1px; // To make addon/wrap as small as possible
    white-space: nowrap;
    vertical-align: middle;
  }

  &-wrap > * {
    display: block !important;
  }

  .@{inputClass} {
    float: left;
    width: 100%;
    margin-bottom: 0;
    text-align: inherit;
    &:focus {
      z-index: 1; // Fix https://gw.alipayobjects.com/zos/rmsportal/DHNpoqfMXSfrSnlZvhsJ.png
      border-right-width: 1px;
    }
    &:hover {
      z-index: 1;
      border-right-width: 1px;
    }
  }

  &-addon {
    position: relative;
    padding: 0 @input-padding-horizontal-base;
    color: @input-color;
    font-weight: normal;
    font-size: @font-size-base;
    line-height: 1;
    text-align: center;
    background-color: @input-addon-bg;
    border: @border-width-base @border-style-base @input-border-color;
    border-radius: @border-radius-base;
    transition: all 0.3s;

    // Reset Select's style in addon
    .@{ant-prefix}-select {
      margin: -(@input-padding-vertical-base + 1px) (-@input-padding-horizontal-base);

      .@{ant-prefix}-select-selection {
        margin: -1px;
        background-color: inherit;
        border: @border-width-base @border-style-base transparent;
        box-shadow: none;
      }

      &-open,
      &-focused {
        .@{ant-prefix}-select-selection {
          color: @primary-color;
        }
      }
    }

    // Expand addon icon click area
    // https://github.com/ant-design/ant-design/issues/3714
    > i:only-child::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      content: '';
    }
  }

  // Reset rounded corners
  > .@{inputClass}:first-child,
  &-addon:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  > .@{inputClass}-affix-wrapper {
    &:not(:first-child) .@{inputClass} {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child) .@{inputClass} {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &-addon:first-child {
    border-right: 0;
  }
  &-addon:last-child {
    border-left: 0;
  }

  > .@{inputClass}:last-child,
  &-addon:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;

    // Reset Select's style in addon
    .@{ant-prefix}-select .@{ant-prefix}-select-selection {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }
  }

  // Sizing options
  &-lg .@{inputClass},
  &-lg > &-addon {
    .input-lg();
  }

  &-sm .@{inputClass},
  &-sm > &-addon {
    .input-sm();
  }

  // Fix https://github.com/ant-design/ant-design/issues/5754
  &-lg .@{ant-prefix}-select-selection--single {
    height: @input-height-lg;
  }

  &-sm .@{ant-prefix}-select-selection--single {
    height: @input-height-sm;
  }

  .@{inputClass}-affix-wrapper {
    display: table-cell;
    float: left;
    width: 100%;
  }

  &&-compact {
    display: block;
    .clearfix;

    &-addon,
    &-wrap,
    > .@{inputClass} {
      &:not(:first-child):not(:last-child) {
        border-right-width: @border-width-base;
        &:hover {
          z-index: 1;
        }
        &:focus {
          z-index: 1;
        }
      }
    }

    & > * {
      display: inline-block;
      float: none;
      vertical-align: top; // https://github.com/ant-design/ant-design-pro/issues/139
      border-radius: 0;
    }

    & > *:not(:last-child) {
      margin-right: -@border-width-base;
      border-right-width: @border-width-base;
    }

    // Undo float for .ant-input-group .ant-input
    .@{inputClass} {
      float: none;
    }

    // reset border for Select, DatePicker, AutoComplete, Cascader, Mention, TimePicker
    & > .@{ant-prefix}-select > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker .@{ant-prefix}-time-picker-input {
      border-right-width: @border-width-base;
      border-radius: 0;
      &:hover {
        z-index: 1;
      }
      &:focus {
        z-index: 1;
      }
    }

    & > *:first-child,
    & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:first-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:first-child .@{ant-prefix}-time-picker-input {
      border-top-left-radius: @border-radius-base;
      border-bottom-left-radius: @border-radius-base;
    }

    & > *:last-child,
    & > .@{ant-prefix}-select:last-child > .@{ant-prefix}-select-selection,
    & > .@{ant-prefix}-calendar-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-select-auto-complete:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input,
    & > .@{ant-prefix}-mention-wrapper:last-child .@{ant-prefix}-mention-editor,
    & > .@{ant-prefix}-time-picker:last-child .@{ant-prefix}-time-picker-input {
      border-right-width: @border-width-base;
      border-top-right-radius: @border-radius-base;
      border-bottom-right-radius: @border-radius-base;
    }

    // https://github.com/ant-design/ant-design/issues/12493
    & > .@{ant-prefix}-select-auto-complete .@{ant-prefix}-input {
      vertical-align: top;
    }
  }
}

.input-affix-wrapper(@inputClass) {
  position: relative;
  display: inline-block;
  width: 100%;
  text-align: start;

  &:hover .@{inputClass}:not(.@{inputClass}-disabled) {
    .hover();
  }

  .@{inputClass} {
    position: relative;
    text-align: inherit;
  }

  .@{inputClass}-prefix,
  .@{inputClass}-suffix {
    position: absolute;
    top: 50%;
    z-index: 2;
    color: @input-color;
    line-height: 0;
    transform: translateY(-50%);
    :not(.anticon) {
      line-height: @line-height-base;
    }
  }

  .@{inputClass}-prefix {
    left: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}-suffix {
    right: @input-padding-horizontal-base + 1px;
  }

  .@{inputClass}:not(:first-child) {
    padding-left: @input-padding-horizontal-base + @input-affix-width;
  }

  .@{inputClass}:not(:last-child) {
    padding-right: @input-padding-horizontal-base + @input-affix-width;
  }
}

@calendar-prefix-cls: ~'@{ant-prefix}-calendar';
@calendar-timepicker-prefix-cls: ~'@{ant-prefix}-calendar-time-picker';

.@{calendar-prefix-cls}-picker-container {
  .reset-component;
  position: absolute;
  z-index: @zindex-picker;
  font-family: @font-family;

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{calendar-prefix-cls}-picker {
  .reset-component;
  position: relative;
  display: inline-block;
  outline: none;
  cursor: text;
  transition: opacity 0.3s;

  &-input {
    outline: none;
  }

  &-input.@{ant-prefix}-input-sm {
    padding-top: 0;
    padding-bottom: 0;
  }

  &:hover &-input:not(.@{ant-prefix}-input-disabled) {
    border-color: @primary-color;
  }

  &:focus &-input:not(.@{ant-prefix}-input-disabled) {
    .active();
  }

  &-clear,
  &-icon {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    font-size: @font-size-sm;
    line-height: 14px;
    transition: all 0.3s;
    user-select: none;
  }

  &-clear {
    z-index: 2;
    color: @disabled-color;
    font-size: @font-size-base;
    background: @input-bg;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    &:hover {
      color: @text-color-secondary;
    }
  }

  &:hover &-clear {
    opacity: 1;
    pointer-events: auto;
  }

  &-icon {
    display: inline-block;
    color: @disabled-color;
    font-size: @font-size-base;
    line-height: 1;
  }

  &-small &-clear,
  &-small &-icon {
    right: @control-padding-horizontal-sm;
  }
}

.calendarPanelHeader(@calendar-prefix-cls) {
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: @border-width-base @border-style-base @border-color-split;
  user-select: none;

  a:hover {
    color: @link-hover-color;
  }

  .@{calendar-prefix-cls}-century-select,
  .@{calendar-prefix-cls}-decade-select,
  .@{calendar-prefix-cls}-year-select,
  .@{calendar-prefix-cls}-month-select {
    display: inline-block;
    padding: 0 2px;
    color: @heading-color;
    font-weight: 500;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-century-select-arrow,
  .@{calendar-prefix-cls}-decade-select-arrow,
  .@{calendar-prefix-cls}-year-select-arrow,
  .@{calendar-prefix-cls}-month-select-arrow {
    display: none;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-prev-month-btn,
  .@{calendar-prefix-cls}-next-month-btn,
  .@{calendar-prefix-cls}-prev-year-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    position: absolute;
    top: 0;
    display: inline-block;
    padding: 0 5px;
    color: @text-color-secondary;
    font-size: 16px;
    font-family: Arial, 'Hiragino Sans GB', 'Microsoft Yahei', 'Microsoft Sans Serif', sans-serif;
    line-height: 40px;
  }

  .@{calendar-prefix-cls}-prev-century-btn,
  .@{calendar-prefix-cls}-prev-decade-btn,
  .@{calendar-prefix-cls}-prev-year-btn {
    left: 7px;

    &::after {
      content: '«';
    }
  }

  .@{calendar-prefix-cls}-next-century-btn,
  .@{calendar-prefix-cls}-next-decade-btn,
  .@{calendar-prefix-cls}-next-year-btn {
    right: 7px;

    &::after {
      content: '»';
    }
  }

  .@{calendar-prefix-cls}-prev-month-btn {
    left: 29px;

    &::after {
      content: '‹';
    }
  }

  .@{calendar-prefix-cls}-next-month-btn {
    right: 29px;

    &::after {
      content: '›';
    }
  }
}

.@{calendar-prefix-cls} {
  position: relative;
  width: 280px;
  font-size: @font-size-base;
  line-height: @line-height-base;
  text-align: left;
  list-style: none;
  background-color: @component-background;
  background-clip: padding-box;
  border: @border-width-base @border-style-base @border-color-inverse;
  border-radius: @border-radius-base;
  outline: none;
  box-shadow: @box-shadow-base;

  &-input-wrap {
    height: 34px;
    padding: 6px @control-padding-horizontal - 2px;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  &-input {
    width: 100%;
    height: 22px;
    color: @input-color;
    background: @input-bg;
    border: 0;
    outline: 0;
    cursor: auto;
    .placeholder;
  }

  &-week-number {
    width: 286px;

    &-cell {
      text-align: center;
    }
  }

  &-header {
    .calendarPanelHeader(@calendar-prefix-cls);
  }

  &-body {
    padding: 8px 12px;
  }

  table {
    width: 100%;
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
  }

  table,
  th,
  td {
    text-align: center;
    border: 0;
  }

  &-calendar-table {
    margin-bottom: 0;
    border-spacing: 0;
  }

  &-column-header {
    width: 33px;
    padding: 6px 0;
    line-height: 18px;
    text-align: center;
    .@{calendar-prefix-cls}-column-header-inner {
      display: block;
      font-weight: normal;
    }
  }

  &-week-number-header {
    .@{calendar-prefix-cls}-column-header-inner {
      display: none;
    }
  }

  &-cell {
    height: 30px;
    padding: 3px 0;
  }

  &-date {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    color: @text-color;
    line-height: 22px;
    text-align: center;
    background: transparent;
    border: @border-width-base @border-style-base transparent;
    border-radius: @border-radius-sm;
    transition: background 0.3s ease;

    &-panel {
      position: relative;
      outline: none;
    }

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      color: @text-color-inverse;
      background: @primary-5;
    }
  }

  &-today &-date {
    color: @primary-color;
    font-weight: bold;
    border-color: @primary-color;
  }

  &-last-month-cell &-date,
  &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-selected-day &-date {
    background: tint(@primary-color, 80%);
  }

  &-selected-date,
  &-selected-start-date,
  &-selected-end-date {
    .@{calendar-prefix-cls}-date {
      color: @text-color-inverse;
      background: @primary-color;
      border: @border-width-base @border-style-base transparent;

      &:hover {
        background: @primary-color;
      }
    }
  }

  &-disabled-cell &-date {
    position: relative;
    width: auto;
    color: @disabled-color;
    background: @disabled-bg;
    border: @border-width-base @border-style-base transparent;
    border-radius: 0;
    cursor: not-allowed;

    &:hover {
      background: @disabled-bg;
    }
  }

  &-disabled-cell&-selected-day &-date::before {
    position: absolute;
    top: -1px;
    left: 5px;
    width: 24px;
    height: 24px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: @border-radius-sm;
    content: '';
  }

  &-disabled-cell&-today &-date {
    position: relative;
    padding-right: 5px;
    padding-left: 5px;
    &::before {
      position: absolute;
      top: -1px;
      left: 5px;
      width: 24px;
      height: 24px;
      border: @border-width-base @border-style-base @disabled-color;
      border-radius: @border-radius-sm;
      content: ' ';
    }
  }

  &-disabled-cell-first-of-row &-date {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &-disabled-cell-last-of-row &-date {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }

  &-footer {
    padding: 0 12px;
    line-height: 38px;
    border-top: @border-width-base @border-style-base @border-color-split;
    &:empty {
      border-top: 0;
    }
    &-btn {
      display: block;
      text-align: center;
    }
    &-extra {
      text-align: left;
    }
  }

  .@{calendar-prefix-cls}-today-btn,
  .@{calendar-prefix-cls}-clear-btn {
    display: inline-block;
    margin: 0 0 0 8px;
    text-align: center;
    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;
    }
    &:only-child {
      margin: 0;
    }
  }

  .@{calendar-prefix-cls}-clear-btn {
    position: absolute;
    top: 7px;
    right: 5px;
    display: none;
    width: 20px;
    height: 20px;
    margin: 0;
    overflow: hidden;
    line-height: 20px;
    text-align: center;
    text-indent: -76px;
  }

  .@{calendar-prefix-cls}-clear-btn::after {
    display: inline-block;
    width: 20px;
    color: @disabled-color;
    font-size: @font-size-base;
    line-height: 1;
    text-indent: 43px;
    transition: color 0.3s ease;
  }

  .@{calendar-prefix-cls}-clear-btn:hover::after {
    color: @text-color-secondary;
  }

  .@{calendar-prefix-cls}-ok-btn {
    .btn;
    .btn-primary;
    .button-size(@btn-height-sm; @btn-padding-sm; @font-size-base; @border-radius-base);
    line-height: @btn-height-sm - 2px;

    .button-disabled();
  }
}

@input-box-height: 34px;

.@{calendar-prefix-cls}-range-picker-input {
  width: 44%;
  height: 99%;
  text-align: center;
  background-color: transparent;
  border: 0;
  outline: 0;
  .placeholder();

  &[disabled] {
    cursor: not-allowed;
  }
}

.@{calendar-prefix-cls}-range-picker-separator {
  display: inline-block;
  min-width: 10px;
  height: 100%;
  color: @text-color-secondary;
  white-space: nowrap;
  text-align: center;
  vertical-align: top;
  pointer-events: none;
}

.@{calendar-prefix-cls}-range {
  width: 552px;
  overflow: hidden;

  .@{calendar-prefix-cls}-date-panel {
    &::after {
      display: block;
      clear: both;
      height: 0;
      visibility: hidden;
      content: '.';
    }
  }
  &-part {
    position: relative;
    width: 50%;
  }

  &-left {
    float: left;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-right: 1px solid @border-color-split;
      }
    }
  }

  &-right {
    float: right;
    .@{calendar-prefix-cls} {
      &-time-picker-inner {
        border-left: 1px solid @border-color-split;
      }
    }
  }

  &-middle {
    position: absolute;
    left: 50%;
    z-index: 1;
    height: @input-box-height;
    margin: 1px 0 0 0;
    padding: 0 200px 0 0;
    color: @text-color-secondary;
    line-height: @input-box-height;
    text-align: center;
    transform: translateX(-50%);
    pointer-events: none;
  }

  &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: -90px;
  }

  &.@{calendar-prefix-cls}-time &-middle {
    padding: 0 10px 0 0;
    transform: translateX(-50%);
  }

  &.@{calendar-prefix-cls}-time &-right .@{calendar-prefix-cls}-date-input-wrap {
    margin-left: 0;
  }

  .@{calendar-prefix-cls}-input-wrap {
    position: relative;
    height: @input-box-height;
  }

  .@{calendar-prefix-cls}-input,
  .@{calendar-timepicker-prefix-cls}-input {
    .input;
    height: @input-height-sm;
    padding-right: 0;
    padding-left: 0;
    border: 0;
    box-shadow: none;

    &:focus {
      box-shadow: none;
    }
  }

  .@{calendar-timepicker-prefix-cls}-icon {
    display: none;
  }

  &.@{calendar-prefix-cls}-week-number {
    width: 574px;

    .@{calendar-prefix-cls}-range-part {
      width: 286px;
    }
  }

  .@{calendar-prefix-cls}-year-panel,
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-decade-panel {
    top: @input-box-height;
  }
  .@{calendar-prefix-cls}-month-panel .@{calendar-prefix-cls}-year-panel {
    top: 0;
  }
  .@{calendar-prefix-cls}-decade-panel-table,
  .@{calendar-prefix-cls}-year-panel-table,
  .@{calendar-prefix-cls}-month-panel-table {
    height: 208px;
  }

  .@{calendar-prefix-cls}-in-range-cell {
    position: relative;
    border-radius: 0;
    > div {
      position: relative;
      z-index: 1;
    }
    &::before {
      position: absolute;
      top: 4px;
      right: 0;
      bottom: 4px;
      left: 0;
      display: block;
      background: @item-active-bg;
      border: 0;
      border-radius: 0;
      content: '';
    }
  }

  .@{calendar-prefix-cls}-footer-extra {
    float: left;
  }

  // `div` for selector specificity
  div&-quick-selector {
    text-align: left;

    > a {
      margin-right: 8px;
    }
  }

  .@{calendar-prefix-cls},
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel {
    &-header {
      border-bottom: 0;
    }
    &-body {
      border-top: @border-width-base @border-style-base @border-color-split;
    }
  }

  &.@{calendar-prefix-cls}-time {
    .@{calendar-timepicker-prefix-cls} {
      top: 68px;
      z-index: 2; // cover .ant-calendar-range .ant-calendar-in-range-cell > div (z-index: 1)
      width: 100%;
      height: 207px;
      &-panel {
        height: 267px;
        margin-top: -34px;
      }

      &-inner {
        height: 100%;
        padding-top: 40px;
        background: none;
      }

      &-combobox {
        display: inline-block;
        height: 100%;
        background-color: @component-background;
        border-top: @border-width-base @border-style-base @border-color-split;
      }
      &-select {
        height: 100%;
        ul {
          max-height: 100%;
        }
      }
    }
    .@{calendar-prefix-cls}-footer .@{calendar-prefix-cls}-time-picker-btn {
      margin-right: 8px;
    }
    .@{calendar-prefix-cls}-today-btn {
      height: 22px;
      margin: 8px 12px;
      line-height: 22px;
    }
  }

  &-with-ranges.@{calendar-prefix-cls}-time .@{calendar-timepicker-prefix-cls} {
    height: 233px;
  }
}

.@{calendar-prefix-cls}-range.@{calendar-prefix-cls}-show-time-picker {
  .@{calendar-prefix-cls}-body {
    border-top-color: transparent;
  }
}

.@{calendar-timepicker-prefix-cls} {
  position: absolute;
  top: 40px;
  width: 100%;
  background-color: @component-background;

  &-panel {
    position: absolute;
    z-index: @zindex-picker;
    width: 100%;
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    overflow: hidden;
    font-size: @font-size-base;
    line-height: 1.5;
    text-align: left;
    list-style: none;
    background-color: @component-background;
    background-clip: padding-box;
    outline: none;
  }
  &-combobox {
    width: 100%;
  }

  &-column-1,
  &-column-1 &-select {
    width: 100%;
  }
  &-column-2 &-select {
    width: 50%;
  }
  &-column-3 &-select {
    width: 33.33%;
  }
  &-column-4 &-select {
    width: 25%;
  }

  &-input-wrap {
    display: none;
  }

  &-select {
    position: relative; // Fix chrome weird render bug
    float: left;
    box-sizing: border-box;
    height: 226px;
    overflow: hidden;
    font-size: @font-size-base;
    border-right: @border-width-base @border-style-base @border-color-split;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      margin-left: 0;
      border-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    ul {
      box-sizing: border-box;
      width: 100%;
      max-height: 206px;
      margin: 0;
      padding: 0;
      list-style: none;
    }

    li {
      box-sizing: content-box;
      width: 100%;
      height: 24px;
      margin: 0;
      padding-left: 32px;
      line-height: 24px;
      list-style: none;
      cursor: pointer;
      transition: background 0.3s ease;
      user-select: none;
    }

    li:last-child::after {
      display: block;
      height: 202px;
      content: '';
    }

    li:hover {
      background: @item-hover-bg;
    }

    li&-option-selected {
      font-weight: bold;
      background: @time-picker-selected-bg;
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
    }
  }
}

.@{calendar-prefix-cls}-time {
  .@{calendar-prefix-cls}-day-select {
    display: inline-block;
    padding: 0 2px;
    color: @heading-color;
    font-weight: 500;
    line-height: 34px;
  }

  .@{calendar-prefix-cls}-footer {
    position: relative;
    height: auto;

    &-btn {
      text-align: right;
    }

    .@{calendar-prefix-cls}-today-btn {
      float: left;
      margin: 0;
    }

    .@{calendar-prefix-cls}-time-picker-btn {
      display: inline-block;
      margin-right: 8px;

      &-disabled {
        color: @disabled-color;
      }
    }
  }
}

.@{calendar-prefix-cls}-month-panel {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;

  > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.@{calendar-prefix-cls}-month-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-month-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-month-panel');
}

.@{calendar-prefix-cls}-month-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-month-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-month-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-month-panel-selected-cell .@{calendar-prefix-cls}-month-panel-month {
  color: @text-color-inverse;
  background: @primary-color;

  &:hover {
    color: @text-color-inverse;
    background: @primary-color;
  }
}

.@{calendar-prefix-cls}-month-panel-cell {
  text-align: center;

  &-disabled .@{calendar-prefix-cls}-month-panel-month {
    &,
    &:hover {
      color: @disabled-color;
      background: @disabled-bg;
      cursor: not-allowed;
    }
  }
}

.@{calendar-prefix-cls}-month-panel-month {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 8px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-year-panel {
  position: absolute;
  top: 1px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;

  > div {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.@{calendar-prefix-cls}-year-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-year-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-year-panel');
}

.@{calendar-prefix-cls}-year-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-year-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-year-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-year-panel-cell {
  text-align: center;
}

.@{calendar-prefix-cls}-year-panel-year {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 8px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-year-panel-selected-cell .@{calendar-prefix-cls}-year-panel-year {
  color: @text-color-inverse;
  background: @primary-color;

  &:hover {
    color: @text-color-inverse;
    background: @primary-color;
  }
}

.@{calendar-prefix-cls}-year-panel-last-decade-cell,
.@{calendar-prefix-cls}-year-panel-next-decade-cell {
  .@{calendar-prefix-cls}-year-panel-year {
    color: @disabled-color;
    user-select: none;
  }
}

.@{calendar-prefix-cls}-decade-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-picker-panel;
  display: flex;
  flex-direction: column;
  background: @component-background;
  border-radius: @border-radius-base;
  outline: none;
}

.@{calendar-prefix-cls}-decade-panel-hidden {
  display: none;
}

.@{calendar-prefix-cls}-decade-panel-header {
  .calendarPanelHeader(~'@{calendar-prefix-cls}-decade-panel');
}

.@{calendar-prefix-cls}-decade-panel-body {
  flex: 1;
}

.@{calendar-prefix-cls}-decade-panel-footer {
  border-top: @border-width-base @border-style-base @border-color-split;
  .@{calendar-prefix-cls}-footer-extra {
    padding: 0 12px;
  }
}

.@{calendar-prefix-cls}-decade-panel-table {
  width: 100%;
  height: 100%;
  table-layout: fixed;
  border-collapse: separate;
}

.@{calendar-prefix-cls}-decade-panel-cell {
  white-space: nowrap;
  text-align: center;
}

.@{calendar-prefix-cls}-decade-panel-decade {
  display: inline-block;
  height: 24px;
  margin: 0 auto;
  padding: 0 6px;
  color: @text-color;
  line-height: 24px;
  text-align: center;
  background: transparent;
  border-radius: @border-radius-sm;
  transition: background 0.3s ease;

  &:hover {
    background: @item-hover-bg;
    cursor: pointer;
  }
}

.@{calendar-prefix-cls}-decade-panel-selected-cell .@{calendar-prefix-cls}-decade-panel-decade {
  color: @text-color-inverse;
  background: @primary-color;

  &:hover {
    color: @text-color-inverse;
    background: @primary-color;
  }
}

.@{calendar-prefix-cls}-decade-panel-last-century-cell,
.@{calendar-prefix-cls}-decade-panel-next-century-cell {
  .@{calendar-prefix-cls}-decade-panel-decade {
    color: @disabled-color;
    user-select: none;
  }
}

.@{calendar-prefix-cls}-month {
  .@{calendar-prefix-cls}-month-header-wrap {
    position: relative;
    height: 288px;
  }
  .@{calendar-prefix-cls}-month-panel,
  .@{calendar-prefix-cls}-year-panel {
    top: 0;
    height: 100%;
  }
}

.@{calendar-prefix-cls}-week-number {
  &-cell {
    opacity: 0.5;
  }
  .@{calendar-prefix-cls}-body tr {
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background: @primary-1;
    }
    &.@{calendar-prefix-cls}-active-week {
      font-weight: bold;
      background: @primary-2;
    }
    .@{calendar-prefix-cls}-selected-day .@{calendar-prefix-cls}-date,
    .@{calendar-prefix-cls}-selected-day:hover .@{calendar-prefix-cls}-date {
      color: @text-color;
      background: transparent;
    }
  }
}

// style dependencies
// deps-lint-skip: input

// Input styles
.@{ant-prefix}-input {
  .reset-component;
  .input;
}

//== Style for input-group: input with label, with button or dropdown...
.@{ant-prefix}-input-group {
  .reset-component;
  .input-group(~'@{ant-prefix}-input');
  &-wrapper {
    display: inline-block;
    width: 100%;
    text-align: start;
    vertical-align: top; // https://github.com/ant-design/ant-design/issues/6403
  }
}

// Input with affix: prefix or suffix
.@{ant-prefix}-input-affix-wrapper {
  .reset-component;
  .input-affix-wrapper(~'@{ant-prefix}-input');

  // https://github.com/ant-design/ant-design/issues/6144
  .@{ant-prefix}-input {
    min-height: 100%; // use min-height, assume that no smaller height to override
  }
}

.@{ant-prefix}-input-password-icon {
  color: @text-color-secondary;
  cursor: pointer;
  transition: all 0.3s;

  &:hover {
    color: #333;
  }
}

.@{ant-prefix}-input-clear-icon {
  color: @disabled-color;
  font-size: @font-size-sm;
  vertical-align: top;
  cursor: pointer;
  transition: color 0.3s;

  &:hover {
    color: @text-color-secondary;
  }

  &:active {
    color: @text-color;
  }

  + i {
    margin-left: 6px;
  }
}

@search-prefix: ~'@{ant-prefix}-input-search';

.@{search-prefix} {
  &-icon {
    color: @text-color-secondary;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      color: fade(@black, 80%);
    }
  }

  &-enter-button {
    input {
      border-right: 0;
    }

    & + .@{ant-prefix}-input-group-addon,
    input + .@{ant-prefix}-input-group-addon {
      padding: 0;
      border: 0;

      .@{search-prefix}-button {
        width: 100%;
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}

@timepicker-prefix-cls: ~'@{ant-prefix}-time-picker';
@timepicker-item-height: 32px;

.@{timepicker-prefix-cls}-panel {
  .reset-component;
  position: absolute;
  z-index: @zindex-picker;
  font-family: @font-family;

  &-inner {
    position: relative;
    left: -2px;
    font-size: @font-size-base;
    text-align: left;
    list-style: none;
    background-color: @component-background;
    background-clip: padding-box;
    border-radius: @border-radius-base;
    outline: none;
    box-shadow: @box-shadow-base;
  }

  &-input {
    width: 100%;
    max-width: @time-picker-panel-column-width * 3 - @control-padding-horizontal - 2px;
    margin: 0;
    padding: 0;
    line-height: normal;
    border: 0;
    outline: 0;
    cursor: auto;

    .placeholder;

    &-wrap {
      position: relative;
      box-sizing: border-box;
      padding: 7px 2px 7px @control-padding-horizontal;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    &-invalid {
      border-color: @error-color;
    }
  }

  &-narrow &-input-wrap {
    max-width: @time-picker-panel-column-width * 2;
  }

  &-select {
    position: relative; // Fix chrome weird render bug
    float: left;
    box-sizing: border-box;
    width: @time-picker-panel-column-width;
    max-height: @timepicker-item-height * 6;
    overflow: hidden;
    font-size: @font-size-base;
    border-left: @border-width-base @border-style-base @border-color-split;

    &:hover {
      overflow-y: auto;
    }

    &:first-child {
      margin-left: 0;
      border-left: 0;
    }

    &:last-child {
      border-right: 0;
    }

    &:only-child {
      width: 100%;
    }

    ul {
      box-sizing: border-box;
      width: 100%;
      margin: 0;
      padding: 0 0 @timepicker-item-height * 5;
      list-style: none;
    }

    li {
      box-sizing: content-box;
      width: 100%;
      height: @timepicker-item-height;
      margin: 0;
      padding: 0 0 0 @control-padding-horizontal;
      line-height: @timepicker-item-height;
      text-align: left;
      list-style: none;
      cursor: pointer;
      transition: background 0.3s;
      user-select: none;
    }

    li:hover {
      background: @item-hover-bg;
    }

    li&-option-selected {
      font-weight: bold;
      background: @time-picker-selected-bg;
      &:hover {
        background: @time-picker-selected-bg;
      }
    }

    li&-option-disabled {
      color: @btn-disable-color;
      &:hover {
        background: transparent;
        cursor: not-allowed;
      }
    }
  }

  &-combobox {
    .clearfix;
  }

  &-addon {
    padding: 8px;
    border-top: @border-width-base @border-style-base @border-color-split;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-topRight,
  &.slide-up-appear.slide-up-appear-active&-placement-topLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-topRight {
    animation-name: antSlideDownIn;
  }

  &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
  &.slide-up-enter.slide-up-enter-active&-placement-bottomRight,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft,
  &.slide-up-appear.slide-up-appear-active&-placement-bottomRight {
    animation-name: antSlideUpIn;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-topLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-topRight {
    animation-name: antSlideDownOut;
  }

  &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft,
  &.slide-up-leave.slide-up-leave-active&-placement-bottomRight {
    animation-name: antSlideUpOut;
  }
}

.@{timepicker-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  width: 128px;
  outline: none;
  cursor: text;
  transition: opacity 0.3s;

  &-input {
    .input;
    &[disabled] {
      .disabled;
    }
  }

  &-open {
    opacity: 0;
  }

  &-icon,
  &-clear {
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    z-index: 1;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    color: @disabled-color;
    line-height: 14px;
    transition: all 0.3s @ease-in-out;
    user-select: none;
    .@{timepicker-prefix-cls}-clock-icon {
      display: block;
      color: @disabled-color;
      line-height: 1;
    }
  }

  &-clear {
    z-index: 2;
    background: @input-bg;
    opacity: 0;
    pointer-events: none;
    &:hover {
      color: @text-color-secondary;
    }
  }
  &:hover &-clear {
    opacity: 1;
    pointer-events: auto;
  }

  &-large &-input {
    .input-lg;
  }

  &-small &-input {
    .input-sm;
  }

  &-small &-icon,
  &-small &-clear {
    right: @control-padding-horizontal-sm - 1px;
  }
}

@tag-prefix-cls: ~'@{ant-prefix}-tag';

.@{tag-prefix-cls} {
  .reset-component;
  display: inline-block;
  height: auto;
  margin-right: 8px;
  padding: 0 7px;
  font-size: @tag-font-size;
  line-height: 20px;
  white-space: nowrap;
  background: @tag-default-bg;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;
  cursor: pointer;
  opacity: 1;
  transition: all 0.3s @ease-in-out-circ;

  &:hover {
    opacity: 0.85;
  }

  &,
  a,
  a:hover {
    color: @tag-default-color;
  }

  > a:first-child:last-child {
    display: inline-block;
    margin: 0 -8px;
    padding: 0 8px;
  }

  .@{iconfont-css-prefix}-close {
    .iconfont-size-under-12px(10px);
    margin-left: 3px;
    color: @text-color-secondary;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s @ease-in-out-circ;

    &:hover {
      color: @heading-color;
    }
  }

  &-has-color {
    border-color: transparent;
    &,
    a,
    a:hover,
    .@{iconfont-css-prefix}-close,
    .@{iconfont-css-prefix}-close:hover {
      color: @text-color-inverse;
    }
  }

  &-checkable {
    background-color: transparent;
    border-color: transparent;
    &:not(&-checked):hover {
      color: @primary-color;
    }
    &:active,
    &-checked {
      color: @text-color-inverse;
    }
    &-checked {
      background-color: @primary-6;
    }
    &:active {
      background-color: @primary-7;
    }
  }

  &-hidden {
    display: none;
  }

  // mixin to iterate over colors and create CSS class for each one
  .make-color-classes(@i: length(@preset-colors)) when (@i > 0) {
    .make-color-classes(@i - 1);
    @color: extract(@preset-colors, @i);
    @lightColor: '@{color}-1';
    @lightBorderColor: '@{color}-3';
    @darkColor: '@{color}-6';
    &-@{color} {
      color: @@darkColor;
      background: @@lightColor;
      border-color: @@lightBorderColor;
    }
    &-@{color}-inverse {
      color: @text-color-inverse;
      background: @@darkColor;
      border-color: @@darkColor;
    }
  }

  .make-color-classes();
}

@divider-prefix-cls: ~'@{ant-prefix}-divider';

.@{divider-prefix-cls} {
  .reset-component;
  background: @border-color-split;

  &, /* for compatiable */
  &-vertical {
    position: relative;
    top: -0.06em;
    display: inline-block;
    width: 1px;
    height: 0.9em;
    margin: 0 8px;
    vertical-align: middle;
  }
  &-horizontal {
    display: block;
    clear: both;
    width: 100%;
    min-width: 100%; // Fix https://github.com/ant-design/ant-design/issues/10914
    height: 1px;
    margin: 24px 0;
  }

  &-horizontal&-with-text,
  &-horizontal&-with-text-left,
  &-horizontal&-with-text-right {
    display: table;
    margin: 16px 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    white-space: nowrap;
    text-align: center;
    background: transparent;
    &::before,
    &::after {
      position: relative;
      top: 50%;
      display: table-cell;
      width: 50%;
      border-top: 1px solid @border-color-split;
      transform: translateY(50%);
      content: '';
    }
  }

  &-horizontal&-with-text-left,
  &-horizontal&-with-text-right {
    .@{divider-prefix-cls}-inner-text {
      display: inline-block;
      padding: 0 10px;
    }
  }

  &-horizontal&-with-text-left {
    &::before {
      top: 50%;
      width: 5%;
    }
    &::after {
      top: 50%;
      width: 95%;
    }
  }

  &-horizontal&-with-text-right {
    &::before {
      top: 50%;
      width: 95%;
    }
    &::after {
      top: 50%;
      width: 5%;
    }
  }

  &-inner-text {
    display: inline-block;
    padding: 0 24px;
  }

  &-dashed {
    background: none;
    border-top: 1px dashed @border-color-split;
  }
  &-horizontal&-with-text&-dashed,
  &-horizontal&-with-text-left&-dashed,
  &-horizontal&-with-text-right&-dashed {
    border-top: 0;
    &::before,
    &::after {
      border-style: dashed none none;
    }
  }
}

// Preserve the typo for compatibility
// https://github.com/ant-design/ant-design/issues/14628
@dawer-prefix-cls: ~'@{ant-prefix}-drawer';

@drawer-prefix-cls: @dawer-prefix-cls;

.@{drawer-prefix-cls} {
  position: fixed;
  top: 0;
  z-index: @zindex-modal;
  width: 0%;
  height: 100%;

  > * {
    transition: transform @animation-duration-slow @ease-base-in,
    box-shadow @animation-duration-slow @ease-base-in;
  }

  &-content-wrapper {
    position: fixed;
  }
  .@{drawer-prefix-cls}-content {
    width: 100%;
    height: 100%;
  }
  &-left,
  &-right {
    width: 0%;
    height: 100%;
    .@{drawer-prefix-cls}-content-wrapper {
      height: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      width: 100%;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      width: 0%;
    }
  }
  &-left {
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-right;
      }
    }
  }
  &-right {
    .@{drawer-prefix-cls} {
      &-content-wrapper {
        right: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-left;
      }
    }
  }

  &-top,
  &-bottom {
    width: 100%;
    height: 0%;
    .@{drawer-prefix-cls}-content-wrapper {
      width: 100%;
    }
    &.@{drawer-prefix-cls}-open {
      height: 100%;
    }
    &.@{drawer-prefix-cls}-open.no-mask {
      height: 0%;
    }
  }
  &-top {
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-down;
      }
    }
  }
  &-bottom {
    .@{drawer-prefix-cls} {
      &-content-wrapper {
        bottom: 0;
      }
    }
    &.@{drawer-prefix-cls}-open {
      .@{drawer-prefix-cls}-content-wrapper {
        box-shadow: @shadow-1-up;
      }
    }
  }
  &.@{drawer-prefix-cls}-open {
    .@{drawer-prefix-cls} {
      &-mask {
        height: 100%;
        opacity: 0.3;
        transition: none;
        animation: antdDrawerFadeIn @animation-duration-slow @ease-base-out;
      }
    }
  }

  &-title {
    margin: 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    line-height: 22px;
  }

  &-content {
    position: relative;
    z-index: 1;
    background-color: @component-background;
    background-clip: padding-box;
    border: 0;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    display: block;
    width: 56px;
    height: 56px;
    padding: 0;
    color: @text-color-secondary;
    font-weight: 700;
    font-size: @font-size-lg;
    font-style: normal;
    line-height: 56px;
    text-align: center;
    text-transform: none;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color @animation-duration-slow;
    text-rendering: auto;

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-header {
    position: relative;
    padding: @drawer-header-padding;
    color: @text-color;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-header-no-title {
    color: @text-color;
    background: @component-background;
  }

  &-body {
    padding: @drawer-body-padding;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-mask {
    position: fixed;
    width: 100%;
    height: 0;
    background-color: @modal-mask-bg;
    opacity: 0;
    filter: ~'alpha(opacity=50)';
    transition: opacity @animation-duration-slow linear, height 0s ease @animation-duration-slow;
  }
  &-open {
    transition: transform @animation-duration-slow @ease-base-out;
    &-content {
      box-shadow: @shadow-2;
    }
  }
}

@keyframes antdDrawerFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}

.ant-dropdown-menu {
  & > ul {
    list-style: none;
    margin: 0;
    padding: 0;
  }
}

// style dependencies

@empty-prefix-cls: ~'@{ant-prefix}-empty';

.@{empty-prefix-cls} {
  margin: 0 8px;
  font-size: @empty-font-size;
  line-height: 22px;
  text-align: center;

  &-image {
    height: 100px;
    margin-bottom: 8px;

    img {
      height: 100%;
    }
  }

  &-description {
    margin: 0;
  }

  &-footer {
    margin-top: 16px;
  }

  // antd internal empty style
  &-normal {
    margin: 32px 0;
    color: @disabled-color;

    .@{empty-prefix-cls}-image {
      height: 40px;
    }
  }

  &-small {
    margin: 8px 0;
    color: @disabled-color;

    .@{empty-prefix-cls}-image {
      height: 35px;
    }
  }
}

// style dependencies

@input-number-prefix-cls: ~'@{ant-prefix}-input-number';

.@{input-number-prefix-cls} {
  .reset-component;
  .input;
  display: inline-block;
  width: 90px;
  margin: 0;
  padding: 0;
  border: @border-width-base @border-style-base @border-color-base;
  border-radius: @border-radius-base;

  &-handler {
    position: relative;
    display: block;
    width: 100%;
    height: 50%;
    overflow: hidden;
    color: @text-color-secondary;
    font-weight: bold;
    line-height: 0;
    text-align: center;
    transition: all 0.1s linear;
    &:active {
      background: @input-number-handler-active-bg;
    }
    &:hover &-up-inner,
    &:hover &-down-inner {
      color: @primary-5;
    }
  }

  &-handler-up-inner,
  &-handler-down-inner {
    .iconfont-mixin();
    position: absolute;
    right: 4px;
    width: 12px;
    height: 12px;
    color: @text-color-secondary;
    line-height: 12px;
    transition: all 0.1s linear;
    user-select: none;
  }

  &:hover {
    .hover();
  }

  &-focused {
    .active();
  }

  &-disabled {
    .disabled();
    .@{input-number-prefix-cls}-input {
      cursor: not-allowed;
    }
    .@{input-number-prefix-cls}-handler-wrap {
      display: none;
    }
  }

  &-input {
    width: 100%;
    height: @input-height-base - 2px;
    padding: 0 @control-padding-horizontal - 1px;
    text-align: left;
    background-color: transparent;
    border: 0;
    border-radius: @border-radius-base;
    outline: 0;
    transition: all 0.3s linear;
    -moz-appearance: textfield;
    .placeholder();
  }

  &-lg {
    padding: 0;
    font-size: @font-size-lg;

    input {
      height: @input-height-lg - 2px;
    }
  }

  &-sm {
    padding: 0;

    input {
      height: @input-height-sm - 2px;
      padding: 0 @control-padding-horizontal-sm - 1px;
    }
  }

  &-handler-wrap {
    position: absolute;
    top: 0;
    right: 0;
    width: 22px;
    height: 100%;
    background: @component-background;
    border-left: @border-width-base @border-style-base @border-color-base;
    border-radius: 0 @border-radius-base @border-radius-base 0;
    opacity: 0;
    transition: opacity 0.24s linear 0.1s;

    // Fix input number inside Menu makes icon too large
    // We arise the selector priority by nest selector here
    // https://github.com/ant-design/ant-design/issues/14367
    .@{input-number-prefix-cls}-handler {
      .@{input-number-prefix-cls}-handler-up-inner,
      .@{input-number-prefix-cls}-handler-down-inner {
        .iconfont-size-under-12px(7px);
        min-width: auto;
        margin-right: 0;
      }
    }
  }

  &-handler-wrap:hover &-handler {
    height: 40%;
  }

  &:hover &-handler-wrap {
    opacity: 1;
  }

  &-handler-up {
    cursor: pointer;
    &-inner {
      top: 50%;
      margin-top: -5px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-down {
    top: 0;
    border-top: @border-width-base @border-style-base @border-color-base;
    cursor: pointer;
    &-inner {
      top: 50%;
      margin-top: -6px;
      text-align: center;
    }
    &:hover {
      height: 60% !important;
    }
  }

  &-handler-up-disabled,
  &-handler-down-disabled {
    cursor: not-allowed;
  }

  &-handler-up-disabled:hover &-handler-up-inner,
  &-handler-down-disabled:hover &-handler-down-inner {
    color: @disabled-color;
  }
}

@layout-prefix-cls: ~'@{ant-prefix}-layout';

.@{layout-prefix-cls} {
  display: flex;
  flex: auto;
  flex-direction: column;
  /* fix firefox can't set height smaller than content on flex item */
  min-height: 0;
  background: @layout-body-background;

  &,
  * {
    box-sizing: border-box;
  }

  &&-has-sider {
    flex-direction: row;
    > .@{layout-prefix-cls},
    > .@{layout-prefix-cls}-content {
      overflow-x: hidden;
    }
  }

  &-header,
  &-footer {
    flex: 0 0 auto;
  }

  &-header {
    height: @layout-header-height;
    padding: @layout-header-padding;
    line-height: @layout-header-height;
    background: @layout-header-background;
  }

  &-footer {
    padding: @layout-footer-padding;
    color: @text-color;
    font-size: @font-size-base;
    background: @layout-footer-background;
  }

  &-content {
    flex: auto;
    /* fix firefox can't set height smaller than content on flex item */
    min-height: 0;
  }

  &-sider {
    position: relative;

    /* fix firefox can't set width smaller than content on flex item */
    min-width: 0;
    background: @layout-sider-background;
    transition: all 0.2s;

    &-children {
      height: 100%;
      margin-top: -0.1px;
      // Hack for fixing margin collaspe bug
      // https://github.com/ant-design/ant-design/issues/7967
      // solution from https://stackoverflow.com/a/33132624/3040605
      padding-top: 0.1px;
    }

    &-has-trigger {
      padding-bottom: @layout-trigger-height;
    }

    &-right {
      order: 1;
    }

    &-trigger {
      position: fixed;
      bottom: 0;
      z-index: 1;
      height: @layout-trigger-height;
      color: @layout-trigger-color;
      line-height: @layout-trigger-height;
      text-align: center;
      background: @layout-trigger-background;
      cursor: pointer;
      transition: all 0.2s;
    }

    &-zero-width {
      & > * {
        overflow: hidden;
      }

      &-trigger {
        position: absolute;
        top: @layout-header-height;
        right: -@layout-zero-trigger-width;
        width: @layout-zero-trigger-width;
        height: @layout-zero-trigger-height;
        color: @layout-trigger-color;
        font-size: @layout-zero-trigger-width / 2;
        line-height: @layout-zero-trigger-height;
        text-align: center;
        background: @layout-sider-background;
        border-radius: 0 @border-radius-base @border-radius-base 0;
        cursor: pointer;
        transition: background 0.3s ease;

        &:hover {
          background: tint(@layout-sider-background, 10%);
        }

        &-right {
          left: -@layout-zero-trigger-width;
        }
      }
    }
  }
}

.@{layout-prefix-cls} {
  &-sider {
    &-light {
      background: @layout-sider-background-light;
    }
    &-light &-trigger {
      color: @layout-trigger-color-light;
      background: @layout-trigger-background-light;
    }
    &-light &-zero-width-trigger {
      color: @layout-trigger-color-light;
      background: @layout-trigger-background-light;
    }
  }
}

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-explain,
  .@{ant-prefix}-form-split {
    color: @text-color;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input {
    &,
    &:hover {
      border-color: @border-color;
    }

    &:focus {
      .active(@border-color);
    }

    &:not([disabled]):hover {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
    .active(@border-color);
  }

  // Input prefix
  .@{ant-prefix}-input-affix-wrapper {
    .@{ant-prefix}-input {
      &,
      &:hover {
        border-color: @border-color;
      }

      &:focus {
        .active(@border-color);
      }
    }

    &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
      border-color: @border-color;
    }
  }

  .@{ant-prefix}-input-prefix {
    color: @text-color;
  }

  .@{ant-prefix}-input-group-addon {
    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;
  }

  .has-feedback {
    color: @text-color;
  }
}

// Reset form styles
// -----------------------------
// Based on Bootstrap framework
.reset-form() {
  legend {
    display: block;
    width: 100%;
    margin-bottom: 20px;
    padding: 0;
    color: @text-color-secondary;
    font-size: @font-size-lg;
    line-height: inherit;
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-base;
  }

  label {
    font-size: @font-size-base;
  }

  input[type='search'] {
    box-sizing: border-box;
  }

  // Position radios and checkboxes better
  input[type='radio'],
  input[type='checkbox'] {
    line-height: normal;
  }

  input[type='file'] {
    display: block;
  }

  // Make range inputs behave like textual form controls
  input[type='range'] {
    display: block;
    width: 100%;
  }

  // Make multiple select elements height not fixed
  select[multiple],
  select[size] {
    height: auto;
  }

  // Focus for file, radio, and checkbox
  input[type='file']:focus,
  input[type='radio']:focus,
  input[type='checkbox']:focus {
    outline: thin dotted;
    outline: 5px auto -webkit-focus-ring-color;
    outline-offset: -2px;
  }

  // Adjust output element
  output {
    display: block;
    padding-top: 15px;
    color: @input-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
  }
}

@form-prefix-cls: ~'@{ant-prefix}-form';
@form-component-height: @input-height-base;
@form-component-max-height: @input-height-lg;
@form-feedback-icon-size: @font-size-base;
@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
@form-explain-font-size: @font-size-base;
// Extends additional 1px to fix precision issue.
// https://github.com/ant-design/ant-design/issues/12803
// https://github.com/ant-design/ant-design/issues/8220
@form-explain-precision: 1px;
@form-explain-height: floor(@form-explain-font-size * @line-height-base);

.@{form-prefix-cls} {
  .reset-component;
  .reset-form;
}

.@{form-prefix-cls}-item-required::before {
  display: inline-block;
  margin-right: 4px;
  color: @label-required-color;
  font-size: @font-size-base;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: '*';
  .@{form-prefix-cls}-hide-required-mark & {
    display: none;
  }
}

.@{form-prefix-cls}-item-label > label {
  color: @label-color;

  &::after {
    & when (@form-item-trailing-colon=true) {
      content: ':';
    }
    & when not (@form-item-trailing-colon=true) {
      content: ' ';
    }

    position: relative;
    top: -0.5px;
    margin: 0 8px 0 2px;
  }

  &.@{form-prefix-cls}-item-no-colon::after {
    content: ' ';
  }
}

// Radio && Checkbox
input[type='radio'],
input[type='checkbox'] {
  &[disabled],
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used directly on <label>s
.@{ant-prefix}-radio-inline,
.@{ant-prefix}-radio-vertical,
.@{ant-prefix}-checkbox-inline,
.@{ant-prefix}-checkbox-vertical {
  &.disabled {
    cursor: not-allowed;
  }
}

// These classes are used on elements with <label> descendants
.@{ant-prefix}-radio,
.@{ant-prefix}-checkbox {
  &.disabled {
    label {
      cursor: not-allowed;
    }
  }
}

// Form items
// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
.@{form-prefix-cls}-item {
  label {
    position: relative;

    > .@{iconfont-css-prefix} {
      font-size: @font-size-base;
      vertical-align: top;
    }
  }

  .reset-component;
  margin-bottom: @form-item-margin-bottom;
  vertical-align: top;

  &-control {
    position: relative;
    line-height: @form-component-max-height;
    .clearfix;
  }

  &-children {
    position: relative;
  }

  &-with-help {
    margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
  }

  &-label {
    display: inline-block;
    overflow: hidden;
    line-height: @form-component-max-height - 0.0001px;
    white-space: nowrap;
    text-align: right;
    vertical-align: middle;

    &-left {
      text-align: left;
    }
  }

  .@{ant-prefix}-switch {
    margin: 2px 0 4px;
  }
}

.@{form-prefix-cls}-explain,
.@{form-prefix-cls}-extra {
  clear: both;
  min-height: @form-explain-height + @form-explain-precision;
  margin-top: @form-help-margin-top;
  color: @text-color-secondary;
  font-size: @form-explain-font-size;
  line-height: @line-height-base;
  transition: color 0.3s @ease-out; // sync input color transition
}

.@{form-prefix-cls}-explain {
  margin-bottom: -@form-explain-precision;
}

.@{form-prefix-cls}-extra {
  padding-top: 4px;
}

.@{form-prefix-cls}-text {
  display: inline-block;
  padding-right: 8px;
}

.@{form-prefix-cls}-split {
  display: block;
  text-align: center;
}

// 表单下的输入框尺寸唯一: 大尺寸
form {
  .has-feedback {
    .@{ant-prefix}-input {
      padding-right: 24px;
    }

    // Fix overlapping between feedback icon and <Select>'s arrow.
    // https://github.com/ant-design/ant-design/issues/4431
    > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
    :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
    :not(.@{ant-prefix}-input-group-addon)
    > .@{ant-prefix}-select
    .@{ant-prefix}-select-selection__clear {
      right: 28px;
    }
    > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
    :not(.@{ant-prefix}-input-group-addon)
    > .@{ant-prefix}-select
    .@{ant-prefix}-select-selection-selected-value {
      padding-right: 42px;
    }

    .@{ant-prefix}-cascader-picker {
      &-arrow {
        margin-right: 17px;
      }
      &-clear {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/7854
    .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
      .@{ant-prefix}-input-suffix {
        right: 28px;
      }
    }

    // Fix issue: https://github.com/ant-design/ant-design/issues/4783
    .@{ant-prefix}-calendar-picker,
    .@{ant-prefix}-time-picker {
      &-icon,
      &-clear {
        right: 28px;
      }
    }
  }

  textarea.@{ant-prefix}-input {
    height: auto;
    margin-bottom: 4px;
  }

  // input[type=file]
  .@{ant-prefix}-upload {
    background: transparent;
  }

  input[type='radio'],
  input[type='checkbox'] {
    width: 14px;
    height: 14px;
  }

  // Radios and checkboxes on same line
  .@{ant-prefix}-radio-inline,
  .@{ant-prefix}-checkbox-inline {
    display: inline-block;
    margin-left: 8px;
    font-weight: normal;
    vertical-align: middle;
    cursor: pointer;

    &:first-child {
      margin-left: 0;
    }
  }

  .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical {
    display: block;
  }

  .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
  .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
    margin-left: 0;
  }

  .@{ant-prefix}-input-number {
    + .@{form-prefix-cls}-text {
      margin-left: 8px;
    }
    &-handler-wrap {
      z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
    }
  }

  .@{ant-prefix}-select,
  .@{ant-prefix}-cascader-picker {
    width: 100%;
  }

  // Don't impact select inside input group
  .@{ant-prefix}-input-group .@{ant-prefix}-select,
  .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
    width: auto;
  }

  // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
  :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
  .@{ant-prefix}-input-group-wrapper {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
  }
}

// Input combined with select
.@{ant-prefix}-input-group-wrap {
  .@{ant-prefix}-select-selection {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    &:hover {
      border-color: @border-color-base;
    }
  }

  .@{ant-prefix}-select-selection--single {
    height: @input-height-lg;
    margin-left: -1px;
    background-color: fade(@black, 7%);
    .@{ant-prefix}-select-selection__rendered {
      padding-right: 25px;
      padding-left: 8px;
      line-height: 30px;
    }
  }

  .@{ant-prefix}-select-open .@{ant-prefix}-select-selection {
    border-color: @border-color-base;
    box-shadow: none;
  }
}

// Form layout
//== Vertical Form
.make-vertical-layout-label() {
  display: block;
  margin: @form-vertical-label-margin;
  padding: @form-vertical-label-padding;
  line-height: @line-height-base;
  white-space: initial;
  text-align: left;

  label::after {
    display: none;
  }
}

.make-vertical-layout() {
  .@{form-prefix-cls}-item-label,
  .@{form-prefix-cls}-item-control-wrapper {
    display: block;
    width: 100%;
  }
  .@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
  // when labelCol is 24, it is a vertical form
.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
  .make-vertical-layout-label();
}

.@{form-prefix-cls}-vertical {
  .@{form-prefix-cls}-item {
    padding-bottom: 8px;
  }
  .@{form-prefix-cls}-item-control {
    line-height: @line-height-base;
  }
  .@{form-prefix-cls}-explain {
    margin-top: 2px;
    margin-bottom: -4px - @form-explain-precision;
  }
  .@{form-prefix-cls}-extra {
    margin-top: 2px;
    margin-bottom: -4px;
  }
}

@media (max-width: @screen-xs-max) {
  .make-vertical-layout();
  .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-sm-max) {
  .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-md-max) {
  .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-lg-max) {
  .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

@media (max-width: @screen-xl-max) {
  .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
    .make-vertical-layout-label();
  }
}

//== Inline Form
.@{form-prefix-cls}-inline {
  .@{form-prefix-cls}-item {
    display: inline-block;
    margin-right: 16px;
    margin-bottom: 0;

    &-with-help {
      margin-bottom: @form-item-margin-bottom;
    }

    > .@{form-prefix-cls}-item-control-wrapper,
    > .@{form-prefix-cls}-item-label {
      display: inline-block;
      vertical-align: top;
    }
  }

  .@{form-prefix-cls}-text {
    display: inline-block;
  }

  .has-feedback {
    display: inline-block;
  }
}

// Validation state
.has-success,
.has-warning,
.has-error,
.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    position: absolute;
    top: 50%;
    right: 0;
    z-index: 1;
    width: @form-component-height;
    height: 20px;
    margin-top: -10px;
    font-size: @form-feedback-icon-size;
    line-height: 20px;
    text-align: center;
    visibility: visible;
    animation: zoomIn 0.3s @ease-out-back;
    pointer-events: none;

    & svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }
}

.has-success {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @success-color;
    animation-name: diffZoomIn1 !important;
  }
}

.has-warning {
  .form-control-validation(@warning-color; @warning-color;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @warning-color;
    animation-name: diffZoomIn3 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @warning-color;
      &:hover {
        border-color: @warning-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@warning-color);
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @warning-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @warning-color;
    &-focused,
    &:focus {
      .active(@warning-color);
    }
    &:not([disabled]):hover {
      border-color: @warning-color;
    }
  }

  .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
    .active(@warning-color);
  }
}

.has-error {
  .form-control-validation(@error-color; @error-color;);

  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    color: @error-color;
    animation-name: diffZoomIn2 !important;
  }

  //select
  .@{ant-prefix}-select {
    &-selection {
      border-color: @error-color;
      &:hover {
        border-color: @error-color;
      }
    }
    &-open .@{ant-prefix}-select-selection,
    &-focused .@{ant-prefix}-select-selection {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
    .@{ant-prefix}-input:focus {
      border-color: @error-color;
    }
  }

  .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
    &-selection {
      border-color: transparent;
      box-shadow: none;
    }
  }

  // arrow and icon
  .@{ant-prefix}-calendar-picker-icon::after,
  .@{ant-prefix}-time-picker-icon::after,
  .@{ant-prefix}-picker-icon::after,
  .@{ant-prefix}-select-arrow,
  .@{ant-prefix}-cascader-picker-arrow {
    color: @error-color;
  }

  //input-number, timepicker
  .@{ant-prefix}-input-number,
  .@{ant-prefix}-time-picker-input {
    border-color: @error-color;
    &-focused,
    &:focus {
      .active(@error-color);
    }
    &:not([disabled]):hover {
      border-color: @error-color;
    }
  }
  .@{ant-prefix}-mention-wrapper {
    .@{ant-prefix}-mention-editor {
      &,
      &:not([disabled]):hover {
        border-color: @error-color;
      }
    }
    &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
    .@{ant-prefix}-mention-editor:not([disabled]):focus {
      .active(@error-color);
    }
  }

  .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
    .active(@error-color);
  }

  // transfer
  .@{ant-prefix}-transfer {
    &-list {
      border-color: @error-color;

      &-search:not([disabled]) {
        border-color: @input-border-color;

        &:hover {
          .hover();
        }

        &:focus {
          .active();
        }
      }
    }
  }
}

.is-validating {
  &.has-feedback .@{form-prefix-cls}-item-children-icon {
    display: inline-block;
    color: @primary-color;
  }
}

.@{ant-prefix}-advanced-search-form {
  .@{form-prefix-cls}-item {
    margin-bottom: @form-item-margin-bottom;

    &-with-help {
      margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
    }
  }
}

.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
  .make-motion(@className, @keyframeName, @duration);
  .@{className}-enter,
  .@{className}-appear {
    opacity: 0;
    animation-timing-function: @ease-in-out;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-out;
  }
}

.show-help-motion(show-help, antShowHelp, 0.3s);

@keyframes antShowHelpIn {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes antShowHelpOut {
  to {
    transform: translateY(-5px);
    opacity: 0;
  }
}

// need there different zoom animation
// otherwise won't trigger anim
@keyframes diffZoomIn1 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn2 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes diffZoomIn3 {
  0% {
    transform: scale(0);
  }
  100% {
    transform: scale(1);
  }
}

// style dependencies

@list-prefix-cls: ~'@{ant-prefix}-list';

.@{list-prefix-cls} {
  .reset-component;
  position: relative;

  * {
    outline: none;
  }

  &-pagination {
    margin-top: 24px;
    text-align: right;
  }

  &-more {
    margin-top: 12px;
    text-align: center;
    button {
      padding-right: 32px;
      padding-left: 32px;
    }
  }

  &-spin {
    min-height: 40px;
    text-align: center;
  }

  &-empty-text {
    padding: @list-empty-text-padding;
    color: @disabled-color;
    font-size: @font-size-base;
    text-align: center;
  }

  &-item {
    display: flex;
    align-items: center;
    padding: @list-item-padding;

    &-no-flex {
      display: block;
    }

    &-content {
      color: @text-color;
    }

    &-meta {
      display: flex;
      flex: 1;
      align-items: flex-start;
      font-size: 0;
      &-avatar {
        margin-right: @list-item-meta-avatar-margin-right;
      }
      &-content {
        flex: 1 0;
      }
      &-title {
        margin-bottom: 4px;
        color: @text-color;
        font-size: @font-size-base;
        line-height: 22px;
        > a {
          color: @text-color;
          transition: all 0.3s;
          &:hover {
            color: @primary-color;
          }
        }
      }
      &-description {
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
      }
    }
    &-action {
      flex: 0 0 auto;
      margin-left: 48px;
      padding: 0;
      font-size: 0;
      list-style: none;
      & > li {
        position: relative;
        display: inline-block;
        padding: 0 8px;
        color: @text-color-secondary;
        font-size: @font-size-base;
        line-height: 22px;
        text-align: center;
        cursor: pointer;
      }
      & > li:first-child {
        padding-left: 0;
      }
      &-split {
        position: absolute;
        top: 50%;
        right: 0;
        width: 1px;
        height: 14px;
        margin-top: -7px;
        background-color: @border-color-split;
      }
    }
  }

  &-header {
    background: @list-header-background;
  }

  &-footer {
    background: @list-footer-background;
  }

  &-header,
  &-footer {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  &-empty {
    padding: 16px 0;
    color: @text-color-secondary;
    font-size: 12px;
    text-align: center;
  }

  &-split &-item {
    border-bottom: 1px solid @border-color-split;
    &:last-child {
      border-bottom: none;
    }
  }

  &-split &-header {
    border-bottom: 1px solid @border-color-split;
  }

  &-loading &-spin-nested-loading {
    min-height: 32px;
  }

  &-something-after-last-item .@{ant-prefix}-spin-container > &-item:last-child {
    border-bottom: 1px solid @border-color-split;
  }

  &-lg &-item {
    padding-top: 16px;
    padding-bottom: 16px;
  }

  &-sm &-item {
    padding-top: 8px;
    padding-bottom: 8px;
  }

  &-vertical &-item {
    align-items: initial;

    &-main {
      display: block;
      flex: 1;
    }

    &-extra {
      margin-left: 40px;
    }

    &-meta {
      margin-bottom: @list-item-meta-margin-bottom;

      &-title {
        margin-bottom: @list-item-meta-title-margin-bottom;
        color: @heading-color;
        font-size: @font-size-lg;
        line-height: 24px;
      }
    }

    &-action {
      margin-top: @padding-md;
      margin-left: auto;

      > li {
        padding: 0 16px;
        &:first-child {
          padding-left: 0;
        }
      }
    }
  }

  &-grid &-item {
    display: block;
    max-width: 100%;
    margin-bottom: 16px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
  }
}

.@{list-prefix-cls}-bordered {
  border: 1px solid @border-color-base;
  border-radius: @border-radius-base;
  .@{list-prefix-cls}-header {
    padding-right: 24px;
    padding-left: 24px;
  }

  .@{list-prefix-cls}-footer {
    padding-right: 24px;
    padding-left: 24px;
  }

  .@{list-prefix-cls}-item {
    padding-right: 24px;
    padding-left: 24px;
    border-bottom: 1px solid @border-color-split;
  }

  .@{list-prefix-cls}-pagination {
    margin: 16px 24px;
  }

  &.@{list-prefix-cls}-sm {
    .@{list-prefix-cls}-item {
      padding-right: 16px;
      padding-left: 16px;
    }
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 8px 16px;
    }
  }

  &.@{list-prefix-cls}-lg {
    .@{list-prefix-cls}-header,
    .@{list-prefix-cls}-footer {
      padding: 16px 24px;
    }
  }
}

@media screen and (max-width: @screen-md) {
  .@{list-prefix-cls} {
    &-item {
      &-action {
        margin-left: 24px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      &-extra {
        margin-left: 24px;
      }
    }
  }
}

@media screen and (max-width: @screen-sm) {
  .@{list-prefix-cls} {
    &-item {
      flex-wrap: wrap;
      &-action {
        margin-left: 12px;
      }
    }
  }

  .@{list-prefix-cls}-vertical {
    .@{list-prefix-cls}-item {
      flex-wrap: wrap-reverse;
      &-main {
        min-width: 220px;
      }
      &-extra {
        margin: auto auto 16px;
      }
    }
  }
}

@spin-prefix-cls: ~'@{ant-prefix}-spin';
@spin-dot-default: @text-color-secondary;

.@{spin-prefix-cls} {
  .reset-component;
  position: absolute;
  display: none;
  color: @primary-color;
  text-align: center;
  vertical-align: middle;
  opacity: 0;
  transition: transform 0.3s @ease-in-out-circ;

  &-spinning {
    position: static;
    display: inline-block;
    opacity: 1;
  }

  &-nested-loading {
    position: relative;
    > div > .@{spin-prefix-cls} {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 4;
      display: block;
      width: 100%;
      height: 100%;
      max-height: 400px;
      .@{spin-prefix-cls}-dot {
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -@spin-dot-size / 2;
      }
      .@{spin-prefix-cls}-text {
        position: absolute;
        top: 50%;
        width: 100%;
        padding-top: (@spin-dot-size - @font-size-base) / 2 + 2px;
        text-shadow: 0 1px 2px @shadow-color-inverse;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size / 2 - 10px;
      }
    }

    > div > .@{spin-prefix-cls}-sm {
      .@{spin-prefix-cls}-dot {
        margin: -@spin-dot-size-sm / 2;
      }
      .@{spin-prefix-cls}-text {
        padding-top: (@spin-dot-size-sm - @font-size-base) / 2 + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size-sm / 2 - 10px;
      }
    }

    > div > .@{spin-prefix-cls}-lg {
      .@{spin-prefix-cls}-dot {
        margin: -@spin-dot-size-lg / 2;
      }
      .@{spin-prefix-cls}-text {
        padding-top: (@spin-dot-size-lg - @font-size-base) / 2 + 2px;
      }
      &.@{spin-prefix-cls}-show-text .@{spin-prefix-cls}-dot {
        margin-top: -@spin-dot-size-lg / 2 - 10px;
      }
    }
  }

  &-container {
    position: relative;
    transition: opacity 0.3s;

    &::after {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: 10;
      display: ~'none \9';
      width: 100%;
      height: 100%;
      background: @component-background;
      opacity: 0;
      transition: all 0.3s;
      pointer-events: none;
      content: '';
    }
  }

  &-blur {
    clear: both;
    overflow: hidden;
    opacity: 0.5;
    user-select: none;
    pointer-events: none;

    &::after {
      opacity: 0.4;
      pointer-events: auto;
    }
  }

  // tip
  // ------------------------------
  &-tip {
    color: @spin-dot-default;
  }

  // dots
  // ------------------------------

  &-dot {
    position: relative;
    display: inline-block;
    font-size: @spin-dot-size;

    .square(@spin-dot-size);

    &-item {
      position: absolute;
      display: block;
      width: 9px;
      height: 9px;
      background-color: @primary-color;
      border-radius: 100%;
      transform: scale(0.75);
      transform-origin: 50% 50%;
      opacity: 0.3;
      animation: antSpinMove 1s infinite linear alternate;

      &:nth-child(1) {
        top: 0;
        left: 0;
      }
      &:nth-child(2) {
        top: 0;
        right: 0;
        animation-delay: 0.4s;
      }
      &:nth-child(3) {
        right: 0;
        bottom: 0;
        animation-delay: 0.8s;
      }
      &:nth-child(4) {
        bottom: 0;
        left: 0;
        animation-delay: 1.2s;
      }
    }

    &-spin {
      transform: rotate(45deg);
      animation: antRotate 1.2s infinite linear;
    }
  }

  // Sizes
  // ------------------------------

  // small
  &-sm &-dot {
    font-size: @spin-dot-size-sm;

    .square(@spin-dot-size-sm);
    i {
      width: 6px;
      height: 6px;
    }
  }

  // large
  &-lg &-dot {
    font-size: @spin-dot-size-lg;

    .square(@spin-dot-size-lg);
    i {
      width: 14px;
      height: 14px;
    }
  }

  &&-show-text &-text {
    display: block;
  }
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ */
  .@{spin-prefix-cls}-blur {
    background: @component-background;
    opacity: 0.5;
  }
}

@keyframes antSpinMove {
  to {
    opacity: 1;
  }
}

@keyframes antRotate {
  to {
    transform: rotate(405deg);
  }
}

@pagination-prefix-cls: ~'@{ant-prefix}-pagination';

.@{pagination-prefix-cls} {
  .reset-component;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &::after {
    display: block;
    clear: both;
    height: 0;
    overflow: hidden;
    visibility: hidden;
    content: ' ';
  }

  &-total-text {
    display: inline-block;
    height: @pagination-item-size;
    margin-right: 8px;
    line-height: @pagination-item-size - 2px;
    vertical-align: middle;
  }

  &-item {
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    margin-right: 8px;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size - 2px;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    background-color: @component-background;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;
    outline: 0;
    cursor: pointer;
    user-select: none;

    a {
      margin: 0 6px;
      color: @text-color;
      transition: none;
    }

    &:focus,
    &:hover {
      border-color: @primary-color;
      transition: all 0.3s;
      a {
        color: @primary-color;
      }
    }

    &-active {
      font-weight: @pagination-font-weight-active;
      background: @pagination-item-bg-active;
      border-color: @primary-color;

      a {
        color: @primary-color;
      }

      &:focus,
      &:hover {
        border-color: @primary-5;
      }

      &:focus a,
      &:hover a {
        color: @primary-5;
      }
    }
  }

  &-jump-prev,
  &-jump-next {
    outline: 0;
    .@{pagination-prefix-cls}-item-container {
      position: relative;

      .@{pagination-prefix-cls}-item-link-icon {
        .iconfont-size-under-12px(12px);
        color: @primary-color;
        letter-spacing: -1px;
        opacity: 0;
        transition: all 0.2s;
        &-svg {
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
        }
      }

      .@{pagination-prefix-cls}-item-ellipsis {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        display: block;
        margin: auto;
        color: @disabled-color;
        letter-spacing: 2px;
        text-align: center;
        text-indent: 0.13em;
        opacity: 1;
        transition: all 0.2s;
      }
    }

    &:focus,
    &:hover {
      .@{pagination-prefix-cls}-item-link-icon {
        opacity: 1;
      }
      .@{pagination-prefix-cls}-item-ellipsis {
        opacity: 0;
      }
    }
  }

  &-prev,
  &-jump-prev,
  &-jump-next {
    margin-right: 8px;
  }
  &-prev,
  &-next,
  &-jump-prev,
  &-jump-next {
    display: inline-block;
    min-width: @pagination-item-size;
    height: @pagination-item-size;
    color: @text-color;
    font-family: @pagination-font-family;
    line-height: @pagination-item-size;
    text-align: center;
    vertical-align: middle;
    list-style: none;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: all 0.3s;
  }

  &-prev,
  &-next {
    outline: 0;

    a {
      color: @text-color;
      user-select: none;
    }

    &:hover a {
      border-color: @primary-5;
    }

    .@{pagination-prefix-cls}-item-link {
      display: block;
      height: 100%;
      font-size: 12px;
      text-align: center;
      background-color: @component-background;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      outline: none;
      transition: all 0.3s;
    }

    &:focus .@{pagination-prefix-cls}-item-link,
    &:hover .@{pagination-prefix-cls}-item-link {
      color: @primary-color;
      border-color: @primary-color;
    }
  }

  &-disabled {
    &,
    &:hover,
    &:focus {
      cursor: not-allowed;
      a,
      .@{pagination-prefix-cls}-item-link {
        color: @disabled-color;
        border-color: @border-color-base;
        cursor: not-allowed;
      }
    }
  }

  &-slash {
    margin: 0 10px 0 5px;
  }

  &-options {
    display: inline-block;
    margin-left: 16px;
    vertical-align: middle;

    &-size-changer.@{ant-prefix}-select {
      display: inline-block;
      width: auto;
      margin-right: 8px;
    }

    &-quick-jumper {
      display: inline-block;
      height: @input-height-base;
      line-height: @input-height-base;
      vertical-align: top;

      input {
        .input;
        width: 50px;
        margin: 0 8px;
      }
    }
  }

  &-simple &-prev,
  &-simple &-next {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
    vertical-align: top;
    .@{pagination-prefix-cls}-item-link {
      height: @pagination-item-size-sm;
      border: 0;
      &::after {
        height: @pagination-item-size-sm;
        line-height: @pagination-item-size-sm;
      }
    }
  }

  &-simple &-simple-pager {
    display: inline-block;
    height: @pagination-item-size-sm;
    margin-right: 8px;

    input {
      box-sizing: border-box;
      height: 100%;
      margin-right: 8px;
      padding: 0 6px;
      text-align: center;
      background-color: @component-background;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: @border-radius-base;
      outline: none;
      transition: border-color 0.3s;

      &:hover {
        border-color: @primary-color;
      }
    }
  }

  &.mini &-total-text,
  &.mini &-simple-pager {
    height: @pagination-item-size-sm;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-item {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm - 2px;
  }

  &.mini &-item:not(&-item-active) {
    background: transparent;
    border-color: transparent;
  }

  &.mini &-prev,
  &.mini &-next {
    min-width: @pagination-item-size-sm;
    height: @pagination-item-size-sm;
    margin: 0;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-prev &-item-link,
  &.mini &-next &-item-link {
    background: transparent;
    border-color: transparent;
    &::after {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;
    }
  }

  &.mini &-jump-prev,
  &.mini &-jump-next {
    height: @pagination-item-size-sm;
    margin-right: 0;
    line-height: @pagination-item-size-sm;
  }

  &.mini &-options {
    margin-left: 2px;
    &-quick-jumper {
      height: @pagination-item-size-sm;
      line-height: @pagination-item-size-sm;

      input {
        .input-sm;
        width: 44px;
      }
    }
  }
}

@media only screen and (max-width: @screen-lg) {
  .@{pagination-prefix-cls}-item {
    &-after-jump-prev,
    &-before-jump-next {
      display: none;
    }
  }
}

@media only screen and (max-width: @screen-sm) {
  .@{pagination-prefix-cls}-options {
    display: none;
  }
}

@menu-prefix-cls: ~'@{ant-prefix}-menu';

// default theme
.@{menu-prefix-cls} {
  .reset-component;
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  color: @menu-item-color;
  line-height: 0; // Fix display inline-block gap
  list-style: none;
  background: @menu-bg;
  outline: none;
  box-shadow: @box-shadow-base;
  transition: background 0.3s, width 0.2s;
  .clearfix;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  &-hidden {
    display: none;
  }

  &-item-group-title {
    padding: 8px 16px;
    color: @menu-item-group-title-color;
    font-size: @font-size-base;
    line-height: @line-height-base;
    transition: all 0.3s;
  }

  &-submenu,
  &-submenu-inline {
    transition: border-color 0.3s @ease-in-out, background 0.3s @ease-in-out,
    padding 0.15s @ease-in-out;
  }

  &-item:active,
  &-submenu-title:active {
    background: @menu-item-active-bg;
  }

  &-submenu &-sub {
    cursor: initial;
    transition: background 0.3s @ease-in-out, padding 0.3s @ease-in-out;
  }

  &-item > a {
    display: block;
    color: @menu-item-color;
    &:hover {
      color: @menu-highlight-color;
    }
    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: transparent;
      content: '';
    }
  }

  &-item-divider {
    height: 1px;
    overflow: hidden;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-item:hover,
  &-item-active,
  &:not(&-inline) &-submenu-open,
  &-submenu-active,
  &-submenu-title:hover {
    color: @menu-highlight-color;
  }

  &-horizontal &-item,
  &-horizontal &-submenu {
    margin-top: -1px;
  }

  &-horizontal > &-item:hover,
  &-horizontal > &-item-active,
  &-horizontal > &-submenu &-submenu-title:hover {
    background-color: transparent;
  }

  &-item-selected {
    color: @menu-highlight-color;
    > a,
    > a:hover {
      color: @menu-highlight-color;
    }
  }

  &:not(&-horizontal) &-item-selected {
    background-color: @menu-item-active-bg;
  }

  &-inline,
  &-vertical,
  &-vertical-left {
    border-right: @border-width-base @border-style-base @border-color-split;
  }
  &-vertical-right {
    border-left: @border-width-base @border-style-base @border-color-split;
  }

  &-vertical&-sub,
  &-vertical-left&-sub,
  &-vertical-right&-sub {
    min-width: 160px;
    padding: 0;
    border-right: 0;
    transform-origin: 0 0;

    .@{menu-prefix-cls}-item {
      left: 0;
      margin-left: 0;
      border-right: 0;
      &::after {
        border-right: 0;
      }
    }
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      transform-origin: 0 0;
    }
  }

  &-horizontal&-sub {
    min-width: 114px; // in case of submenu width is too big: https://codesandbox.io/s/qvpwm6mk66
  }

  &-item,
  &-submenu-title {
    position: relative;
    display: block;
    margin: 0;
    padding: 0 20px;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
    background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
    .@{iconfont-css-prefix} {
      min-width: 14px;
      margin-right: 10px;
      font-size: @font-size-base;
      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
      + span {
        opacity: 1;
        transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
      }
    }
  }

  & > &-item-divider {
    height: 1px;
    margin: 1px 0;
    padding: 0;
    overflow: hidden;
    line-height: 0;
    background-color: @border-color-split;
  }

  &-submenu {
    &-popup {
      position: absolute;
      z-index: @zindex-dropdown;
      background: @menu-popup-bg;
      border-radius: @border-radius-base;

      .submenu-title-wrapper {
        padding-right: 20px;
      }

      &::before {
        position: absolute;
        top: -7px;
        right: 0;
        bottom: 0;
        left: 0;
        opacity: 0.0001;
        content: ' ';
      }
    }

    > .@{menu-prefix-cls} {
      background-color: @menu-bg;
      border-radius: @border-radius-base;
      &-submenu-title::after {
        transition: transform 0.3s @ease-in-out;
      }
    }

    &-vertical,
    &-vertical-left,
    &-vertical-right,
    &-inline {
      > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
        position: absolute;
        top: 50%;
        right: 16px;
        width: 10px;
        transition: transform 0.3s @ease-in-out;
        &::before,
        &::after {
          position: absolute;
          width: 6px;
          height: 1.5px;
          background: @menu-bg;
          background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
          border-radius: 2px;
          transition: background 0.3s @ease-in-out, transform 0.3s @ease-in-out,
          top 0.3s @ease-in-out;
          content: '';
        }
        &::before {
          transform: rotate(45deg) translateY(-2px);
        }
        &::after {
          transform: rotate(-45deg) translateY(2px);
        }
      }
      > .@{menu-prefix-cls}-submenu-title:hover .@{menu-prefix-cls}-submenu-arrow {
        &::after,
        &::before {
          background: linear-gradient(to right, @menu-highlight-color, @menu-highlight-color);
        }
      }
    }

    &-inline > .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      &::before {
        transform: rotate(-45deg) translateX(2px);
      }
      &::after {
        transform: rotate(45deg) translateX(-2px);
      }
    }

    &-open {
      &.@{menu-prefix-cls}-submenu-inline
      > .@{menu-prefix-cls}-submenu-title
      .@{menu-prefix-cls}-submenu-arrow {
        transform: translateY(-2px);
        &::after {
          transform: rotate(-45deg) translateX(-2px);
        }
        &::before {
          transform: rotate(45deg) translateX(2px);
        }
      }
    }
  }

  &-vertical &-submenu-selected,
  &-vertical-left &-submenu-selected,
  &-vertical-right &-submenu-selected {
    color: @menu-highlight-color;
    > a {
      color: @menu-highlight-color;
    }
  }

  &-horizontal {
    line-height: 46px;
    white-space: nowrap;
    border: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    box-shadow: none;

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu {
      position: relative;
      top: 1px;
      display: inline-block;
      vertical-align: bottom;
      border-bottom: 2px solid transparent;

      &:hover,
      &-active,
      &-open,
      &-selected {
        color: @menu-highlight-color;
        border-bottom: 2px solid @menu-highlight-color;
      }
    }

    > .@{menu-prefix-cls}-item {
      > a {
        display: block;
        color: @menu-item-color;
        &:hover {
          color: @menu-highlight-color;
        }
        &::before {
          bottom: -2px;
        }
      }
      &-selected > a {
        color: @menu-highlight-color;
      }
    }

    &::after {
      display: block;
      clear: both;
      height: 0;
      content: '\20';
    }
  }

  &-vertical,
  &-vertical-left,
  &-vertical-right,
  &-inline {
    .@{menu-prefix-cls}-item {
      position: relative;
      &::after {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        border-right: @menu-item-active-border-width solid @menu-highlight-color;
        transform: scaleY(0.0001);
        opacity: 0;
        transition: transform 0.15s @ease-out, opacity 0.15s @ease-out;
        content: '';
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      height: @menu-item-height;
      margin-top: 4px;
      margin-bottom: 4px;
      padding: 0 16px;
      overflow: hidden;
      font-size: @font-size-base;
      line-height: @menu-item-height;
      text-overflow: ellipsis;
    }

    // disable margin collapsed
    .@{menu-prefix-cls}-submenu {
      padding-bottom: 0.01px;
    }

    .@{menu-prefix-cls}-item:not(:last-child) {
      margin-bottom: 8px;
    }

    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      height: @menu-inline-toplevel-item-height;
      line-height: @menu-inline-toplevel-item-height;
    }
  }

  &-inline {
    width: 100%;
    .@{menu-prefix-cls}-selected,
    .@{menu-prefix-cls}-item-selected {
      &::after {
        transform: scaleY(1);
        opacity: 1;
        transition: transform 0.15s @ease-in-out, opacity 0.15s @ease-in-out;
      }
    }

    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      width: ~'calc(100% + 1px)';
    }

    .@{menu-prefix-cls}-submenu-title {
      padding-right: 34px;
    }
  }

  &-inline-collapsed {
    width: @menu-collapsed-width;
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-item-group
    > .@{menu-prefix-cls}-item-group-list
    > .@{menu-prefix-cls}-item,
    > .@{menu-prefix-cls}-item-group
    > .@{menu-prefix-cls}-item-group-list
    > .@{menu-prefix-cls}-submenu
    > .@{menu-prefix-cls}-submenu-title,
    > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      left: 0;
      padding: 0 (@menu-collapsed-width - 16px) / 2 !important;
      text-overflow: clip;
      .@{menu-prefix-cls}-submenu-arrow {
        display: none;
      }
      .@{iconfont-css-prefix} {
        margin: 0;
        font-size: 16px;
        line-height: @menu-item-height;
        + span {
          display: inline-block;
          max-width: 0;
          opacity: 0;
        }
      }
    }
    &-tooltip {
      pointer-events: none;
      .@{iconfont-css-prefix} {
        display: none;
      }
      a {
        color: @text-color-dark;
      }
    }

    .@{menu-prefix-cls}-item-group-title {
      padding-right: 4px;
      padding-left: 4px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &-item-group-list {
    margin: 0;
    padding: 0;
    .@{menu-prefix-cls}-item,
    .@{menu-prefix-cls}-submenu-title {
      padding: 0 16px 0 28px;
    }
  }

  &-root&-vertical,
  &-root&-vertical-left,
  &-root&-vertical-right,
  &-root&-inline {
    box-shadow: none;
  }

  &-sub&-inline {
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    & > .@{menu-prefix-cls}-item,
    & > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
      height: @menu-item-height;
      line-height: @menu-item-height;
      list-style-position: inside;
      list-style-type: disc;
    }

    & .@{menu-prefix-cls}-item-group-title {
      padding-left: 32px;
    }
  }

  // Disabled state sets text to gray and nukes hover/tab effects
  &-item-disabled,
  &-submenu-disabled {
    color: @disabled-color !important;
    background: none;
    border-color: transparent !important;
    cursor: not-allowed;
    > a {
      color: @disabled-color !important;
      pointer-events: none;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color !important;
      cursor: not-allowed;
      > .@{menu-prefix-cls}-submenu-arrow {
        &::before,
        &::after {
          background: @disabled-color !important;
        }
      }
    }
  }
}

.@{menu-prefix-cls} {
  // dark theme
  &-dark,
  &-dark &-sub {
    color: @menu-dark-color;
    background: @menu-dark-bg;
    .@{menu-prefix-cls}-submenu-title .@{menu-prefix-cls}-submenu-arrow {
      opacity: 0.45;
      transition: all 0.3s;
      &::after,
      &::before {
        background: @menu-dark-arrow-color;
      }
    }
  }

  &-dark&-submenu-popup {
    background: transparent;
  }

  &-dark &-inline&-sub {
    background: @menu-dark-submenu-bg;
    box-shadow: 0 2px 8px fade(@black, 45%) inset;
  }

  &-dark&-horizontal {
    border-bottom: 0;
  }

  &-dark&-horizontal > &-item,
  &-dark&-horizontal > &-submenu {
    top: 0;
    margin-top: 0;
    border-color: @menu-dark-bg;
    border-bottom: 0;
  }

  &-dark&-horizontal > &-item > a::before {
    bottom: 0;
  }

  &-dark &-item,
  &-dark &-item-group-title,
  &-dark &-item > a {
    color: @menu-dark-color;
  }

  &-dark&-inline,
  &-dark&-vertical,
  &-dark&-vertical-left,
  &-dark&-vertical-right {
    border-right: 0;
  }

  &-dark&-inline &-item,
  &-dark&-vertical &-item,
  &-dark&-vertical-left &-item,
  &-dark&-vertical-right &-item {
    left: 0;
    margin-left: 0;
    border-right: 0;
    &::after {
      border-right: 0;
    }
  }

  &-dark&-inline &-item,
  &-dark&-inline &-submenu-title {
    width: 100%;
  }

  &-dark &-item:hover,
  &-dark &-item-active,
  &-dark &-submenu-active,
  &-dark &-submenu-open,
  &-dark &-submenu-selected,
  &-dark &-submenu-title:hover {
    color: @menu-dark-highlight-color;
    background-color: transparent;
    > a {
      color: @menu-dark-highlight-color;
    }
    > .@{menu-prefix-cls}-submenu-title,
    > .@{menu-prefix-cls}-submenu-title:hover {
      > .@{menu-prefix-cls}-submenu-arrow {
        opacity: 1;
        &::after,
        &::before {
          background: @menu-dark-highlight-color;
        }
      }
    }
  }

  &-dark &-item-selected {
    color: @menu-dark-highlight-color;
    border-right: 0;
    &::after {
      border-right: 0;
    }
    > a,
    > a:hover {
      color: @menu-dark-highlight-color;
    }
  }

  &&-dark &-item-selected,
  &-submenu-popup&-dark &-item-selected {
    background-color: @menu-dark-item-active-bg;
  }

  // Disabled state sets text to dark gray and nukes hover/tab effects
  &-dark &-item-disabled,
  &-dark &-submenu-disabled {
    &,
    > a {
      color: @disabled-color-dark !important;
      opacity: 0.8;
    }
    > .@{menu-prefix-cls}-submenu-title {
      color: @disabled-color-dark !important;
      > .@{menu-prefix-cls}-submenu-arrow {
        &::before,
        &::after {
          background: @disabled-color-dark !important;
        }
      }
    }
  }
}

@mention-prefix-cls: ~'@{ant-prefix}-mention';

.@{mention-prefix-cls}-wrapper {
  .reset-component;
  position: relative;
  display: inline-block;
  width: 100%;
  vertical-align: middle;

  .@{mention-prefix-cls}-editor {
    .input;
    display: block;
    height: auto; // To override height in .input mixin
    min-height: @input-height-base;
    padding: 0;
    line-height: @line-height-base;
    &-wrapper {
      height: auto;
      overflow-y: auto;
    }
  }
  &.@{mention-prefix-cls}-active:not(.disabled) .@{mention-prefix-cls}-editor {
    .active;
  }
  &.disabled .@{mention-prefix-cls}-editor {
    .disabled();
  }
  .public-DraftEditorPlaceholder-root {
    position: absolute;
    pointer-events: none;
    .public-DraftEditorPlaceholder-inner {
      height: auto;
      padding: 5px @control-padding-horizontal - 1px;
      color: @input-placeholder-color;
      white-space: pre-wrap;
      word-wrap: break-word;
      outline: none;
      opacity: 1;
    }
  }
  .DraftEditor-editorContainer .public-DraftEditor-content {
    height: auto;
    padding: 5px @control-padding-horizontal - 1px;
  }
}

@message-prefix-cls: ~'@{ant-prefix}-message';

.@{message-prefix-cls} {
  .reset-component;
  position: fixed;
  top: 16px;
  left: 0;
  z-index: @zindex-message;
  width: 100%;
  pointer-events: none;

  &-notice {
    padding: 8px;
    text-align: center;
    &:first-child {
      margin-top: -8px;
    }
  }

  &-notice-content {
    display: inline-block;
    padding: @message-notice-content-padding;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
    pointer-events: all;
  }

  &-success .@{iconfont-css-prefix} {
    color: @success-color;
  }

  &-error .@{iconfont-css-prefix} {
    color: @error-color;
  }

  &-warning .@{iconfont-css-prefix} {
    color: @warning-color;
  }

  &-info .@{iconfont-css-prefix},
  &-loading .@{iconfont-css-prefix} {
    color: @info-color;
  }

  .@{iconfont-css-prefix} {
    position: relative;
    top: 1px;
    margin-right: 8px;
    font-size: @font-size-lg;
  }

  &-notice.move-up-leave.move-up-leave-active {
    overflow: hidden;
    animation-name: MessageMoveOut;
    animation-duration: 0.3s;
  }
}

@keyframes MessageMoveOut {
  0% {
    max-height: 150px;
    padding: 8px;
    opacity: 1;
  }
  100% {
    max-height: 0;
    padding: 0;
    opacity: 0;
  }
}

@dialog-prefix-cls: ~'@{ant-prefix}-modal';
@table-prefix-cls: ~'@{ant-prefix}-table';
@modal-footer-padding-vertical: 10px;
@modal-footer-padding-horizontal: 16px;

.@{dialog-prefix-cls} {
  .reset-component;
  position: relative;
  top: 100px;
  width: auto;
  margin: 0 auto;
  padding-bottom: 24px;

  &-wrap {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal;
    overflow: auto;
    outline: 0;
    -webkit-overflow-scrolling: touch;
  }

  &-title {
    margin: 0;
    color: @heading-color;
    font-weight: 500;
    font-size: @font-size-lg;
    line-height: 22px;
  }

  &-content {
    position: relative;
    background-color: @component-background;
    background-clip: padding-box;
    border: 0;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;
  }

  &-close {
    position: absolute;
    top: 0;
    right: 0;
    z-index: @zindex-popup-close;
    padding: 0;
    color: @text-color-secondary;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    background: transparent;
    border: 0;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-x {
      display: block;
      width: 56px;
      height: 56px;
      font-size: @font-size-lg;
      font-style: normal;
      line-height: 56px;
      text-align: center;
      text-transform: none;
      text-rendering: auto;
    }

    &:focus,
    &:hover {
      color: @icon-color-hover;
      text-decoration: none;
    }
  }

  &-header {
    padding: 16px 24px;
    color: @text-color;
    background: @modal-header-bg;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: @border-radius-base @border-radius-base 0 0;
  }

  &-body {
    padding: @modal-body-padding;
    font-size: @font-size-base;
    line-height: @line-height-base;
    word-wrap: break-word;
  }

  &-footer {
    padding: @modal-footer-padding-vertical @modal-footer-padding-horizontal;
    text-align: right;
    background: @modal-footer-bg;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    button + button {
      margin-bottom: 0;
      margin-left: 8px;
    }
  }

  &.zoom-enter,
  &.zoom-appear {
    transform: none; // reset scale avoid mousePosition bug
    opacity: 0;
    animation-duration: @animation-duration-slow;
    user-select: none; // https://github.com/ant-design/ant-design/issues/11777
  }

  &-mask {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: @zindex-modal-mask;
    height: 100%;
    background-color: @modal-mask-bg;
    filter: ~'alpha(opacity=50)';

    &-hidden {
      display: none;
    }
  }

  &-open {
    overflow: hidden;
  }
}

.@{dialog-prefix-cls}-centered {
  text-align: center;
  &::before {
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
    content: '';
  }
  .@{dialog-prefix-cls} {
    top: 0;
    display: inline-block;
    text-align: left;
    vertical-align: middle;
  }
}

@media (max-width: @screen-sm-max) {
  .@{dialog-prefix-cls} {
    max-width: calc(100vw - 16px);
    margin: 8px auto;
  }

  .@{dialog-prefix-cls}-centered {
    .@{dialog-prefix-cls} {
      flex: 1;
    }
  }
}

@confirm-prefix-cls: ~'@{ant-prefix}-modal-confirm';

.@{confirm-prefix-cls} {
  .@{ant-prefix}-modal-header {
    display: none;
  }

  .@{ant-prefix}-modal-close {
    display: none;
  }

  .@{ant-prefix}-modal-body {
    padding: 32px 32px 24px;
  }

  &-body-wrapper {
    .clearfix();
  }

  &-body {
    .@{confirm-prefix-cls}-title {
      display: block;
      // create BFC to avoid
      // https://user-images.githubusercontent.com/507615/37702510-ba844e06-2d2d-11e8-9b67-8e19be57f445.png
      overflow: hidden;
      color: @heading-color;
      font-weight: 500;
      font-size: @font-size-lg;
      line-height: 1.4;
    }

    .@{confirm-prefix-cls}-content {
      margin-top: 8px;
      color: @text-color;
      font-size: @font-size-base;
    }

    > .@{iconfont-css-prefix} {
      float: left;
      margin-right: 16px;
      font-size: 22px;

      // `content` after `icon` should set marginLeft
      + .@{confirm-prefix-cls}-title + .@{confirm-prefix-cls}-content {
        margin-left: 38px;
      }
    }
  }

  .@{confirm-prefix-cls}-btns {
    float: right;
    margin-top: 24px;

    button + button {
      margin-bottom: 0;
      margin-left: 8px;
    }
  }

  &-error &-body > .@{iconfont-css-prefix} {
    color: @error-color;
  }

  &-warning &-body > .@{iconfont-css-prefix},
  &-confirm &-body > .@{iconfont-css-prefix} {
    color: @warning-color;
  }

  &-info &-body > .@{iconfont-css-prefix} {
    color: @info-color;
  }

  &-success &-body > .@{iconfont-css-prefix} {
    color: @success-color;
  }
}

// style dependencies

@notification-prefix-cls: ~'@{ant-prefix}-notification';
@notification-width: 384px;
@notification-padding-vertical: 16px;
@notification-padding-horizontal: 24px;
@notification-padding: @notification-padding-vertical @notification-padding-horizontal;
@notification-margin-bottom: 16px;

.@{notification-prefix-cls} {
  .reset-component;

  position: fixed;
  z-index: @zindex-notification;
  width: @notification-width;
  max-width: ~'calc(100vw - 32px)';
  margin-right: 24px;

  &-topLeft,
  &-bottomLeft {
    margin-right: 0;
    margin-left: 24px;

    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
      animation-name: NotificationLeftFadeIn;
    }
  }

  &-close-icon {
    font-size: @font-size-base;
    cursor: pointer;
  }

  &-notice {
    position: relative;
    margin-bottom: @notification-margin-bottom;
    padding: @notification-padding;
    overflow: hidden;
    line-height: 1.5;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @shadow-2;

    &-message {
      display: inline-block;
      margin-bottom: 8px;
      color: @heading-color;
      font-size: @font-size-lg;
      line-height: 24px;

      // https://github.com/ant-design/ant-design/issues/5846#issuecomment-296244140
      &-single-line-auto-margin {
        display: block;
        width: ~'calc(@{notification-width} - @{notification-padding-horizontal} * 2 - 24px - 48px - 100%)';
        max-width: 4px;
        background-color: transparent;
        pointer-events: none;
        &::before {
          display: block;
          content: '';
        }
      }
    }

    &-description {
      font-size: @font-size-base;
    }

    &-closable &-message {
      padding-right: 24px;
    }

    &-with-icon &-message {
      margin-bottom: 4px;
      margin-left: 48px;
      font-size: @font-size-lg;
    }

    &-with-icon &-description {
      margin-left: 48px;
      font-size: @font-size-base;
    }

    .@{iconfont-css-prefix}&-icon {
      position: absolute;
      margin-left: 4px;
      font-size: 24px;
      line-height: 24px;

      &-success {
        color: @success-color;
      }
      &-info {
        color: @info-color;
      }
      &-warning {
        color: @warning-color;
      }
      &-error {
        color: @error-color;
      }
    }

    &-close {
      position: absolute;
      top: 16px;
      right: 22px;
      color: @text-color-secondary;
      outline: none;

      &:hover {
        color: shade(@text-color-secondary, 40%);
      }
    }

    &-btn {
      float: right;
      margin-top: 16px;
    }
  }

  .notification-fade-effect {
    animation-duration: 0.24s;
    animation-timing-function: @ease-in-out;
    animation-fill-mode: both;
  }

  &-fade-enter,
  &-fade-appear {
    opacity: 0;
    .notification-fade-effect();
    animation-play-state: paused;
  }

  &-fade-leave {
    .notification-fade-effect();
    animation-duration: 0.2s;
    animation-play-state: paused;
  }

  &-fade-enter&-fade-enter-active,
  &-fade-appear&-fade-appear-active {
    animation-name: NotificationFadeIn;
    animation-play-state: running;
  }

  &-fade-leave&-fade-leave-active {
    animation-name: NotificationFadeOut;
    animation-play-state: running;
  }
}

@keyframes NotificationFadeIn {
  0% {
    left: @notification-width;
    opacity: 0;
  }
  100% {
    left: 0;
    opacity: 1;
  }
}

@keyframes NotificationLeftFadeIn {
  0% {
    right: @notification-width;
    opacity: 0;
  }
  100% {
    right: 0;
    opacity: 1;
  }
}

@keyframes NotificationFadeOut {
  0% {
    max-height: 150px;
    margin-bottom: @notification-margin-bottom;
    padding-top: @notification-padding;
    padding-bottom: @notification-padding;
    opacity: 1;
  }
  100% {
    max-height: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
}

@pageheader-prefix-cls: ~'@{ant-prefix}-page-header';

.@{pageheader-prefix-cls} {
  .reset-component;
  position: relative;
  padding: @page-header-padding-vertical @page-header-padding-horizontal;
  background: @component-background;

  &.@{pageheader-prefix-cls}-has-footer {
    padding-bottom: 0;
  }

  &-back-icon {
    display: inline-block;
    padding: 4px 0;
    font-size: 16px;
    line-height: 100%;
    cursor: pointer;
    i:hover {
      color: @primary-color;
    }
  }

  .@{ant-prefix}-divider {
    height: 14px;
    margin: 0 12px;
  }

  .@{ant-prefix}-breadcrumb {
    margin-bottom: 12px;
  }

  &-title-view {
    display: inline-block;
    &-title {
      display: inline-block;
      padding-right: 12px;
      color: @heading-color;
      font-weight: bold;
      font-size: 16px;
      line-height: 1.4;
    }

    &-sub-title {
      display: inline-block;
      padding-right: 12px;
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 1.8;
    }

    &-tags {
      display: inline-block;
      vertical-align: top;
    }

    &-extra {
      position: absolute;
      top: 16px;
      right: @page-header-padding-horizontal;
      > * {
        margin-right: 8px;
      }
      > *:last-child {
        margin-right: 0;
      }
    }
  }

  &-content-view {
    padding-top: 12px;
  }

  &-footer {
    margin: 0 -8px;
    padding-top: 24px;
    .@{ant-prefix}-tabs-bar {
      margin-bottom: 1px;
      border-bottom: 0;
      .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
        padding: 12px 8px;
        padding-top: 0;
      }
    }
  }
}

// style dependencies

// style dependencies

@select-prefix-cls: ~'@{ant-prefix}-select';

.selection__clear() {
  position: absolute;
  top: 50%;
  right: @control-padding-horizontal - 1px;
  z-index: 1;
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-top: -6px;
  color: @disabled-color;
  font-size: @font-size-sm;
  font-style: normal;
  line-height: 12px;
  text-align: center;
  text-transform: none;
  background: @component-background;
  cursor: pointer;
  opacity: 0;
  transition: color 0.3s ease, opacity 0.15s ease;
  text-rendering: auto;
  &::before {
    display: block;
  }
  &:hover {
    color: @text-color-secondary;
  }
}

.@{select-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  outline: 0;

  ul,
  ol {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  > ul > li > a {
    padding: 0;
    background-color: @component-background;
  }

  // arrow
  &-arrow {
    .iconfont-mixin();
    position: absolute;
    top: 50%;
    right: @control-padding-horizontal - 1px;
    margin-top: -@font-size-sm / 2;
    color: @disabled-color;
    font-size: @font-size-sm;
    line-height: 1;
    transform-origin: 50% 50%;

    & &-icon svg {
      transition: transform 0.3s;
    }
  }

  &-selection {
    display: block;

    box-sizing: border-box;

    background-color: @component-background;
    border: @border-width-base @border-style-base @select-border-color;
    // strange align fix for chrome but works
    // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
    border-top-width: @border-width-base + 0.02px;
    border-radius: @border-radius-base;
    outline: none;
    transition: all 0.3s @ease-in-out;
    user-select: none;

    &:hover {
      .hover;
    }

    .@{select-prefix-cls}-focused &,
    &:focus,
    &:active {
      .active;
    }

    &__clear {
      .selection__clear();
    }

    &:hover &__clear {
      opacity: 1;
    }

    &-selected-value {
      float: left;
      max-width: 100%;
      padding-right: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  &-no-arrow &-selection-selected-value {
    padding-right: 0;
  }

  &-disabled {
    color: @disabled-color;
  }

  &-disabled &-selection {
    background: @input-disabled-bg;
    cursor: not-allowed;
    &:hover,
    &:focus,
    &:active {
      border-color: @select-border-color;
      box-shadow: none;
    }

    &__clear {
      display: none;
      visibility: hidden;
      pointer-events: none;
    }
  }

  &-disabled &-selection--multiple &-selection__choice {
    padding-right: 10px;
    color: fade(@black, 33%);
    background: @background-color-base;
    &__remove {
      display: none;
    }
  }

  &-selection--single {
    position: relative;
    height: @input-height-base;
    cursor: pointer;
  }

  &-selection__rendered {
    position: relative;
    display: block;
    margin-right: @control-padding-horizontal - 1px;
    margin-left: @control-padding-horizontal - 1px;
    line-height: @input-height-base - 2px;
    // https://github.com/ant-design/ant-design/issues/3481#issuecomment-254721026
    &::after {
      display: inline-block;
      width: 0;
      visibility: hidden;
      pointer-events: none;
      content: '.';
    }
  }

  &-lg {
    font-size: @font-size-lg;
    .@{select-prefix-cls}-selection--single {
      height: @input-height-lg;
    }
    .@{select-prefix-cls}-selection__rendered {
      line-height: @input-height-lg - 2px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-lg;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-lg - 8px;
          line-height: @input-height-lg - 8px;
        }
      }
      .@{select-prefix-cls}-selection__clear,
      .@{select-prefix-cls}-arrow {
        top: @input-height-lg / 2;
      }
    }
  }

  &-sm {
    .@{select-prefix-cls}-selection--single {
      height: @input-height-sm;
    }
    .@{select-prefix-cls}-selection__rendered {
      margin: 0 @control-padding-horizontal-sm - 1px;
      line-height: @input-height-sm - 2px;
    }
    .@{select-prefix-cls}-selection--multiple {
      min-height: @input-height-sm;
      .@{select-prefix-cls}-selection__rendered {
        li {
          height: @input-height-sm - 8px;
          line-height: @input-height-sm - 10px;
        }
      }
      .@{select-prefix-cls}-selection__clear,
      .@{select-prefix-cls}-arrow {
        top: @input-height-sm / 2;
      }
    }
    .@{select-prefix-cls}-selection__clear,
    .@{select-prefix-cls}-arrow {
      right: @control-padding-horizontal-sm;
    }
  }

  &-disabled &-selection__choice__remove {
    color: @disabled-color;
    cursor: default;
    &:hover {
      color: @disabled-color;
    }
  }

  &-search__field__wrap {
    position: relative;
    display: inline-block;
  }

  &-selection__placeholder,
  &-search__field__placeholder {
    // for TreeSelect compatibility
    position: absolute;
    top: 50%;
    right: 9px;
    left: 0;
    max-width: 100%;
    height: 20px;
    margin-top: -10px;
    overflow: hidden;
    color: @input-placeholder-color;
    line-height: 20px;
    white-space: nowrap;
    text-align: left;
    text-overflow: ellipsis;
  }

  &-search__field__placeholder {
    left: @control-padding-horizontal;
  }

  &-search__field__mirror {
    position: absolute;
    top: 0;
    left: 0;
    white-space: pre;
    opacity: 0;
    pointer-events: none;
  }

  &-search--inline {
    position: absolute;
    width: 100%;
    height: 100%;

    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }

    .@{select-prefix-cls}-search__field {
      width: 100%;
      height: 100%;
      font-size: 100%;
      line-height: 1;
      background: transparent;
      border-width: 0;
      border-radius: @border-radius-base;
      outline: 0;
    }

    > i {
      float: right;
    }
  }

  &-selection--multiple {
    min-height: @input-height-base;
    padding-bottom: 3px;
    cursor: text;
    .clearfix;

    .@{select-prefix-cls}-search--inline {
      position: static;
      float: left;
      width: auto;
      max-width: 100%;
      padding: 0;
      .@{select-prefix-cls}-search__field {
        width: 0.75em;
        max-width: 100%;
      }
    }

    .@{select-prefix-cls}-selection__rendered {
      height: auto;
      margin-bottom: -3px;
      margin-left: 5px;
    }

    .@{select-prefix-cls}-selection__placeholder {
      margin-left: 6px;
    }

    > ul > li,
    .@{select-prefix-cls}-selection__rendered > ul > li {
      height: @input-height-base - 8px;
      // for tree-select
      margin-top: 3px;
      line-height: @input-height-base - 8px - 2px;
    }

    .@{select-prefix-cls}-selection__choice {
      position: relative;
      float: left;
      max-width: 99%;
      margin-right: 4px;
      padding: 0 20px 0 10px;
      overflow: hidden;
      color: @tag-default-color;
      background-color: @tag-default-bg;
      border: 1px solid @border-color-split;
      border-radius: @border-radius-sm;
      cursor: default;
      transition: padding 0.3s @ease-in-out;
      &__disabled {
        padding: 0 10px;
      }
    }

    .@{select-prefix-cls}-selection__choice__content {
      display: inline-block;
      max-width: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: margin 0.3s @ease-in-out;
    }

    .@{select-prefix-cls}-selection__choice__remove {
      .iconfont-mixin();
      position: absolute;
      right: 4px;
      display: inline-block;
      color: @text-color-secondary;
      font-weight: bold;
      font-size: @font-size-sm;
      line-height: inherit;
      cursor: pointer;
      transition: all 0.3s;
      .iconfont-size-under-12px(10px);
      &:hover {
        color: @icon-color-hover;
      }
    }

    .@{select-prefix-cls}-selection__clear,
    .@{select-prefix-cls}-arrow {
      top: @input-height-base / 2;
    }
  }

  &-allow-clear &-selection--single &-selection-selected-value {
    padding-right: 16px;
  }

  &-allow-clear &-selection--multiple &-selection__rendered,
  &-show-arrow &-selection--multiple &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }

  &-open {
    .@{select-prefix-cls}-arrow {
      &-icon svg {
        transform: rotate(180deg);
      }
    }
    .@{select-prefix-cls}-selection {
      .active();
    }
  }

  &-combobox {
    .@{select-prefix-cls}-arrow {
      display: none;
    }
    .@{select-prefix-cls}-search--inline {
      float: none;
      width: 100%;
      height: 100%;
    }
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
      height: 100%;
    }
    .@{select-prefix-cls}-search__field {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      box-shadow: none;
      transition: all 0.3s @ease-in-out, height 0s;
    }
  }
  &-combobox&-allow-clear &-selection:hover &-selection__rendered,
  &-combobox&-show-arrow &-selection:hover &-selection__rendered {
    margin-right: 20px; // In case that clear button will overlap content
  }
}

// style dependencies
// deps-lint-skip: tooltip

@progress-prefix-cls: ~'@{ant-prefix}-progress';

.@{progress-prefix-cls} {
  .reset-component;
  display: inline-block;

  &-line {
    position: relative;
    width: 100%;
    font-size: @font-size-base;
  }

  &-small&-line,
  &-small&-line &-text .@{iconfont-css-prefix} {
    font-size: @font-size-sm;
  }

  &-outer {
    display: inline-block;
    width: 100%;
    margin-right: 0;
    padding-right: 0;
    .@{progress-prefix-cls}-show-info & {
      margin-right: ~'calc(-2em - 8px)';
      padding-right: ~'calc(2em + 8px)';
    }
  }

  &-inner {
    position: relative;
    display: inline-block;
    width: 100%;
    vertical-align: middle;
    background-color: @progress-remaining-color;
    border-radius: 100px;
  }

  &-circle-trail {
    stroke: @progress-remaining-color;
  }

  &-circle-path {
    animation: ~'@{ant-prefix}-progress-appear' 0.3s;
    stroke: @progress-default-color;
  }

  &-success-bg,
  &-bg {
    position: relative;
    background-color: @progress-default-color;
    transition: all 0.4s @ease-out-circ 0s;
  }

  &-success-bg {
    position: absolute;
    top: 0;
    left: 0;
    background-color: @success-color;
  }

  &-text {
    display: inline-block;
    width: 2em;
    margin-left: 8px;
    color: @text-color-secondary;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
    word-break: normal;
    .@{iconfont-css-prefix} {
      font-size: @font-size-base;
    }
  }

  &-status-active {
    .@{progress-prefix-cls}-bg::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background: @component-background;
      border-radius: 10px;
      opacity: 0;
      animation: ~'@{ant-prefix}-progress-active' 2.4s @ease-out-quint infinite;
      content: '';
    }
  }

  &-status-exception {
    .@{progress-prefix-cls}-bg {
      background-color: @error-color;
    }
    .@{progress-prefix-cls}-text {
      color: @error-color;
    }
    .@{progress-prefix-cls}-circle-path {
      stroke: @error-color;
    }
  }

  &-status-success {
    .@{progress-prefix-cls}-bg {
      background-color: @success-color;
    }
    .@{progress-prefix-cls}-text {
      color: @success-color;
    }
    .@{progress-prefix-cls}-circle-path {
      stroke: @success-color;
    }
  }

  &-circle &-inner {
    position: relative;
    line-height: 1;
    background-color: transparent;
  }

  &-circle &-text {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    margin: 0;
    padding: 0;
    color: @progress-text-color;
    line-height: 1;
    white-space: normal;
    text-align: center;
    transform: translate(-50%, -50%);

    .@{iconfont-css-prefix} {
      font-size: 14 / 12em;
    }
  }

  &-circle&-status-exception {
    .@{progress-prefix-cls}-text {
      color: @error-color;
    }
  }
  &-circle&-status-success {
    .@{progress-prefix-cls}-text {
      color: @success-color;
    }
  }
}

@keyframes ~ "@{ant-prefix}-progress-active" {
  0% {
    width: 0;
    opacity: 0.1;
  }
  20% {
    width: 0;
    opacity: 0.5;
  }
  100% {
    width: 100%;
    opacity: 0;
  }
}

@radio-prefix-cls: ~'@{ant-prefix}-radio';
@radio-group-prefix-cls: ~'@{radio-prefix-cls}-group';
@radio-inner-prefix-cls: ~'@{radio-prefix-cls}-inner';
@radio-duration: 0.3s;
@radio-focused-outline: 3px solid fade(@radio-dot-color, 6%);

.@{radio-group-prefix-cls} {
  .reset-component;
  display: inline-block;
  line-height: unset;
}

// 一般状态
.@{radio-prefix-cls}-wrapper {
  .reset-component;
  position: relative;
  display: inline-block;
  margin-right: 8px;
  white-space: nowrap;
  cursor: pointer;
}

.@{radio-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  line-height: 1;
  white-space: nowrap;
  vertical-align: sub;
  outline: none;
  cursor: pointer;

  .@{radio-prefix-cls}-wrapper:hover &,
  &:hover .@{radio-inner-prefix-cls},
  &-input:focus + .@{radio-inner-prefix-cls} {
    border-color: @radio-dot-color;
  }

  &-input:focus + .@{radio-inner-prefix-cls} {
    box-shadow: 0 0 0 3px fade(@radio-dot-color, 8%);
  }

  &-checked::after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 1px solid @radio-dot-color;
    border-radius: 50%;
    visibility: hidden;
    animation: antRadioEffect 0.36s ease-in-out;
    animation-fill-mode: both;
    content: '';
  }

  &:hover::after,
  .@{radio-prefix-cls}-wrapper:hover &::after {
    visibility: visible;
  }

  &-inner {
    &::after {
      @radio-dot-size: @radio-size - 8px;
      position: absolute;
      top: (@radio-size - @radio-dot-size) / 2 - 1px;
      left: (@radio-size - @radio-dot-size) / 2 - 1px;
      display: table;
      width: @radio-dot-size;
      height: @radio-dot-size;
      background-color: @radio-dot-color;
      border-top: 0;
      border-left: 0;
      border-radius: @radio-dot-size;
      transform: scale(0);
      opacity: 0;
      transition: all @radio-duration @ease-in-out-circ;
      content: ' ';
    }

    position: relative;
    top: 0;
    left: 0;
    display: block;
    width: @radio-size;
    height: @radio-size;
    background-color: @radio-button-bg;
    border-width: 1px;
    border-style: solid;
    border-color: @border-color-base;
    border-radius: 100px;
    transition: all @radio-duration;
  }

  &-input {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
    opacity: 0;
  }
}

// 选中状态
.@{radio-prefix-cls}-checked {
  .@{radio-inner-prefix-cls} {
    border-color: @radio-dot-color;
    &::after {
      transform: scale(0.875);
      opacity: 1;
      transition: all @radio-duration @ease-in-out-circ;
    }
  }
}

.@{radio-prefix-cls}-disabled {
  .@{radio-inner-prefix-cls} {
    background-color: @input-disabled-bg;
    border-color: @border-color-base !important;
    cursor: not-allowed;
    &::after {
      background-color: fade(@black, 20%);
    }
  }

  .@{radio-prefix-cls}-input {
    cursor: not-allowed;
  }

  & + span {
    color: @disabled-color;
    cursor: not-allowed;
  }
}

span.@{radio-prefix-cls} + * {
  padding-right: 8px;
  padding-left: 8px;
}

.@{radio-prefix-cls}-button-wrapper {
  position: relative;
  display: inline-block;
  height: @btn-height-base;
  margin: 0;
  padding: 0 @padding-md - 1px;
  color: @radio-button-color;
  line-height: @btn-height-base - 2px;
  background: @radio-button-bg;
  border: @border-width-base @border-style-base @border-color-base;
  // strange align fix for chrome but works
  // https://gw.alipayobjects.com/zos/rmsportal/VFTfKXJuogBAXcvfAUWJ.gif
  border-top-width: @border-width-base + 0.02px;
  border-left: 0;
  cursor: pointer;
  transition: color 0.3s, background 0.3s, border-color 0.3s;

  a {
    color: @radio-button-color;
  }

  > .@{radio-prefix-cls}-button {
    display: block;
    width: 0;
    height: 0;
    margin-left: 0;
  }

  .@{radio-group-prefix-cls}-large & {
    height: @input-height-lg;
    font-size: @font-size-lg;
    line-height: @input-height-lg - 2px;
  }

  .@{radio-group-prefix-cls}-small & {
    height: @input-height-sm;
    padding: 0 @control-padding-horizontal-sm - 1px;
    line-height: @input-height-sm - 2px;
  }

  &:not(:first-child) {
    &::before {
      position: absolute;
      top: 0;
      left: -1px;
      display: block;
      width: 1px;
      height: 100%;
      background-color: @border-color-base;
      content: '';
    }
  }
  &:first-child {
    border-left: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  &:last-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  &:first-child:last-child {
    border-radius: @border-radius-base;
  }

  &:hover {
    position: relative;
    color: @radio-dot-color;
  }

  &:focus-within {
    outline: @radio-focused-outline;
  }

  .@{radio-prefix-cls}-inner,
  input[type='checkbox'],
  input[type='radio'] {
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
  }

  &-checked {
    z-index: 1;
    color: @radio-dot-color;
    background: @radio-button-checked-bg;
    border-color: @radio-dot-color;
    box-shadow: -1px 0 0 0 @radio-dot-color;
    &::before {
      background-color: @radio-dot-color !important;
      opacity: 0.1;
    }
    &:first-child {
      border-color: @radio-dot-color;
      box-shadow: none !important;
    }

    &:hover {
      color: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
      box-shadow: -1px 0 0 0 @radio-button-hover-color;
    }

    &:active {
      color: @radio-button-active-color;
      border-color: @radio-button-active-color;
      box-shadow: -1px 0 0 0 @radio-button-active-color;
    }

    &:focus-within {
      outline: @radio-focused-outline;
    }
  }

  .@{radio-group-prefix-cls}-solid &-checked:not(&-disabled) {
    color: @component-background;
    background: @radio-dot-color;
    border-color: @radio-dot-color;
    &:hover {
      color: @component-background;
      background: @radio-button-hover-color;
      border-color: @radio-button-hover-color;
    }
    &:active {
      color: @component-background;
      background: @radio-button-active-color;
      border-color: @radio-button-active-color;
    }
    &:focus-within {
      outline: @radio-focused-outline;
    }
  }

  &-disabled {
    color: @disabled-color;
    background-color: @input-disabled-bg;
    border-color: @border-color-base;
    cursor: not-allowed;

    &:first-child,
    &:hover {
      color: @disabled-color;
      background-color: @input-disabled-bg;
      border-color: @border-color-base;
    }
    &:first-child {
      border-left-color: @border-color-base;
    }
  }

  &-disabled&-checked {
    color: @text-color-inverse;
    background-color: tint(@black, 90%);
    border-color: @border-color-base;
    box-shadow: none;
  }
}

@keyframes antRadioEffect {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

// Firefox hack
@supports (-moz-appearance: meterbar) and (background-blend-mode: difference, normal) {
  .@{radio-prefix-cls} {
    vertical-align: text-bottom;
  }
}

@rate-prefix-cls: ~'@{ant-prefix}-rate';

.@{rate-prefix-cls} {
  .reset-component;
  display: inline-block;
  margin: 0;
  padding: 0;
  color: @rate-star-color;
  font-size: 20px;
  line-height: unset;
  list-style: none;
  outline: none;

  &-disabled &-star {
    cursor: default;
    &:hover {
      transform: scale(1);
    }
  }

  &-star {
    position: relative;
    display: inline-block;
    margin: 0;
    margin-right: 8px;
    padding: 0;
    color: inherit;
    cursor: pointer;
    transition: all 0.3s;

    > div {
      &:focus {
        outline: 0;
      }

      &:hover,
      &:focus {
        transform: scale(1.1);
      }
    }

    &-first,
    &-second {
      color: @rate-star-bg;
      transition: all 0.3s;
      user-select: none;
      .@{iconfont-css-prefix} {
        vertical-align: middle;
      }
    }

    &-first {
      position: absolute;
      top: 0;
      left: 0;
      width: 50%;
      height: 100%;
      overflow: hidden;
      opacity: 0;
    }

    &-half &-first,
    &-half &-second {
      opacity: 1;
    }

    &-half &-first,
    &-full &-second {
      color: inherit;
    }
  }

  &-text {
    display: inline-block;
    margin-left: 8px;
    font-size: @font-size-base;
  }
}

// style dependencies

// style dependencies

@skeleton-prefix-cls: ~'@{ant-prefix}-skeleton';
@skeleton-avatar-prefix-cls: ~'@{skeleton-prefix-cls}-avatar';
@skeleton-title-prefix-cls: ~'@{skeleton-prefix-cls}-title';
@skeleton-paragraph-prefix-cls: ~'@{skeleton-prefix-cls}-paragraph';

@skeleton-to-color: shade(@skeleton-color, 5%);

.@{skeleton-prefix-cls} {
  display: table;
  width: 100%;

  &-header {
    display: table-cell;
    padding-right: 16px;
    vertical-align: top;

    // Avatar
    .@{skeleton-avatar-prefix-cls} {
      display: inline-block;
      vertical-align: top;
      background: @skeleton-color;

      .avatar-size(@avatar-size-base);

      &-lg {
        .avatar-size(@avatar-size-lg);
      }

      &-sm {
        .avatar-size(@avatar-size-sm);
      }
    }
  }

  &-content {
    display: table-cell;
    width: 100%;
    vertical-align: top;

    // Title
    .@{skeleton-title-prefix-cls} {
      width: 100%;
      height: 16px;
      margin-top: 16px;
      background: @skeleton-color;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 24px;
      }
    }

    // paragraph
    .@{skeleton-paragraph-prefix-cls} {
      padding: 0;

      > li {
        width: 100%;
        height: 16px;
        list-style: none;
        background: @skeleton-color;

        &:last-child:not(:first-child):not(:nth-child(2)) {
          width: 61%;
        }

        + li {
          margin-top: 16px;
        }
      }
    }
  }

  &-with-avatar &-content {
    // Title
    .@{skeleton-title-prefix-cls} {
      margin-top: 12px;

      + .@{skeleton-paragraph-prefix-cls} {
        margin-top: 28px;
      }
    }
  }

  // With active animation
  &.@{skeleton-prefix-cls}-active {
    & .@{skeleton-prefix-cls}-content {
      .@{skeleton-title-prefix-cls},
      .@{skeleton-paragraph-prefix-cls} > li {
        .skeleton-color();
      }
    }

    .@{skeleton-avatar-prefix-cls} {
      .skeleton-color();
    }
  }
}

.avatar-size(@size) {
  width: @size;
  height: @size;
  line-height: @size;

  &.@{skeleton-avatar-prefix-cls}-circle {
    border-radius: 50%;
  }
}

.skeleton-color() {
  background: linear-gradient(
    90deg,
    @skeleton-color 25%,
    @skeleton-to-color 37%,
    @skeleton-color 63%
  );
  background-size: 400% 100%;
  animation: ~'@{skeleton-prefix-cls}-loading' 1.4s ease infinite;
}

@keyframes ~ "@{skeleton-prefix-cls}-loading" {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}

@slider-prefix-cls: ~'@{ant-prefix}-slider';

.@{slider-prefix-cls} {
  .reset-component;
  position: relative;
  height: 12px;
  margin: @slider-margin;
  padding: 4px 0;
  cursor: pointer;
  touch-action: none;

  .vertical();

  &-with-marks {
    margin-bottom: 28px;
  }

  &-rail {
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: @slider-rail-background-color;
    border-radius: 2px;
    transition: background-color 0.3s;
  }

  &-track {
    position: absolute;
    height: 4px;
    background-color: @slider-track-background-color;
    border-radius: @border-radius-base;
    transition: background-color 0.3s ease;
  }

  &-handle {
    position: absolute;
    width: 14px;
    height: 14px;
    margin-top: -5px;
    margin-left: -7px;
    background-color: @component-background;
    border: solid 2px @slider-handle-color;
    border-radius: 50%;
    box-shadow: 0;
    cursor: pointer;
    transition: border-color 0.3s, box-shadow 0.6s,
    transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

    &:focus {
      border-color: @slider-handle-color-focus;
      outline: none;
      box-shadow: 0 0 0 5px @slider-handle-color-focus-shadow;
    }

    &.@{ant-prefix}-tooltip-open {
      border-color: @slider-handle-color-tooltip-open;
    }
  }

  &:hover {
    .@{slider-prefix-cls}-rail {
      background-color: @slider-rail-background-color-hover;
    }
    .@{slider-prefix-cls}-track {
      background-color: @slider-track-background-color-hover;
    }
    .@{slider-prefix-cls}-handle:not(.@{ant-prefix}-tooltip-open) {
      border-color: @slider-handle-color-hover;
    }
  }

  &-mark {
    position: absolute;
    top: 14px;
    left: 0;
    width: 100%;
    font-size: @font-size-base;
  }

  &-mark-text {
    position: absolute;
    display: inline-block;
    color: @text-color-secondary;
    text-align: center;
    cursor: pointer;

    &-active {
      color: @text-color;
    }
  }

  &-step {
    position: absolute;
    width: 100%;
    height: 4px;
    background: transparent;
  }

  &-dot {
    position: absolute;
    top: -2px;
    width: 8px;
    height: 8px;
    margin-left: -4px;
    background-color: @component-background;
    border: 2px solid @slider-dot-border-color;
    border-radius: 50%;
    cursor: pointer;
    &:first-child {
      margin-left: -4px;
    }
    &:last-child {
      margin-left: -4px;
    }
    &-active {
      border-color: @slider-dot-border-color-active;
    }
  }

  &-disabled {
    cursor: not-allowed;

    .@{slider-prefix-cls}-track {
      background-color: @slider-disabled-color !important;
    }

    .@{slider-prefix-cls}-handle,
    .@{slider-prefix-cls}-dot {
      background-color: @component-background;
      border-color: @slider-disabled-color !important;
      box-shadow: none;
      cursor: not-allowed;
    }

    .@{slider-prefix-cls}-mark-text,
    .@{slider-prefix-cls}-dot {
      cursor: not-allowed !important;
    }
  }
}

.vertical() {
  &-vertical {
    width: 12px;
    height: 100%;
    margin: 6px 10px;
    padding: 0 4px;

    .@{slider-prefix-cls}-rail {
      width: 4px;
      height: 100%;
    }

    .@{slider-prefix-cls}-track {
      width: 4px;
    }

    .@{slider-prefix-cls}-handle {
      margin-bottom: -7px;
      margin-left: -5px;
    }

    .@{slider-prefix-cls}-mark {
      top: 0;
      left: 12px;
      width: 18px;
      height: 100%;
    }

    .@{slider-prefix-cls}-mark-text {
      left: 4px;
      white-space: nowrap;
    }

    .@{slider-prefix-cls}-step {
      width: 4px;
      height: 100%;
    }

    .@{slider-prefix-cls}-dot {
      top: auto;
      left: 2px;
      margin-bottom: -4px;
    }
  }
}

// style dependencies

@statistic-prefix-cls: ~'@{ant-prefix}-statistic';

.@{statistic-prefix-cls} {
  .reset-component;

  &-title {
    margin-bottom: 4px;
    font-size: @statistic-title-font-size;
  }

  &-content {
    font-size: @statistic-content-font-size;
    font-family: @statistic-font-family;

    &-value {
      &-decimal {
        font-size: @statistic-unit-font-size;
      }
    }

    &-prefix,
    &-suffix {
      display: inline-block;
    }

    &-prefix {
      margin-right: 4px;
    }

    &-suffix {
      margin-left: 4px;
      font-size: @statistic-unit-font-size;
    }
  }
}

@steps-prefix-cls: ~'@{ant-prefix}-steps';
@process-icon-color: @primary-color;
@process-title-color: @heading-color;
@process-description-color: @text-color;
@process-tail-color: @border-color-split;
@process-icon-text-color: @text-color-inverse;
@wait-icon-color: @disabled-color;
@wait-title-color: @text-color-secondary;
@wait-description-color: @wait-title-color;
@wait-tail-color: @process-tail-color;
@finish-icon-color: @process-icon-color;
@finish-title-color: @text-color;
@finish-description-color: @text-color-secondary;
@finish-tail-color: @primary-color;
@error-icon-color: @error-color;
@error-title-color: @error-color;
@error-description-color: @error-color;
@error-tail-color: @wait-tail-color;
@steps-background: @component-background;

@steps-icon-size: 32px;
@steps-small-icon-size: 24px;
@steps-dot-size: 8px;
@steps-current-dot-size: 10px;
@steps-desciption-max-width: 140px;

.@{steps-prefix-cls} {
  .reset-component;
  display: flex;
  width: 100%;
  font-size: 0;
}

.@{steps-prefix-cls}-item {
  position: relative;
  display: inline-block;
  flex: 1;
  overflow: hidden;
  vertical-align: top;

  &:last-child {
    flex: none;
  }

  &:last-child &-tail,
  &:last-child &-title::after {
    display: none;
  }

  &-icon,
  &-content {
    display: inline-block;
    vertical-align: top;
  }

  &-icon {
    width: @steps-icon-size;
    height: @steps-icon-size;
    margin-right: 8px;
    font-size: @font-size-lg;
    font-family: @font-family;
    line-height: @steps-icon-size;
    text-align: center;
    border: @border-width-base @border-style-base @wait-icon-color;
    border-radius: @steps-icon-size;
    transition: background-color 0.3s, border-color 0.3s;

    > .@{steps-prefix-cls}-icon {
      position: relative;
      top: -1px;
      color: @primary-color;
      line-height: 1;
    }
  }
  &-tail {
    position: absolute;
    top: 12px;
    left: 0;
    width: 100%;
    padding: 0 10px;
    &::after {
      display: inline-block;
      width: 100%;
      height: 1px;
      background: @border-color-split;
      border-radius: 1px;
      transition: background 0.3s;
      content: '';
    }
  }
  &-title {
    position: relative;
    display: inline-block;
    padding-right: 16px;
    color: @text-color;
    font-size: @font-size-lg;
    line-height: @steps-icon-size;
    &::after {
      position: absolute;
      top: @steps-icon-size / 2;
      left: 100%;
      display: block;
      width: 9999px;
      height: 1px;
      background: @wait-tail-color;
      content: '';
    }
  }
  &-description {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
  .step-item-status(wait);
  .step-item-status(process);
  &-process &-icon {
    background: @process-icon-color;
    > .@{steps-prefix-cls}-icon {
      color: @process-icon-text-color;
    }
  }
  &-process &-title {
    font-weight: 500;
  }
  .step-item-status(finish);
  .step-item-status(error);

  &.@{steps-prefix-cls}-next-error .@{steps-prefix-cls}-item-title::after {
    background: @error-icon-color;
  }
}

.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical) {
  .@{steps-prefix-cls}-item {
    margin-right: 16px;
    white-space: nowrap;
    &:last-child {
      margin-right: 0;
    }
    &:last-child .@{steps-prefix-cls}-item-title {
      padding-right: 0;
    }
    &-tail {
      display: none;
    }
    &-description {
      max-width: @steps-desciption-max-width;
      white-space: normal;
    }
  }
}

.step-item-status(@status) {
  @icon-color: '@{status}-icon-color';
  @title-color: '@{status}-title-color';
  @description-color: '@{status}-description-color';
  @tail-color: '@{status}-tail-color';
  &-@{status} &-icon {
    background-color: @steps-background;
    border-color: @@icon-color;
    > .@{steps-prefix-cls}-icon {
      color: @@icon-color;
      .@{steps-prefix-cls}-icon-dot {
        background: @@icon-color;
      }
    }
  }
  &-@{status} > &-content > &-title {
    color: @@title-color;
    &::after {
      background-color: @@tail-color;
    }
  }
  &-@{status} > &-content > &-description {
    color: @@description-color;
  }
  &-@{status} > &-tail::after {
    background-color: @@tail-color;
  }
}

.@{steps-prefix-cls}-item-custom {
  .@{steps-prefix-cls}-item-icon {
    height: auto;
    background: none;
    border: 0;
    > .@{steps-prefix-cls}-icon {
      top: 0;
      left: 0.5px;
      width: @steps-icon-size;
      height: @steps-icon-size;
      font-size: 24px;
      line-height: @steps-icon-size;
    }
  }
  &.@{steps-prefix-cls}-item-process {
    .@{steps-prefix-cls}-item-icon > .@{steps-prefix-cls}-icon {
      color: @process-icon-color;
    }
  }
}

// Only adjust horizontal customize icon width
.@{steps-prefix-cls} {
  &:not(.@{steps-prefix-cls}-vertical) {
    .@{steps-prefix-cls}-item-custom {
      .@{steps-prefix-cls}-item-icon {
        width: auto;
      }
    }
  }
}

.@{steps-prefix-cls}-small {
  &.@{steps-prefix-cls}-horizontal:not(.@{steps-prefix-cls}-label-vertical)
  .@{steps-prefix-cls}-item {
    margin-right: 12px;
    &:last-child {
      margin-right: 0;
    }
  }
  .@{steps-prefix-cls}-item-icon {
    width: @steps-small-icon-size;
    height: @steps-small-icon-size;
    font-size: @font-size-sm;
    line-height: @steps-small-icon-size;
    text-align: center;
    border-radius: @steps-small-icon-size;
  }
  .@{steps-prefix-cls}-item-title {
    padding-right: 12px;
    font-size: @font-size-base;
    line-height: @steps-small-icon-size;
    &::after {
      top: @steps-small-icon-size / 2;
    }
  }
  .@{steps-prefix-cls}-item-description {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
  .@{steps-prefix-cls}-item-tail {
    top: 8px;
    padding: 0 8px;
  }
  .@{steps-prefix-cls}-item-custom .@{steps-prefix-cls}-item-icon {
    width: inherit;
    height: inherit;
    line-height: inherit;
    background: none;
    border: 0;
    border-radius: 0;
    > .@{steps-prefix-cls}-icon {
      font-size: @steps-small-icon-size;
      line-height: @steps-small-icon-size;
      transform: none;
    }
  }
}

.steps-vertical() {
  display: block;
  .@{steps-prefix-cls}-item {
    display: block;
    overflow: visible;
    &-icon {
      float: left;
      margin-right: 16px;
    }
    &-content {
      display: block;
      min-height: 48px;
      overflow: hidden;
    }
    &-title {
      line-height: @steps-icon-size;
    }
    &-description {
      padding-bottom: 12px;
    }
  }

  > .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-tail {
    position: absolute;
    top: 0;
    left: 16px;
    width: 1px;
    height: 100%;
    padding: @steps-icon-size + 6px 0 6px;
    &::after {
      width: 1px;
      height: 100%;
    }
  }

  > .@{steps-prefix-cls}-item:not(:last-child) > .@{steps-prefix-cls}-item-tail {
    display: block;
  }

  > .@{steps-prefix-cls}-item
  > .@{steps-prefix-cls}-item-content
  > .@{steps-prefix-cls}-item-title {
    &::after {
      display: none;
    }
  }

  &.@{steps-prefix-cls}-small {
    .@{steps-prefix-cls}-item-tail {
      position: absolute;
      top: 0;
      left: 12px;
      padding: @steps-small-icon-size + 6px 0 6px;
    }
    .@{steps-prefix-cls}-item-title {
      line-height: @steps-small-icon-size;
    }
  }
}

.@{steps-prefix-cls}-vertical {
  .steps-vertical;
}

@media (max-width: @screen-xs) {
  .@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
    .steps-vertical;
  }
}

.@{steps-prefix-cls}-label-vertical {
  .@{steps-prefix-cls}-item {
    overflow: visible;
    &-tail {
      margin-left: 51px;
      padding: 3.5px 24px;
    }
    &-content {
      display: block;
      // icon左边距离+一半icon宽度，是content一半的宽度，垂直对齐icon
      width: (@steps-icon-size / 2 + 36px) * 2;
      margin-top: 8px;
      text-align: center;
    }
    &-icon {
      display: inline-block;
      margin-left: 36px;
    }
    &-title {
      padding-right: 0;
      &::after {
        display: none;
      }
    }
  }
  &.@{steps-prefix-cls}-small:not(.@{steps-prefix-cls}-dot) {
    .@{steps-prefix-cls}-item {
      &-icon {
        margin-left: 40px;
      }
    }
  }
}

.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item {
    &-title {
      line-height: @line-height-base;
    }
    &-tail {
      top: 2px;
      width: 100%;
      margin: 0 0 0 @steps-desciption-max-width / 2;
      padding: 0;
      &::after {
        width: ~'calc(100% - 20px)';
        height: 3px;
        margin-left: 12px;
      }
    }
    &:first-child .@{steps-prefix-cls}-icon-dot {
      left: 2px;
    }
    &-icon {
      width: @steps-dot-size;
      height: @steps-dot-size;
      margin-left: 67px;
      padding-right: 0;
      line-height: @steps-dot-size;
      background: transparent;
      border: 0;
      .@{steps-prefix-cls}-icon-dot {
        position: relative;
        float: left;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        transition: all 0.3s;
        /* expand hover area */
        &::after {
          position: absolute;
          top: -12px;
          left: -26px;
          width: 60px;
          height: 32px;
          background: fade(@black, 0.1%);
          content: '';
        }
      }
    }
    &-content {
      width: @steps-desciption-max-width;
    }
    &-process .@{steps-prefix-cls}-item-icon {
      width: @steps-current-dot-size;
      height: @steps-current-dot-size;
      line-height: @steps-current-dot-size;
      .@{steps-prefix-cls}-icon-dot {
        top: -1px;
      }
    }
  }
}

.@{steps-prefix-cls}-vertical.@{steps-prefix-cls}-dot {
  .@{steps-prefix-cls}-item-icon {
    margin-top: 8px;
    margin-left: 0;
  }
  .@{steps-prefix-cls}-item-tail {
    top: 2px;
    left: -9px;
    margin: 0;
    padding: 22px 0 4px;
  }
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    left: 0;
  }
  .@{steps-prefix-cls}-item-process .@{steps-prefix-cls}-icon-dot {
    left: -2px;
  }
}

.@{steps-prefix-cls}-flex-not-supported {
  &.@{steps-prefix-cls}-horizontal.@{steps-prefix-cls}-label-horizontal {
    .@{steps-prefix-cls}-item {
      margin-left: -16px;
      padding-left: 16px;
      background: @steps-background;
    }

    &.@{steps-prefix-cls}-small .@{steps-prefix-cls}-item {
      margin-left: -12px;
      padding-left: 12px;
    }
  }

  &.@{steps-prefix-cls}-dot {
    .@{steps-prefix-cls}-item {
      &:last-child {
        overflow: hidden;

        .@{steps-prefix-cls}-icon-dot::after {
          right: -200px;
          width: 200px;
        }
      }

      .@{steps-prefix-cls}-icon-dot::before,
      .@{steps-prefix-cls}-icon-dot::after {
        position: absolute;
        top: 0;
        left: -10px;
        width: 10px;
        height: 8px;
        background: @steps-background;
        content: '';
      }

      .@{steps-prefix-cls}-icon-dot::after {
        right: -10px;
        left: auto;
      }
    }

    .@{steps-prefix-cls}-item-wait
    .@{steps-prefix-cls}-item-icon
    > .@{steps-prefix-cls}-icon
    .@{steps-prefix-cls}-icon-dot {
      background: #ccc;
    }
  }
}

@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.36s;

.@{switch-prefix-cls} {
  .reset-component;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  min-width: 44px;
  height: @switch-height;
  line-height: @switch-height - 2px;
  vertical-align: middle;
  background-color: @disabled-color;
  border: 1px solid transparent;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

  &-inner {
    display: block;
    margin-right: 6px;
    margin-left: 24px;
    color: @text-color-inverse;
    font-size: @font-size-sm;
  }

  &-loading-icon,
  &::after {
    position: absolute;
    top: 1px;
    left: 1px;
    width: @switch-height - 4px;
    height: @switch-height - 4px;
    background-color: @component-background;
    border-radius: 18px;
    cursor: pointer;
    transition: all @switch-duration @ease-in-out-circ;
    content: ' ';
  }

  &::after {
    box-shadow: 0 2px 4px 0 @switch-shadow-color;
  }

  &:active::before,
  &:active::after {
    width: 24px;
  }

  &-loading-icon {
    z-index: 1;
    display: none;
    font-size: 12px;
    // loading default use animation
    // animation: loadingCircle 1s infinite linear;
    background: transparent;
    svg {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      margin: auto;
    }
  }

  &-loading &-loading-icon {
    display: inline-block;
    color: @text-color;
  }

  &-checked&-loading &-loading-icon {
    color: @switch-color;
  }

  &:focus {
    outline: 0;
    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
  }

  &:focus:hover {
    box-shadow: none;
  }

  &-small {
    min-width: 28px;
    height: @switch-sm-height;
    line-height: @switch-sm-height - 2px;

    .@{switch-prefix-cls}-inner {
      margin-right: 3px;
      margin-left: 18px;
      font-size: @font-size-sm;
    }

    &::after {
      width: @switch-sm-height - 4px;
      height: @switch-sm-height - 4px;
    }

    &:active::before,
    &:active::after {
      width: 16px;
    }
  }

  &-small &-loading-icon {
    width: @switch-sm-height - 4px;
    height: @switch-sm-height - 4px;
  }

  &-small&-checked {
    .@{switch-prefix-cls}-inner {
      margin-right: 18px;
      margin-left: 3px;
    }
  }

  &-small&-checked &-loading-icon {
    left: 100%;
    margin-left: @switch-sm-checked-margin-left;
  }

  &-small&-loading &-loading-icon {
    font-weight: bold;
    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
    transform: scale(0.66667);
  }

  &-checked {
    background-color: @switch-color;

    .@{switch-prefix-cls}-inner {
      margin-right: 24px;
      margin-left: 6px;
    }

    &::after {
      left: 100%;
      margin-left: -1px;
      transform: translateX(-100%);
    }
  }

  &-checked &-loading-icon {
    left: 100%;
    margin-left: -19px;
  }

  &-loading,
  &-disabled {
    cursor: not-allowed;
    opacity: @switch-disabled-opacity;
    * {
      cursor: not-allowed;
    }
    &::before,
    &::after {
      cursor: not-allowed;
    }
  }
}

@keyframes AntSwitchSmallLoadingCircle {
  0% {
    transform: rotate(0deg) scale(0.66667);
    transform-origin: 50% 50%;
  }
  100% {
    transform: rotate(360deg) scale(0.66667);
    transform-origin: 50% 50%;
  }
}

@table-prefix-cls: ~'@{ant-prefix}-table';
@table-header-icon-color: #bfbfbf;
@table-header-sort-active-bg: darken(@table-header-bg, 3%);
@table-header-filter-active-bg: darken(@table-header-sort-active-bg, 5%);

.@{table-prefix-cls}-wrapper {
  .clearfix;
}

.@{table-prefix-cls} {
  .reset-component;
  position: relative;
  clear: both;

  &-body {
    transition: opacity 0.3s;
  }

  &-empty &-body {
    overflow: auto !important;
  }

  table {
    width: 100%;
    text-align: left;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    border-collapse: collapse;
  }

  &-thead > tr > th {
    color: @table-header-color;
    font-weight: 500;
    text-align: left;
    background: @table-header-bg;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: background 0.3s ease;

    &[colspan] {
      text-align: center;
    }

    .@{iconfont-css-prefix}-filter,
    .@{table-prefix-cls}-filter-icon {
      position: absolute;
      top: 0;
      right: 0;
      width: 28px;
      height: 100%;
      color: @table-header-icon-color;
      font-size: @font-size-sm;
      text-align: center;
      cursor: pointer;
      transition: all 0.3s;

      > svg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -@font-size-sm / 2 + 1px;
        margin-left: -@font-size-sm / 2;
      }
    }

    .@{table-prefix-cls}-filter-selected.@{iconfont-css-prefix}-filter {
      color: @primary-color;
    }

    .@{table-prefix-cls}-column-sorter {
      display: table-cell;
      vertical-align: middle;

      .@{table-prefix-cls}-column-sorter-inner {
        height: 1em;
        margin-top: 0.35em;
        margin-left: 0.57142857em;
        color: @table-header-icon-color;
        line-height: 1em;
        text-align: center;
        transition: all 0.3s;

        .@{table-prefix-cls}-column-sorter-up,
        .@{table-prefix-cls}-column-sorter-down {
          .iconfont-size-under-12px(11px);
          display: block;
          height: 1em;
          line-height: 1em;
          transition: all 0.3s;
          &.on {
            color: @primary-color;
          }
        }

        &-full {
          margin-top: -0.15em;

          .@{table-prefix-cls}-column-sorter-up,
          .@{table-prefix-cls}-column-sorter-down {
            height: 0.5em;
            line-height: 0.5em;
          }

          .@{table-prefix-cls}-column-sorter-down {
            margin-top: 0.125em;
          }
        }
      }
    }

    &.@{table-prefix-cls}-column-has-actions {
      position: relative;
      background-clip: padding-box; // For Firefox background bug, https://github.com/ant-design/ant-design/issues/12628
      /* stylelint-disable-next-line */
      -webkit-background-clip: border-box; // For Chrome extra space: https://github.com/ant-design/ant-design/issues/14926

      &.@{table-prefix-cls}-column-has-filters {
        // https://github.com/ant-design/ant-design/issues/12650
        padding-right: 30px !important;

        .@{iconfont-css-prefix}-filter,
        .@{table-prefix-cls}-filter-icon {
          &.@{table-prefix-cls}-filter-open {
            color: @text-color-secondary;
            background: @table-header-filter-active-bg;
          }
        }
        // Very complicated styles logic but necessary
        &:hover {
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            &:hover {
              color: @text-color-secondary;
              background: @table-header-filter-active-bg;
            }
            &:active {
              color: @text-color;
            }
          }
        }
      }

      &.@{table-prefix-cls}-column-has-sorters {
        cursor: pointer;
        &:hover {
          background: @table-header-sort-active-bg;
          .@{iconfont-css-prefix}-filter,
          .@{table-prefix-cls}-filter-icon {
            background: @table-header-sort-active-bg;
          }
        }
        &:active {
          .@{table-prefix-cls}-column-sorter-up:not(.on),
          .@{table-prefix-cls}-column-sorter-down:not(.on) {
            color: @text-color-secondary;
          }
        }
      }
    }

    .@{table-prefix-cls}-header-column {
      display: inline-block;
      vertical-align: top;

      .@{table-prefix-cls}-column-sorters {
        display: table;

        > .@{table-prefix-cls}-column-title {
          display: table-cell;
          vertical-align: middle;
        }

        > *:not(.@{table-prefix-cls}-column-sorter) {
          position: relative;
        }
        &::before {
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          background: transparent;
          transition: all 0.3s;
          content: '';
        }
        &:hover::before {
          background: rgba(0, 0, 0, 0.04);
        }
      }
    }

    &.@{table-prefix-cls}-column-has-sorters {
      user-select: none;
    }
  }

  &-thead > tr:first-child > th {
    &:first-child {
      border-top-left-radius: @table-border-radius-base;
    }

    &:last-child {
      border-top-right-radius: @table-border-radius-base;
    }
  }

  &-thead > tr:not(:last-child) > th {
    &[colspan] {
      border-bottom: 0;
    }
  }

  &-tbody > tr > td {
    border-bottom: @border-width-base @border-style-base @border-color-split;
    transition: all 0.3s, border 0s;
  }

  &-thead > tr,
  &-tbody > tr {
    transition: all 0.3s, height 0s;
    &.@{table-prefix-cls}-row-hover,
    &:hover {
      &:not(.@{table-prefix-cls}-expanded-row) > td {
        background: @table-row-hover-bg;
      }
    }
  }

  &-thead > tr:hover {
    background: none;
  }

  &-footer {
    position: relative;
    padding: @table-padding-vertical @table-padding-horizontal;
    background: @table-header-bg;
    border-top: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @table-border-radius-base @table-border-radius-base;
    &::before {
      position: absolute;
      top: -1px;
      left: 0;
      width: 100%;
      height: 1px;
      background: @table-header-bg;
      content: '';
    }
  }

  &.@{table-prefix-cls}-bordered &-footer {
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title {
    position: relative;
    top: 1px;
    padding: @table-padding-vertical 0;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &.@{table-prefix-cls}-bordered &-title {
    padding-right: @table-padding-horizontal;
    padding-left: @table-padding-horizontal;
    border: @border-width-base @border-style-base @border-color-split;
  }

  &-title + &-content {
    position: relative;
    overflow: hidden;
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
    .@{table-prefix-cls}-bordered & {
      &,
      table,
      .@{table-prefix-cls}-thead > tr:first-child > th {
        border-radius: 0;
      }
    }
  }

  // https://github.com/ant-design/ant-design/issues/4373
  &-without-column-header &-title + &-content,
  &-without-column-header table {
    border-radius: 0;
  }

  // https://github.com/ant-design/ant-design/issues/14834
  &-without-column-header&-bordered&-empty &-placeholder {
    border-top: 1px solid @border-color-split;
    border-radius: @border-radius-base;
  }

  &-tbody > tr.@{table-prefix-cls}-row-selected td {
    background: @table-selected-row-bg;
  }

  &-thead > tr > th.@{table-prefix-cls}-column-sort {
    background: @table-header-sort-bg;
  }

  &-tbody > tr > td.@{table-prefix-cls}-column-sort {
    background: @table-body-sort-bg;
  }

  &-thead > tr > th,
  &-tbody > tr > td {
    padding: @table-padding-vertical @table-padding-horizontal;
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column-custom {
    .@{table-prefix-cls}-selection {
      margin-right: -15px;
    }
  }

  &-thead > tr > th.@{table-prefix-cls}-selection-column,
  &-tbody > tr > td.@{table-prefix-cls}-selection-column {
    text-align: center;
    .@{ant-prefix}-radio-wrapper {
      margin-right: 0;
    }
  }

  &-expand-icon-th,
  &-row-expand-icon-cell {
    width: 50px;
    min-width: 50px;
    text-align: center;
  }

  &-header {
    overflow: hidden;
    background: @table-header-bg;
  }

  &-header table {
    border-radius: @table-border-radius-base @table-border-radius-base 0 0;
  }

  &-loading {
    position: relative;
    .@{table-prefix-cls}-body {
      background: @component-background;
      opacity: 0.5;
    }
    .@{table-prefix-cls}-spin-holder {
      position: absolute;
      top: 50%;
      left: 50%;
      height: 20px;
      margin-left: -30px;
      line-height: 20px;
    }
    .@{table-prefix-cls}-with-pagination {
      margin-top: -20px;
    }
    .@{table-prefix-cls}-without-pagination {
      margin-top: 10px;
    }
  }

  &-bordered {
    .@{table-prefix-cls}-header > table,
    .@{table-prefix-cls}-body > table,
    .@{table-prefix-cls}-fixed-left table,
    .@{table-prefix-cls}-fixed-right table {
      border: @border-width-base @border-style-base @border-color-split;
      border-right: 0;
      border-bottom: 0;
    }

    &.@{table-prefix-cls}-empty {
      .@{table-prefix-cls}-placeholder {
        border-right: @border-width-base @border-style-base @border-color-split;
        border-left: @border-width-base @border-style-base @border-color-split;
      }
    }

    &.@{table-prefix-cls}-fixed-header {
      .@{table-prefix-cls}-header > table {
        border-bottom: 0;
      }

      .@{table-prefix-cls}-body > table {
        border-top-left-radius: 0;
        border-top-right-radius: 0;
      }

      .@{table-prefix-cls}-header + .@{table-prefix-cls}-body > table,
      .@{table-prefix-cls}-body-inner > table {
        border-top: 0;
      }
    }

    .@{table-prefix-cls}-thead > tr:not(:last-child) > th {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-thead > tr > th,
    .@{table-prefix-cls}-tbody > tr > td {
      border-right: @border-width-base @border-style-base @border-color-split;
    }
  }

  &-placeholder {
    position: relative;
    z-index: 1;
    padding: @table-padding-vertical @table-padding-horizontal;
    color: @disabled-color;
    font-size: @font-size-base;
    text-align: center;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    .@{iconfont-css-prefix} {
      margin-right: 4px;
    }
  }

  &-pagination.@{ant-prefix}-pagination {
    float: right;
    margin: 16px 0;
  }

  &-filter-dropdown {
    position: relative;
    min-width: 96px;
    margin-left: -8px;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    .@{ant-prefix}-dropdown-menu {
      border: 0;
      border-radius: @border-radius-base @border-radius-base 0 0;
      box-shadow: none;

      // https://github.com/ant-design/ant-design/issues/4916
      &-without-submenu {
        max-height: 400px;
        overflow-x: hidden;
      }

      &-item > label + span {
        padding-right: 0;
      }

      &-sub {
        border-radius: @border-radius-base;
        box-shadow: @box-shadow-base;
      }

      .@{ant-prefix}-dropdown-submenu-contain-selected {
        .@{ant-prefix}-dropdown-menu-submenu-title::after {
          color: @primary-color;
          font-weight: bold;
          text-shadow: 0 0 2px @primary-2;
        }
      }
    }

    .@{ant-prefix}-dropdown-menu-item {
      overflow: hidden;
    }

    > .@{ant-prefix}-dropdown-menu > .@{ant-prefix}-dropdown-menu-item:last-child,
    > .@{ant-prefix}-dropdown-menu
    > .@{ant-prefix}-dropdown-menu-submenu:last-child
    .@{ant-prefix}-dropdown-menu-submenu-title {
      border-radius: 0;
    }

    &-btns {
      padding: 7px 8px;
      overflow: hidden;
      border-top: @border-width-base @border-style-base @border-color-split;
    }

    &-link {
      color: @link-color;
      &:hover {
        color: @link-hover-color;
      }
      &:active {
        color: @link-active-color;
      }
      &.confirm {
        float: left;
      }
      &.clear {
        float: right;
      }
    }
  }

  &-selection {
    white-space: nowrap;

    &-select-all-custom {
      margin-right: 4px !important;
    }

    .@{iconfont-css-prefix}-down {
      color: @table-header-icon-color;
      transition: all 0.3s;
    }

    &-menu {
      min-width: 96px;
      margin-top: 5px;
      margin-left: -30px;
      background: @component-background;
      border-radius: @border-radius-base;
      box-shadow: @box-shadow-base;

      .@{ant-prefix}-action-down {
        color: @table-header-icon-color;
      }
    }

    &-down {
      display: inline-block;
      padding: 0;
      line-height: 1;
      cursor: pointer;
      &:hover .@{iconfont-css-prefix}-down {
        color: fade(@black, 60%);
      }
    }
  }

  &-row {
    &-expand-icon {
      display: inline-block;
      width: 17px;
      height: 17px;
      line-height: 14px;
      text-align: center;
      background: @component-background;
      border: @border-width-base @border-style-base @border-color-split;
      cursor: pointer;
      user-select: none;
    }

    &-expanded::after {
      content: '-';
    }

    &-collapsed::after {
      content: '+';
    }

    &-spaced {
      visibility: hidden;
      &::after {
        content: '.';
      }
    }

    &[class*='@{table-prefix-cls}-row-level-0'] .@{table-prefix-cls}-selection-column > span {
      display: inline-block;
    }
  }

  tr&-expanded-row {
    &,
    &:hover {
      background: @table-expanded-row-bg;
    }

    td > .@{table-prefix-cls}-wrapper {
      margin: -@table-padding-vertical -@table-padding-horizontal -@table-padding-vertical - 1px;
    }
  }

  .@{table-prefix-cls}-row-indent + .@{table-prefix-cls}-row-expand-icon {
    margin-right: 8px;
  }

  &-scroll {
    overflow: auto;
    overflow-x: hidden;
    table {
      width: auto;
      min-width: 100%;

      // https://github.com/ant-design/ant-design/issues/14545
      .@{table-prefix-cls}-fixed-columns-in-body {
        visibility: hidden;
      }
    }
  }

  &-body-inner {
    height: 100%;
  }

  &-fixed-header > &-content > &-scroll > &-body {
    position: relative;
    background: @component-background;
  }

  &-fixed-header &-body-inner {
    overflow: scroll;
  }

  &-fixed-header &-scroll &-header {
    margin-bottom: -20px;
    padding-bottom: 20px;
    overflow: scroll;
    // Workaround for additional scroll bar on the table header
    // https://github.com/ant-design/ant-design/issues/6515#issuecomment-419634369
    opacity: 0.9999;
  }

  &-fixed-left,
  &-fixed-right {
    position: absolute;
    top: 0;
    z-index: @zindex-table-fixed;
    overflow: hidden;
    border-radius: 0;
    transition: box-shadow 0.3s ease;
    table {
      width: auto;
      background: @component-background;
    }
  }

  &-fixed-header &-fixed-left &-body-outer &-fixed,
  &-fixed-header &-fixed-right &-body-outer &-fixed {
    border-radius: 0;
  }

  &-fixed-left {
    left: 0;
    box-shadow: 6px 0 6px -4px @shadow-color;
    .@{table-prefix-cls}-header {
      overflow-y: hidden;
    }
    // hide scrollbar in left fixed columns
    .@{table-prefix-cls}-body-inner {
      margin-right: -20px;
      padding-right: 20px;
    }
    .@{table-prefix-cls}-fixed-header & .@{table-prefix-cls}-body-inner {
      padding-right: 0;
    }
    &,
    table {
      border-radius: @table-border-radius-base 0 0 0;
    }
    .ant-table-thead > tr > th:last-child {
      border-top-right-radius: 0;
    }
  }

  &-fixed-right {
    right: 0;
    box-shadow: -6px 0 6px -4px @shadow-color;
    &,
    table {
      border-radius: 0 @table-border-radius-base 0 0;
    }
    // hide expand row content in right-fixed Table
    // https://github.com/ant-design/ant-design/issues/1898
    .@{table-prefix-cls}-expanded-row {
      color: transparent;
      pointer-events: none;
    }
    .ant-table-thead > tr > th:first-child {
      border-top-left-radius: 0;
    }
  }

  &&-scroll-position-left &-fixed-left {
    box-shadow: none;
  }

  &&-scroll-position-right &-fixed-right {
    box-shadow: none;
  }
}

@table-padding-vertical-md: @table-padding-vertical * 3 / 4;
@table-padding-horizontal-md: @table-padding-horizontal / 2;
@table-padding-vertical-sm: @table-padding-vertical / 2;
@table-padding-horizontal-sm: @table-padding-horizontal / 2;

.@{table-prefix-cls}-middle {
  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical-md @table-padding-horizontal-md;
  }
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table,
    > .@{table-prefix-cls}-fixed-right
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-md @table-padding-horizontal-md;
      }
    }
  }

  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
    margin: -@table-padding-vertical-md -@table-padding-horizontal -@table-padding-vertical-md - 1px;
  }
}

.@{table-prefix-cls}-small {
  border: @border-width-base @border-style-base @border-color-split;
  border-radius: @table-border-radius-base;

  > .@{table-prefix-cls}-title,
  > .@{table-prefix-cls}-footer {
    padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
  }

  > .@{table-prefix-cls}-title {
    top: 0;
    border-bottom: @border-width-base @border-style-base @border-color-split;
  }

  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-body {
      margin: 0 @table-padding-horizontal-sm;
    }

    > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table,
    > .@{table-prefix-cls}-fixed-right
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table {
      border: 0;
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
      }
      > .@{table-prefix-cls}-thead > tr > th {
        background-color: transparent;
        border-bottom: @border-width-base @border-style-base @border-color-split;
      }
      > .@{table-prefix-cls}-thead > tr > th.@{table-prefix-cls}-column-sort {
        background-color: @table-body-sort-bg;
      }
    }

    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-fixed-left > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-right > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-fixed-left
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table,
    > .@{table-prefix-cls}-fixed-right
    > .@{table-prefix-cls}-body-outer
    > .@{table-prefix-cls}-body-inner
    > table {
      padding: 0;
    }

    .@{table-prefix-cls}-header {
      background-color: @component-background;
    }

    .@{table-prefix-cls}-placeholder,
    .@{table-prefix-cls}-row:last-child td {
      border-bottom: 0;
    }
  }

  &.@{table-prefix-cls}-bordered {
    border-right: 0;

    .@{table-prefix-cls}-title {
      border: 0;
      border-right: @border-width-base @border-style-base @border-color-split;
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-content {
      border-right: @border-width-base @border-style-base @border-color-split;
    }

    .@{table-prefix-cls}-footer {
      border: 0;
      border-top: @border-width-base @border-style-base @border-color-split;
      border-right: @border-width-base @border-style-base @border-color-split;
      &::before {
        display: none;
      }
    }

    .@{table-prefix-cls}-placeholder {
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
    }

    .@{table-prefix-cls}-thead > tr > th:last-child,
    .@{table-prefix-cls}-tbody > tr > td:last-child {
      border-right: none;
    }

    .@{table-prefix-cls}-fixed-left {
      .@{table-prefix-cls}-thead > tr > th:last-child,
      .@{table-prefix-cls}-tbody > tr > td:last-child {
        border-right: @border-width-base @border-style-base @border-color-split;
      }
    }

    .@{table-prefix-cls}-fixed-right {
      border-right: @border-width-base @border-style-base @border-color-split;
      border-left: @border-width-base @border-style-base @border-color-split;
    }
  }

  tr.@{table-prefix-cls}-expanded-row td > .@{table-prefix-cls}-wrapper {
    margin: -@table-padding-vertical-sm -@table-padding-horizontal -@table-padding-vertical-sm - 1px;
  }
}

@table-prefix-cls: ~'@{ant-prefix}-table';
@table-td-cls: ~'@{table-prefix-cls}-td';
@table-th-cls: ~'@{table-prefix-cls}-th';
@table-th-left-cls: ~'@{table-th-cls}-left';
@table-th-right-cls: ~'@{table-th-cls}-right';
@table-td-left-cls: ~'@{table-td-cls}-left';
@table-td-right-cls: ~'@{table-td-cls}-right';

nz-table {
  .@{table-prefix-cls} {
    table {
      border-collapse: separate;
      border-spacing: 0;
    }
  }
}

.box-shadow-left() {
  .@{table-th-right-cls}-sticky,
  .@{table-td-right-cls}-sticky {
    box-shadow: -6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.box-shadow-right() {
  .@{table-th-left-cls}-sticky,
  .@{table-td-left-cls}-sticky {
    box-shadow: 6px 0 6px 0px rgba(0, 0, 0, .05);
  }
}

.border-left() {
  .@{table-th-right-cls}-sticky,
  .@{table-td-right-cls}-sticky {
    border-right: @border-width-base @border-style-base @border-color-split;
  }
}

.border-right() {
  .@{table-th-left-cls}-sticky,
  .@{table-td-left-cls}-sticky {
    border-left: @border-width-base @border-style-base @border-color-split;
  }
}

.@{table-prefix-cls}-scroll-position-middle,
.@{table-prefix-cls}-scroll-position-left {
  .@{table-td-right-cls}-sticky + .@{table-td-right-cls}-sticky {
    box-shadow: none;
  }

  .@{table-th-right-cls}-sticky + .@{table-th-right-cls}-sticky {
    box-shadow: none;
  }
}

.@{table-th-left-cls}-sticky,
.@{table-th-right-cls}-sticky,
.@{table-td-right-cls}-sticky,
.@{table-td-left-cls}-sticky {
  position: sticky !important;
  z-index: 1;
}

.@{table-td-left-cls}-sticky,
.@{table-td-right-cls}-sticky {
  background: @component-background;
}

.@{table-prefix-cls}-tbody {
  & > tr {
    &:hover {
      & > td {
        &.@{table-td-left-cls}-sticky {
          background: @table-row-hover-bg;
        }

        &.@{table-td-right-cls}-sticky {
          background: @table-row-hover-bg;
        }
      }
    }
  }
}

.@{table-prefix-cls}-thead > tr > th .@{table-prefix-cls}-column-sorters > nz-dropdown {
  position: static !important;
}

.@{table-prefix-cls}-scroll-position-middle {
  .box-shadow-right;
  .box-shadow-left;
}

.@{table-prefix-cls}-scroll-position-left {
  .box-shadow-left;
}

.@{table-prefix-cls}-scroll-position-right {
  .box-shadow-right;
}

.@{table-prefix-cls}-bordered {
  &.@{table-prefix-cls}-scroll-position-middle {
    .border-right;
    .border-left;
  }

  &.@{table-prefix-cls}-scroll-position-left {
    .border-left;
  }

  &.@{table-prefix-cls}-scroll-position-right {
    .border-right;
  }
}

.@{table-prefix-cls}-middle {
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-md @table-padding-horizontal-md;
      }
    }
  }
}

.@{table-prefix-cls}-small {
  > .@{table-prefix-cls}-content {
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-header > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > table,
    > .@{table-prefix-cls}-scroll > .@{table-prefix-cls}-body > .cdk-virtual-scroll-content-wrapper > table {
      border: 0;

      > .@{table-prefix-cls}-thead > tr > th {
        &.@{table-th-left-cls}-sticky,
        &.@{table-th-right-cls}-sticky {
          background: @component-background;
        }
      }

      > .@{table-prefix-cls}-thead > tr > th,
      > .@{table-prefix-cls}-tbody > tr > td {
        padding: @table-padding-vertical-sm @table-padding-horizontal-sm;
      }
    }
  }
}

// style dependencies
// deps-lint-skip: menu

@timeline-prefix-cls: ~'@{ant-prefix}-timeline';
@timeline-color: @border-color-split;

.@{timeline-prefix-cls} {
  .reset-component;
  margin: 0;
  padding: 0;
  list-style: none;

  &-item {
    position: relative;
    margin: 0;
    padding: 0 0 20px;
    font-size: @font-size-base;
    list-style: none;

    &-tail {
      position: absolute;
      top: 0.75em;
      left: 4px;
      height: 100%;
      border-left: 2px solid @timeline-color;
    }

    &-pending &-head {
      font-size: @font-size-sm;
    }

    &-pending &-tail {
      display: none;
    }

    &-head {
      position: absolute;
      width: 10px;
      height: 10px;
      background-color: @component-background;
      border: 2px solid transparent;
      border-radius: 100px;

      &-blue {
        color: @primary-color;
        border-color: @primary-color;
      }
      &-red {
        color: @error-color;
        border-color: @error-color;
      }
      &-green {
        color: @success-color;
        border-color: @success-color;
      }
    }

    &-head-custom {
      position: absolute;
      top: 5.5px;
      left: 5px;
      width: auto;
      height: auto;
      margin-top: 0;
      padding: 3px 1px;
      line-height: 1;
      text-align: center;
      border: 0;
      border-radius: 0;
      transform: translate(-50%, -50%);
    }

    &-content {
      position: relative;
      top: -(@font-size-base * @line-height-base - @font-size-base) + 1px;
      margin: 0 0 0 18px;
    }

    &-last {
      > .@{timeline-prefix-cls}-item-tail {
        display: none;
      }
      > .@{timeline-prefix-cls}-item-content {
        min-height: 48px;
      }
    }
  }

  &.@{timeline-prefix-cls}-alternate,
  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item {
      &-tail,
      &-head,
      &-head-custom {
        left: 50%;
      }

      &-head {
        margin-left: -4px;
        &-custom {
          margin-left: 1px;
        }
      }

      &-left {
        .@{timeline-prefix-cls}-item-content {
          left: 50%;
          width: 50%;
          text-align: left;
        }
      }

      &-right {
        .@{timeline-prefix-cls}-item-content {
          right: 50%;
          left: -30px;
          width: 50%;
          margin-right: 18px;
          text-align: right;
        }
      }
    }
  }

  &.@{timeline-prefix-cls}-right {
    .@{timeline-prefix-cls}-item-right {
      .@{timeline-prefix-cls}-item-tail,
      .@{timeline-prefix-cls}-item-head,
      .@{timeline-prefix-cls}-item-head-custom {
        left: 100%;
      }
      .@{timeline-prefix-cls}-item-content {
        right: 0;
        left: -30px;
        width: 100%;
      }
    }
  }

  &&-pending &-item-last &-item-tail {
    display: block;
    border-left: 2px dotted @timeline-color;
  }

  &&-reverse &-item-last &-item-tail {
    display: none;
  }

  &&-reverse &-item-pending {
    .@{timeline-prefix-cls}-item-tail {
      display: block;
      border-left: 2px dotted @timeline-color;
    }
    .@{timeline-prefix-cls}-item-content {
      min-height: 48px;
    }
  }
}

@transfer-prefix-cls: ~'@{ant-prefix}-transfer';

.@{transfer-prefix-cls} {
  .reset-component;
  position: relative;

  &-disabled {
    .@{transfer-prefix-cls}-list {
      background: @transfer-disabled-bg;
    }
  }

  &-list {
    position: relative;
    display: inline-block;
    width: 180px;
    height: 200px;
    padding-top: 34px;
    vertical-align: middle;
    border: @border-width-base @border-style-base @border-color-base;
    border-radius: @border-radius-base;

    &-with-footer {
      padding-bottom: 34px;
    }

    &-search {
      padding: 0 @control-padding-horizontal-sm;
      &-action {
        position: absolute;
        top: 4px;
        right: 4px;
        bottom: 4px;
        width: 28px;
        color: @disabled-color;
        line-height: @input-height-base;
        text-align: center;
        .@{iconfont-css-prefix} {
          color: @disabled-color;
          transition: all 0.3s;
          &:hover {
            color: @text-color-secondary;
          }
        }
        span& {
          pointer-events: none;
        }
      }
    }

    &-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      padding: 6px @control-padding-horizontal;
      overflow: hidden;
      color: @text-color;
      background: @component-background;
      border-bottom: @border-width-base @border-style-base @border-color-split;
      border-radius: @border-radius-base @border-radius-base 0 0;

      &-title {
        position: absolute;
        right: 12px;
      }
    }

    &-body {
      position: relative;
      height: 100%;
      font-size: @font-size-base;

      &-search-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 4px;
      }
    }

    &-body-with-search {
      padding-top: @input-height-base + 8px;
    }

    &-content {
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: auto;
      list-style: none;
      > .LazyLoad {
        animation: transferHighlightIn 1s;
      }

      &-item {
        min-height: 32px;
        padding: 6px @control-padding-horizontal;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: all 0.3s;
        > span {
          padding-right: 0;
        }
      }

      &-item:not(&-item-disabled):hover {
        background-color: @item-hover-bg;
        cursor: pointer;
      }

      &-item-disabled {
        color: @btn-disable-color;
        cursor: not-allowed;
      }
    }

    &-body-not-found {
      position: absolute;
      top: 50%;
      width: 100%;
      padding-top: 0;
      color: @disabled-color;
      text-align: center;
      transform: translateY(-50%);

      // with filter should offset the search box height
      .@{transfer-prefix-cls}-list-body-with-search & {
        margin-top: @input-height-base / 2;
      }
    }

    &-footer {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      border-top: @border-width-base @border-style-base @border-color-split;
      border-radius: 0 0 @border-radius-base @border-radius-base;
    }
  }

  &-operation {
    display: inline-block;
    margin: 0 8px;
    overflow: hidden;
    vertical-align: middle;

    .@{ant-prefix}-btn {
      display: block;

      &:first-child {
        margin-bottom: 4px;
      }

      .@{iconfont-css-prefix} {
        font-size: 12px;
      }
    }
  }
}

@keyframes transferHighlightIn {
  0% {
    background: @primary-2;
  }
  100% {
    background: transparent;
  }
}

// style dependencies

@upload-prefix-cls: ~'@{ant-prefix}-upload';
@upload-item: ~'@{ant-prefix}-upload-list-item';
@upload-picture-card-size: 104px;
@upload-picture-card-border-style: @border-style-base;

.@{upload-prefix-cls} {
  .reset-component;
  outline: 0;

  p {
    margin: 0;
  }

  &-btn {
    display: block;
    width: 100%;
    outline: none;
  }

  input[type='file'] {
    cursor: pointer;
  }

  &&-select {
    display: inline-block;
  }

  &&-select-picture-card {
    display: table;
    width: @upload-picture-card-size;
    height: @upload-picture-card-size;
    margin-right: 8px;
    margin-bottom: 8px;
    text-align: center;
    vertical-align: top;
    background-color: @background-color-light;
    border: @border-width-base dashed @border-color-base;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: border-color 0.3s ease;

    > .@{upload-prefix-cls} {
      display: table-cell;
      width: 100%;
      height: 100%;
      padding: 8px;
      text-align: center;
      vertical-align: middle;
    }

    &:hover {
      border-color: @primary-color;
    }
  }

  &&-drag {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    background: @background-color-light;
    border: @border-width-base dashed @border-color-base;
    border-radius: @border-radius-base;
    cursor: pointer;
    transition: border-color 0.3s;

    .@{upload-prefix-cls} {
      padding: 16px 0;
    }

    &.@{upload-prefix-cls}-drag-hover:not(.@{upload-prefix-cls}-disabled) {
      border-color: @primary-7;
    }

    &.@{upload-prefix-cls}-disabled {
      cursor: not-allowed;
    }

    .@{upload-prefix-cls}-btn {
      display: table;
      height: 100%;
    }

    .@{upload-prefix-cls}-drag-container {
      display: table-cell;
      vertical-align: middle;
    }

    &:not(.@{upload-prefix-cls}-disabled):hover {
      border-color: @primary-5;
    }

    p.@{upload-prefix-cls}-drag-icon {
      .@{iconfont-css-prefix} {
        color: @primary-5;
        font-size: 48px;
      }
      margin-bottom: 20px;
    }
    p.@{upload-prefix-cls}-text {
      margin: 0 0 4px;
      color: @heading-color;
      font-size: @font-size-lg;
    }
    p.@{upload-prefix-cls}-hint {
      color: @text-color-secondary;
      font-size: @font-size-base;
    }
    .@{iconfont-css-prefix}-plus {
      color: @disabled-color;
      font-size: 30px;
      transition: all 0.3s;
      &:hover {
        color: @text-color-secondary;
      }
    }
    &:hover .@{iconfont-css-prefix}-plus {
      color: @text-color-secondary;
    }
  }
}

.@{upload-prefix-cls}-list {
  .reset-component;
  .clearfix;
  &-item {
    position: relative;
    height: 22px;
    margin-top: 8px;
    font-size: @font-size-base;
    &-name {
      display: inline-block;
      width: 100%;
      padding-left: @font-size-base + 8px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-info {
      height: 100%;
      padding: 0 12px 0 4px;
      transition: background-color 0.3s;

      > span {
        display: block;
      }

      .@{iconfont-css-prefix}-loading,
      .@{iconfont-css-prefix}-paper-clip {
        position: absolute;
        top: @font-size-base / 2 - 2px;
        color: @text-color-secondary;
        font-size: @font-size-base;
      }
    }

    .@{iconfont-css-prefix}-close {
      .iconfont-size-under-12px(10px);
      position: absolute;
      top: 6px;
      right: 4px;
      color: @text-color-secondary;
      line-height: 0;
      cursor: pointer;
      opacity: 0;
      transition: all 0.3s;
      &:hover {
        color: @text-color;
      }
    }

    &:hover &-info {
      background-color: @item-hover-bg;
    }

    &:hover .@{iconfont-css-prefix}-close {
      opacity: 1;
    }

    &-error,
    &-error .@{iconfont-css-prefix}-paper-clip,
    &-error &-name {
      color: @error-color;
    }

    &-error .@{iconfont-css-prefix}-close {
      color: @error-color !important;
      opacity: 1;
    }

    &-progress {
      position: absolute;
      bottom: -12px;
      width: 100%;
      padding-left: @font-size-base + 12px;
      font-size: @font-size-base;
      line-height: 0;
    }
  }

  &-picture,
  &-picture-card {
    .@{upload-item} {
      position: relative;
      height: 66px;
      padding: 8px;
      border: @border-width-base @upload-picture-card-border-style @border-color-base;
      border-radius: @border-radius-base;
      &:hover {
        background: transparent;
      }
      &-error {
        border-color: @error-color;
      }
    }

    .@{upload-item}-info {
      padding: 0;
    }

    .@{upload-item}:hover .@{upload-item}-info {
      background: transparent;
    }

    .@{upload-item}-uploading {
      border-style: dashed;
    }

    .@{upload-item}-thumbnail {
      position: absolute;
      top: 8px;
      left: 8px;
      width: 48px;
      height: 48px;
      font-size: 26px;
      line-height: 54px;
      text-align: center;
      opacity: 0.8;
    }

    .@{upload-item}-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      font-size: 26px;
      transform: translate(-50%, -50%);
    }

    .@{upload-item}-thumbnail img {
      display: block;
      width: 48px;
      height: 48px;
      overflow: hidden;
    }

    .@{upload-item}-name {
      display: inline-block;
      box-sizing: border-box;
      max-width: 100%;
      margin: 0 0 0 8px;
      padding-right: 8px;
      padding-left: 48px;
      overflow: hidden;
      line-height: 44px;
      white-space: nowrap;
      text-overflow: ellipsis;
      transition: all 0.3s;
    }

    .@{upload-item}-uploading .@{upload-item}-name {
      line-height: 28px;
    }

    .@{upload-item}-progress {
      bottom: 14px;
      width: ~'calc(100% - 24px)';
      margin-top: 0;
      padding-left: 56px;
    }

    .@{iconfont-css-prefix}-close {
      position: absolute;
      top: 8px;
      right: 8px;
      line-height: 1;
      opacity: 1;
    }
  }

  &-picture-card {
    // https://github.com/ant-design/ant-design/issues/11183
    float: left;

    &.@{upload-prefix-cls}-list::after {
      display: none;
    }
    .@{upload-item} {
      float: left;
      width: @upload-picture-card-size;
      height: @upload-picture-card-size;
      margin: 0 8px 8px 0;
    }

    .@{upload-item}-info {
      position: relative;
      height: 100%;
      overflow: hidden;

      &::before {
        position: absolute;
        z-index: 1;
        width: 100%;
        height: 100%;
        background-color: fade(@black, 50%);
        opacity: 0;
        transition: all 0.3s;
        content: ' ';
      }
    }

    .@{upload-item}:hover .@{upload-item}-info::before {
      opacity: 1;
    }

    .@{upload-item}-actions {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 10;
      white-space: nowrap;
      transform: translate(-50%, -50%);
      opacity: 0;
      transition: all 0.3s;

      .@{iconfont-css-prefix}-eye-o,
      .@{iconfont-css-prefix}-delete {
        z-index: 10;
        width: 16px;
        margin: 0 4px;
        color: @text-color-dark;
        font-size: 16px;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          color: @text-color-inverse;
        }
      }
    }

    .@{upload-item}-info:hover + .@{upload-item}-actions,
    .@{upload-item}-actions:hover {
      opacity: 1;
    }

    .@{upload-item}-thumbnail,
    .@{upload-item}-thumbnail img {
      position: static;
      display: block;
      width: 100%;
      height: 100%;
    }

    .@{upload-item}-name {
      display: none;
      margin: 8px 0 0;
      padding: 0;
      line-height: @line-height-base;
      text-align: center;
    }

    .anticon-picture + .@{upload-item}-name {
      display: block;
    }

    .@{upload-item}-uploading {
      &.@{upload-item} {
        background-color: @background-color-light;
      }

      .@{upload-item}-info {
        height: auto;
        &::before,
        .@{iconfont-css-prefix}-eye-o,
        .@{iconfont-css-prefix}-delete {
          display: none;
        }
      }

      &-text {
        margin-top: 18px;
        color: @text-color-secondary;
      }
    }

    .@{upload-item}-progress {
      bottom: 32px;
      padding-left: 0;
    }
  }

  .@{upload-prefix-cls}-success-icon {
    color: @success-color;
    font-weight: bold;
  }

  .@{upload-prefix-cls}-animate-enter,
  .@{upload-prefix-cls}-animate-leave,
  .@{upload-prefix-cls}-animate-inline-enter,
  .@{upload-prefix-cls}-animate-inline-leave {
    animation-duration: 0.3s;
    animation-fill-mode: @ease-in-out-circ;
  }

  .@{upload-prefix-cls}-animate-enter {
    animation-name: uploadAnimateIn;
  }

  .@{upload-prefix-cls}-animate-leave {
    animation-name: uploadAnimateOut;
  }

  .@{upload-prefix-cls}-animate-inline-enter {
    animation-name: uploadAnimateInlineIn;
  }

  .@{upload-prefix-cls}-animate-inline-leave {
    animation-name: uploadAnimateInlineOut;
  }
}

@keyframes uploadAnimateIn {
  from {
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateOut {
  to {
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateInlineIn {
  from {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

@keyframes uploadAnimateInlineOut {
  to {
    width: 0;
    height: 0;
    margin: 0;
    padding: 0;
    opacity: 0;
  }
}

// style dependencies

@input-prefix-cls: ~'@{ant-prefix}-input';
@select-prefix-cls: ~'@{ant-prefix}-select';
@autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';

.@{autocomplete-prefix-cls} {
  .reset-component;

  &.@{select-prefix-cls} {
    .@{select-prefix-cls} {
      &-selection {
        border: 0;
        box-shadow: none;
        &__rendered {
          height: 100%;
          margin-right: 0;
          margin-left: 0;
          line-height: @input-height-base;
        }
        &__placeholder {
          margin-right: (@input-padding-horizontal-base + 1px);
          margin-left: (@input-padding-horizontal-base + 1px);
        }

        &--single {
          height: auto;
        }
      }
    }

    // Fix https://github.com/ant-design/ant-design/issues/7800
    .@{select-prefix-cls}-search--inline {
      position: static;
      float: left;
    }

    &-allow-clear {
      .@{select-prefix-cls}-selection:hover .@{select-prefix-cls}-selection__rendered {
        margin-right: 0 !important;
      }
    }

    .@{input-prefix-cls} {
      height: @input-height-base;
      line-height: @line-height-base;
      background: transparent;
      border-width: @border-width-base;
      &:focus,
      &:hover {
        .hover;
      }
      &[disabled] {
        .disabled;
        background-color: transparent;
      }
    }

    &-lg {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-lg;
      }
      .@{input-prefix-cls} {
        height: @input-height-lg;
        padding-top: @input-padding-vertical-lg;
        padding-bottom: @input-padding-vertical-lg;
      }
    }

    &-sm {
      .@{select-prefix-cls}-selection__rendered {
        line-height: @input-height-sm;
      }
      .@{input-prefix-cls} {
        height: @input-height-sm;
        padding-top: @input-padding-vertical-sm;
        padding-bottom: @input-padding-vertical-sm;
      }
    }
  }
}

// style dependencies

@cascader-prefix-cls: ~'@{ant-prefix}-cascader';

.@{cascader-prefix-cls} {
  .reset-component;

  &-input.@{ant-prefix}-input {
    position: relative;
    width: 100%;
    // Add important to fix https://github.com/ant-design/ant-design/issues/5078
    // because input.less will compile after cascader.less
    background-color: transparent !important;
    cursor: pointer;
  }

  &-picker-show-search &-input.@{ant-prefix}-input {
    position: relative;
  }

  &-picker {
    .reset-component;
    position: relative;
    display: inline-block;
    background-color: @component-background;
    border-radius: @border-radius-base;
    outline: 0;
    cursor: pointer;
    transition: color 0.3s;

    &-with-value &-label {
      color: transparent;
    }

    &-disabled {
      color: @disabled-color;
      background: @input-disabled-bg;
      cursor: not-allowed;
      .@{cascader-prefix-cls}-input {
        cursor: not-allowed;
      }
    }

    &:focus .@{cascader-prefix-cls}-input {
      .active;
    }

    &-show-search&-focused {
      color: @disabled-color;
    }

    &-label {
      position: absolute;
      top: 50%;
      left: 0;
      width: 100%;
      height: 20px;
      margin-top: -10px;
      padding: 0 @control-padding-horizontal;
      overflow: hidden;
      line-height: 20px;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    &-clear {
      position: absolute;
      top: 50%;
      right: @control-padding-horizontal;
      z-index: 2;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      color: @disabled-color;
      font-size: @font-size-sm;
      line-height: 12px;
      background: @component-background;
      cursor: pointer;
      opacity: 0;
      transition: color 0.3s ease, opacity 0.15s ease;
      &:hover {
        color: @text-color-secondary;
      }
    }

    &:hover &-clear {
      opacity: 1;
    }

    // arrow
    &-arrow {
      position: absolute;
      top: 50%;
      right: @control-padding-horizontal;
      z-index: 1;
      width: 12px;
      height: 12px;
      margin-top: -6px;
      color: @disabled-color;
      font-size: 12px;
      line-height: 12px;
      transition: transform 0.2s;
      &&-expand {
        transform: rotate(180deg);
      }
    }
  }

  &-picker-small &-picker-clear,
  &-picker-small &-picker-arrow {
    right: @control-padding-horizontal-sm;
  }

  &-menus {
    position: absolute;
    z-index: @zindex-dropdown;
    font-size: @font-size-base;
    white-space: nowrap;
    background: @component-background;
    border-radius: @border-radius-base;
    box-shadow: @box-shadow-base;

    ul,
    ol {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    &-empty,
    &-hidden {
      display: none;
    }
    &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-bottomLeft {
      animation-name: antSlideUpIn;
    }

    &.slide-up-enter.slide-up-enter-active&-placement-topLeft,
    &.slide-up-appear.slide-up-appear-active&-placement-topLeft {
      animation-name: antSlideDownIn;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-bottomLeft {
      animation-name: antSlideUpOut;
    }

    &.slide-up-leave.slide-up-leave-active&-placement-topLeft {
      animation-name: antSlideDownOut;
    }
  }
  &-menu {
    display: inline-block;
    min-width: 111px;
    height: 180px;
    margin: 0;
    padding: 0;
    overflow: auto;
    vertical-align: top;
    list-style: none;
    border-right: @border-width-base @border-style-base @border-color-split;
    -ms-overflow-style: -ms-autohiding-scrollbar; // https://github.com/ant-design/ant-design/issues/11857

    &:first-child {
      border-radius: @border-radius-base 0 0 @border-radius-base;
    }
    &:last-child {
      margin-right: -1px;
      border-right-color: transparent;
      border-radius: 0 @border-radius-base @border-radius-base 0;
    }
    &:only-child {
      border-radius: @border-radius-base;
    }
  }
  &-menu-item {
    padding: 5px @control-padding-horizontal;
    line-height: 22px;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
      background: @item-hover-bg;
    }
    &-disabled {
      color: @disabled-color;
      cursor: not-allowed;
      &:hover {
        background: transparent;
      }
    }
    &-active:not(&-disabled) {
      &,
      &:hover {
        font-weight: 600;
        background: @background-color-base;
      }
    }
    &-expand {
      position: relative;
      padding-right: 24px;
    }

    &-expand &-expand-icon,
    &-expand &-loading-icon {
      .iconfont-size-under-12px(10px);
      position: absolute;
      right: @control-padding-horizontal;
      color: @text-color-secondary;
    }

    & &-keyword {
      color: @highlight-color;
    }
  }
}

// style dependencies

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-select-prefix-cls: ~'@{ant-prefix}-select';

.antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);
    display: inline-block;
    font-weight: bold;
    svg {
      transition: transform 0.3s;
    }
  }
}

.antTreeShowLineIcon(@type) {
  .@{tree-prefix-cls}-switcher-icon,
  .@{tree-select-prefix-cls}-switcher-icon {
    display: inline-block;
    font-weight: normal;
    font-size: 12px;
    svg {
      transition: transform 0.3s;
    }
  }
}

@tree-prefix-cls: ~'@{ant-prefix}-tree';

.@{tree-prefix-cls} {
  &.@{tree-prefix-cls}-directory {
    position: relative;

    // Stretch selector width
    > li,
    .@{tree-prefix-cls}-child-tree > li {
      span {
        &.@{tree-prefix-cls}-switcher {
          position: relative;
          z-index: 1;

          &.@{tree-prefix-cls}-switcher-noop {
            pointer-events: none;
          }
        }

        &.@{tree-prefix-cls}-checkbox {
          position: relative;
          z-index: 1;
        }

        &.@{tree-prefix-cls}-node-content-wrapper {
          border-radius: 0;
          user-select: none;

          &:hover {
            background: transparent;

            &::before {
              background: @item-hover-bg;
            }
          }

          &.@{tree-prefix-cls}-node-selected {
            color: @tree-directory-selected-color;
            background: transparent;
          }

          &::before {
            position: absolute;
            right: 0;
            left: 0;
            height: @tree-title-height;
            transition: all 0.3s;
            content: '';
          }

          > span {
            position: relative;
            z-index: 1;
          }
        }
      }

      &.@{tree-prefix-cls}-treenode-selected {
        > span {
          &.@{tree-prefix-cls}-switcher {
            color: @tree-directory-selected-color;
          }

          &.@{tree-prefix-cls}-checkbox {
            .@{tree-prefix-cls}-checkbox-inner {
              border-color: @primary-color;
            }

            &.@{tree-prefix-cls}-checkbox-checked {
              &::after {
                border-color: @checkbox-check-color;
              }

              .@{tree-prefix-cls}-checkbox-inner {
                background: @checkbox-check-color;

                &::after {
                  border-color: @primary-color;
                }
              }
            }
          }

          &.@{tree-prefix-cls}-node-content-wrapper {
            &::before {
              background: @tree-directory-selected-bg;
            }
          }
        }
      }
    }
  }
}

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-showline-icon-color: @text-color-secondary;
@tree-node-padding: 4px;

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');

.@{tree-prefix-cls} {
  .reset-component;
  margin: 0;
  padding: 0;

  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    margin: 0;
    padding: @tree-node-padding 0;
    white-space: nowrap;
    list-style: none;
    outline: 0;
    span[draggable],
    span[draggable='true'] {
      line-height: @tree-title-height - 4px;
      border-top: 2px transparent solid;
      border-bottom: 2px transparent solid;
      user-select: none;
      /* Required to make elements draggable in old WebKit */
      -khtml-user-drag: element;
      -webkit-user-drag: element;
    }
    &.drag-over {
      > span[draggable] {
        color: white;
        background-color: @primary-color;
        opacity: 0.8;
      }
    }
    &.drag-over-gap-top {
      > span[draggable] {
        border-top-color: @primary-color;
      }
    }
    &.drag-over-gap-bottom {
      > span[draggable] {
        border-bottom-color: @primary-color;
      }
    }
    &.filter-node {
      > span {
        color: @highlight-color !important;
        font-weight: 500 !important;
      }
    }

    // When node is loading
    &.@{tree-prefix-cls}-treenode-loading {
      span {
        &.@{tree-prefix-cls}-switcher {
          &.@{tree-prefix-cls}-switcher_open,
          &.@{tree-prefix-cls}-switcher_close {
            .@{tree-prefix-cls}-switcher-loading-icon {
              position: absolute;
              left: 0;
              display: inline-block;
              width: 24px;
              height: 24px;
              color: @primary-color;
              font-size: 14px;
              transform: none;
              svg {
                position: absolute;
                top: 0;
                right: 0;
                bottom: 0;
                left: 0;
                margin: auto;
              }
            }

            :root &::after {
              opacity: 0;
            }
          }
        }
      }
    }

    ul {
      margin: 0;
      padding: 0 0 0 @tree-child-padding;
    }
    .@{tree-prefix-cls}-node-content-wrapper {
      display: inline-block;
      height: @tree-title-height;
      margin: 0;
      padding: 0 5px;
      color: @text-color;
      line-height: @tree-title-height;
      text-decoration: none;
      vertical-align: top;
      border-radius: @border-radius-sm;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: @item-hover-bg;
      }
      &.@{tree-prefix-cls}-node-selected {
        background-color: @primary-2;
      }
    }
    span {
      &.@{tree-prefix-cls}-checkbox {
        margin: 4px 4px 0 2px;
      }
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0;
        line-height: @tree-title-height;
        text-align: center;
        vertical-align: top;
        border: 0 none;
        outline: none;
        cursor: pointer;
      }

      &.@{tree-prefix-cls}-switcher {
        position: relative;

        &.@{tree-prefix-cls}-switcher-noop {
          cursor: default;
        }
        &.@{tree-prefix-cls}-switcher_open {
          .antTreeSwitcherIcon();
        }
        &.@{tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
          .@{tree-prefix-cls}-switcher-icon {
            svg {
              transform: rotate(-90deg);
            }
          }
        }
      }
    }
    &:last-child > span {
      &.@{tree-prefix-cls}-switcher,
      &.@{tree-prefix-cls}-iconEle {
        &::before {
          display: none;
        }
      }
    }
  }

  > li {
    &:first-child {
      padding-top: 7px;
    }
    &:last-child {
      padding-bottom: 7px;
    }
  }
  &-child-tree {
    display: none;
    &-open {
      display: block;
    }

    // https://github.com/ant-design/ant-design/issues/14958
    > li {
      // Provide additional padding between top child node and parent node
      &:first-child {
        padding-top: 2 * @tree-node-padding;
      }

      // Hide additional padding between last child node and next parent node
      &:last-child {
        padding-bottom: 0;
      }
    }
  }
  li&-treenode-disabled {
    > span:not(.@{tree-prefix-cls}-switcher),
    > .@{tree-prefix-cls}-node-content-wrapper,
    > .@{tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
  // Tree with line
  &&-show-line {
    li {
      position: relative;
      span {
        &.@{tree-prefix-cls}-switcher {
          color: @tree-showline-icon-color;
          background: @component-background;
          &.@{tree-prefix-cls}-switcher-noop {
            .antTreeShowLineIcon('tree-doc-icon');
          }
          &.@{tree-prefix-cls}-switcher_open {
            .antTreeShowLineIcon('tree-showline-open-icon');
          }
          &.@{tree-prefix-cls}-switcher_close {
            .antTreeShowLineIcon('tree-showline-close-icon');
          }
        }
      }
    }
    li:not(:last-child)::before {
      position: absolute;
      left: 12px;
      width: 1px;
      height: 100%;
      margin: 22px 0;
      border-left: 1px solid @border-color-base;
      content: ' ';
    }
  }

  &.@{tree-prefix-cls}-icon-hide {
    .@{tree-prefix-cls}-treenode-loading {
      .@{tree-prefix-cls}-iconEle {
        display: none;
      }
    }
  }

  &.@{tree-prefix-cls}-block-node {
    li {
      .@{tree-prefix-cls}-node-content-wrapper {
        width: ~'calc(100% - 24px)';
      }
      span {
        &.@{tree-prefix-cls}-checkbox {
          + .@{tree-prefix-cls}-node-content-wrapper {
            width: ~'calc(100% - 46px)';
          }
        }
      }
    }
  }
}

/*
 * @license
 * Copyright Alibaba.com All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
 */

.ant-tree {
  &.ant-tree-show-line {
    > nz-tree-node:not(:last-child), .ant-tree-child-tree > nz-tree-node:not(:last-child) {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 1px solid @border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }

    .ant-tree-child-tree > nz-tree-node:last-child {
      > li:before {
        content: ' ';
        width: 1px;
        border-left: 0px solid @border-color-base;
        height: 100%;
        position: absolute;
        left: 12px;
        margin: 22px 0;
      }
    }
  }

  .font-highlight {
    color: @highlight-color;
  }
}

@select-prefix-cls: ~'@{ant-prefix}-select';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';

.antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-select-tree-checkbox');

.@{select-tree-prefix-cls} {
  .reset-component;
  margin: 0;
  margin-top: -4px;
  padding: 0 4px;
  li {
    margin: 8px 0;
    padding: 0;
    white-space: nowrap;
    list-style: none;
    outline: 0;
    &.filter-node {
      > span {
        font-weight: 500;
      }
    }
    ul {
      margin: 0;
      padding: 0 0 0 18px;
    }
    .@{select-tree-prefix-cls}-node-content-wrapper {
      display: inline-block;
      width: ~'calc(100% - 24px)';
      margin: 0;
      padding: 3px 5px;
      color: @text-color;
      text-decoration: none;
      border-radius: 2px;
      cursor: pointer;
      transition: all 0.3s;
      &:hover {
        background-color: @item-hover-bg;
      }
      &.@{select-tree-prefix-cls}-node-selected {
        background-color: @primary-2;
      }
    }
    span {
      &.@{select-tree-prefix-cls}-checkbox {
        margin: 0 4px 0 0;
        + .@{select-tree-prefix-cls}-node-content-wrapper {
          width: ~'calc(100% - 46px)';
        }
      }
      &.@{select-tree-prefix-cls}-switcher,
      &.@{select-tree-prefix-cls}-iconEle {
        display: inline-block;
        width: 24px;
        height: 24px;
        margin: 0;
        line-height: 22px;
        text-align: center;
        vertical-align: middle;
        border: 0 none;
        outline: none;
        cursor: pointer;
      }
      &.@{select-prefix-cls}-icon_loading {
        .@{select-prefix-cls}-switcher-loading-icon {
          position: absolute;
          left: 0;
          display: inline-block;
          color: @primary-color;
          font-size: 14px;
          transform: none;
          svg {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            margin: auto;
          }
        }
      }
      &.@{select-tree-prefix-cls}-switcher {
        position: relative;
        &.@{select-tree-prefix-cls}-switcher-noop {
          cursor: auto;
        }
        &.@{select-tree-prefix-cls}-switcher_open {
          .antTreeSwitcherIcon();
        }
        &.@{select-tree-prefix-cls}-switcher_close {
          .antTreeSwitcherIcon();
          .@{select-prefix-cls}-switcher-icon {
            svg {
              transform: rotate(-90deg);
            }
          }
        }

        &.@{select-tree-prefix-cls}-switcher_open,
        &.@{select-tree-prefix-cls}-switcher_close {
          .@{select-prefix-cls}-switcher-loading-icon {
            position: absolute;
            left: 0;
            display: inline-block;
            width: 24px;
            height: 24px;
            color: @primary-color;
            font-size: 14px;
            transform: none;
            svg {
              position: absolute;
              top: 0;
              right: 0;
              bottom: 0;
              left: 0;
              margin: auto;
            }
          }
        }
      }
    }
  }

  .@{select-tree-prefix-cls}-treenode-loading {
    .@{select-tree-prefix-cls}-iconEle {
      display: none;
    }
  }
  &-child-tree {
    display: none;
    &-open {
      display: block;
    }
  }
  li&-treenode-disabled {
    > span:not(.@{select-tree-prefix-cls}-switcher),
    > .@{select-tree-prefix-cls}-node-content-wrapper,
    > .@{select-tree-prefix-cls}-node-content-wrapper span {
      color: @disabled-color;
      cursor: not-allowed;
    }
    > .@{select-tree-prefix-cls}-node-content-wrapper:hover {
      background: transparent;
    }
  }
  &-icon__open {
    margin-right: 2px;
    vertical-align: top;
  }
  &-icon__close {
    margin-right: 2px;
    vertical-align: top;
  }
}

.@{select-prefix-cls}-tree-dropdown {
  .reset-component;
  .@{select-prefix-cls}-dropdown-search {
    position: sticky;
    top: 0;
    z-index: 1;
    display: block;
    padding: 4px;
    background: @component-background;
    .@{select-prefix-cls}-search__field__wrap {
      width: 100%;
    }
    .@{select-prefix-cls}-search__field {
      box-sizing: border-box;
      width: 100%;
      padding: 4px 7px;
      border: @border-width-base @border-style-base @border-color-base;
      border-radius: 4px;
      outline: none;
    }
    &.@{select-prefix-cls}-search--hide {
      display: none;
    }
  }
  .@{select-prefix-cls}-not-found {
    display: block;
    padding: 7px 16px;
    color: @disabled-color;
    cursor: not-allowed;
  }
}

// style dependencies
// deps-lint-skip: select

@full-calendar-prefix-cls: ~'@{ant-prefix}-fullcalendar';

.@{full-calendar-prefix-cls} {
  .reset-component;
  border-top: @border-width-base @border-style-base @border-color-base;
  outline: none;

  .@{ant-prefix}-select&-year-select {
    min-width: 90px;

    &.@{ant-prefix}-select-sm {
      min-width: 70px;
    }
  }

  .@{ant-prefix}-select&-month-select {
    min-width: 80px;
    margin-left: 8px;

    &.@{ant-prefix}-select-sm {
      min-width: 60px;
    }
  }

  &-header {
    padding: 11px 16px 11px 0;
    text-align: right;

    .@{ant-prefix}-select-dropdown {
      text-align: left;
    }

    .@{ant-prefix}-radio-group {
      margin-left: 8px;
      text-align: left;
    }

    label.@{ant-prefix}-radio-button {
      height: 22px;
      padding: 0 10px;
      line-height: 20px;
    }
  }

  &-date-panel {
    position: relative;
    outline: none;
  }

  &-calendar-body {
    padding: 8px 12px;
  }

  table {
    width: 100%;
    max-width: 100%;
    height: 256px;
    background-color: transparent;
    border-collapse: collapse;
  }

  table,
  th,
  td {
    border: 0;
  }

  td {
    position: relative;
  }

  &-calendar-table {
    margin-bottom: 0;
    border-spacing: 0;
  }

  &-column-header {
    width: 33px;
    padding: 0;
    line-height: 18px;
    text-align: center;
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: block;
      font-weight: normal;
    }
  }

  &-week-number-header {
    .@{full-calendar-prefix-cls}-column-header-inner {
      display: none;
    }
  }

  &-month,
  &-date {
    text-align: center;
    transition: all 0.3s;
  }

  &-value {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto;
    padding: 0;
    color: @text-color;
    line-height: 24px;
    background: transparent;
    border-radius: @border-radius-sm;
    transition: all 0.3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      color: @text-color-inverse;
      background: @primary-color;
    }
  }

  &-month-panel-cell &-value {
    width: 48px;
  }

  &-today &-value,
  &-month-panel-current-cell &-value {
    box-shadow: 0 0 0 1px @primary-color inset;
  }

  &-selected-day &-value,
  &-month-panel-selected-cell &-value {
    color: @text-color-inverse;
    background: @primary-color;
  }

  &-disabled-cell-first-of-row &-value {
    border-top-left-radius: @border-radius-base;
    border-bottom-left-radius: @border-radius-base;
  }

  &-disabled-cell-last-of-row &-value {
    border-top-right-radius: @border-radius-base;
    border-bottom-right-radius: @border-radius-base;
  }

  &-last-month-cell &-value,
  &-next-month-btn-day &-value {
    color: @disabled-color;
  }

  &-month-panel-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
  }

  &-content {
    position: absolute;
    bottom: -9px;
    left: 0;
    width: 100%;
  }

  &-fullscreen {
    border-top: 0;
  }

  &-fullscreen &-table {
    table-layout: fixed;
  }

  &-fullscreen &-header {
    .@{ant-prefix}-radio-group {
      margin-left: 16px;
    }
    label.@{ant-prefix}-radio-button {
      height: @input-height-base;
      line-height: @input-height-base - 2px;
    }
  }

  &-fullscreen &-month,
  &-fullscreen &-date {
    display: block;
    height: 116px;
    margin: 0 4px;
    padding: 4px 8px;
    color: @text-color;
    text-align: left;
    border-top: 2px solid @border-color-split;
    transition: background 0.3s;

    &:hover {
      background: @item-hover-bg;
      cursor: pointer;
    }

    &:active {
      background: @primary-2;
    }
  }

  &-fullscreen &-column-header {
    padding-right: 12px;
    padding-bottom: 5px;
    text-align: right;
  }

  &-fullscreen &-value {
    width: auto;
    text-align: right;
    background: transparent;
  }

  &-fullscreen &-today &-value {
    color: @text-color;
  }

  &-fullscreen &-month-panel-current-cell &-month,
  &-fullscreen &-today &-date {
    background: transparent;
    border-top-color: @primary-color;
  }

  &-fullscreen &-month-panel-current-cell &-value,
  &-fullscreen &-today &-value {
    box-shadow: none;
  }

  &-fullscreen &-month-panel-selected-cell &-month,
  &-fullscreen &-selected-day &-date {
    background: @primary-1;
  }

  &-fullscreen &-month-panel-selected-cell &-value,
  &-fullscreen &-selected-day &-value {
    color: @primary-color;
  }

  &-fullscreen &-last-month-cell &-date,
  &-fullscreen &-next-month-btn-day &-date {
    color: @disabled-color;
  }

  &-fullscreen &-content {
    position: static;
    width: auto;
    height: 88px;
    overflow-y: auto;
  }

  &-disabled-cell &-date {
    &,
    &:hover {
      cursor: not-allowed;
    }
  }

  &-disabled-cell:not(&-today) &-date {
    &,
    &:hover {
      background: transparent;
    }
  }

  &-disabled-cell &-value {
    width: auto;
    color: @disabled-color;
    border-radius: 0;
    cursor: not-allowed;
  }
}

// style dependencies

// FIXED-CHECK
// fix: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1360
// // antd
// @import '../../../../node_modules/ng-zorro-antd/style/index.less';
// // grid muse be first
// @import '../../../../node_modules/ng-zorro-antd/grid/style/index.less';

// @import '../../../../node_modules/ng-zorro-antd/affix/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/alert/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/anchor/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/avatar/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/back-top/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/badge/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/breadcrumb/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/button/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/calendar/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/card/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/carousel/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/cascader/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/checkbox/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/collapse/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/core/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/divider/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/dropdown/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/form/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/input/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/input-number/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/layout/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/list/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/menu/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/mention/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/message/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/modal/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/notification/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/pagination/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/popconfirm/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/popover/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/progress/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/radio/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/rate/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/select/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/slider/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/spin/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/steps/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/switch/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/table/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/tabs/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/tag/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/time-picker/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/timeline/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/tooltip/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/transfer/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/upload/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/auto-complete/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/tree/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/date-picker/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/drawer/style/index.less';
// @import '../../../../node_modules/ng-zorro-antd/skeleton/style/index.less';

// app
.freakMixin() {
  @functions: ~`(function() {
        function toColorList(list) {
            list = list.slice(1, list.length - 1).split(',');
            var ret = [];
            for (var i = 0, c = list.length; i < c; i++) {
                ret.push(list[i].trim().split(' '));
            }
            return ret;
        }

        var catchColors;
        function _initColor(list) {
            if (!catchColors) catchColors = toColorList(list);
        }

        this.getColor = function(list, name, position) {
            _initColor(list);
            var ret = '';
            for (var i = 0, c = catchColors.length; i < c; i++) {
                if (catchColors[i][0] === name) {
                    ret = catchColors[i][position - 1];
                    break;
                }
            }
            return ret;
        }
    })()`;
}

.freakMixin();
// Color contrast
.color-yiq(@color) {
  .yiq-mixin (@v) when (@v >= 150) {
    color: #111;
  }
  .yiq-mixin (@v) when (default()) {
    color: #fff;
  }

  @r: red(@color);
  @g: green(@color);
  @b: blue(@color);

  @yiq: ((@r * 299) + (@g * 587) + (@b * 114)) / 1000;
  .yiq-mixin(@yiq);
}

// Basic loop
.for(@adList, @adCode) {
  & {
    .loop(@adI:1) when (@adI =< length(@adList)) {
      @adIndex: @adI - 1;
      @adItem: extract(@adList, @adI);

      @adCode();

      .loop(@adI + 1);
    }
    .loop();
  }
}

.for-each(@adList, @adCode) {
  & {
    .loop(@adI:1) when (@adI =< length(@adList)) {
      @adIndex: @adI - 1;
      @adItem: extract(@adList, @adI);
      @adKey: extract(@adItem, 1);
      @adValue: extract(@adItem, 2);

      @adCode();

      .loop(@adI + 1);
    }
    .loop();
  }
}

// Angular
// router ant
@router-animation-name: antFadeIn;
@router-animation-duration: 1s;

// https://github.com/angular/angular/issues/9845
// 一种路由切换动画的简单实现
app-layout router-outlet + * {
  display: block;
  animation-duration: @router-animation-duration;
  // animation-fill-mode: both;
  animation-name: @router-animation-name; // fadeIn;
}

.preserve-white-spaces-mixin(@enabled) when (@enabled=true) {
  sf + st {
    margin-top: @preserve-sf-and-st-spaces;
  }

  // button + button
  .@{ant-prefix}-btn + .@{ant-prefix}-btn,
  .@{ant-prefix}-btn + nz-popconfirm,
  nz-popconfirm + .@{ant-prefix}-btn,
  nz-popconfirm + nz-popconfirm,
  .@{ant-prefix}-btn + nz-button-group,
  nz-button-group + .@{ant-prefix}-btn,
  .@{ant-prefix}-btn + nz-dropdown,
  nz-dropdown + .@{ant-prefix}-btn,
  nz-popconfirm + nz-button-group,
  nz-button-group + nz-popconfirm {
    margin-left: @preserve-buttons-spaces;
  }
  .@{ant-prefix}-btn-group {
    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
      margin-left: -1px;
    }
  }

  // fix ng-zorro-antd components
  .@{ant-prefix}-transfer-operation {
    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
      margin-left: initial;
    }
  }
}

.preserve-white-spaces-mixin(@preserve-white-spaces-enabled);

@form-state-visual-feedback-enabled: false;

.form-state-visual-feedback-mixin(@enabled) when (@enabled = true) {
  .ng-invalid {
    &:focus {
      box-shadow: 0 0 @outline-blur-size @outline-width fade-out(@error-color, .8);
    }
    &,
    &:hover {
      border-color: @error-color;
    }
  }
}

.form-state-visual-feedback-mixin(@form-state-visual-feedback-enabled);

// Antd patch
// 修复点击后，鼠标的移动会倒置目标出现下划线
a:focus {
  text-decoration: none;
}

.@{ant-prefix}-card {
  margin-bottom: @md;
}

// Body no padding
.@{ant-prefix}-card__body-nopadding {
  .@{ant-prefix}-card-body {
    padding: 0 !important;
  }
}

.@{ant-prefix}-drawer {
  &-left,
  &-right {
    @media (min-width: @drawer-sm) {
      .drawer-sm {
        max-width: @drawer-sm;
        width: auto !important;
      }
    }
    @media (max-width: @drawer-sm - 1) {
      .drawer-sm {
        width: 100% !important;
      }
    }

    @media (min-width: @drawer-md) {
      .drawer-md {
        max-width: @drawer-md;
        width: auto !important;
      }
    }
    @media (max-width: @drawer-md - 1) {
      .drawer-md {
        width: 100% !important;
      }
    }

    @media (min-width: @drawer-lg) {
      .drawer-lg {
        max-width: @drawer-lg;
        width: auto !important;
      }
    }
    @media (max-width: @drawer-lg - 1) {
      .drawer-lg {
        width: 100% !important;
      }
    }

    @media (min-width: @drawer-xl) {
      .drawer-xl {
        max-width: @drawer-xl;
        width: auto !important;
      }
    }
    @media (max-width: @drawer-xl - 1) {
      .drawer-xl {
        width: 100% !important;
      }
    }
  }
}

.drawer {
  &-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    background: #fff;
  }
}

.@{ant-prefix}-form-item-label {
  em {
    color: @grey-6;
  }
}

.@{ant-prefix}-form-item-children {
  em {
    margin-left: @layout-gutter;
  }
}

// Small screen / tablet
@media (min-width: @screen-sm) {
  .modal-sm .@{ant-prefix}-modal {
    max-width: @modal-sm;
    width: auto !important;
  }
}

// Medium screen / desktop
@media (min-width: @screen-md) {
  .modal-md .@{ant-prefix}-modal {
    max-width: @modal-md;
    width: auto !important;
  }
}

// Large screen / wide desktop
@media (min-width: @screen-lg) {
  .modal-lg .@{ant-prefix}-modal {
    max-width: @modal-lg;
    width: auto !important;
  }
}

// Extra large screen / large descktop
@media (min-width: @screen-xxl) {
  .modal-xl .@{ant-prefix}-modal {
    max-width: @modal-xl;
    width: auto !important;
  }
}

// 自定义模态框时非常有用，主要运用于查看、编辑页
.modal {
  &-header {
    padding: 16px 24px;
    margin: -24px -24px 24px -24px;
    border-radius: @border-radius-base @border-radius-base 0 0;
    background: @component-background;
    border-bottom: @border-width-base @border-style-base @border-color-split;
    display: flex;
    justify-content: space-between;
  }
  &-title {
    font-size: @font-size-lg;
    font-weight: 500;
    line-height: 22px;
    color: @heading-color;
    small {
      color: @muted-color;
      font-size: 12px;
      margin-left: @layout-gutter;
    }
  }
  &-spin {
    display: block;
    min-height: 150px;
    line-height: 150px;
    text-align: center;
  }
  &-footer {
    border-top: @border-width-base @border-style-base @border-color-split;
    padding: 10px 16px;
    text-align: right;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    margin: 24px -24px -24px -24px;
  }
  &-include-tabs {
    nz-tabset {
      margin-top: -16px;
    }
  }
  &-body-nopadding {
    .@{ant-prefix}-modal-body {
      padding: 0 !important;
    }
  }
}

.@{ant-prefix}-table {
  td {
    > img,
    .img {
      border-radius: @nz-table-img-radius;
      vertical-align: middle;
      margin-right: @nz-table-img-margin-right;
      max-height: @nz-table-img-max-height;
      max-width: @nz-table-img-max-width;
    }
  }
}

.@{ant-prefix}-table-rep {
  &__title {
    display: none;
  }
  &__hide-header-footer {
    .@{ant-prefix}-table-title,
    .@{ant-prefix}-table-footer {
      display: none;
    }
  }
}

@media screen and (max-width: @nz-table-rep-max-width) {
  .@{ant-prefix}-table {
    &-rep {
      &__title {
        display: inline-block;
        width: @nz-table-rep-column-name-width;
        text-align: @nz-table-rep-column-name-text-align;
        padding-right: @nz-table-rep-column-name-padding-right;
        color: @nz-table-rep-column-name-color;
      }
      &__hide-header-footer {
        .@{ant-prefix}-table-title,
        .@{ant-prefix}-table-footer {
          display: block;
        }
      }
    }
    &-thead {
      display: none;
    }
    &-title {
      background: @nz-table-rep-header-background;
      text-align: center;
    }
    &-tbody {
      > tr {
        &:nth-child(3n) {
          background: @nz-table-rep-even-background;
        }
        > td {
          width: 100%;
          display: flex;
          align-items: center;
          text-align: left !important;
          border-bottom: none;
          padding: @nz-table-rep-padding-vertical @nz-table-rep-padding-horizontal;

          .@{ant-prefix}-table-rep__title + *:not(.@{ant-prefix}-avatar) {
            flex: 1;
          }
        }
      }
    }
  }
}

.@{ant-prefix}-tag {
  &__plus {
    .@{ant-prefix}-tag {
      background: #fff;
      border-style: dashed;
    }
  }
}

.forced-turn-off-nz-modal-animation-mixin(@enabled) when (@enabled=true) {
  .@{ant-prefix}-modal {
    &,
    &-mask {
      animation-duration: unset !important;
    }
  }
}

.forced-turn-off-nz-modal-animation-mixin(@forced-turn-off-nz-modal-animation-enabled);

// Core CSS
.h1,
.h2,
.h3 {
  small,
  .small {
    font-size: 65%;
  }
}

.h4,
.h5,
.h6 {
  small,
  .small {
    font-size: 75%;
  }
}

.h1 {
  font-size: @h1-font-size !important;
}

.h2 {
  font-size: @h2-font-size !important;
}

.h3 {
  font-size: @h3-font-size !important;
}

.h4 {
  font-size: @h4-font-size !important;
}

.h5 {
  font-size: @h5-font-size !important;
}

.h6 {
  font-size: @h6-font-size !important;
}

// List
.list-styled {
  padding-left: @ul-ol-margin;
  list-style: inherit;
}

.list-unstyled {
  padding-left: 0;
  list-style: none;
}

// Forms
fieldset {
  border: none;
}

// Display
.display-1 {
  font-size: 32px;
}

.display-2 {
  font-size: 24px;
}

.display-3 {
  font-size: 20px;
}

// widgets
// 中心元素
@abs-enabled: true;

.widget-abs-mixin(@enabled) when (@enabled=true) {
  .abs-center-container {
    position: relative;
  }

  .abs-center {
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    &.abs-fixed {
      position: fixed;
      z-index: 999;
    }
    &.abs-right {
      left: auto;
      right: 20px;
      text-align: right;
    }
    &.abs-left {
      right: auto;
      left: 20px;
      text-align: left;
    }
  }

  @media (max-width: 320px) {
    .abs-center {
      padding: 0 10px;
    }
  }

  @media (max-height: @mobile-max) {
    .abs-center {
      position: relative;
    }
  }
}

.widget-abs-mixin(@abs-enabled);

// Badges
@badge-enabled: true;
@badge-color: @white;
@badge-font-size: @font-size-base;
@badge-padding: 0 8px;

.widget-badge-mixin(@enabled) when (@enabled=true) {

  .badge {
    display: inline-block;
    padding: @badge-padding;
    font-size: @badge-font-size;
    line-height: 20px;
    color: @badge-color;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: @border-radius-base;

    // Empty badges collapse automatically
    &:empty {
      display: none;
    }

    em {
      font-style: normal;
    }

    &-dot {
      display: inline-block;
      width: @layout-gutter;
      height: @layout-gutter;
      padding: 0;
      border-radius: 50%;
      > * {
        display: none;
      }
    }
  }

  // Colors
  .badge-variant(@bg) {
    .color-yiq(@bg);
    background-color: @bg;
  }

  .for-each(@colors, { .badge-@{adKey} {
    .badge-variant(extract(@adItem, @color-basic-position));
  } });

  .for-each(@aliasColors, { @aliasColor: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})`; .badge-@{adKey} {
    .badge-variant(color(@aliasColor))
  } });

}

.widget-badge-mixin(@badge-enabled);

@search-form-enabled: false;
@search-form-bg: #fbfbfb;
@search-form-radius: 4px;

@search__form-enabled: true;

.search-form-mixin(@enabled) when (@enabled = true) {
  .search-form {
    background: @search-form-bg;
    padding: @layout-gutter;
    border: @border-width-base @border-style-base @border-color-split;
    border-radius: @search-form-radius;
    margin-bottom: @layout-gutter * 2;
  }
}

.search-form-mixin(@search-form-enabled);

.search__form-mixin(@enabled) when (@enabled = true) {
  .search {
    &__form {
      // FIXED-CHECK
      // // BUG: https://github.com/NG-ZORRO/ng-zorro-antd/issues/1202
      // &.@{ant-prefix}-form-inline {
      //   .@{ant-prefix}-form-item-label,
      //   .@{ant-prefix}-form-item-control-wrapper {
      //     padding: 0 !important;
      //   }
      // }
      .@{ant-prefix}-form-item {
        margin-bottom: 24px;
        margin-right: 0;
        display: flex;
        > .@{ant-prefix}-form-item-label {
          width: auto;
          line-height: 32px;
          padding-right: 8px;
        }
        .@{ant-prefix}-form-item-control {
          line-height: 32px;
        }
      }
      .@{ant-prefix}-form-item-control-wrapper {
        flex: 1;
      }
    }
  }
}

.search__form-mixin(@search__form-enabled);

@hafl-enabled: true;
@hafl-float-size: sm @layout-gutter * 8,
md @layout-gutter * 10,
lg @layout-gutter * 12;

.widget-hafl-mixin(@enabled) when (@enabled=true) {

  .half-float {
    position: relative;
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    .half-float-bottom {
      position: absolute;
      left: 50%;
      z-index: 2;
    }

    .for-each(@hafl-float-size, { &.half-float-@{adKey} {
      margin-bottom: (@adValue / 2) + 10;
      .half-float-bottom {
        bottom: -(@adValue / 2);
        width: @adValue;
        height: @adValue;
        margin-left: -(@adValue / 2);
      }
    } });
  }

}

.widget-hafl-mixin(@hafl-enabled);

// masonry
@masonry-enabled: true;
@masonry-column-gap: @layout-gutter * 2;

.widget-masonry-mixin(@enabled) when (@enabled=true) {

  .row-masonry {
    position: relative;
    margin: 0;
    padding: 0;
    width: 100%;
    column-gap: @masonry-column-gap;
    > .col-masonry {
      display: inline-block;
      width: 100%;
      min-height: 1em;
      margin-bottom: 15px;
    }
    img {
      max-width: 100%;
    }
  }

  .for-each(@grid-breakpoints, { @media only screen and (min-width: @adValue) {
    .loopColumn(@pos: 1) when (@pos < 10) {
      .row-masonry-@{adKey}-@{pos} {
        column-count: @pos;
        columns: @pos;
      }
      .loopColumn(@pos + 1);
    }
    .loopColumn();
  } });

}

.widget-masonry-mixin(@masonry-enabled);

.header-dropdown {
  background-color: #fff;
  box-shadow: @shadow-1-down;
  border-radius: 4px;
}

@media screen and (max-width: @screen-xs) {
  .header-dropdown {
    width: 100% !important;
    right: 0 !important;
    left: 0 !important;
    border-radius: 0 !important;
  }
}

// @delon
@sf-prefix: ~'.sf';
@sf-title-text-align: left;

@{sf-prefix} {
  display: block;
  &__optional {
    color: rgba(0, 0, 0, 0.45);
  }
  // 固定 label
  &__fixed {
    display: flex !important;
    nz-form-control,
    .@{ant-prefix}-form-item-control-wrapper {
      flex: 1;
    }
  }
  &__title {
    margin-bottom: 8px;
    padding: 0 16px;
    font-weight: 700;
    text-align: @sf-title-text-align;
  }
  // Array
  &__array {
    &-add {
      margin-right: 16px;
    }
    &-container {
      nz-card {
        margin: 0 16px 0 0;
        .remove {
          display: none;
          position: absolute;
          right: -16px;
          top: -16px;
          font-size: 20px;
          text-align: center;
          height: 32px;
          line-height: 32px;
          width: 32px;
          background: rgba(0, 0, 0, 0.26);
          border-radius: 50%;
          cursor: pointer;
          i {
            color: #fff;
          }
        }
        &:hover {
          .remove {
            display: block;
          }
        }
      }
    }
  }
  &__checkbox-list {
    width: 100%;
    display: block;
    @media (min-width: @mobile-min) {
      nz-col {
        margin-top: 8px;
      }
    }
  }
  // upload
  .@{ant-prefix}-upload-select-picture-card i {
    font-size: 32px;
    color: #999;
  }
  .@{ant-prefix}-upload.@{ant-prefix}-upload-drag {
    height: 180px;
  }
  // transfer
  .@{ant-prefix}-transfer {
    &-list {
      background: #fff;
      &-header {
        label {
          position: unset;
        }
      }
    }
    .@{ant-prefix}-btn + .@{ant-prefix}-btn {
      margin-left: 0;
    }
  }
  // fix select width when inline mode
  .@{ant-prefix}-form-inline {
    sf-select {
      .@{ant-prefix}-form-item {
        display: inline-flex;
        > .@{ant-prefix}-form-item-control-wrapper {
          flex: 1 0 0;
        }
      }
    }
  }
  &__no-error {
    .@{ant-prefix}-form-item {
      margin-bottom: 8px;
    }
  }
  &__inline {
    sf-item-wrap {
      .@{ant-prefix}-form-item {
        display: inline-flex;
        .@{ant-prefix}-form-item-control-wrapper {
          flex: 1;
        }
      }
    }
    .sf-btns {
      margin-right: 0;
    }
    @media (max-width: @mobile-max) {
      sf-item-wrap {
        .@{ant-prefix}-form-item {
          display: block !important;
          width: initial !important;
          margin-right: 0;;
        }
      }

      .@{ant-prefix}-form-item-label, .@{ant-prefix}-form-item-control-wrapper {
        display: block !important;
        width: 100% !important;
        padding: inherit;
        line-height: @form-component-max-height - 0.0001px;
        text-align: left;
      }
    }
  }
}

.acl__hide {
  display: none !important;
}

@setting-drawer-enabled: true;
@setting-drawer-prefix: ~'.setting-drawer';
@setting-drawer-width: 500px;

.widget-setting-drawer-mixin(@enabled) when (@enabled=true) {
  @{setting-drawer-prefix} {
    &__content {
      min-height: 100%;
      background: #fff;
      position: relative;
    }
    &__body {
      &-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 12px;
        padding-top: 12px;
        &:first-child {
          padding-top: 0;
        }
        &:last-child {
          padding-bottom: 0;
        }
      }
    }
    &__title {
      font-size: 14px;
      color: @heading-color;
      line-height: 22px;
      margin-bottom: 12px;
    }
    &__theme {
      margin-top: 24px;
      overflow: hidden;
      &-tag {
        width: 20px;
        height: 20px;
        border-radius: 2px;
        float: left;
        cursor: pointer;
        margin-right: 8px;
        text-align: center;
        color: #fff;
        font-weight: bold;
      }
    }
    &__handle {
      position: fixed;
      top: 240px;
      background: @primary-color;
      width: 48px;
      height: 48px;
      right: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      pointer-events: auto;
      z-index: @zindex-modal-mask - 1;
      text-align: center;
      font-size: 16px;
      border-radius: 4px 0 0 4px;
      transition: right @animation-duration-slow @ease-base-in;
      &-icon {
        color: #fff;
        font-size: 20px;
      }
      &-opened {
        right: @setting-drawer-width;
        z-index: @zindex-modal-mask + 1;
      }
    }
  }
}

.widget-setting-drawer-mixin(@setting-drawer-enabled);

@yn-prefix: ~'.yn';
@yn-yes-color: @blue-6;
@yn-no-color: @grey-7;

@{yn-prefix} {
  &__yes,
  &__no {
    display: inline-flex;
    align-items: center;
    font-style: normal;
    span {
      margin-left: 4px;
    }
  }
  &__yes {
    color: @yn-yes-color;
  }
  &__no {
    color: @yn-no-color;
  }
}

// Utils
.align-baseline {
  vertical-align: baseline !important;
}

// Browser default
.align-top {
  vertical-align: top !important;
}

.align-middle {
  vertical-align: middle !important;
}

.align-bottom {
  vertical-align: bottom !important;
}

.align-text-bottom {
  vertical-align: text-bottom !important;
}

.align-text-top {
  vertical-align: text-top !important;
}

// see https://ant.design/docs/spec/colors#Neutral-color-application
@border-color: @border-color-split;
@border-grids: sm @border-radius-sm,
md @border-radius-md,
lg @border-radius-lg;

.border {
  border: 1px solid @border-color !important;
}

@border-width-list: 0, 1;
.for(@border-width-list, { .border-css-mixin(@i) when (@i > 0) {
  @css-value: ~"@{i}px solid @{border-color}";
} .border-css-mixin(@i) when (default()) {
  @css-value: 0;
} .border-css-mixin(@adIndex); .border-@{adIndex} {
  border: @css-value !important;
} .border-top-@{adIndex} {
    border-top: @css-value !important;
  } .border-right-@{adIndex} {
      border-right: @css-value !important;
    } .border-bottom-@{adIndex} {
        border-bottom: @css-value !important;
      } .border-left-@{adIndex} {
          border-left: @css-value !important;
        } });

// color
.for-each(@colors, { .border-@{adKey} {
  border-color: extract(@adItem, @color-basic-position) !important;
} });

.for-each(@aliasColors, { .border-@{adKey} {
  border-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
} });

.border-white {
  border-color: #fff !important;
}

// Border-radius
.for-each(@border-grids, { .rounded-@{adKey} {
  border-radius: @adValue !important;
} .rounded-top-left-@{adKey} {
    border-top-left-radius: @adValue !important;
  } .rounded-top-right-@{adKey} {
      border-top-right-radius: @adValue !important;
    } .rounded-bottom-left-@{adKey} {
        border-bottom-left-radius: @adValue !important;
      } .rounded-bottom-right-@{adKey} {
          border-bottom-right-radius: @adValue !important;
        } });

.rounded-circle {
  border-radius: 50%;
}

.rounded-0 {
  border-radius: 0;
}

// Inline code
code {
  padding: 2px 4px;
  margin: 0 4px;
  font-size: 90%;
  background-color: @code-bg;
  border: 1px solid @code-border-color;
  border-radius: @border-radius-base;
}

// color
.bg-white {
  background-color: #fff !important;
}

.bg-transparent {
  background-color: transparent !important;
}

.text-white {
  color: #fff !important;
}

.text-hover {
  cursor: pointer;
  &:hover {
    color: @primary-color !important;
  }
}

.for-each(@colors, { .bg-@{adKey}-light {
  background-color: extract(@adItem, @color-light-position) !important;
} .bg-@{adKey} {
    background-color: extract(@adItem, @color-basic-position) !important;
  } .bg-@{adKey}-dark {
      background-color: extract(@adItem, @color-dark-position) !important;
    } .bg-@{adKey}-light-h {
        transition: background-color 300ms;
        &:hover {
          background-color: extract(@adItem, @color-light-position) !important;
        }
      } .bg-@{adKey}-h {
          transition: background-color 300ms;
          &:hover {
            background-color: extract(@adItem, @color-basic-position) !important;
          }
        } .bg-@{adKey}-dark-h {
            transition: background-color 300ms;
            &:hover {
              background-color: extract(@adItem, @color-dark-position) !important;
            }
          } .text-@{adKey}-light {
              color: extract(@adItem, @color-light-position) !important;
            } .text-@{adKey} {
                color: extract(@adItem, @color-basic-position) !important;
              } .text-@{adKey}-dark {
                  color: extract(@adItem, @color-dark-position) !important;
                } });

.for-each(@aliasColors, { .bg-@{adKey}-light {
  background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important;
} .bg-@{adKey} {
    background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
  } .bg-@{adKey}-dark {
      background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important;
    } .bg-@{adKey}-light-h {
        transition: background-color 300ms;
        &:hover {
          background-color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important;
        }
      } .bg-@{adKey}-h {
          transition: background-color 300ms;
          &:hover {
            background-color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
          }
        } .bg-@{adKey}-dark-h {
            transition: background-color 300ms;
            &:hover {
              background-color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important;
            }
          } .text-@{adKey}-light {
              color: ~`getColor("@{colors}", "@{adValue}", @{color-light-position})` !important;
            } .text-@{adKey} {
                color: ~`getColor("@{colors}", "@{adValue}", @{color-basic-position})` !important;
              } .text-@{adKey}-dark {
                  color: ~`getColor("@{colors}", "@{adValue}", @{color-dark-position})` !important;
                } });

// grey
.for-each(@greyColorer, { .bg-grey-@{adKey} {
  background-color: @adValue !important;
} .bg-grey-@{adKey}-h {
    &:hover {
      background-color: @adValue !important;
    }
  } .text-grey-@{adKey} {
      color: @adValue !important;
    } });

.all-colors-minin(@enabled) when (@enabled = true) {

  .loop-no(@adKey, @adValue, @i: 1) when (@i =< length(@color-no-list)) {
    // @color-no-list
    @name: "@{adKey}-@{i}";
    .bg-@{adKey}-@{i} {
      background-color: @@name !important;
    }
    .bg-@{adKey}-@{i}-h {
      transition: background-color 300ms;
      &:hover {
        background-color: @@name !important;
      }
    }
    .text-@{adKey}-@{i} {
      color: @@name !important;
    }
    .loop-no(@adKey, @adValue, @i + 1);
  }

  .for-each(@colors, { .loop-no(@adKey, @adValue, 1); });

}

.all-colors-minin(@enable-all-colors);

.d-none {
  display: none !important;
}

.d-block {
  display: block !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-flex {
  display: flex !important;
}

.d-inline-flex {
  display: inline-flex !important;
}

.justify-content-start {
  justify-content: flex-start !important;
}

.justify-content-end {
  justify-content: flex-end !important;
}

.justify-content-center {
  justify-content: center !important;
}

.justify-content-between {
  justify-content: space-between !important;
}

.justify-content-around {
  justify-content: space-around !important;
}

.align-items-start {
  align-items: flex-start !important;
}

.align-items-end {
  align-items: flex-end !important;
}

.align-items-center {
  align-items: center !important;
}

.align-items-baseline {
  align-items: baseline !important;
}

.align-items-stretch {
  align-items: stretch !important;
}

.align-content-start {
  align-content: flex-start !important;
}

.align-content-end {
  align-content: flex-end !important;
}

.align-content-center {
  align-content: center !important;
}

.align-content-between {
  align-content: space-between !important;
}

.align-content-around {
  align-content: space-around !important;
}

.align-content-stretch {
  align-content: stretch !important;
}

.align-self-auto {
  align-self: auto !important;
}

.align-self-start {
  align-self: flex-start !important;
}

.align-self-end {
  align-self: flex-end !important;
}

.align-self-center {
  align-self: center !important;
}

.align-self-baseline {
  align-self: baseline !important;
}

.align-self-stretch {
  align-self: stretch !important;
}

.flex-1 {
  flex: 1 !important;
}

.flex-column {
  flex-direction: column !important;
}

.flex-column-reverse {
  flex-direction: column-reverse !important;
}

.flex-wrap {
  flex-wrap: wrap !important;
}

.flex-nowrap {
  flex-wrap: nowrap !important;
}

.flex-shrink-0 {
  flex-shrink: 0 !important;
}

.flex-shrink-1 {
  flex-shrink: 1 !important;
}

.flex-grow-0 {
  flex-grow: 0 !important;
}

.flex-grow-1 {
  flex-grow: 1 !important;
}

.float-none {
  float: none !important;
}

.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

// Sizing
.icon-sm {
  font-size: @icon-sm !important;
}

.icon-md {
  font-size: @icon-md !important;
}

.icon-lg {
  font-size: @icon-lg !important;
}

.img-fluid {
  // Part 1: Set a maximum relative to the parent
  max-width: 100%;
  // Part 2: Override the height to auto, otherwise images will be stretched
  // when setting a width and height attribute on the img element.
  height: auto;
}

.point {
  cursor: pointer;
}

.no {
  &-resize {
    resize: none;
    max-width: 100%;
    min-width: 100%;
  }
  &-data {
    color: rgba(0, 0, 0, 0.25);
    text-align: center;
    line-height: 64px;
    font-size: 16px;
    i {
      font-size: 24px;
      margin-right: 16px;
      position: relative;
      top: 3px;
    }
  }
}

.block-center {
  margin: 0 auto;
}

// Background image
.bg-center {
  background-position: center center;
  background-size: cover;
}

.page-loading {
  background: @background-color-base;
  z-index: 10000;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  padding-top: 200px;
  text-align: center;
}

.color-weak {
  filter: invert(80%);
  display: block;
}

.for-each(@positions, { .position-@{adKey} {
  position: @adKey !important;
} });

.fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: @zindex-fixed;
}

.fixed-bottom {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: @zindex-fixed;
}

.for-each(@overflows, { .overflow-@{adKey} {
  overflow: @adKey !important;
} });

@media (max-width: @screen-xs-max) {
  .hidden-xs {
    display: none !important;
  }
}

@media (max-width: @screen-sm-max) {
  .hidden-sm {
    display: none !important;
  }
}

@media (max-width: @screen-md-max) {
  .hidden-md {
    display: none !important;
  }
}

@media (max-width: @screen-lg-max) {
  .hidden-lg {
    display: none !important;
  }
}

@media (min-width: @mobile-min) {
  .hidden-pc {
    display: none !important;
  }
}

@media (max-width: @mobile-max) {
  .hidden-mobile {
    display: none !important;
  }
}

@rotate-count: 24;
.rotate-loop (@i) when (@i > 0) {
  @num: @i * 15;
  .rotate-@{num} {
    transform: rotate(~'@{num}deg');
  }
  .rotate-loop(@i - 1);
}

.rotate-loop(@rotate-count);

@mp-list: margin m, padding p;

.loop-mp(@infix, @adKey, @adValue, @i: 1) when (@i =< length(@mp-list)) {
  @item: extract(@mp-list, @i);
  @abbrev: extract(@item, 2);
  @prop: extract(@item, 1);
  .@{abbrev}@{infix} {
      @{prop}: @adValue !important;
  }
  .@{abbrev}t@{infix} {
      @{prop}-top: @adValue !important;
  }
  .@{abbrev}r@{infix} {
      @{prop}-right: @adValue !important;
  }
  .@{abbrev}b@{infix} {
      @{prop}-bottom: @adValue !important;
  }
  .@{abbrev}l@{infix} {
      @{prop}-left: @adValue !important;
  }
  .@{abbrev}x@{infix} {
      @{prop}-right: @adValue !important;
      @{prop}-left: @adValue !important;
  }
  .@{abbrev}y@{infix} {
      @{prop}-top: @adValue !important;
      @{prop}-bottom: @adValue !important;
  }

  .loop-mp(@infix, @adKey, @adValue, @i + 1);
}

.for-each(@spacings, { .infix-mixin(@adKey) when (@adKey = 0) {
  @infix: 0;
} .infix-mixin(@adKey) when (default()) {
  @infix: ~"-@{adKey}";
} .infix-mixin(@adKey); .loop-mp(@infix, @adKey, @adValue, 1); });

// Alignment
.text-left {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-right {
  text-align: right !important;
}

// Transformation
.text-lowercase {
  text-transform: lowercase !important;
}

.text-uppercase {
  text-transform: uppercase !important;
}

.text-capitalize {
  text-transform: capitalize !important;
}

.text-deleted {
  text-decoration: line-through;
}

// wrapping
.text-nowrap {
  white-space: nowrap !important;
}

.text-wrap {
  white-space: pre-wrap !important;
}

.text-truncate {
  .text-truncate();
}

// Weight and italics

.font-weight-normal {
  font-weight: normal;
}

.font-weight-bold {
  font-weight: 700;
}

.font-italic {
  font-style: italic;
}

// Sizing
.text-xs {
  font-size: @text-xs !important;
}

.text-sm {
  font-size: @text-sm !important;
}

.text-md {
  font-size: @text-md !important;
}

.text-lg {
  font-size: @text-lg !important;
}

.text-xl {
  font-size: @text-xl !important;
}

.for-each(@widths, { .width-@{adKey} {
  width: @adValue !important;
} .max-width-@{adKey} {
    max-width: @adValue !important;
  } .min-width-@{adKey} {
      min-width: @adValue !important;
    } });

@media (max-width: @mobile-max) {
  .width-sm,
  .max-width-sm,
  .min-width-sm {
    width: 100% !important;
  }
}

.scrollbar-mixin(@element-name) {
  .scrollbar-inner-mixin(@enabled) when (@enabled=true) {
    @{element-name} {
      // FireFox
      scrollbar-color: @scrollbar-track-color @scrollbar-thumb-color;
      scrollbar-width: thin;
      // Other
      &::-webkit-scrollbar {
        height: @scrollbar-width;
        width: @scrollbar-height;
      }
      &::-webkit-scrollbar-track {
        box-shadow: inset 0 0 @scrollbar-width @scrollbar-track-color;
      }
      &::-webkit-scrollbar-thumb {
        background-color: @scrollbar-thumb-color;
        outline: 1px solid #333;
      }
    }
  }
  .scrollbar-inner-mixin(@scrollbar-enabled);
}

// 自定义div scrollbar
@scrollbar-prefix: ~'.scrollbar';
@{scrollbar-prefix} {
  overflow: auto;

  &-x {
    overflow-x: auto;
    overflow-y: hidden;
  }
  &-y {
    overflow-x: hidden;
    overflow-y: auto;
  }
}

// scrollbar
.scrollbar-mixin(
  ~'body, @{scrollbar-prefix}, .@{ant-prefix}-dialog-wrap, .@{ant-prefix}-drawer-body, .@{ant-prefix}-drawer-wrapper-body, .@{ant-prefix}-anchor-wrapper, textarea.@{ant-prefix}-input'
);

// table
.scrollbar-table-mixin(@enabled) when (@enabled=true) {
  .scrollbar-mixin(~'.@{ant-prefix}-table-header, .@{ant-prefix}-table-body');
}

.scrollbar-table-mixin(@scrollbar-table-enabled);

@st-prefix: ~'.st';

@{st-prefix} {
  display: block;
  &__selection {
    cursor: pointer;
    padding-left: 2px;
  }
  &__p-left {
    .@{ant-prefix}-table-pagination {
      float: none;
      display: block;
      text-align: left;
    }
  }
  &__p-center {
    .@{ant-prefix}-table-pagination {
      float: none;
      display: block;
      text-align: center;
    }
  }
  // 清除页码底部间距，在大部分列表中会包裹 `nz-card` 导致底部间距过大，若有需求可自行使用 `mb-md` 来调整
  .@{ant-prefix}-table-pagination.@{ant-prefix}-pagination {
    margin-bottom: 0;
  }
  @media screen and (min-width: @nz-table-rep-min-width) {
    &__width {
      &-strict {
        .ant-table-body {
          > table {
            table-layout: fixed;
            word-wrap: break-word;
          }
        }
      }
    }
  }
}

@sv-prefix: ~'.sv';
@sv-label-color: rgba(0, 0, 0, 0.5);
@sv-detail-color: @text-color;
@sv-type-primary-color: @primary-color;
@sv-type-success-color: @success-color;
@sv-type-danger-color: @error-color;
@sv-type-warning-color: @warning-color;
@sv-bottom: @layout-gutter * 2;
@sv-default-text: '-';
@sv-unit-margin: 8px;
@sv-unit-color: @grey-7;

@{sv-prefix} {
  display: block;
  + @{sv-prefix} {
    margin-top: @sv-bottom;
  }
  &__container {
    display: block;
    // offset the padding-bottom of last row
    .@{ant-prefix}-row {
      margin-bottom: -@sv-bottom;
      overflow: hidden;
    }
  }
  &__item {
    &-fixed {
      display: flex;
      @{sv-prefix}__label {
        text-align: right;
        flex: 0 0 auto;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      @{sv-prefix}__detail {
        flex: 1 0 0;
      }
    }
  }
  &__title {
    display: block;
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    margin-bottom: @sv-bottom;
  }
  &__label {
    line-height: 22px;
    padding-bottom: @sv-bottom;
    margin-right: 8px;
    color: @sv-label-color;
    white-space: nowrap;
    display: table-cell;
    &:not(@{sv-prefix}__label-empty) {
      &:after {
        content: ':';
        margin: 0 8px 0 2px;
        position: relative;
        top: -0.5px;
      }
    }
  }
  &__detail {
    line-height: 22px;
    width: 100%;
    padding-bottom: @sv-bottom;
    color: @sv-detail-color;
    display: table-cell;
    word-break: break-all;
  }
  &__type {
    &-primary @{sv-prefix}__detail {
      color: @sv-type-primary-color;
    }
    &-success @{sv-prefix}__detail {
      color: @sv-type-success-color;
    }
    &-danger @{sv-prefix}__detail {
      color: @sv-type-danger-color;
    }
    &-warning @{sv-prefix}__detail {
      color: @sv-type-warning-color;
    }
  }
  &__default {
    &:before {
      content: @sv-default-text;
    }

    ~ @{sv-prefix}__unit {
      display: none !important;
    }
  }
  &__unit {
    display: inline;
    margin-left: @sv-unit-margin;
    color: @sv-unit-color;
  }
  &__small {
    // offset the padding-bottom of last row
    .@{ant-prefix}-row {
      margin-bottom: -8px;
    }
    @{sv-prefix}__title {
      margin-bottom: 12px;
      color: @text-color;
    }
    @{sv-prefix}__label,
    @{sv-prefix}__detail {
      padding-bottom: 8px;
    }
  }
  &__large {
    @{sv-prefix}__title {
      font-size: 16px;
    }
  }
  &__vertical {
    @{sv-prefix}__label {
      padding-bottom: 8px;
    }

    @{sv-prefix}__label,
    @{sv-prefix}__detail {
      display: block;
    }
  }
}

@se-prefix: ~'.se';
@se-label-color: rgba(0, 0, 0, 0.85);
@se-compact-bottom: @layout-gutter;

@{se-prefix} {
  &__title {
    display: block;
    font-size: 14px;
    color: @heading-color;
    font-weight: 500;
    line-height: @form-component-max-height - 0.0001px;
  }
  &__item {
    &:last-child {
      margin-bottom: 0;
      padding-bottom: 0;
    }
    &-empty {
      &:before {
        content: '';
        display: inline-block;
      }
    }
    // fix angular & ng-zorro-antd
    .@{ant-prefix}-form-explain {
      display: block;
    }
  }
  &__label {
    text-align: right;
    color: @se-label-color;
    white-space: nowrap;
    display: table-cell;
    flex: 0 0 auto;
    width: initial;
    &-optional {
      color: rgba(0, 0, 0, 0.45);
    }
  }
  &__control {
    flex: 1 0 0;
    width: 100%;
  }
  &__compact {
    @{se-prefix}__title,
    @{se-prefix}__item {
      margin-bottom: @se-compact-bottom;
    }
    .@{ant-prefix}-form-extra {
      display: none;
    }
  }
  &__line {
    border-bottom: 1px dashed #e8e8e8;
    @{se-prefix}__label,
    @{se-prefix}__control {
      padding-bottom: @se-compact-bottom;
    }
  }
  &__hide-label,
  &__inline,
  &__vertical {
    @{se-prefix}__nolabel {
      display: none !important;
    }
  }
  &__horizontal {
    @{se-prefix}__item {
      display: flex;
      &:last-child {
        margin-bottom: 0;
      }
    }
  }
  &__vertical {
    @{se-prefix}__item {
      display: block;
    }
  }
  &__inline {
    @{se-prefix}__label,
    @{se-prefix}__control {
      text-align: left;
      width: initial;
      flex: none;
    }
    @{se-prefix}__item {
      &:last-child {
        margin-right: 0;
      }
    }
  }
}

@media (max-width: @mobile-max) {
  @{se-prefix} {
    &__horizontal {
      @{se-prefix}__item {
        display: block;
      }
    }
    &__horizontal,
    &__vertical {
      @{se-prefix}__label,
      @{se-prefix}__control {
        width: 100% !important;
      }
    }
  }
}

@avatar-list-prefix: ~'.avatar-list';

@{avatar-list-prefix} {
  display: inline-block;
  &__wrap {
    display: inline-block;
    margin-left: 8px;
    font-size: 0;
    padding: 0;
  }
  &__item {
    display: inline-block;
    font-size: @font-size-base;
    margin-left: -8px;
    width: @avatar-size-base;
    height: @avatar-size-base;
    .@{ant-prefix}-avatar {
      border: 1px solid #fff;
      cursor: pointer;
    }
  }
  &__large {
    width: @avatar-size-lg;
    height: @avatar-size-lg;
  }
  &__small {
    width: @avatar-size-sm;
    height: @avatar-size-sm;
  }
  &__mini {
    width: 20px;
    height: 20px;
    .@{ant-prefix}-avatar {
      width: 20px;
      height: 20px;
      line-height: 20px;
      &-string {
        font-size: 12px;
        line-height: 18px;
      }
    }
  }
}

ellipsis {
  display: inline-block;
}

.ellipsis {
  overflow: hidden;
  display: inline-block;
  word-break: break-all;
  width: 100%;
  &__lines {
    position: relative;
  }
  &__line-clamp {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
  }
  &__shadow {
    display: block;
    position: absolute;
    color: transparent;
    opacity: 0;
    z-index: -999;
  }
}

.error-collect {
  color: #f5222d;
  padding-right: 24px;
  cursor: pointer;
}

@exception-prefix: ~'.exception';
@{exception-prefix} {
  display: flex;
  align-items: center;
  height: 100%;
  &__img-block {
    flex: 0 0 62.5%;
    width: 62.5%;
    padding-right: 152px;
    zoom: 1;
    &:before,
    &:after {
      content: ' ';
      display: table;
    }
    &:after {
      clear: both;
      visibility: hidden;
      font-size: 0;
      height: 0;
    }
  }
  &__img {
    height: 360px;
    width: 100%;
    max-width: 430px;
    float: right;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    background-size: 100% 100%;
  }
  &__cont {
    flex: auto;
    &-title {
      color: #434e59;
      font-size: 72px;
      font-weight: 600;
      line-height: 72px;
      margin-bottom: 24px;
    }
    &-desc {
      color: @text-color-secondary;
      font-size: 20px;
      line-height: 28px;
      margin-bottom: 16px;
    }
    &-actions {
      button:not(:last-child) {
        margin-right: 8px;
      }
    }
  }
}

@media screen and (max-width: @screen-xl) {
  @{exception-prefix} {
    &__img-block {
      padding-right: 88px;
    }
  }
}

@media screen and (max-width: @screen-sm) {
  @{exception-prefix} {
    display: block;
    text-align: center;
    &__img-block {
      padding-right: 0;
      margin: 0 auto 24px;
    }
  }
}

@media screen and (max-width: @screen-xs) {
  @{exception-prefix} {
    &__img-block {
      margin-bottom: -24px;
      overflow: hidden;
    }
  }
}

@footer-toolbar-prefix: ~'.footer-toolbar';
@footer-toolbar-height: 56px;
@footer-toolbar-box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.03);
@footer-toolbar-bg: #fff;
@footer-toolbar-border-top: 1px solid @border-color-split;
@footer-toolbar-padding: 0 24px;

@{footer-toolbar-prefix} {
  display: flex;
  position: fixed;
  width: 100%;
  bottom: 0;
  right: 0;
  height: @footer-toolbar-height;
  line-height: @footer-toolbar-height;
  box-shadow: @footer-toolbar-box-shadow;
  background: @footer-toolbar-bg;
  border-top: @footer-toolbar-border-top;
  padding: @footer-toolbar-padding;
  transition: all 0.3s;
  z-index: @zindex;
  &__left {
    flex: 1;
  }
}

@full-content-prefix: ~'.full-content';

@{full-content-prefix} {
  display: block;
  height: 100%;
  overflow: hidden;
  &__body {
    overflow: hidden;
  }
  // &__opened {
  // }
  // &__hidden-title {
  // }
}

@global-footer-prefix: ~'.global-footer';

@{global-footer-prefix} {
  display: block;
  padding: 0 16px;
  margin: 48px 0 24px;
  text-align: center;
  &__links {
    margin-bottom: 8px;
    &-item {
      display: inline-block;
      color: @text-color-secondary;
      transition: all 0.3s;
      &:not(:last-child) {
        margin-right: 40px;
      }
      &:hover {
        color: @text-color;
      }
    }
  }
  &__copyright {
    color: @text-color-secondary;
    font-size: @font-size-base;
  }
}

@notice-icon-prefix: ~'.notice-icon';

@{notice-icon-prefix} {
  width: 336px;

  &__btn {
    cursor: pointer;
    display: inline-block;
    transition: all 0.3s;
  }

  .@{ant-prefix}-popover-inner-content {
    padding: 0;
  }
  .@{ant-prefix}-tabs {
    &-bar {
      margin-bottom: 4px;
    }
    &-nav {
      .@{ant-prefix}-tabs-tab {
        margin-right: 32px;
        padding: 12px 16px;
        &:last-child {
          margin-right: 0;
        }
      }
      &-scroll {
        text-align: center;
      }
    }
  }
  .@{ant-prefix}-list {
    max-height: 400px;
    overflow: auto;
    &-item {
      transition: all 0.3s;
      overflow: hidden;
      cursor: pointer;
      padding-left: 24px;
      padding-right: 24px;
      &:last-child {
        border-bottom: 0;
      }
      &:hover {
        background: @primary-1;
      }
      &-meta {
        width: 100%;
        &-title {
          font-weight: normal;
          margin-bottom: 8px;
        }
      }
      .@{ant-prefix}-avatar {
        background: #fff;
        margin-top: 4px;
      }
    }
  }
  &__notfound {
    text-align: center;
    padding: 73px 0 88px;
    color: @text-color-secondary;
    &-img {
      display: inline-block;
      margin-bottom: 16px;
      height: 76px;
    }
  }
  &__clear {
    height: 46px;
    line-height: 46px;
    text-align: center;
    color: @text-color;
    border-radius: 0 0 @border-radius-base @border-radius-base;
    border-top: 1px solid @border-color-split;
    transition: all 0.3s;
    cursor: pointer;
    &:hover {
      color: @heading-color;
    }
  }
  &__item {
    .@{ant-prefix}-badge-count {
      top: -10px;
    }
    &-read {
      opacity: 0.4;
    }
    &-desc {
      font-size: 12px;
      line-height: @line-height-base;
    }
    &-time {
      font-size: 12px;
      margin-top: 4px;
      line-height: @line-height-base;
    }
    &-extra {
      float: right;
      color: @text-color-secondary;
      font-weight: normal;
      margin-right: 0;
      margin-top: -1.5px;
    }
  }
}

@page-header-prefix: ~'.page-header';
@page-header-bg: #fff;
@page-header-wide: 1200px;

@{page-header-prefix} {
  display: block;
  background-color: @page-header-bg;
  padding: 16px 32px 0 32px;
  border-bottom: @border-width-base @border-style-base @border-color-split;
  &__wide {
    max-width: @page-header-wide;
    margin: auto;
  }
  .@{ant-prefix}-breadcrumb {
    margin-bottom: 16px;
  }
  .@{ant-prefix}-tabs {
    margin: 0 0 -17px -8px;
    &-bar {
      border-bottom: @border-width-base @border-style-base @border-color-split;
    }
  }
  &__detail {
    display: flex;
  }
  &__row {
    display: flex;
    width: 100%;
  }
  &__logo {
    flex: 0 1 auto;
    margin-right: 16px;
    padding-top: 1px;
    img {
      width: 28px;
      height: 28px;
      border-radius: @border-radius-base;
      display: block;
    }
  }
  &__title {
    font-size: 20px;
    font-weight: 500;
    color: @heading-color;
    small {
      font-weight: normal;
      font-size: 14px;
      padding-left: @layout-gutter;
    }
  }
  &__action {
    margin-left: 56px;
    min-width: 266px;
  }

  &__title,
  &__desc {
    flex: auto;
  }

  &__action,
  &__extra,
  &__main {
    flex: 0 1 auto;
  }

  &__main {
    width: 100%;
  }

  &__title,
  &__action {
    margin-bottom: 16px;
  }

  &__logo,
  &__desc,
  &__extra {
    margin-bottom: 16px;
  }

  &__action,
  &__extra {
    text-align: right;
  }

  &__extra {
    margin-left: 88px;
    min-width: 242px;
  }
  @media screen and (max-width: @screen-xl) {
    &__extra {
      margin-left: 44px;
    }
  }
  @media screen and (max-width: @screen-lg) {
    &__extra {
      margin-left: 20px;
    }
  }
  @media screen and (max-width: @screen-md) {
    &__row {
      display: block;
    }

    &__action,
    &__extra {
      margin-left: 0;
      text-align: left;
    }
  }
  @media screen and (max-width: @screen-sm) {
    &__detail {
      display: block;
    }
  }
  @media screen and (max-width: @screen-xs) {
    &__action {
      .@{ant-prefix}-btn-group,
      .@{ant-prefix}-btn {
        display: block;
        margin-bottom: 8px;
      }
      .@{ant-prefix}-input-search-enter-button {
        .@{ant-prefix}-btn {
          margin-bottom: 0;
        }
      }
      .@{ant-prefix}-btn-group > .@{ant-prefix}-btn {
        display: inline-block;
        margin-bottom: 0;
      }
    }
  }
}

@quick-menu-prefix: ~'.quick-menu';
@quick-menu-border-width: 1px;
@quick-menu-ctrl-hw: 50px;
@quick-menu-border-color: #fff;

@{quick-menu-prefix} {
  display: block;
  position: fixed;
  right: -@quick-menu-border-width;
  left: auto;
  backface-visibility: hidden;
  border: @quick-menu-border-width solid @quick-menu-border-color;
  z-index: @zindex + 2;
  transition: margin 0.3s cubic-bezier(1, 0, 0, 1);
  &__inner {
    position: relative;
    padding: 0 12px;
  }
  &__ctrl {
    position: absolute;
    top: -1px;
    left: -@quick-menu-ctrl-hw;
    width: @quick-menu-ctrl-hw;
    height: @quick-menu-ctrl-hw;
    border: @quick-menu-border-width solid @quick-menu-border-color;
    border-right: 0;
    text-align: center;
    cursor: pointer;
    border-radius: 3px 0 0 3px;
    &-icon {
      line-height: @quick-menu-ctrl-hw - 1;
      font-size: 20px;
    }
  }
}

.qr {
  display: inline-block;
  &__img {
    max-width: 100%;
    max-height: 100%;
  }
}

@result-extra-bg: #fafafa;

.result {
  display: block;
  text-align: center;
  width: 72%;
  margin: 0 auto;

  @media screen and (max-width: @screen-xs) {
    width: 100%;
  }

  &__icon {
    font-size: 72px;
    line-height: 72px;
    margin-bottom: 24px;
    &-success {
      color: @success-color;
    }
    &-error {
      color: @error-color;
    }
  }
  &__title {
    font-size: 24px;
    color: @heading-color;
    font-weight: 500;
    line-height: 32px;
    margin-bottom: 16px;
  }
  &__desc {
    font-size: 14px;
    line-height: 22px;
    color: @text-color-secondary;
    margin-bottom: 24px;
  }
  &__extra {
    background: @result-extra-bg;
    padding: 24px 40px;
    border-radius: @border-radius-sm;
    text-align: left;

    @media screen and (max-width: @screen-xs) {
      padding: 18px 20px;
    }
  }
  &__actions {
    margin-top: 32px;
    button:not(:last-child) {
      margin-right: 8px;
    }
  }
  .@{ant-prefix}-steps .@{ant-prefix}-steps-head,
  .@{ant-prefix}-steps .@{ant-prefix}-steps-title {
    background: @result-extra-bg;
  }
}

@reuse-tab-prefix: ~'.reuse-tab';
@reuse-tab-height: 52px;
@reuse-tab-bg: #fff;
@reuse-tab-padding: 8px;
@reuse-tab-border-color: #d9d9d9;

@{reuse-tab-prefix} {
  display: block;
  background-color: @reuse-tab-bg;
  padding: @reuse-tab-padding;
  border-bottom: 1px solid @reuse-tab-border-color;
  outline: none;
  user-select: none;
  .@{ant-prefix}-tabs-bar {
    margin-bottom: 0;
    border-bottom: none;
  }
  .@{ant-prefix}-tabs-nav .@{ant-prefix}-tabs-tab {
    padding: 0;
    @{reuse-tab-prefix}__name {
      display: inline-block;
      padding: 8px 20px;
    }
    @{reuse-tab-prefix}__op {
      display: none;
      position: absolute;
      top: 14px;
      right: 2px;
      margin: 0;
      font-size: 10px;
    }
    &:hover {
      @{reuse-tab-prefix}__op {
        display: block;
      }
    }
  }
}

@{reuse-tab-prefix}__cm {
  .@{ant-prefix}-menu {
    border: 1px solid #e9e9e9;
  }
}

.tag-select {
  user-select: none;
  margin-left: -8px;
  position: relative;
  overflow: hidden;
  max-height: @form-component-max-height - 0.0001px;
  line-height: @form-component-max-height - 0.0001px;
  transition: all 0.3s;
  display: block;
  &__expanded {
    transition: all 0.3s;
    max-height: 200px;
  }
  &__has-expand {
    padding-right: 50px;
  }
  .@{ant-prefix}-tag {
    padding: 0 8px;
    margin-right: 24px;
  }
  &__trigger {
    position: absolute;
    top: 0;
    right: 0;
    &-icon {
      margin-left: 8px;
      font-size: 12px;
    }
  }
}

g2-chart,
g2-bar,
g2-gauge,
g2-mini-area,
g2-mini-bar,
g2-single-bar,
g2-tag-cloud,
g2-timeline,
g2,
g2-custom {
  display: block;
}

g2-bar,
g2-tag-cloud {
  width: 100%;
}

@g2-card-prefix: ~'.g2-card';

@{g2-card-prefix} {
  position: relative;
  &__top {
    position: relative;
    overflow: hidden;
    width: 100%;
    &-margin {
      margin-bottom: 12px;
    }
    &-has-margin {
      margin-bottom: 20px;
    }
  }
  &__meta {
    &-wrap {
      float: left;
    }
    color: @text-color-secondary;
    font-size: @font-size-base;
    line-height: 22px;
    height: 22px;
    &-action {
      cursor: pointer;
      position: absolute;
      top: 4px;
      right: 0;
      line-height: 1;
    }
  }
  &__avatar {
    position: relative;
    top: 4px;
    float: left;
    margin-right: 20px;
    img {
      border-radius: 100%;
    }
  }
  &__total {
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    color: @heading-color;
    margin-top: 4px;
    margin-bottom: 0;
    font-size: 30px;
    line-height: 38px;
    height: 38px;
  }
  &__desc {
    margin-bottom: 12px;
    width: 100%;
  }
  &__footer {
    border-top: 1px solid @border-color-split;
    padding-top: 9px;
    margin-top: 8px;
    & > * {
      position: relative;
    }
  }
}

@g2-gauge-prefix: ~'.g2-gauge';

@{g2-gauge-prefix} {
  &__desc {
    width: 300px;
    text-align: center;
    font-size: 12px;
  }
  &__title {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.43);
  }
  &__percent {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.85);
  }
}

@g2-mini-progress-prefix: ~'.g2-mini-progress';

@{g2-mini-progress-prefix} {
  display: block;
  padding: 5px 0;
  position: relative;
  width: 100%;
  &__wrap {
    background-color: @background-color-base;
    position: relative;
  }
  &__value {
    transition: all 0.4s cubic-bezier(0.08, 0.82, 0.17, 1) 0s;
    border-radius: 1px 0 0 1px;
    background-color: @primary-color;
    width: 0;
    height: 100%;
  }
  &__target {
    position: absolute;
    top: 0;
    bottom: 0;
    &-item {
      border-radius: 100px;
      position: absolute;
      top: 0;
      left: 0;
      height: 4px;
      width: 2px;
      &:last-child {
        top: auto;
        bottom: 0;
      }
    }
  }
}

@g2-pie-prefix: ~'.g2-pie';

@{g2-pie-prefix} {
  display: block;
  position: relative;
  &__chart {
    position: relative;
  }
  &__legend {
    position: absolute;
    right: 0;
    min-width: 200px;
    top: 50%;
    transform: translateY(-50%);
    margin: 0 20px;
    list-style: none;
    padding: 0;
    &-item {
      cursor: pointer;
      margin-bottom: 16px;
      height: 22px;
      line-height: 22px;
      &:last-child {
        margin-bottom: 0;
      }
    }
    &-title {
      color: @text-color;
    }
    &-dot {
      border-radius: 8px;
      display: inline-block;
      margin-right: 8px;
      position: relative;
      top: -1px;
      height: 8px;
      width: 8px;
    }
    &-percent {
      color: @text-color-secondary;
    }
    &-value {
      position: absolute;
      right: 0;
    }
    &-has {
      @{g2-pie-prefix}__chart {
        width: ~'calc(100% - 240px)';
      }
    }
    &-block {
      @{g2-pie-prefix}__chart {
        width: 100%;
        margin: 0 0 32px;
      }
      @{g2-pie-prefix}__legend {
        position: relative;
        transform: none;
      }
    }
  }
  &__total {
    position: absolute;
    left: 50%;
    top: 50%;
    text-align: center;
    height: 62px;
    transform: translate(-50%, -50%);
    &-title {
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
      height: 22px;
      margin-bottom: 8px;
      font-weight: normal;
    }
    &-stat {
      color: @heading-color;
      display: block;
      font-size: 1.2em;
      height: 32px;
      line-height: 32px;
      white-space: nowrap;
    }
  }
  &__mini {
    @{g2-pie-prefix}__total {
      &-title {
        margin-bottom: 0;
        margin-top: 4px;
      }
    }
  }
}

@g2-radar-prefix: ~'.g2-radar';

@{g2-radar-prefix} {
  display: block;
  &__legend {
    margin-top: 16px;
    &-item {
      position: relative;
      text-align: center;
      cursor: pointer;
      color: @text-color-secondary;
      line-height: 22px;
      &:after {
        background-color: @border-color-split;
        position: absolute;
        top: 8px;
        right: 0;
        height: 40px;
        width: 1px;
        content: '';
      }
      &:last-child::after {
        display: none;
      }
    }
    &-title {
      color: @heading-color;
      padding-left: 16px;
      font-size: 24px;
      line-height: 32px;
      margin-top: 4px;
      margin-bottom: 0;
    }
    &-dot {
      border-radius: 6px;
      display: inline-block;
      margin-right: 6px;
      position: relative;
      top: -1px;
      height: 6px;
      width: 6px;
    }
  }
}

@g2-water-wave-prefix: ~'.g2-water-wave';

@{g2-water-wave-prefix} {
  display: inline-block;
  position: relative;
  transform-origin: left;
  &__desc {
    position: absolute;
    left: 0;
    top: 32px;
    text-align: center;
    width: 100%;
    &-title {
      color: @text-color-secondary;
      font-size: 14px;
      line-height: 22px;
    }
    &-percent {
      color: @heading-color;
      line-height: 32px;
      font-size: 24px;
    }
  }
  &__canvas {
    transform: scale(0.5);
    transform-origin: 0 0;
  }
}

@number-info-prefix: ~'.number-info';
@{number-info-prefix} {
  display: block;
  &__title {
    color: @text-color;
    font-size: @font-size-lg;
    margin-bottom: 16px;
    transition: all 0.3s;
    &-sub {
      color: @text-color-secondary;
      font-size: @font-size-base;
      height: 22px;
      line-height: 22px;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      white-space: nowrap;
    }
  }
  &__value {
    margin-top: 4px;
    font-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    white-space: nowrap;
    &-suffix {
      color: @text-color;
      font-size: 16px;
      font-style: normal;
      margin-left: 4px;
    }
    &-text {
      color: @heading-color;
      display: inline-block;
      line-height: 32px;
      height: 32px;
      font-size: 24px;
      margin-right: 32px;
    }
    &-sub {
      color: @text-color-secondary;
      font-size: @font-size-lg;
      vertical-align: top;
      margin-right: 0;
      .anticon {
        font-size: 12px;
        transform: scale(0.82);
        margin-left: 4px;
      }
      .anticon-caret-up {
        color: @red-6;
      }
      .anticon-caret-down {
        color: @green-6;
      }
    }
  }
  &__light {
    @{number-info-prefix}__value-text {
      color: @text-color;
    }
  }
}

@trend-prefix: ~'.trend';

@{trend-prefix} {
  display: inline-block;
  font-size: @font-size-base;
  line-height: 22px;
  &__up,
  &__down {
    margin-left: 4px;
    position: relative;
    top: 1px;
    i {
      font-size: 12px;
      transform: scale(0.83);
    }
  }
  &__up {
    color: @red-6;
  }
  &__down {
    color: @green-6;
    top: -1px;
  }
  &__grey {
    @{trend-prefix}__up,
    @{trend-prefix}__down {
      color: @text-color;
    }
  }
  &__reverse {
    @{trend-prefix}__up {
      color: @green-6;
    }
    @{trend-prefix}__down {
      color: @red-6;
    }
  }
}

@alain-default-prefix: ~'.alain-default';
@alain-default-zindex: @zindex-base;
@alain-default-ease: cubic-bezier(.25, 0, .15, 1);
@alain-default-header-hg: 64px;
@alain-default-header-bg: #205081; //@primary-color;
@alain-default-header-padding: @layout-gutter * 2;
@alain-default-header-search-enabled: true;
@alain-default-header-search-height: 34px;
@alain-default-header-icon-fs: 18px;

@alain-default-aside-wd: 200px;
@alain-default-aside-bg: #fff;
@alain-default-aside-scrollbar-width: 0;
@alain-default-aside-scrollbar-height: 0;
@alain-default-aside-scrollbar-track-color: transparent;
@alain-default-aside-scrollbar-thumb-color: transparent;

@alain-default-aside-nav-fs: 14px;
@alain-default-aside-nav-icon-width: 14px;
@alain-default-aside-nav-img-wh: 14px;
@alain-default-aside-nav-padding-top-bottom: @layout-gutter;
@alain-default-aside-nav-text-color: @text-color;
@alain-default-aside-nav-text-hover-color: #1890ff; //@primary-color;
@alain-default-aside-nav-group-text-color: @text-color-secondary;
@alain-default-aside-nav-selected-text-color: @primary-color;
@alain-default-aside-nav-selected-bg: #fcfcfc;
@alain-default-aside-nav-item-height: 38px;
@alain-default-aside-collapsed-wd: @layout-gutter * 8;
@alain-default-aside-collapsed-nav-fs: 24px;
@alain-default-aside-collapsed-nav-img-wh: 24px;

@alain-default-content-heading-bg: #fafbfc;
@alain-default-content-heading-border: #efe3e5;
@alain-default-content-padding: @layout-gutter * 3;
@alain-default-content-bg: #f5f7fa;

@alain-default-widget-app-icons-enabled: true;
@alain-default-aside-user-enabled: true;

html {
  direction: ltr;
  height: 100%; // http://updates.html5rocks.com/2013/12/300ms-tap-delay-gone-away
  touch-action: manipulation;
}

html,
body,
app-root {
  // overflow-x: hidden;
  height: 100%;
}

body {
  color: @text-color;
  background-color: @alain-default-content-bg;
}

@{alain-default-prefix} {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  min-height: 100%;
  overflow-x: hidden;
  &__unwrap {
    margin-right: -@alain-default-content-padding;
    margin-left: -@alain-default-content-padding;
    @media (max-width: @mobile-max) {
      margin-right: 0;
      margin-left: 0;
    }
  }
  &__content {
    margin: 0 @alain-default-content-padding @alain-default-content-padding @alain-default-content-padding;
    &-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #929292;
      padding: @alain-default-content-padding;
      padding-top: @alain-default-content-padding - 12;
      padding-bottom: @alain-default-content-padding - 12;
      margin-right: -@alain-default-content-padding;
      margin-left: -@alain-default-content-padding;
      margin-bottom: @alain-default-content-padding;
      background-color: @alain-default-content-heading-bg;
      border-bottom: 1px solid @alain-default-content-heading-border;
      > h1 {
        font-size: 18px;
        font-weight: normal;
        margin-bottom: 0;
        > small {
          display: block;
          font-size: 12px;
          color: @muted-color;
        }
      }
    }
    // fix width
    nz-input-group {
      width: auto;
    }
  }
}

// Desktop
@media (min-width: @mobile-min) {
  @{alain-default-prefix}__content {
    margin-left: (@alain-default-aside-wd + @alain-default-content-padding);
  }

  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix} {
      &__sidebar {
        width: @alain-default-aside-collapsed-wd;
      }
      &__content {
        margin-left: (@alain-default-aside-collapsed-wd + @alain-default-content-padding);
      }
    }
  }
}

@{alain-default-prefix} {
  &__header {
    display: flex;
    align-items: center;
    padding: 0 @alain-default-header-padding;
    width: 100%;
    height: @alain-default-header-hg;
    background-color: @alain-default-header-bg;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.2);
    z-index: @alain-default-zindex + 10;
    &-logo {
      margin-left: -@alain-default-header-padding;
      width: @alain-default-aside-wd;
      transition: width 0.2s @alain-default-ease;
      &-link {
        display: block;
        text-align: center;
      }
      &-expanded,
      &-collapsed {
        vertical-align: middle;
        max-width: 100%;
        animation: fadeIn 1s;
      }
      &-collapsed {
        display: none;
      }
      &-expanded {
        display: inline;
      }
    }
  }
  &__nav {
    &-wrap {
      flex: 1;
      display: flex;
      justify-content: space-between;
    }
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    > li {
      display: inline-block;
      vertical-align: middle;
    }
    &-item,
    nz-badge {
      color: #fff;
    }
    &-item {
      display: block;
      border-radius: 2px;
      text-align: center;
      line-height: 100%;
      padding: 8px 2px;
      min-width: 50px;
      transition: background-color 300ms;
      cursor: pointer;
      outline: none;
      &:hover {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.2) !important;
      }
      > i,
      &-icon {
        font-size: @alain-default-header-icon-fs !important;
        // fix ant-dropdown-trigger
        transform: none !important;
      }
    }
  }
}

// Search
.header-search-mixin(@enabled) when (@enabled =true) {
  @{alain-default-prefix}__search {
    flex: 1;
    margin: 0 @layout-gutter * 3;
    position: relative;
    display: flex;
    align-items: center;
    .@{ant-prefix}-input {
      padding-left: 0;
      &:focus {
        box-shadow: none;
      }
    }
    .@{ant-prefix}-input,
    .@{ant-prefix}-input-group-addon {
      background-color: rgba(255, 255, 255, 0.2);
      color: #fff;
      border: none;
      &::placeholder {
        color: #fff;
        opacity: 1;
      }
    }
    .@{ant-prefix}-input-group-addon {
      i {
        transition: color 300ms, transform 400ms;
        font-size: 18px;
        color: #fff;
      }
    }
    &-focus {
      .@{ant-prefix}-input,
      .@{ant-prefix}-input-group-addon {
        background-color: #f3f3f3;
        color: @grey-8;
        &::placeholder {
          color: @grey-8;
          opacity: 1;
        }
      }
      .@{ant-prefix}-input-group-addon {
        i {
          transform: rotate(90deg);
          color: @grey-8;
        }
      }
    }
  }

  @media (max-width: @mobile-max) {
    @{alain-default-prefix}__search {
      align-items: center;
      transition: transform 300ms;
      padding: 0 @alain-default-header-padding;
      margin: 0;
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background-color: #fff;
      z-index: @zindex+20;
      &-toggled {
        display: flex;
      }
      &:not(&-toggled) {
        transform: translate3d(0, -105%, 0);
      }
    }
  }
}

.header-search-mixin(@alain-default-header-search-enabled);

// Collapsed
@{alain-default-prefix}__collapsed {
  @{alain-default-prefix}__header {
    &-logo {
      width: @alain-default-aside-collapsed-wd;
      &-collapsed {
        display: inline;
      }
      &-expanded {
        display: none;
      }
    }
  }
}

// Desktop
// @media (min-width: @mobile-min) {}
// Under pad
@media (max-width: @mobile-max) {
  @{alain-default-prefix}__header {
    &-logo {
      width: @alain-default-aside-collapsed-wd;
      &-collapsed {
        display: inline;
      }
      &-expanded {
        display: none;
      }
    }
  }
}

@{alain-default-prefix}__aside {
  position: absolute;
  top: 0;
  bottom: 0;
  margin-top: @alain-default-header-hg;
  width: @alain-default-aside-wd;
  background-color: @alain-default-aside-bg;
  transition: width 0.2s @alain-default-ease, translate 0.2s @alain-default-ease;
  z-index: @zindex + 5;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-overflow-scrolling: touch;
  &:after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    border-right: 1px solid @alain-default-content-heading-border;
  }
  &-inner {
    overflow-x: hidden;
    overflow-y: scroll;
    height: 100%;
    -webkit-overflow-scrolling: touch;
    // IE
    -ms-scroll-chaining: chained;
    -ms-overflow-style: none;
    -ms-content-zooming: zoom;
    -ms-scroll-rails: none;
    -ms-content-zoom-limit-min: 100%;
    -ms-content-zoom-limit-max: 500%;
    -ms-scroll-snap-type: proximity;
    -ms-scroll-snap-points-x: snapList(100%, 200%, 300%, 400%, 500%);
    // Firefox
    scrollbar-width: none;
    // Chrome
    &::-webkit-scrollbar {
      height: @alain-default-aside-scrollbar-width;
      width: @alain-default-aside-scrollbar-height;
    }
    &::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 @alain-default-aside-scrollbar-width @alain-default-aside-scrollbar-track-color;
    }
    &::-webkit-scrollbar-thumb {
      background-color: @alain-default-aside-scrollbar-thumb-color;
    }
  }
}

// Desktop
@media (min-width: @mobile-min) {
  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix}__aside {
      width: @alain-default-aside-collapsed-wd;
    }
  }
}

// Under pad
@media (max-width: @mobile-max) {
  @{alain-default-prefix}__aside,
  @{alain-default-prefix}__content {
    transition: transform 0.3s ease;
  }

  @{alain-default-prefix}__content {
    transform: translate3d(@alain-default-aside-wd, 0, 0);
  }

  @{alain-default-prefix}__collapsed {
    @{alain-default-prefix}__aside {
      transform: translate3d(-100%, 0, 0);
    }
    @{alain-default-prefix}__content {
      transform: translateZ(0);
    }
  }
}

@{alain-default-prefix}__progress-bar {
  width: 100vw;
  height: 4px;
  overflow: hidden;
  background: fade(#ddd, 40%);
  position: fixed;
  z-index: @zindex-base + 20;
  &::after {
    content: ' ';
    height: 100%;
    width: 33.3vw;
    animation: gradcolours 5s steps(1) infinite, loadthird 1s infinite linear;
    display: block;
    transform-origin: top left;
  }
}

.grad(@hex) {
  background: linear-gradient(
    90deg,
    fade(@hex, 0) 0%,
    @hex 30%,
    @hex 50%,
    @hex 70%,
    fade(@hex, 0) 100%
  );
}

@keyframes loadthird {
  0% {
    transform: translateX(-33.3vw);
  }
  100% {
    transform: translateX(100vw);
  }
}

@keyframes gradcolours {
  0% {
    .grad(#e88098);
  }
  20% {
    .grad(#84bebe);
  }
  40% {
    .grad(#e98724);
  }
  60% {
    .grad(#afc94e);
  }
  80% {
    .grad(#6297a4);
  }
}

// Main Nav
@sidebar-nav-prefix-cls: sidebar-nav;

.@{sidebar-nav-prefix-cls} {
  display: block;
  font-size: @alain-default-aside-nav-fs;
  margin: 0;
  padding: 0;
  &__item {
    position: relative;
    border-left: 3px solid transparent;
    transition: border-left-color 0.4s ease;
    display: flex;
    flex-direction: column;
    &-link {
      display: block;
      color: @alain-default-aside-nav-text-color;
      text-decoration: none !important;
      padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      position: relative;
      user-select: none;
      &:hover {
        color: @alain-default-aside-nav-text-hover-color;
      }
    }
    &-icon {
      min-width: @alain-default-aside-nav-icon-width;
      display: inline-block;
      margin-right: @layout-gutter;
      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
    }
    &-img {
      height: @alain-default-aside-nav-img-wh;
      width: @alain-default-aside-nav-img-wh;
    }
    &-text {
      transition: opacity 0.3s @ease-in-out, width 0.3s @ease-in-out;
      opacity: 1;
    }
    &-disabled {
      opacity: .6;
      &:hover {
        color: initial;
      }
    }
  }
  // Selected
  &__selected {
    border-left-color: @alain-default-aside-nav-selected-text-color;
    background-color: @alain-default-aside-nav-selected-bg;
    > .@{sidebar-nav-prefix-cls}__item-link {
      color: @alain-default-aside-nav-selected-text-color;
    }
  }
  // Open Submenu
  &__open {
    > .@{sidebar-nav-prefix-cls}__sub {
      display: block;
      animation: fadeIn 0.5s;
    }
    > .@{sidebar-nav-prefix-cls}__item-link {
      .@{sidebar-nav-prefix-cls}__sub-arrow {
        transform: translateY(-2px);
        &:before {
          transform: rotate(45deg) translateX(2px);
        }
        &:after {
          transform: rotate(-45deg) translateX(-2px);
        }
      }
    }
  }
  &__group-title {
    color: @alain-default-aside-nav-group-text-color;
    padding: @alain-default-aside-nav-padding-top-bottom @layout-gutter * 2;
  }
  &__sub {
    display: none;
    overflow: hidden;
    .@{sidebar-nav-prefix-cls}__item {
      border-left: 0 !important;
    }
    &-arrow {
      transition: transform .3s @ease-in-out;
      position: absolute;
      top: 50%;
      right: @layout-gutter * 2;
      width: 10px;
      &:before,
      &:after {
        content: '';
        position: absolute;
        vertical-align: baseline;
        background: #fff;
        background-image: linear-gradient(to right, @menu-item-color, @menu-item-color);
        width: 6px;
        height: 1.5px;
        border-radius: 2px;
        transition: background .3s @ease-in-out, transform .3s @ease-in-out, top .3s @ease-in-out;
      }
      &:before {
        transform: rotate(-45deg) translateX(2px);
      }
      &:after {
        transform: rotate(45deg) translateX(-2px);
      }
    }
  }
  // Badge
  .badge {
    position: absolute;
    right: @layout-gutter * 2;
    @badge-height: @layout-gutter * 2;
    &:not(.badge-dot) {
      top: (@alain-default-aside-nav-item-height - @badge-height) / 2;
      height: @badge-height;
      width: @badge-height;
      line-height: @badge-height;
      padding: 0;
      overflow: hidden;
    }
    &-dot {
      top: (@alain-default-aside-nav-item-height - @layout-gutter) / 2;
    }
  }
  // Dept
  &__depth1 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 3) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth2 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 4) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth3 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 5) + @alain-default-aside-nav-icon-width;
    }
  }
  &__depth4 {
    .@{sidebar-nav-prefix-cls}__item-link {
      padding-left: (@layout-gutter * 6) + @alain-default-aside-nav-icon-width;
    }
  }
  // Floating
  &__floating {
    position: absolute;
    z-index: @zindex + 7;
    min-width: 160px;
    border: 1px solid @alain-default-content-heading-border;
    background-color: @alain-default-aside-bg;
    border-radius: 4px;
    display: none;
    .@{sidebar-nav-prefix-cls}__item {
      &-link {
        padding-left: @layout-gutter * 2;
      }
    }
    &-show {
      display: block;
    }
    .@{sidebar-nav-prefix-cls}__sub {
      display: block;
      &-arrow {
        display: none;
      }
    }
    // Dept
    .@{sidebar-nav-prefix-cls}__depth2 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 3;
      }
    }
    .@{sidebar-nav-prefix-cls}__depth3 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 4;
      }
    }
    .@{sidebar-nav-prefix-cls}__depth4 {
      .@{sidebar-nav-prefix-cls}__item-link {
        padding-left: @layout-gutter * 5;
      }
    }
  }
}

@media (min-width: @mobile-min) {
  @{alain-default-prefix}__collapsed {
    .@{sidebar-nav-prefix-cls}:not(.@{sidebar-nav-prefix-cls}__sub) {
      .@{sidebar-nav-prefix-cls}__item {
        border: none;
        &-link {
          display: flex;
          justify-content: center;
          padding: (@layout-gutter * 3) 0;
          .@{sidebar-nav-prefix-cls}__item-icon {
            margin-right: 0;
            font-size: @alain-default-aside-collapsed-nav-fs;
          }
          .@{sidebar-nav-prefix-cls}__item-img {
            width: @alain-default-aside-collapsed-nav-img-wh;
            height: @alain-default-aside-collapsed-nav-img-wh;
          }
          .@{sidebar-nav-prefix-cls}__item-text {
            opacity: 0;
            display: none;
          }
        }
      }
      .@{sidebar-nav-prefix-cls}__group-title {
        display: none;
      }
    }
    .@{sidebar-nav-prefix-cls} {
      &__sub {
        display: none !important;
        &-arrow {
          display: none;
        }
      }
    }
  }
}

@{footer-toolbar-prefix} {
  &__left {
    margin-left: @alain-default-aside-wd;
  }
}

@{alain-default-prefix}__collapsed {
  @{footer-toolbar-prefix} {
    &__left {
      margin-left: @alain-default-aside-collapsed-wd;
    }
  }
}

@{footer-toolbar-prefix}__body {
  @{alain-default-prefix}__content {
    margin-bottom: @layout-gutter + @footer-toolbar-height;
  }
}

@{full-content-prefix} {
  &__body {
    .alain-default__content {
      router-outlet + * {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
    .alain-default__content-title {
      margin-left: -24px;
    }
  }
  &__opened {
    .alain-default__header,
    .alain-default__aside,
    reuse-tab {
      display: none !important;
    }
    .alain-default__content {
      margin: 24px !important;
    }
  }
  &__hidden-title {
    .alain-default__content-title,
    .page-header {
      display: none !important;
    }
  }
}

@{alain-default-prefix} {
  @{page-header-prefix} {
    padding: @alain-default-content-padding - 12 @alain-default-content-padding 0 @alain-default-content-padding;
    margin-right: -@alain-default-content-padding;
    margin-left: -@alain-default-content-padding;
    margin-bottom: @alain-default-content-padding;
    border-bottom: 1px solid @alain-default-content-heading-border;
  }
}

@{quick-menu-prefix} {
  @media (max-width: @mobile-max) {
    right: -(@alain-default-content-padding + @quick-menu-border-width) !important;
  }
}

@{reuse-tab-prefix} {
  margin: 0 -@alain-default-content-padding 0 -@alain-default-content-padding;
}

@{alain-default-prefix}__fixed {
  @{reuse-tab-prefix} {
    position: fixed;
    top: @alain-default-header-hg;
    left: @alain-default-aside-wd + @alain-default-content-padding;
    right: @alain-default-content-padding;
    z-index: @zindex-fixed + 1;
  }
}

@{alain-default-prefix}__collapsed {
  @{reuse-tab-prefix} {
    left: @alain-default-aside-collapsed-wd + @alain-default-content-padding;
  }
}

@media (min-width: @mobile-min) {
  @{alain-default-prefix}__fixed {
    @{reuse-tab-prefix} {
      + router-outlet {
        display: block;
        height: @reuse-tab-height;
      }
    }
  }
}

@media (max-width: @mobile-max) {
  @{alain-default-prefix}__fixed {
    @{reuse-tab-prefix} {
      position: unset;
      margin-top: @reuse-tab-height;
      width: initial;
    }
  }
}

@{alain-default-prefix}__nav-item .@{ant-prefix}-badge-count {
  top: 6px;
  right: 18px;
}

.alain-default-widget-app-icons-mixin(@enabled) when (@enabled=true) {
  .app-icons {
    padding: @layout-gutter * 2;
    .@{ant-prefix}-col-6 {
      padding: (@layout-gutter * 2) 0;
      border-radius: 4px;
      text-align: center;
      transition: background-color 300ms;
      cursor: pointer;
      &:hover {
        background-color: #ececec;
      }
    }
    i {
      border-radius: 50%;
      font-size: 22px;
      padding: 15px;
    }
    small {
      font-size: 14px;
      padding-top: 4px;
      color: #9c9c9c;
      display: block;
    }
  }
}

.alain-default-widget-app-icons-mixin(@alain-default-widget-app-icons-enabled);

@alain-default-user-block-width: @alain-default-aside-wd - (@layout-gutter * 6);
@alain-default-user-block-avatar-hw: @avatar-size-lg;

.alain-default-aside-user-mixin(@enabled) when (@enabled=true) {

  @{alain-default-prefix}__aside-user {
    padding-top: (@layout-gutter * 3);
    margin: 0 auto;
    display: block !important;
    width: @alain-default-user-block-width;
    cursor: pointer;
    .@{ant-prefix}-dropdown-trigger {
      display: flex;
      align-items: center;
    }
    &-info {
      color: @text-color;
      width: @alain-default-user-block-width - @alain-default-user-block-avatar-hw - @layout-gutter;
    }
    &-avatar {
      margin-right: @layout-gutter;
    }
  }

  // Desktop
  @media (min-width: @mobile-min) {
    @{alain-default-prefix}__collapsed {
      @{alain-default-prefix}__aside-user {
        width: @alain-default-aside-collapsed-wd;
        &-info {
          display: none;
        }
        &-avatar {
          margin: 0 auto;
        }
      }
    }
  }
}

.alain-default-aside-user-mixin(@alain-default-aside-user-enabled);

@{alain-default-prefix}__fixed {
  @{alain-default-prefix} {
    &__header {
      position: fixed;
      top: 0;
      left: 0;
    }
    &__aside {
      position: fixed;
    }
    &__content {
      margin-top: @alain-default-header-hg;
    }
  }
}

@alain-fullscreen-prefix: ~'.alain-fullscreen';
@alain-fullscreen-zindex: @zindex-base;

@alain-fullscreen-bg: #f5f7fa;
@alain-fullscreen-content-padding-vertical: 0;
@alain-fullscreen-content-padding-horizontal: @layout-gutter * 2;

@{alain-fullscreen-prefix} {
  display: block;
  background-color: @alain-fullscreen-bg;
  padding: @alain-fullscreen-content-padding-vertical @alain-fullscreen-content-padding-horizontal;
}

@{alain-fullscreen-prefix} {
  @{page-header-prefix} {
    padding: @alain-fullscreen-content-padding-horizontal;
    padding-top: @alain-fullscreen-content-padding-horizontal - 12;
    padding-bottom: @alain-fullscreen-content-padding-horizontal - 12;
    margin-right: -@alain-fullscreen-content-padding-horizontal;
    margin-left: -@alain-fullscreen-content-padding-horizontal;
    margin-bottom: @alain-fullscreen-content-padding-vertical;
  }

}

/* You can add global styles to this file, and also import other style files */

// 可以通过 https://ng-alain.github.io/ng-alain/ 获取主题参数代码
// The theme paraments can be generated at https://ng-alain.github.io/ng-alain/