@import '../custom.less';

// 以下 class 仅含 tiny- 前缀用于布局/锁定
[class*=~'@{css-prefix}'] {
  font-family: 'HarmonyOSHans', 'Segoe UI', Arial, 'Microsoft YaHei', -apple-system, BlinkMacSystemFont,
    'Helvetica Neue', 'Helvetica', 'PingFang SC', 'Roboto', 'Noto Sans', sans-serif, 'HMOSColorEmojiCompat',
    'HMOSColorEmojiFlags', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  @apply box-border;

  *:after,
  *:before {
    @apply box-border;
  }

  a {
    @apply cursor-pointer;
    @apply bg-none;
    @apply no-underline;
    @apply outline-0;

    &:focus,
    &:active,
    &:hover {
      @apply outline-0;
      @apply no-underline;
    }
  }

  dl,
  dt,
  dd,
  ul,
  ol,
  li,
  th,
  td {
    @apply m-0;
    @apply p-0;
  }

  ol,
  ul {
    @apply list-none;
  }

  audio,
  canvas,
  video {
    @apply inline-block;
  }

  audio:not([controls]) {
    @apply hidden;
    @apply h-0;
  }

  mark {
    @apply bg-color-warning;
    @apply text-black;
  }

  pre {
    @apply whitespace-pre-wrap;
  }

  sub,
  sup {
    font-size: 75%;
    @apply ~'leading-[0]';
    @apply relative;
    @apply align-baseline;
  }

  sup {
    top: -0.5em;
  }

  sub {
    bottom: -0.25em;
  }

  fieldset {
    @apply border border-solid border-color-border-separator;
    @apply my-0 ~'mx-0.5';
    padding: 0.35em 0.625em 0.75em;
  }

  legend {
    @apply border-0;
    @apply p-0;
  }

  // 清除IE
  input::-ms-clear,
  input::-ms-reveal {
    @apply hidden;
  }

  button::-moz-focus-inner,
  input::-moz-focus-inner {
    @apply border-0;
    @apply p-0;
  }

  textarea {
    @apply overflow-auto;
    @apply align-top;
  }

  table {
    @apply border-collapse;
    @apply border-spacing-0;
  }

  .@{css-prefix}hide {
    @apply hidden;
  }

  .popper__arrow {
    &,
    &:after {
      @apply absolute;
      @apply block;
      @apply w-0;
      @apply h-0;
      @apply border-transparent;
      @apply border-solid;
    }
  }

  @media (min-width: 768px) {
    ::-webkit-scrollbar,
    &::-webkit-scrollbar {
      @apply ~'w-1.5';
      @apply ~'h-1.5';
    }

    ::-webkit-scrollbar-track-piece,
    &::-webkit-scrollbar-track-piece {
      @apply bg-color-bg-1;
    }

    ::-webkit-scrollbar-thumb,
    &::-webkit-scrollbar-thumb {
      @apply bg-color-fill-1;
      @apply rounded-full;
    }

    ::-webkit-scrollbar-thumb:hover,
    &::-webkit-scrollbar-thumb:hover {
      @apply bg-color-fill-7;
    }

    ::-webkit-scrollbar-thumb:active,
    &::-webkit-scrollbar-thumb:active {
      @apply bg-color-fill-7;
    }

    .@{css-prefix}scrollbar::-webkit-scrollbar {
      @apply w-2;
      @apply h-2;
    }

    .@{css-prefix}scrollbar::-webkit-scrollbar-track-piece {
      @apply bg-transparent;
      @apply border-0;
    }

    .@{css-prefix}scrollbar::-webkit-scrollbar-thumb {
      @apply bg-color-bg-3;
      @apply rounded;
    }

    .@{css-prefix}scrollbar::-webkit-scrollbar-thumb:hover {
      @apply bg-color-text-disabled;
    }

    .@{css-prefix}scrollbar::-webkit-scrollbar-thumb:active {
      @apply bg-color-text-disabled;
    }

    .@{css-prefix}min-scrollbar::-webkit-scrollbar {
      @apply w-1;
      @apply h-1;
    }

    .@{css-prefix}min-scrollbar::-webkit-scrollbar-track-piece {
      @apply bg-transparent;
      @apply border-0;
    }

    .@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb {
      @apply bg-color-bg-3;
      @apply rounded-sm;
    }

    .@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:hover {
      @apply bg-color-text-disabled;
    }

    .@{css-prefix}min-scrollbar::-webkit-scrollbar-thumb:active {
      @apply bg-color-text-disabled;
    }
  }
}

*,
::before,
::after {
  --tw-border-spacing-x: 0;
  --tw-border-spacing-y: 0;
  --tw-translate-x: 0;
  --tw-translate-y: 0;
  --tw-rotate: 0;
  --tw-skew-x: 0;
  --tw-skew-y: 0;
  --tw-scale-x: 1;
  --tw-scale-y: 1;
  --tw-scroll-snap-strictness: proximity;
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-ring-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow: 0 0 rgba(0, 0, 0, 0);
  --tw-shadow-colored: 0 0 rgba(0, 0, 0, 0);
  @apply border-0 border-solid;
}

// 图标托底效果 --- 详见 svg()
.tiny-svg-underlay {
  background-color: var(--tiny-underlay-bg, '#dbdbdb');
  border-radius: var(--tiny-underlay-br, '4px');
}

.tiny-svg-underlay > * {
  transform-origin: center;
  transform: scale(var(--tiny-underlay-scale, 0.6));
}