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

$remFactor: 16px;

$ns: 'antd-';

// yunshe4.0 font-size
$T1: 10px;
$T2: 12px;
$T3: 14px;
$T4: 16px;
$T5: 18px;
$T6: 20px;
$T7: 22px;
$T8: 24px;
$T9: 28px;
$T10: 30px;
$T11: 32px;
$T12: 34px;
$T13: 36px;
$T14: 40px;

// yunshe4.0 border-radius
$R1: 0;
$R2: px2rem(2px);
$R3: px2rem(4px);
$R4: px2rem(6px);
$R5: px2rem(8px);
$R6: px2rem(10px);
$R7: px2rem(16px);
$R8: 50%;

$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;

@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';

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

  --Page-header-bg: #fff;
  --Form-input-bg: #{$G11};

  --saas-crud-title-from-color: #f7f9fc;
  --Alert-fontSize: 13px;

  --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-6};
  --Button--default-onHover-bg: #fff;
  --Button--default-onHover-color: #{$blue-6};
  --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-6};
  --Button--primary-onHover-border: #{$blue-6};
  --Button--primary-bg: var(--primary);
  --Button--primary-border: var(--primary);
  --Button-onDisabled-bg: rgba(0,0,0,.25);

  --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: #c5c5c5;

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

  --Rating-onActive-color: #fadb14;

  --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: var(--saas-Primary-Color);

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

  --Nav-item-onActive-borderLeft: 0;

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

  --Form-item-fontSize: var(--fontSizeBase);
  --Form-item-fontColor: var(--body-color);
  --Form-input-onFocused-borderColor: #{$blue-6};
  --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-6};
  --Form-select-placeholderColor: rgba(0,0,0, .45);
  --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%);
  --Form-textarea-disabled: rgba(0,0,0,0.9);

  --Page-aside-bg: #ffffff;
  // Jay
  // --Pagination-onActive-backgroundColor: #fff;
  // --Pagination-onActive-color: rgb(24, 144, 255);
  // --Pagination-onActive-border: #{px2rem(1px)} solid var(--primary);
  --Pagination-onActive-backgroundColor: #3582fb;
  --Pagination-onActive-color: #fff;
  --Pagination-onActive-border: #{px2rem(1px)} solid #3582fb;

  --Transfer-title-bg: #f0f2f5;
  // Tabs
  --Tabs-linkFontSize: #{px2rem(14px)};
  --Tabs--card-bg: var(--Table-thead-bg);
  --Tabs--radio-bg: var(--white);
  --Tabs--vertical-onActive-bg: #e7f7ff;
  --Tabs--vertical-onActive-borderWidth: 0 3px 0 0;
  --Tabs--vertical-onActive-container-bg: #fff;
  --Tabs--vertical-onActive-container-borderRight: 1px solid #f0f0f0;

  $Table-strip-bg: transparent;
  --Table-strip-bg: transparent;
  --Table-thead-bg: #fafafa;
  --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;

  // timeline
  --TimelineItem--axle-flex: 0 0 #{px2rem(26px)};
  --TimelineItem--left-line-width: #{px2rem(2px)};
  --TimelineItem--left-line-left: #{px2rem(13px)};
  --TimelineItem--left-line-top: #{px2rem(20px)};
  --TimelineItem--round-width: #{px2rem(8px)};
  --TimelineItem--round-height: #{px2rem(8px)};
  --TimelineItem--round-left: #{px2rem(10px)};
  --TimelineItem--round-top: #{px2rem(8px)};
  --TimelineItem--icon-width: #{px2rem(16px)};
  --TimelineItem--icon-height: #{px2rem(16px)};
  --TimelineItem--icon-left: #{px2rem(6px)};
  --TimelineItem--content-padding-bottom: #{px2rem(16px)};
  --TimelineItem--content-margin-left: #{px2rem(8px)};
  --TimelineItem--content-time-margin-bottom: #{px2rem(4px)};
  --TimelineItem--content-title-margin-bottom: #{px2rem(4px)};
  --TimelineItem--detail-button-margin-bottom: #{px2rem(8px)};
  --TimelineItem-detail-arrow-width: #{px2rem(16px)};
  --TimelineItem-detail-visible-padding: #{px2rem(10px)};
  --TimelineItem-detail-visible-max-width: #{px2rem(150px)};
  --Timeline-alternate-margin-left: #{px2rem(24px)};

  --TimelineItem--icon-radius: #{$R8};
  --TimelineItem--round-radius: #{$R8};
  --TimelineItem--content-radius: #{$R2};

  --TimelineItem-detail-visible-shadow: 0 #{px2rem(1px)} #{px2rem(10px)} 0 rgba(0 0 0 / 10%);
  --TimelineItem-detail-visible-border: rgba(0 0 0 / 10%);
  --TimelineItem-detail-visible-text: rgba(0,0,0,.65);

  --TimelineItem--font-size: #{$T2};

  --TimelineItem--text-primary-color: #{$text-color};
  --TimelineItem--text-secondary-color: rgba(0,0,0,.65);
  --TimelineItem--detail-button-color: var(--primary);
  --TimelineItem--line-bg: #{$G9};
  --TimelineItem--content-bg: #{$G10};
  --TimelineItem-round-bg: #{$G8};

  --Timeline--success-bg: var(--success);
  --Timeline--info-bg: var(--info);
  --Timeline--warning-bg: var(--warning);
  --Timeline--danger-bg: var(--danger);

  --Tree-item-onHover-bg: #edf7ff;

  //antd主题颜色变量
  --saas-main-bg: #fff;
  --saas-Title-Text: rgba(0,0,0,.9);
  --saas-Secondary-Text: rgba(0,0,0,.65);
  --saas-Placeholder-Text: rgba(0,0,0,.45);
  --saas-Link-Text: #4f86f4;
  --saas-Disable-Text: rgba(0,0,0,.25);
  --saas-Border-Dividers: #f0f0f0;
  --saas-Background-Header: #f7f9fc;
  --saas-SelectedBg: #fafafa;
  --saas-SelectedBorder: #3574ee;
  --saas-Button-Disabled: rgba(0,0,0,0.04);
  //查询器相关
  --saas-crud-filters-bg-color: var(--saas-Background-Header);
  --saas-crud-filters-font-color: var(--saas-SelectedBorder);
  --saas-crud-filters-font-border-color: var(--saas-SelectedBorder);

  --saasTabsBodyHoverBackgroundColor: #e2e3e5;
  --saas-table-thead-border-color: #e7e7e7;
  --saas-fold-text: rgba(0,0,0,.4);

  // ai工具相关
  --ai-tool-bg-image: linear-gradient(180deg, rgba(53, 116, 238, 0.16) 0%, rgba(255, 255, 255, 0.3) 130px);
  --ai-tool-bg-color: #f7f8fa;
  --ai-tool-footer-bg: #fff;
  --ai-tool-title-bg: transparent;
  --ai-tool-title-color: #2a3e61;

  // 文件预览通用模态框相关
  --image-gallery-modal-bg: #f7f8fa;
  //表格行颜色相关
  --Table-onHover-bg: #dfe6fc;
  --saas-crud-table-body-is-checked-color: #ebebeb;
  --saas-Table-Row-Success: #d7eccf;
  --saas-Table-Row-Primary: #b2d7ff;
  --saas-Table-Row-Warning: #fde6b8;
  --saas-Table-Row-Danger: #fdd3d5;
  --saas-Table-Row-Info: #c2d5fa;
  --saas-Table-Row-Success-Hover: #9bce86;
  --saas-Table-Row-Primary-Hover: #7fbdff;
  --saas-Table-Row-Warning-Hover: #fcd689;
  --saas-Table-Row-Danger-Hover: #fa9096;
  --saas-Table-Row-Info-Hover: #9ab9f6;

  // 日历/日程组件相关
  --schedule-datepicker-bg: #f7f8fa;
  --schedule-datepicker-font-color: #333;
  --schedule-datepicker-other-font-color: #999;
  --schedule-arrow-icon: rgba(0,0,0,.4);
  --schedule-split-border: rgba(0,0,0,0.04);

  // 富文本编辑器相关
  --w-e-textarea-bg-color: var(--Form-input-bg);
  --w-e-textarea-color: var(--saas-Title-Text);
  --w-e-textarea-border-color: var(--ai-tool-footer-bg);
  --w-e-toolbar-color: var(--saas-Title-Text);
  --w-e-toolbar-bg-color: var(--Form-input-bg);
  --w-e-toolbar-active-color: var(--saas-Title-Text);
  --w-e-toolbar-active-bg-color: var(--Form-input-bg);
  --w-e-toolbar-border-color: var(--ai-tool-footer-bg);
  --w-e-modal-button-bg-color: var(--Button--default-bg);
  --w-e-modal-button-border-color: var(--ai-tool-footer-bg);
}