// 主题色
$--color-primary: #4f47f5ff; // 主题色
$--color-primary-light: lighten($--color-primary, 5%); // 主题色的高亮版本
$--color-primary-button-gradient: linear-gradient(
  311deg,
  #8d5cff 0%,
  #026eff 100%
); // 主题色的渐变色按钮

// 按钮禁用效果
$--color-primary-disabled: #155aef24; // 主题色的禁用版本

// 危险色主题
$--color-primary-danger: #ff0000; // 危险色
$--color-primary-danger-light: lighten(
  $--color-primary-danger,
  5%
); // 危险色的高亮版本

// 危险色禁用效果
$--color-primary-danger-disabled: #ff000024; // 危险色的禁用版本

// 描述文本颜色
$--color-primary-desc-text: #51525d; // 主题色的描述文本颜色
$--color-primary-desc-text-drank: #999; // 主题色的深色描述文本颜色

// 表格悬停效果
$--color-primary-table-hover: #eff0f8; // 表格行悬停背景色
$--color-primary-table-button-hover: #e3e5f1; // 表格按钮悬停背景色

// 标签颜色
$--color-primary-label: #70778d; // 主题色的标签颜色

// 按钮颜色
$--color-primary-button-color: $--color-primary; // 主题色的按钮文字颜色
$--color-primary-button-background: #4f47f51a; // 主题色的按钮背景色

// 成功色
$--color-primary-success: #02a838; // 成功色

// 边框圆角
$--border-radius: 8px; // 全局边框圆角

// 消息框渐变色
$--message-success-light: linear-gradient(
  180deg,
  #d6f1de 0%,
  #ffffff 100%
); // 成功消息框的渐变色
$--message-error-light: linear-gradient(
  180deg,
  #fee4e7 0%,
  #ffffff 100%
); // 错误消息框的渐变色
$--message-warning-light: linear-gradient(
  180deg,
  #ffeee1 0%,
  #ffffff 100%
); // 警告消息框的渐变色
$--message-info-light: linear-gradient(
  180deg,
  #edf2fc 0%,
  #ffffff 100%
); // 信息消息框的渐变色

// 消息框边框色
$--message-success-border: #1cb16f; // 成功消息框的边框色
$--message-error-border: #e44655; // 错误消息框的边框色
$--message-warning-border: #dd7125; // 警告消息框的边框色
$--message-info-border: #cecece; // 信息消息框的边框色

// 根变量
:root {
  --swiper-theme-color: #4f47f5ff; // Swiper 组件的主题色
  --color-primary: #4f47f5ff; // 主题色
  --color-primary-disabled: #155aef24; // 主题色的禁用版本
  --color-primary-danger: #ff0000; // 危险色
  --color-primary-label: #70778d; // 主题色的标签颜色
  --color-primary-desc-text-drank: #999; // 主题色的深色描述文本颜色
  --ep-color-bg: #fff !important; // 全局背景色
}

// 描述文本样式
.theme-primary-desc-text {
  color: $--color-primary-desc-text; // 主题色的描述文本颜色
}

.theme-primary-desc-text-drank {
  color: $--color-primary-desc-text-drank; // 主题色的深色描述文本颜色
}

// 表情选择器背景色
.emoji-picker {
  --ep-color-bg: #fff !important; // 表情选择器的背景色
}

#nprogress {
  & .bar {
    background: $--color-primary-button-gradient;
  }
  & .peg {
    box-shadow: 0 0 10px $--color-primary-button-gradient,
      0 0 5px $--color-primary-button-gradient;
  }
}

.desc-text-color {
  color: $--color-primary-desc-text-drank;
}
.back-theme-color {
  background: $--color-primary;
}
.theme-color {
  color: $--color-primary;
}
.theme-line-back {
  background: $--color-primary-button-gradient;
}
