.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-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);
  }
}