:root {
  --sui-radius-s: 4px;
  --sui-radius-m: 8px;
  --sui-radius-l: 12px;

  --sui-font-size-1: 9px;
  --sui-font-size-2: 10px;
  --sui-font-size-3: 11px;
  --sui-font-size-4: 12px;
  --sui-font-size-5: 13px;
  --sui-font-size-6: 14px;
  --sui-font-size-7: 15px;
  --sui-font-size-8: 16px;
  --sui-font-size-9: 17px;
  --sui-font-size-10: 18px;

  --sui-color-primary: #1677ff;
  --sui-color-success: #00b578;
  --sui-color-warning: #ff8f1f;
  --sui-color-danger: #ff3141;

  --sui-color-white: #ffffff;
  --sui-color-text: #333333;
  --sui-color-text-secondary: #666666;
  --sui-color-weak: #999999;
  --sui-color-light: #cccccc;
  --sui-color-border: #eeeeee;
  --sui-color-box: #f5f5f5;
  --sui-color-background: #ffffff;

  --sui-font-size-main: var(--sui-font-size-5);

  --sui-font-family: -apple-system, blinkmacsystemfont, 'Helvetica Neue',
    helvetica, segoe ui, arial, roboto, 'PingFang SC', 'miui',
    'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}


:root {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
  color: var(--sui-color-text);
  font-size: var(--sui-font-size-main);
  font-family: var(--sui-font-family);
}

a,
button {
  cursor: pointer;
}

a {
  color: var(--sui-color-primary);
  transition: opacity ease-in-out 0.2s;

}

a:active {
  opacity: 0.8;
}

.sui-plain-anchor {
  color: unset;
  transition: none;
}

.sui-plain-anchor:active {
  opacity: unset;
}

body.sui-overflow-hidden {
  overflow: hidden !important;
}

div.sui-px-tester {
  --size: 1;
  height: calc(var(--size) / 2 * 2px);
  width: 0;
  position: fixed;
  right: -100vw;
  bottom: -100vh;
  user-select: none;
  pointer-events: none;
}