.OwO {
  user-select: none;
}

.OwO:hover .OwO-logo {
  color: var(--text2-color);
}

.OwO.OwO-open .OwO-logo {
  border-radius: 0.45rem 0.45rem 0 0;
  border-bottom: none;
  color: var(--text2-color);
}

.OwO.OwO-open .OwO-body {
  display: block;
}

.OwO.OwO-up .OwO-body {
  top: inherit;
  transform: translateY(-113%);
  /* 向上移动自身的高度 */
  border-radius: 0.45rem 0.45rem 0.45rem 0;
}

.OwO.OwO-up .OwO-body .OwO-bar .OwO-packages li:nth-child(1) {
  border-radius: 0;
}

.OwO-package-active {
  color: var(--themecolor);
}

.OwO.OwO-up.OwO-open .OwO-logo {
  border: 1px solid var(--border-color);
  border-radius: 0 0 0.45rem 0.45rem;
  border-top: none;
}

.OwO .OwO-logo {
  position: relative;
  display: inline-block;
  color: var(--text2-color);
  background: var(--card-color);
  border: 1px solid var(--border-color);
  border-radius: 0.45rem;
  font-size: 13px;
  padding: 15px 5px;
  margin: 5px 0px 0px 0px;
  cursor: pointer;
  height: 22px;
  box-sizing: border-box;
  z-index: 2;
  line-height: 0px;
  box-shadow: 0 0 6px #00000008;
}

.OwO .OwO-logo:hover span {
  display: inline-block;
  animation: my-face 5s infinite ease-in-out;
}

.OwO .OwO-logo:active {
  background-color: var(--hover-color);
  transform: scale(0.95);
}

.OwO .OwO-body {
  display: none;
  position: absolute;
  width: 400px;
  background: var(--card-color);
  border: 1px solid var(--border-color);
  z-index: 1;
  top: 26px;
  border-radius: 0 0.45rem 0.45rem 0.45rem;
}

.OwO .OwO-body .OwO-items {
  user-select: none;
  display: none;
  padding: 15px 0px 0px 10px;
  margin: 0;
  overflow: auto;
  height: 210px;
  font-size: 0;
}

.OwO .OwO-body .OwO-items .OwO-item {
  list-style-type: none;
  background: var(--pure-gery-color);
  padding: 5px 15px;
  border-radius: 0.45rem;
  display: inline-block;
  font-size: 12px;
  line-height: 14px;
  margin: 0 10px 12px 0;
  cursor: pointer;
  transition: 0.3s;
}

.OwO .OwO-body .OwO-items .OwO-item:hover {
  background: var(--hover-color);
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.1), 0 3px 1px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.1);
  animation: my-face 5s infinite ease-in-out;
}

.OwO .OwO-body .OwO-items-emoji .OwO-item {
  font-size: 20px;
  line-height: 19px;
}

.OwO .OwO-body .OwO-items-image .OwO-item {
  max-width: calc(25% - 10px);
  box-sizing: border-box;
}

.OwO .OwO-body .OwO-items-image .OwO-item img {
  max-width: 100%;
}

.OwO .OwO-body .OwO-items-show {
  display: block;
}

.OwO .OwO-body .OwO-bar {
  width: 100%;
  height: 30px;
  border-top: 1px solid var(--border-color);
  background: var(--card-color);
  border-radius: 0 0 0.45rem 0.45rem;
  color: var(--text2-color);
}

.OwO .OwO-body .OwO-bar .OwO-packages {
  margin: 0;
  padding: 0;
  font-size: 0;
}

.OwO .OwO-body .OwO-bar .OwO-packages li {
  list-style-type: none;
  display: inline-block;
  line-height: 30px;
  font-size: 14px;
  padding: 0 10px;
  cursor: pointer;
  margin-right: 3px;
}

.OwO .OwO-body .OwO-bar .OwO-packages li:nth-child(1) {
  border-radius: 0 0 0 0.45rem;
}

.OwO .OwO-body .OwO-bar .OwO-packages .OwO-package-active {
  background: var(--themehovercolor);
  transition: 0.3s;
  content: "";
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--themecolor);
  height: 3px;
  pointer-events: none;
}

@keyframes my-face {
  2% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }

  4% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }

  6% {
    transform: translate(0, 1.5px) rotate(-1.5deg);
  }

  8% {
    transform: translate(0, -1.5px) rotate(-1.5deg);
  }

  10% {
    transform: translate(0, 2.5px) rotate(1.5deg);
  }

  12% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }

  14% {
    transform: translate(0, -1.5px) rotate(1.5deg);
  }

  16% {
    transform: translate(0, -0.5px) rotate(-1.5deg);
  }

  18% {
    transform: translate(0, 0.5px) rotate(-1.5deg);
  }

  20% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }

  22% {
    transform: translate(0, 0.5px) rotate(-1.5deg);
  }

  24% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }

  26% {
    transform: translate(0, 0.5px) rotate(0.5deg);
  }

  28% {
    transform: translate(0, 0.5px) rotate(1.5deg);
  }

  30% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  32% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }

  34% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }

  36% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }

  38% {
    transform: translate(0, 1.5px) rotate(-1.5deg);
  }

  40% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  42% {
    transform: translate(0, 2.5px) rotate(-1.5deg);
  }

  44% {
    transform: translate(0, 1.5px) rotate(0.5deg);
  }

  46% {
    transform: translate(0, -1.5px) rotate(2.5deg);
  }

  48% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }

  50% {
    transform: translate(0, 0.5px) rotate(0.5deg);
  }

  52% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }

  54% {
    transform: translate(0, -1.5px) rotate(1.5deg);
  }

  56% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }

  58% {
    transform: translate(0, 0.5px) rotate(2.5deg);
  }

  60% {
    transform: translate(0, 2.5px) rotate(2.5deg);
  }

  62% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  64% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }

  66% {
    transform: translate(0, 1.5px) rotate(-0.5deg);
  }

  68% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }

  70% {
    transform: translate(0, 1.5px) rotate(0.5deg);
  }

  72% {
    transform: translate(0, 2.5px) rotate(1.5deg);
  }

  74% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }

  76% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  78% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }

  80% {
    transform: translate(0, 1.5px) rotate(1.5deg);
  }

  82% {
    transform: translate(0, -0.5px) rotate(0.5deg);
  }

  84% {
    transform: translate(0, 1.5px) rotate(2.5deg);
  }

  86% {
    transform: translate(0, -1.5px) rotate(-1.5deg);
  }

  88% {
    transform: translate(0, -0.5px) rotate(2.5deg);
  }

  90% {
    transform: translate(0, 2.5px) rotate(-0.5deg);
  }

  92% {
    transform: translate(0, 0.5px) rotate(-0.5deg);
  }

  94% {
    transform: translate(0, 2.5px) rotate(0.5deg);
  }

  96% {
    transform: translate(0, -0.5px) rotate(1.5deg);
  }

  98% {
    transform: translate(0, -1.5px) rotate(-0.5deg);
  }

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}