.hotbox {
  @apply absolute left-0 top-0 overflow-visible;

  font-family: Arial, 'PingFang SC', 'Helvetica Neue', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei',
    sans-serif;
  .state {
    @apply absolute hidden overflow-visible;
    .center,
    .ring {
      .button {
        @apply absolute rounded-full;

        margin-top: -35px;
        margin-left: -35px;
        width: 70px;
        height: 70px;
        box-shadow: 0 0 30px rgb(0 0 0 / 30%);
      }
      .label,
      .key {
        @apply block text-center;

        line-height: 1.4em;
      }
      .label {
        @apply font-normal text-black;

        margin-top: 17px;
        font-size: 16px;
        line-height: 1em;
      }
      .key {
        font-size: 12px;
        color: #999999;
      }
    }
    .ring-shape {
      @apply absolute  box-content rounded-full;

      top: -25px;
      left: -25px;
      border: 25px solid rgb(0 0 0 / 30%);
    }
    .top,
    .bottom {
      @apply absolute whitespace-nowrap;
      .button {
        @apply relative inline-block;

        margin: 0 10px;
        padding: 8px 15px;
        border-radius: 15px;
        box-shadow: 0 0 30px rgb(0 0 0 / 30%);
        .label {
          @apply align-middle text-black;

          font-size: 14px;
          line-height: 14px;
        }
        .key {
          @apply align-middle;

          margin-left: 3px;
          font-size: 12px;
          line-height: 12px;
          color: #999999;
          &::before {
            content: '(';
          }
          &::after {
            content: ')';
          }
        }
      }
    }
    .button {
      @apply cursor-default overflow-hidden;

      background-color: #f9f9f9;
      .key,
      .label {
        opacity: 0.3;
      }
    }
    .button.enabled {
      @apply bg-white;
      .key,
      .label {
        @apply opacity-100;
      }
      &:hover {
        background: lighten(rgb(228 93 92), 5%);
        .label {
          @apply text-white;
        }
        .key {
          color: lighten(rgb(228 93 92), 30%);
        }
      }
      &.selected {
        background-color: rgb(228 93 92);
        animation: selected 0.1s ease;
        .label {
          @apply text-white;
        }
        .key {
          color: lighten(rgb(228 93 92), 30%);
        }
      }
      &.pressed,
      &:active {
        @apply bg-[#ff974d];
        .label {
          @apply text-white;
        }
        .key {
          color: lighten(#ff974d, 30%);
        }
      }
    }
  }
  .state.active {
    @apply block;
  }
}

@keyframes selected {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.hotbox-key-receiver {
  @apply absolute m-0 outline-none;

  top: -9999px;
  left: -9999px;
  width: 20px;
  height: 20px;
}
