@use './variate.scss' as *;
@use './vxe.scss' as *;
@use 'tailwindcss/base' as *;
@use 'tailwindcss/components' as *;
@use 'tailwindcss/utilities' as *;

// body {
//   // margin: 0;
//   padding: 0;
//   // height: 100vh;
//   // width: 1920px;
//   overflow: hidden;
//   margin: 0 auto;
//   overflow-x: auto;
// }

#app {
  min-width: 1240px;
  color: #1a1a1a;
  font: 400 14px PingFangSC-Regular;
  line-height: 20px;
  height: 100%;
}

p {
  margin: 0;
}

img {
  vertical-align: middle;
}

.el-tag {
  border-radius: 16px !important;

  &.el-tag--info {
    background: #fafafb;
    border: none;
  }
}

.el-form-item {
  margin-bottom: 16px;
}

/* popper 相关 */
.el-popper {
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.05) !important;
  border-radius: 16px !important;

  .el-scrollbar {
    border-radius: 16px;
  }

  &.hd-user .el-dropdown-menu {
    width: 200px;
    padding: 8px;

    .el-dropdown-menu__item {
      padding: 10px 16px 10px 26px;

      &:hover {
        background: $hover-color;
        border-radius: 8px;
        color: $main-color;
      }
    }
  }

  .el-select-dropdown__list {
    padding: 2px 8px !important;
  }

  .el-select-dropdown__item.hover {
    border-radius: $box-radius;
    color: $main-color;
  }
}

.el-cascader-menu {
  padding: 2px 8px !important;

  .el-cascader-node {
    &:hover {
      border-radius: $box-radius;
      background: $hover-color;
    }

    &.in-checked-path {
      color: $main-color !important;
    }
  }
}

.el-popover.el-popper {
  min-width: 40px !important;
}

.el-popper__arrow {
  height: 0 !important;
  width: 0 !important;

  &::before {
    height: 0 !important;
    width: 0 !important;
    border: none !important;
  }
}

/* 页面切换动画-s */
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 0.3s ease;
}

// slide-right
.slide-right-enter-from {
  opacity: 0;
  transform: translateX(-20px);
}

.slide-right-leave-to {
  opacity: 0;
  transform: translateX(20px);
}

// slide-left
.slide-left-enter-from {
  @extend .slide-right-leave-to;
}

.slide-left-leave-to {
  @extend .slide-right-enter-from;
}

.el-message-box {
  width: 440px;
  // height: 220px;
  border-radius: $box-radius;
  padding-bottom: 16px;

  .el-message-box__header {
    font-weight: 500;
    color: $main-text;
    font-size: 16px;
    text-align: center;
    font-family:
      PingFangSC-Medium,
      PingFang SC;
  }

  .el-message-box__container {
    padding: 30px 0 39px 0;
    color: $main-text;
    text-align: center;
  }

  .el-message-box__btns {
    display: flex;
    justify-content: center;
    align-items: flex-end;

    .el-button {
      min-width: 104px;
      height: 40px;
      border-radius: $box-radius;

      &:first-child {
        color: $minor-text;
        border: 1px solid $cancel-btn;

        &:hover {
          color: $main-color;
          border: 1px solid $main-color;
        }
      }
    }
  }
}

.el-main {
  background-color: #f7f7f7 !important;
}

img.emoji {
  width: 20px;
  height: 20px;
}

.el-button.el-button--primary {
  &:focus-visible {
    outline: none !important;
  }

  &:focus {
    background: #4f87f5 !important;
  }
}

.el-button--primary {
  &:not(.is-disabled) {
    background-color: $primary-color !important;
    border-color: $primary-color !important;
  }
  &:hover {
    opacity: $hover-opacity;
  }
}

.g-container {
  height: calc(100%) !important;
  padding: 16px;
}

.mj-table-select {
  .g-container {
    padding: 0 10px;
  }
}

.progress-1,
.task-canceled {
  color: #f00a0a;
}

.progress-80,
.task-ing {
  color: #409eff;
}

.progress-100,
.task-finished {
  color: #07cc89;
}

.progress-0,
.task-unfinished,
.task-published {
  color: #aaa;
}

.progress-60,
.task-ready {
  color: #ffa200;
}

.el-upload-list__item-file-name {
  overflow: visible !important;
}
