body {
  margin: 0;
  padding: 0;
  font-family:
    Roboto,
    -apple-system,
    BlinkMacSystemFont,
    'Helvetica Neue',
    'Segoe UI',
    'Oxygen',
    'Ubuntu',
    'Cantarell',
    'Open Sans',
    sans-serif;

  font-size: var(--font-size-default);

  --font-size-default: 14px;
  --font-size-xxs: 11px;
  --font-size-xs: 12px;
  --font-size-sm: 13px;
  --font-size-md: 15px;
  --font-size-lg: 16px;
  --font-size-xl: 18px;
  --font-size-xxl: 24px;
  --font-size-xxxl: 28px;

  --line-height-sm: 1.3rem;
  --line-height-md: 1.5rem;
}

* {
  // 内容不允许选中
  user-select: none;

  &::placeholder {
    color: var(--color-text-3);
  }
}

img {
  // 图片不允许拖拽
  -webkit-user-drag: none;
}

// 文字可选择
.select-text {
  user-select: text;

  * {
    user-select: text;
  }
}

// 可拖拽
.drag-area {
  -webkit-app-region: drag;
}

// 不可拖拽
.no-drag-area {
  -webkit-app-region: no-drag;
}

// 部分全屏组件元素不可拖拽
.arco-modal-mask,
.arco-image-preview-img-container {
  -webkit-app-region: no-drag;
}

// arco滚动条样式
.arco-scrollbar-small {
  width: 100%;
  .arco-scrollbar-track-direction-vertical {
    width: 12px;

    .arco-scrollbar-thumb-direction-vertical .arco-scrollbar-thumb-bar {
      width: 6px;
    }
  }
}

// 全局滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  position: absolute;
}

::-webkit-scrollbar-button {
  width: 6px;
  height: 0;
}

::-webkit-scrollbar-track {
  background: none;
}

::-webkit-scrollbar-thumb {
  border-radius: 3px;
  background-color: var(--color-fill-3);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--color-fill-4);
}

::-webkit-scrollbar-thumb:active {
  background-color: var(--color-fill-4);
}

// 组件动态文本尺寸
.arco-modal-title {
  font-size: var(--font-size-lg) !important;
}
.arco-form-item-label {
  font-size: var(--font-size-default) !important;
}

// vue过渡动画
.slide2top-enter-active,
.slide2top-leave-active {
  transition: transform 300ms;
}
.slide2top-enter-from,
.slide2top-leave-to {
  transform: translateY(100%);
}
.slide2top-enter-to,
.slide2top-leave-from {
  transform: translateY(0);
}

.fadein-enter-active {
  transition: opacity 300ms;
}
.fadein-enter-from,
.fadein-leave-to {
  opacity: 0;
}
.fadein-enter-to,
.fadein-leave-from {
  opacity: 1;
}

// 淡入
.fade-in-from {
  opacity: 0;
  transition: opacity 300ms;
}
.fade-in-to {
  opacity: 1;
}

// 置顶显示
.z-index-max {
  z-index: 999999;
}

// 子项选中样式
.item-click {
  transition: background-color 100ms linear;

  &:active {
    background-color: var(--color-fill-2);
  }
}
.item-active {
  background-color: var(--color-fill-3) !important;
}
