@use "mixins/namespace" as *;

// nprogress 样式
#nprogress .bar {
  background: var(--#{$el-namespace}-color-primary) !important;
}

#nprogress .spinner-icon {
  border-top-color: var(--#{$el-namespace}-color-primary) !important;
  border-left-color: var(--#{$el-namespace}-color-primary) !important;
}

#nprogress .peg {
  box-shadow:
    0 0 10px var(--#{$el-namespace}-color-primary),
    0 0 5px var(--#{$el-namespace}-color-primary) !important;
}

// 克隆并自定义 ElMessage 样式，不会影响 ElMessage 原本样式，在 src/utils/message.ts 中调用自定义样式 ElMessage 方法即可，暗黑模式在 src/style/dark.scss 文件进行了适配
.antd-message {
  padding: 10px 13px !important;
  background: #ffffff !important;
  border-width: 0 !important;
  box-shadow:
    0 3px 6px -4px #0000001f,
    0 6px 16px #00000014,
    0 9px 28px 8px #0000000d !important;

  &.#{$el-namespace}-message.is-closable .#{$el-namespace}-message__content {
    padding-right: 17px !important;
  }

  .#{$el-namespace}-message__content {
    color: #000000d9 !important;
    pointer-events: all !important;
    background-image: initial !important;
  }

  .#{$el-namespace}-message__closeBtn {
    right: 9px !important;
    outline: none;
    border-radius: 4px;
    transition:
      background-color 0.2s,
      color 0.2s;

    &:hover {
      background-color: rgb(0 0 0 / 6%);
    }
  }
}

html.dark {
  .antd-message {
    background-color: var(--#{$teek-namespace}-gray-200) !important;
    background-image: initial !important;
    box-shadow:
      rgb(13 13 13 / 12%) 0 3px 6px -4px,
      rgb(13 13 13 / 8%) 0 6px 16px 0,
      rgb(13 13 13 / 5%) 0 9px 28px 8px !important;

    .#{$el-namespace}-message__content {
      color: #ffffff !important;
      pointer-events: all !important;
      background-image: initial !important;
    }

    .#{$el-namespace}-message__closeBtn {
      &:hover {
        color: var(--#{$el-namespace}-text-color-regular);
        background-color: var(--#{$teek-namespace}-gray-400);
        border-radius: 50%;
      }
    }
  }
}
