@use '@/style/iconfont.css';
@use "./transition.scss";

.html-grey {
  filter: grayscale(100%);
}

.html-weakenss {
  filter: invert(80%);
}

.kra-table-box {
  @apply kra-surface;
  .el-table {
    @apply border-x border-t border-b-0 border-table-border border-solid -mx-[1px];
    border-radius: var(--kra-radius, 0.75rem);
  }
}

.kra-btn-list {
  @apply mb-3 flex items-center flex-wrap gap-2;
  .el-button+.el-button{
    @apply ml-0 !important;
  }
  .el-upload{
    .el-button{
      @apply ml-0 !important;
    }
  }
}

#nprogress .bar {
  background: #29d !important;
}
.kra-customer-icon {
  @apply w-4 h-4;
}

::-webkit-scrollbar {
  @apply hidden;
}

.kra-search-box {
  @apply kra-surface pb-0;
}

.kra-content-box {
  @apply kra-surface;
}

.kra-form-box {
  @apply kra-surface;
}

/* 树节点：统一圆角 + 柔和悬浮/选中背景，观感与全站一致（作用于所有 el-tree）。
   用插值输出 rgb()，避免 Sass 误解析 rgb() 内的 / */
.el-tree {
  background: transparent;
  .el-tree-node__content {
    height: 34px;
    border-radius: var(--kra-radius, 8px);
    transition: background-color 0.2s ease;
    &:hover {
      background: #{'rgb(var(--primary-color) / 0.08)'};
    }
  }
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background: #{'rgb(var(--primary-color) / 0.15)'} !important;
  color: rgb(var(--primary-color));
}

.el-dropdown {
  outline: none;
  * {
    outline: none;
  }
}