@import './antd-colors';
@import '../functions';

$remFactor: 16px;

$ns: 'antd-';

$primary: $blue-6;
$info: $primary;
$success: $green-6;
$warning: $gold-6;
$danger: $red-5;
$light: #d9d9d9;
$white: #fff;
$black: #000;

$info-bg: #eaf6fe;
$success-bg: #f1fdeb;
$warning-bg: #fcf7f1;
$danger-bg: #fff5f5;

// Border color
$border-color-base: #d9d9d9; // base border outline a component
$border-color-split: #5d5d5d; // 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

$text-color: rgba(0, 0, 0, 0.85);

$text--muted-color: #6c6c6c;
$text--loud-color: lighten($text-color, 10%);

$link-color: $info;

$Button-onDisabled-bg: #f5f5f5;
$Button-onDisabled-color: rgba(0, 0, 0, 0.25);

@import '../variables';
@import '../properties';

:root {
  --fontFamilyBase: -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';

  --fontSizeBase: 14px;
  --lineHeightBase: 1.57;

  --borderColor: #eceff8;
  --text-color: #{$text-color};

  --text--muted-color: #999;
  --text--loud-color: #333;
  --link-onHover-decoration: none;

  --icon-color: inherit;
  --icon-onHover-color: var(--primary);

  --body-bg: #f0f2f5;

  --borderRadius: 2px;

  --Button-boxShadow: none;
  --Button-onActive-boxShadow: none;
  --Button-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
  // --Button-textShadow: 0 -1px 0 rgb(0 0 0 / 12%);
  --Button--default-border: #d9d9d9;
  --Button--default-onHover-border: #{$blue-5};
  --Button--default-onHover-bg: #fff;
  --Button--default-onHover-color: #{$blue-5};
  --Button--default-onActive-bg: #fff;
  --Button--default-onActive-border: #{$blue-7};
  --Button--default-onActive-color: #{$blue-7};
  --Button-onDisabled-borderColor: #d9d9d9;

  --Button--primary-onHover-bg: #{$blue-5};
  --Button--primary-onHover-border: #{$blue-5};

  --Card-onChecked-bg: #{$blue-1};
  --Card-onChecked-color: var(--body-color);
  --Card-onChecked-fieldLabel-color: var(--text--muted-color);
  --Card-onChecked-borderColor: #{$blue-5};

  --Calendar-btnCancel-bg: #fff;
  --Calendar-btnCancel-border: var(--Button--default-border);

  --Checkbox-onDisabled-color: #d9d9d9;
  --Checkbox-onDisabled-bg: #f5f5f5;

  --Radio-onDisabled-color: #c4c4c4;
  --Radio-onDisabled-bg: #f5f5f5;
  --Radio-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);

  --Rating-onActive-color: #fadb14;

  --Divider-borderStyle: solid;

  --Panel--default-bg: #fff;

  --Layout-aside-bg: #001529;
  --Layout-brand-bg: #001529;
  --Layout-aside-color: hsla(0, 0%, 100%, 0.65);
  --Layout-aside-subList-bg: #000c17;
  --Layout-aside-onHover-bg: none;
  --Layout-aside-onAcitve-bg: #1890ff;

  --ListControl-item-onHover-color: var(--primary);
  --ListControl-item-onHover-bg: var(--Button--default-onHover-bg);
  --ListControl-item-onHover-borderColor: var(--primary);

  --ListItem-onChecked-bg: #{$blue-1};
  --ListItem--strip-bg: #fff;

  --Modal-header-bg: #fff;
  --Modal-title-fontWeight: 500;

  --Form-input-onFocused-borderColor: #{$blue-5};
  --Form-input-borderColor: #{$border-color-base};
  --Form-input-boxShadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  --Form-select-borderWidth: #{px2rem(1px)};
  --Form-select-borderRadius: 0;
  --Form-select-borderColor: #{$border-color-base};
  --Form-select-bg: var(--white);
  --Form-select-onHover-bg: var(--white);
  --Form-select-onHover-borderColor: #{$blue-5};
  --Form-select-placeholderColor: #999;
  --Form-select-color: #000;
  --Form-select-caret-iconColor: #999;
  --Form-select-caret-onHover-iconColor: var(--primary);
  --Form-select-caret-fontSize: #{px2rem(12px)};
  --Form-select-outer-borderWidth: 0;
  --Form-select-outer-top: #{px2rem(32px)};
  --Form-select-outer-boxShadow: 0 3px 6px -4px rgb(0 0 0 / 12%),
    0 6px 16px 0 rgb(0 0 0 / 8%), 0 9px 28px 8px rgb(0 0 0 / 5%);
  --Form-select-menu-color: #333;
  --Form-select-menu-onHover-color: #000;
  --Form-select-menu-onHover-bg: #f5f5f5;
  --Form-select-menu-height: #{px2rem(24px)};
  --Form-select-popoverGap: #{px2rem(3px)};
  --Form-select-search-height: #{px2rem(30px)};
  --Form-selectValue-color: var(--primary);
  --Form-select-onFocus-boxShadow: 0 0 0 3px rgb(24 144 255 / 8%);

  --Pagination-onActive-backgroundColor: #fff;
  --Pagination-onActive-color: rgb(24, 144, 255);
  --Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);

  --Transfer-title-bg: #f0f2f5;
  // Tabs
  --Tabs-linkFontSize: #{px2rem(14px)};
  --Tabs--card-onActive-borderColor: var(--white);
  --Tabs--card-bg: var(--Table-thead-bg);
  --Tabs--radio-bg: var(--white);
  --Tabs-onActive-borderColor: #{darken($borderColor, 5%)};

  $Table-strip-bg: transparent;
  --Table-strip-bg: transparent;
  --Table-thead-bg: #fafafa;
  --Table-onHover-bg: rgb(250, 250, 250);
  --Table-onHover-borderColor: var(--Table-borderColor);
  --Table-onChecked-bg: #{$blue-1};
  --Table-onChecked-color: var(--Table-color);
  --Table-onChecked-borderColor: var(--Table-borderColor);

  --Switch-bgColor: #bfbfbf;
}