@import url('element-plus/dist/index.css');
@import url('element-plus/theme-chalk/dark/css-vars.css'); // 暗黑主题
@import url('@/styles/base.scss');
@import url('@/styles/global.scss');

// 重置主题色变量
* {
  --el-color-primary: var(--ds-color-primary); // 主色调
  --el-text-color-primary: var(--ds-text-color-primary); // 主文本色
  --el-bg-color: transparent; // 背景色
  --el-fill-color-blank: transparent; // 背景色
  --el-bg-color-page: transparent; // 页面背景色
  --el-border-radius-base: var(--ds-border-radius-base); // 边框圆角
  --el-collapse-header-height: 28px; // 折叠面板标题高度
  --el-component-size-large: 32px; // 大组件尺寸
  --el-text-color-regular: var(--ds-text-color-regular); // 次文本色
  --el-border-color: var(--ds-border-color); // 边框色
  --el-border-width: var(--ds-border-width); // 边框宽度
  --el-border-style: var(--ds-border-style); // 边框样式
  --el-box-shadow: var(--ds-box-shadow); // 阴影
  --el-border: var(-ds-border-width) var(--ds-border-style) var(--ds-border-color);
}
/* button */
.el-button--info {
  --el-button-bg-color: var(--el-color-info);
  // --el-button-border-color: var(--el-color-info);
  // --el-button-outline-color: var(--el-color-info-light-5);
  // --el-button-active-color: var(--el-color-info-dark-2);
  // --el-button-hover-text-color: var(--el-color-white);
  // --el-button-hover-link-text-color: var(--el-color-info-light-5);
  // --el-button-hover-bg-color: var(--el-color-info-light-3);
  // --el-button-hover-border-color: var(--el-color-info-light-3);
  // --el-button-active-bg-color: var(--el-color-info-dark-2);
  // --el-button-active-border-color: var(--el-color-info-dark-2);
  // --el-button-disabled-text-color: var(--el-color-white);
  // --el-button-disabled-bg-color: var(--el-color-info-light-5);
  // --el-button-disabled-border-color: var(--el-color-info-light-5);
}

/* form */
.el-form-item__label {
  color: var(--ds-color-info); // 表单字体颜色
}
.el-form-item__content {
  color: var(--ds-color-info);
}
.el-input {
  --el-input-text-color: var(--ds-color-info); // 字体颜色
  --el-input-bg-color: transparent; // 背景颜色
}

.el-form-item--default {
  margin-bottom: 12px;
}
.el-form-item--default .el-form-item__content {
  line-height: 22px;
}
.el-switch {
  height: 20px;
}

/* tabs */
.ds-tabs {
  background-color: transparent;
  &.el-tabs {
    .ds-tabs-label {
      color: var(--ds-color-info);
    }
  }
  &.el-tabs__item.is-active,
  .el-tabs__item:hover {
    color: var(--ds-color-info);
  }
  &.el-tabs--card > .el-tabs__header {
    background-color: var(--ds-bg-color-light-4);
    border-bottom: none;
    margin: 0;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__nav {
    border: none;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
    border-bottom: none;
  }
  &.el-tabs--card > .el-tabs__header .el-tabs__item.is-active.is-closable .is-icon-close {
    width: 24px;
    height: 24px;
    font-size: 14px;
    color: var(--ds-color-info);
  }
  .el-tabs__item {
    padding: 0 14px;
  }
}

/* el-dropdown-menu */
/* el-popper */
.el-dropdown__popper.el-popper,
.el-dropdown__popper.el-popper .el-popper__arrow:before {
  border: none;
  background-color: var(--ds-bg-color-light-4);
  color: var(--ds-color-info);
}
.el-dropdown__popper {
  .el-dropdown-menu__item:not(.is-disabled):focus,
  .el-dropdown-menu__item:not(.is-disabled):hover {
    background-color: var(--ds-color-primary);
    color: var(--ds-color-info);
  }
}
.ds-popper-dropdown {
  .title {
    padding: 5px 16px;
    line-height: 22px;
    border-bottom: 1px solid var(--ds-bg-color-light-3);
  }
  .el-dropdown-menu__item {
    color: var(--ds-color-info);
  }
  .el-dropdown-menu--large {
    padding: 0;
    .el-dropdown-menu__item {
      padding: 10px 16px;
    }
  }
}
