:root {
  --font-size: 12px;
  --padding-size: 4px;
  --margin-size: 4px;
  --radius-size: 4px;
}

*,
*:before,
*:after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  outline: none;
  /* 任意元素都有此必要 */
  color: var(--font-color);
  overflow: hidden;

  transition: background-color 0.3s ease, color 0.3s ease,
    border-color 0.3s ease;
}

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  font-family: sans-serif;
  font-size: var(--font-size);
}

*[hidden] {
  display: none !important;
}

*[disabled] {
  cursor: not-allowed !important;
}

[theme="dark"] {
  --theme-color: #07c160;
  --divider-color: #333333;
  --font-color: #ffffff;

  --surface-body-color: #1e1e1e;
  --surface-main-color: #121212;
  --surface-nav-color: #242424;

  --text-primary-color: #ffffff;
  --text-secondary-color: #b3b3b3;
  --text-tertiary-color: #808080;
}

[theme="light"] {
  --theme-color: #07c160;
  --divider-color: #e5e5e5;
  --font-color: #333333;

  --surface-body-color: #f5f5f5;
  --surface-main-color: #ffffff;
  --surface-nav-color: #fafafa;

  --text-primary-color: #333333;
  --text-secondary-color: #666666;
  --text-tertiary-color: #999999;
}

.button {
  user-select: none;
  text-decoration: none;
  outline: none;
  border: none;
}

.select {
  background: none;
}

[theme-surface="body"] {
  background-color: var(--surface-body-color);
}

[theme-surface="main"] {
  background-color: var(--surface-main-color);
}

[theme-surface="nav"] {
  background-color: var(--surface-nav-color);
}

[theme-text="primary"] {
  color: var(--text-primary-color);
}

[theme-text="secondary"] {
  color: var(--text-secondary-color);
}

[theme-text="tertiary"] {
  color: var(--text-tertiary-color);
}

[theme="dark"] [mask-theme="glass"] {
    --mask-background-color: rgba(255, 255, 255, 0.1);
    --mask-blur-size: 10px;
  }

[mask-theme="glass"] {
  background-color: var(--mask-background-color);
  backdrop-filter: blur(var(--mask-blur-size));
}

[theme="light"] [mask-theme="glass"] {
    --mask-background-color: rgba(0, 0, 0, 0.1);
    --mask-blur-size: 10px;
  }

[animation^="move-from-"] {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

[animation="move-from-left"] {
  --move-from-x: -50%;
  animation-name: move-from-x;
}

[animation="move-from-right"] {
  --move-from-x: 50%;
  animation-name: move-from-x;
}

@keyframes move-from-x {
  from {
    opacity: 0.5;
    transform: translateX(var(--move-from-x));
  }
}

[animation="move-from-top"] {
  --move-from-y: -50%;
  animation-name: move-from-y;
}

[animation="move-from-bottom"] {
  --move-from-y: 50%;
  animation-name: move-from-y;
}

@keyframes move-from-y {
  from {
    opacity: 0.5;
    transform: translateY(var(--move-from-y));
  }
}

[animation^="move-to-"] {
  animation-duration: 0.3s;
  animation-timing-function: ease;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

[animation="move-to-left"] {
  --move-to-x: -50%;
  animation-name: move-to-x;
}

[animation="move-to-right"] {
  --move-to-x: 50%;
  animation-name: move-to-x;
}

@keyframes move-to-x {
  to {
    opacity: 0;
    transform: translateX(var(--move-to-x));
  }
}

[animation="move-to-top"] {
  --move-to-y: -50%;
  animation-name: move-to-y;
}

[animation="move-to-bottom"] {
  --move-to-y: 50%;
  animation-name: move-to-y;
}

@keyframes move-to-y {
  to {
    opacity: 0;
    transform: translateY(var(--move-to-y));
  }
}

.click-breath:active {
    animation-name: click-breath;
    animation-duration: 0.4s;
    animation-fill-mode: both;
    animation-timing-function: ease;
  }

@keyframes click-breath {
  20% {
    transform: scale(1);
  }
  50% {
    transform: scale(0.95);
  }
  100% {
    transform: scale(1.05);
  }
}

.click-ripple {
  position: relative;
  overflow: hidden;
}

.click-ripple > [click-ripple] {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: -1;
    overflow: hidden;
  }

.click-ripple > [click-ripple] > [click="ripple"] {
      pointer-events: none;
      position: absolute;
      will-change: opacity;
      animation-name: click-ripple;
      animation-duration: 0.4s;
      animation-fill-mode: both;
      animation-timing-function: ease-in;
      pointer-events: none;
      border-radius: 50%;
      background-color: rgb(from var(--font-color) r g b / calc(alpha * 0.2));
    }

@keyframes click-ripple {
  from {
    opacity: 1;
    transform: scale(0.5);
  }

  to {
    opacity: 0;
    transform: scale(2);
  }
}

.hover-breath {
  transition: transform 0.3s ease;
}

.hover-breath:hover {
    transform: scale(1.05);
  }

.hover-light {
  position: relative;
}

.hover-light > [hover="light"] {
    pointer-events: none;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    overflow: hidden;
  }

.hover-light > [hover="light"] > [hover-light] {
      pointer-events: none;
      position: absolute;
      pointer-events: none;
      border-radius: 50%;
      background-image: radial-gradient(
        circle,
        rgb(from var(--font-color) r g b / calc(alpha * 0.2)),
        transparent 50%
      );
    }