// 主题
$theme-color: #ffe60f; // 品牌色/主操作按钮/按钮移入/文字链
$theme-minor-color: #fffbd2; // 品牌色/主操作按钮/按钮移入/文字链
// 主题色背景
$theme-color-bg: #D4E0F5;

// 辅助颜色
$success-color: #07cc89;
$success-color-1: #bdf6e3;
$success-color-2: #e7fef8;
$warning-color: #ffa200;
$warning-color-1: #ffd282;
$warning-color-2: #fff2dc;
$error-color: #f00a0a;
$error-color-1: #ffaa9c;
$error-color-2: #ffece9;
$aux-color: #5170fe;
$info-color: #999;
$label-color: #00c1f6;
$other-color: #b03afe;

$warning-fill: #fff3d4;
$aux-fill: #e7ebff;

// 文字
$font-color: #4b4b68; // 主要颜色
$font-tag-color: #4b4b68; // 标签
$font-main-color: #333; // 正文
$font-aux-color: #666; // 辅助色
$font-minor-color: #999; // 次要颜色
$font-hover-color: #ccc; // 提示文字
// $font-disabled-color: #291010; // 禁用文字
// $font-reverse-color: #fff; // rgba(#fff, 0.85); // 反差色

// $font-size-1: 20px;
// $font-size-1_h: 1.67vh;
// $font-size-2: 22px;
// $font-size-2_h: 1.83vh;
// $font-size-3: 24px;
// $font-size-3_h: 2vh;
// $font-size-4: 26px;
// $font-size-4_h: 2.17vh;
// $font-size-5: 28px;
// $font-size-5_h: 2.33vh;
// $font-size-6: 30px;
// $font-size-6_h: 2.5vh;
// $font-size-7: 32px;
// $font-size-7_h: 2.67vh;
$font-size-1: 1.67vh;
$font-size-2: 1.83vh;
$font-size-3: 2vh;
$font-size-4: 2.17vh;
$font-size-5: 2.33vh;
$font-size-6: 2.5vh;
$font-size-7: 2.67vh;

$font-cn: Oppo Sans;
$font-en: droid-serif;
$font-num: Oppo Sans;
$font-text: AlibabaHealth;
// $font-text: AlimamaShuHeiTi;
$font-special: AlimamaShuHeiTi;

$font-weight: 500;

// 书本的标签颜色
$book-tag-bg: #56d6f0;
$book-tag-color: #fff;
// 书架的颜色
$book-shelf-color: #6a8cf4;

// 分割色
$split-color: #e6e6e6;
// 边框色
$border-color: $split-color;
$border-input-color: #e8eaec;

