//  深色版本滚动条
.scroll-style-dark (@width: 12px) {
  &::-webkit-scrollbar {
    width: @width;
  }
  // 滑块槽颜色
  &::-webkit-scrollbar-track {
    width: @width;
    background: #3f4664;
  }
  // 滑块颜色
  &::-webkit-scrollbar-thumb {
    width: @width;
    background: #4c557c;
  }
}

// iconfont全局样式设置
.iconStyle(@ruleset: {}) {
  .iconfont,
  .zhnycomp,
  .zhnyicon {
    @ruleset();
  }
}

@body-light-bg: #edeff5; // body浅色皮肤背景色
@body-dark-bg: #091630; // body深色皮肤背景色
@body-light-text: #333333; // body浅色文字色
@body-dark-text: #ffffff; // body深色文字色

@blue-primary: #4284e5; // 蓝色皮肤主色
@red-primary: #b8141a; // 红色皮肤主色
@green-primary: #497174; // 绿色皮肤主色
@gray-primary: #3d4460; // 灰色皮肤主色
@yellow-primary: #f7b559; // 琥珀黄皮肤主色
@dark-primary: #5e76d7; // 深色皮肤主色

@container-light-filter-bg: #fafafa; // 容器浅色高级筛选区域背景色

@page-footer-light-bg: #f9f9f9; // pageFooter浅色皮肤背景色
@page-footer-dark-bg: #212943; // pageFooter深色皮肤背景色

@popmodal-light-header-bg: #ffffff;
@popmodal-dark-header-bg: #1b223e;
@popmodal-light-header-border: #d3d3d3;
@popmodal-dark-header-border: #3f465c;

@drawer-total-light-bg: #edeff5;
@drawer-total-dark-bg: #2a3253;
@drawer-content-light-bg: #ffffff;
@drawer-content-dark-bg: #1b223e;

@subtitle-light-border: #e5e5e5;
@subtitle-dark-border: #3f465c;
@subtitle-light-level3-bg: #eef3ff;
@subtitle-dark-level3-bg: #2a3253;

// TabBox组件公共变量，与TabContainer组件公共变量
@tab-box-title-fontsize: 16px; // 标题文字高度
@tab-box-title-height: 50px; // 标题区域高度
@tab-box-title-gap: 20px; // 标题之间的横向间距
@tab-box-ink-height: 3px; // 标题装饰线高度
@tab-box-title-body-gap: 10px; // 标题和内容区域的垂直间距
@tab-box-slot-form-item-gap: 16px; // 标题区域右侧插槽表单之间的横向间距
@tab-box-slot-form-label-text-gap: 8px; // 标题区域右侧插槽表单文字和表单之间的横向间距
@tab-box-slot-form-button-gap: 8px; // 标题区域右侧插槽表单按钮之间的间距
@tab-box-bg: #fff; // 标题默认背景色
@tab-box-dark-bg: #1b223e; // 深色皮肤下，标题默认背景色
@tab-box-title-bottom-line-color: #e5e5e5; // 标题底部横线颜色
@tab-box-title-bottom-dark-line-color: #3f465c; // 深色皮肤下，标题底部横线颜色
@tab-box-default-title-color: #666666; // 标题默认文字色
@tab-box-default-dark-title-color: #808596; // 深色皮肤下，标题默认文字色
@tab-box-disabled-title-color: #B2B2B2; // 标题禁用文字色
@tab-box-disabled-dark-title-color: #5B5F6C; // 深色皮肤下，标题禁用文字色
@tab-box-title-selected-color: #333333; // 标题选中标题文字颜色
@tab-box-title-selected-dark-color: #ffffff; // 深色皮肤下，标题选中标题文字颜色