@prefix-base: ~'@{nameSpace}-base';

.@{prefix-base}-disabled {
  color: var(--design-text-color-5);
  cursor: not-allowed;
}

.@{prefix-base}-blur {
  background: rgba(var(--design-blur-bg-color), 0.05);
  box-shadow: 0 0 6px rgba(var(--design-rgba-distant), 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

// 禁止选中
.not-user-select {
  user-select: none;
  -webkit-user-select: none;
}

// 鼠标变为小手
.cursor-pointer {
  cursor: pointer;
}

// 禁止点击
.cursor-not-allowed {
  cursor: not-allowed;
}

// 元素永远不会成为鼠标事件的target。但是，
// 当其后代元素的pointer-events属性指定其他值时，
// 鼠标事件可以指向后代元素，
// 在这种情况下，
// 鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器。
.pointer-events-none {
  pointer-events: none;
}

// 鼠标点击不穿透
.pointer-events-fill {
  pointer-events: fill;
}

.scrollbar,
.scrollbar-lg {
  @media screen and (min-width: 700px) {
    &::-webkit-scrollbar-thumb {
      /*滚动条里面小方块*/
      background: var(--design-base-color-5);
    }

    &::-webkit-scrollbar-track {
      /*滚动条里面轨道*/
      background: var(--design-base-color-2);
    }
  }
}

.scrollbar {
  @media screen and (min-width: 700px) {
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
  }

}

.scrollbar-lg {
  @media screen and (min-width: 700px) {
    &::-webkit-scrollbar {
      width: 8px;
      height: 8px;
    }
  }
}

// 占据整个元素
.absolute-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.relative {
  position: relative;
}