// 背景色
$gradient: linear-gradient(180deg, #4de798 0%, #a2fb6e 100%); // 主渐变
$gray_bg: $theme-color-bg; // 灰系背景
$grey-gradient: $theme-color-bg; // 灰系背景
$white-gradient: $theme-color-bg; // 白系背景
$blue-gradient: #7CABFF;// 蓝色背景

$page-fill: #fafafa;
$bg-fill: #fff;
$bg-aux-fill: #f5f5f5;
$bg-theme-aux-fill: #fffdee;
$input-fill: #fafafa;
$menuItem-hover-fill: #f7f7f7;
$hover-fill: #f9f9f9;
$error-fill: $error-color;
$hover-theme-fill: #eed715;
$disabled-theme-fill: #fff387;
$bg-minor-theme-fill: #fffde9;

// 按钮
$btn-fill: #eeeeee; //#f5f5f5;
$btn-hover-fill: #e6e6e6;
$btn-disabled-fill: #dbdbdb; //#f5f5f5;
$btn-error-fill: #ffefec;
$btn-primary-fill: $theme-color;
$btn-primary-hover-fill: #f8e00e; //#eed715;
$btn-primary-disabled-fill: #fff387;

// 滚动条颜色
$scroll-color: #f5f5f5;
// 图标
$icon-color: #4d4d4d;
$icon-minor-color: #999;
$icon-aux-color: #ccc;
$icon-hover-fill: $hover-fill;

// 间隔
$space-1: 8px;
$space-1_h: 0.67vh;
$space-2: 16px;
$space-2_h: 1.33vh;
$space-3: 24px;
$space-3_h: 2vh;
$space-4: 32px;
$space-4_h: 2.67vh;
$space-5: 40px;
$space-5_h: 3.33vh;
$space-6: 48px;
$space-6_h: 3vh;
$space-7: 56px;
$space-7_h: 4.67vh;
$space-8: 64px;
$space-8_h: 5.33vh;
$space-70: 70px;
$space-70_h: 5.83vh;

// 圆角
// $radius-1: 4px;
$radius-1: 0.33vh;
// $radius-2: 8px;
$radius-2: 0.67vh;
// $radius-3: 12px;
$radius-3: 1vh;
// $radius-4: 16px;
$radius-4: 1.33vh;
// $radius-5: 20px;
$radius-5: 1.67vh;
// $radius-6: 24px;
$radius-6: 2vh;
// $radius-7: 28px;
$radius-7: 2.33vh;

// 单行省略
@mixin single_ellipsis {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

// 多行省略
@mixin multiple_ellipsis($line: 3) {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: $line;
}

@mixin scroll_bar {
  &::-webkit-scrollbar {
    width: 4px;
    height: 0.33vh;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 0.67vh;
    background-color: $scroll-color;
  }

  &::-webkit-scrollbar-track {
    border-radius: 0.67vh;
    background-color: transparent;
  }
}

@mixin hidden_scroll {
  overflow-y: auto;
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
  ::-webkit-scrollbar {
    width: 0;
  }
}

// 字体描边
@mixin font-stroke($color: #424155, $stroke: 3px) {
  position: relative;
  z-index: 0;
  &::after {
    width: 100%;
    content: attr(data-content);
    -webkit-text-stroke: $stroke * 2 $color;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
}

// 渐变边框
@mixin gradient($color1, $color2) {
  background: $color1, $color2; // 背景叠两层颜色，一层用于背景，一层用于边框
  background-repeat: no-repeat;
  background-origin: border-box;
  background-clip: content-box, border-box; // 使用clip切出对应的背景应用场景
}

@mixin checkbox {
  /* 修改复选框背景和形状 */
  :deep(.el-checkbox__input) {
    .el-checkbox__inner {
      width: 3.33vh;
      height: 3.33vh;
      border-radius: 50% !important; /* 圆形样式 */
      background: rgba(0, 0, 0, 0.65);
      border: 0.25vh solid #a2fb6e;

      &::after {
        border-width: 0.25vh;
        height: 1.25vh;
        left: 0.92vh;
        top: 0.42vh;
        width: 0.67vh;
        border-color: #a2fb6e;
      }

      &::before {
        height: 0.67vh;
        top: 1.08vh;
        background-color: #a2fb6e;
      }
    }
  }
}

/* 公共动画 */
.animate__breath {
  animation-name: breath;
  animation-timing-function: ease-in-out;
}
.animate__slideInLeft {
  animation-name: slideInLeft;
}
.animate__slideInRight {
  animation-name: slideInRight;
}
.animate__animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.animate__animated.animate__infinite {
  animation-iteration-count: infinite;
}
.animate__shakeX {
  animation: shake 0.6s linear forwards;
}
@keyframes shake {
  0% {
    transform: translateX(0px);
  }
  12% {
    transform: translateX(7px);
  }
  25% {
    transform: translateX(-7px);
  }
  50% {
    transform: translateX(7px);
  }
  62% {
    transform: translateX(-7px);
  }
  75% {
    transform: translateX(7px);
  }
  100% {
    transform: translateX(0px);
  }
}
@keyframes breath {
  0% {
    transform: scale3d(1, 1, 1);
  }
  50% {
    transform: scale3d(1.2, 1.2, 1.2);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

@keyframes slideInLeft {
  0% {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInRight {
  0% {
    transform: translate3d(100%, 0, 0);
    visibility: visible;
  }
  100% {
    transform: translate3d(0, 0, 0);
  }
}
/* 骨架屏公用动画
    $name：动画名
    $color：渐变颜色
*/
@mixin animation($name, $color, $rotate: 120deg) {
  animation-name: #{$name};
  animation-duration: 1.6s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  // fcf37a
  @keyframes #{$name} {
    0% {
      background-size: 300% 100%;
      background-image: linear-gradient($rotate, transparent 40%, $color 50%, transparent 60%);
      background-position: 100% 50%;
    }

    100% {
      background-size: 300% 100%;
      background-image: linear-gradient($rotate, transparent 40%, $color 50%, transparent 60%);
      background-position: 0 50%;
    }
  }
}

// 背景
@mixin main_bg {
  background: $theme-color-bg;
}
@mixin gray_bg {
  background: $theme-color-bg;
}