@import '../colors/darkColors.scss';

$primary-color: #47e;
$success-color: $green-6;
$danger-color: $red-6;
$warning-color: $gold-6;
$info-color: $blue-6;

$primary-1: mix(colorpalette($primary-color, 8), $component-background, 15%);
$primary-2: mix(colorpalette($primary-color, 7), $component-background, 25%);
$primary-3: mix($primary-color, $component-background, 30%);
$primary-4: mix($primary-color, $component-background, 45%);
$primary-5: mix($primary-color, $component-background, 65%);
$primary-6: $primary-color;
$primary-7: mix(colorpalette($primary-color, 5), $component-background, 90%);
$primary-8: mix(colorpalette($primary-color, 4), $component-background, 95%);
$primary-9: mix(colorpalette($primary-color, 3), $component-background, 97%);
$primary-10: mix(colorpalette($primary-color, 2), $component-background, 98%);

// 背景
$bg-default: #2a2b2e;                // 页面级，背景
$bg-gray: #232633;                // 页面级，背景
$bg-wraper: #2a2b2e;                 // 容器级，背景
$bg-container: $blueGray-2;         // 容器级，背景
$bg-component: #2a2b2e;              // 组件级，背景
$bg-disabled: $blueGray-2;
$bg-hover: $blueGray-1;
$bg-active: $primary-2;
$bg-panel-header: $bg-wraper; // 面板头部
$bg-panel-body: $bg-wraper; // 面板内容
$bg-panel-footer: $bg-wraper; // 面板脚注

$box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08);
$box-hover-shadow: 0 12px 12px 0 rgba(0, 0, 0, .08);

$shadow-up: 0 -6px 16px -8px rgba(0, 0, 0, .32), 0 -9px 28px 0 rgba(0, 0, 0, .2), 0 -12px 48px 16px rgba(0, 0, 0, .12);
$shadow-down: 0 6px 16px -8px rgba(0, 0, 0, .32), 0 9px 28px 0 rgba(0, 0, 0, .2), 0 12px 48px 16px rgba(0, 0, 0, .12);
$shadow-right: 6px 0 16px -8px rgba(0, 0, 0, .32), 9px 0 28px 0 rgba(0, 0, 0, .2), 12px 0 48px 16px rgba(0, 0, 0, .12);

// 间距
$padding: 4px;
$padding-xs: $padding;  // 4px
$padding-s: $padding*2; // 8px
$padding-m: $padding*3; // 12px
$padding-l: $padding*4; // 16px
$padding-xl: $padding*5; // 20px
$padding-xxl: $padding*6; // 24px

// 文字大小
$font-size-sm: 12px;
$font-size-base: 14px;
$font-size-md: 16px;
$font-size-lg: 18px;
$font-size-xl: 20px;
$font-size-heading: 24px;
$font-size-strong: 32px;
$font-weight: 500px;

// 文字颜色
$color-text-title: $blueGray-10; // 标题
$color-text-base: $blueGray-8; // 基本
$color-text-secondary: $blueGray-6; // 描述
$color-text-base-inverse: #fff;    // 基本 - 反色
$color-text-strong: $danger-color;       //价格、强调的数值，包含单位
$color-link: $primary-color;             // 链接

// 线条
$border-color: $blueGray-4;
$dividing-color: $blueGray-3;

// 圆角
$border-radius-base: 2px;
$border-radius-sm: 2px;

$switch-dot-color: #fff;

// 自定变量
$page-header-height: 52px;
$modal-padding: $padding-xl $padding-xxl;

@mixin page-container-width {
  padding: $padding-l $padding-xxl;
  min-width: 1200px;
  width: 96%;
  margin: 0 auto;
}

// 清除浮动
@mixin clearfix {
  &::before,
  &::after {
    content: " ";
    display: table;
  }

  &::after {
    clear: both;
  }
}

@mixin textEllipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin setWidth {
  margin: 0 auto;
  width: 100%;
  max-width: 1200px;
}

@mixin flexModal {
  top: 40px;
  padding-bottom: $padding-l;

  :global(.ant-modal-content) {
    min-height: 320px;
    max-height: calc(100vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  :global(.ant-modal-body) {
    flex: 1;
    overflow-y: auto;
  }
}

@mixin textOverflow($line) {
  overflow: hidden;
  display: -webkit-box; //将元素设为盒子伸缩模型显示
  -webkit-box-orient: vertical; //伸缩方向设为垂直方向
  -webkit-line-clamp: $line; //超出
  text-overflow: ellipsis;
}

// 黑色皮肤特有样式

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-thumb {
  background: $gray-4;
  width: 10px;
  border-radius: 5px;
}

::-webkit-scrollbar-track,
::-webkit-scrollbar,
::-webkit-scrollbar-corner {
  background: $gray-1;
  border-radius: 0;
}

::-webkit-scrollbar-track {
  border-color: $gray-4;
}

.ant-empty {
  .ant-empty-image {
    path,
    g,
    ellipse {
      fill: $primary-1;
    }

    g {
      stroke: $border-color;
    }
  }
}