@import "../color/color";

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

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

// Primary colors
@primary-1: @netease-red-1;
@primary-2: @netease-red-2;
@primary-3: @netease-red-3;

// Colors
@primary-color: @primary-1;
@info-color: @sub-5;
@info-color-secondary: #e5eefa;
@success-color: @sub-1;
@success-color-secondary: #e2f6e2;
@error-color: @sub-3;
@error-color-secondary: #ffe7e7;
@warning-color: @sub-4;
@warning-color-secondary: #fffbe0;
@white: #fff;
@black: #000;

// Base colors
// Background color for `<body>`
@body-background: #fff;
// Base background color for most components
@component-background: #fff;
@font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif,
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
@code-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
@heading-color: @neutral-1;
@heading-color-dark: fade(#fff, 100%);
@text-color: @neutral-2;
@text-color-dark: fade(#fff, 85%);
@text-color-secondary: @neutral-3;
@text-color-secondary-dark: fade(#fff, 65%);
@text-color-inverse: @white;
@text-selection-bg: @primary-color;
@font-size-base: 14px;
@font-size-lg: @font-size-base + 2px;
@font-size-sm: @font-size-base - 2px;
@font-weight-base: 400;
@font-weight-xl: 700;
@font-weight-lg: 600;
@font-weight-md: 500;
@font-weight-sm: 300;
@font-feature-settings-base: 'tnum';
@font-variant-base: tabular-nums;
@line-height: 1.5715;
@line-height-base: 22px;
@line-height-lg: 24px;
@line-height-sm: 18px;
@border-radius-base: 4px;
@border-radius-xl: 8px;
@border-radius-lg: 6px;
@border-radius-sm: 2px;

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

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

// Border colors
@border-color-base: @neutral-7; // base border outline a component，组件的边框
@border-color-secondary: @neutral-5;
@border-color-split: @neutral-6;
@border-width-base: 1px; // width of the border for a component
@border-style-base: solid; // style of a components border

// Disabled states
@disabled-color: @neutral-4;
@disabled-bg: @neutral-5;

// Icon
@iconfont-css-prefix: icon-d;
@iconfont-css-full: portal-icon;

// Mask
@mask-background: rgba(0, 0, 0, 0.7);

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

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

// Shadow
@shadow-color: @neutral-8;
@box-shadow-base: 0 2px 12px 0 rgba(0, 0, 0, 0.02);

// Vertical paddings
@padding-xxl: 32px; // large layout content
@padding-xl: 24px; // layout content
@padding-ml: 20px; // middle layout content
@padding-lg: 16px; // containers
@padding-md: 14px; // small containers and buttons
@padding-sm: 12px; // Form controls and items
@padding-xs: 8px; // small items
@padding-xxs: 4px; // super small items

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

// zIndex list, order by `z-index`
@zindex-badge: auto;
@zindex-table-fixed: auto;
@zindex-affix: 10;
@zindex-back-top: 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;

// Button
@btn-color: @neutral-9;
@btn-bg: @primary-2;
@btn-border-radius-base: @btn-height-base / 2;
@btn-border-radius-lg: @btn-height-lg / 2;
@btn-border-radius-sm: @btn-height-sm / 2;

@btn-primary-color: @btn-color;
@btn-primary-bg: @primary-1;
@btn-primary-opacity: 0.8;

@btn-default-color: @neutral-1;
@btn-default-bg: @neutral-16;
@btn-default-hover-bg: #ebebeb;

@btn-danger-color: @btn-color;
@btn-danger-bg: @error-color;
@btn-danger-hover-bg: @primary-1;
@btn-danger-active-bg: @primary-1;

@btn-disable-color: @neutral-5;
@btn-disable-bg: @neutral-8;
@btn-disable-opacity: 0.2;

@btn-a-default-color: @neutral-4;
@btn-a-hover-color: @neutral-2;

@btn-padding-base: 0 20px;
@btn-padding-lg: 0 20px;
@btn-padding-sm: 0 @padding-sm;
@btn-font-size-lg: @font-size-lg;
@btn-font-size-sm: @font-size-sm;
@btn-font-weight: 400;

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

@btn-min-width-base: 80px;
@btn-min-width-lg: 120px;
@btn-min-width-sm: 64px;

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

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

// Dropdown
@dropdown-box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.1);
@dropdown-edge-child-vertical-padding: 4px;
@dropdown-font-size: @font-size-base;
@dropdown-horizontal-padding: @padding-lg;
@dropdown-line-height: 22px;
@dropdown-menu-bg: @component-background;
@dropdown-menu-item-hover-bg: #f5f5f5;
@dropdown-menu-submenu-disabled-bg: @component-background;
@dropdown-selected-color: @primary-color;
@dropdown-vertical-padding: 9px;

// Menu
@menu-bg: @component-background;
@menu-collapsed-width: 80px;
@menu-highlight-color: @primary-color;
@menu-horizontal-line-height: @line-height-lg;
@menu-icon-margin: 8px;
@menu-icon-size-lg: 32px;
@menu-icon-size: 24px;
@menu-inline-toplevel-item-height: 40px;
@menu-item-active-bg: rgba(245, 52, 54, 0.06);
@menu-item-active-border-width: 3px;
@menu-item-boundary-margin: 8px;
@menu-item-color: @text-color;
@menu-item-font-size: @font-size-base;
@menu-item-group-height: @line-height-base;
@menu-item-group-title-color: @text-color-secondary;
@menu-item-group-title-font-size: @menu-item-font-size;
@menu-item-height: 40px;
@menu-item-horizontal-padding: 20px;
@menu-item-vertical-margin: 4px;
@menu-item-vertical-padding: @padding-lg;
@menu-popup-bg: @component-background;
