.shikitor-popup-selection-toolbox {
  --inner-padding: 4px;
  --outer-border-radius: 8px;
  --inner-border-radius: calc(
    var(--outer-border-radius) - var(--inner-padding)
  );
  display: flex;
  align-items: center;
  gap: var(--inner-padding);

  padding: var(--inner-padding);
  height: 20px;

  font-family: var(--font-family, monospace), serif;
  color: var(--shikitor-bg-color);

  background-color: var(--shikitor-fg-color);
  border-radius: var(--outer-border-radius);
  &-item {
    font-size: 12px;
    user-select: none;
    .shikitor-icon {
      font-size: 16px;
    }
    &--activated > &__btn {
      background-color: var(--shikitor-active-color);
    }
    &--activated#{&}--select {
      background-color: var(--shikitor-active-color);
    }
    &--select {
      display: flex;
      align-items: center;
      gap: 4px;

      padding: 2px 6px;
      border-radius: var(--inner-border-radius);
      cursor: pointer;
      transition: .3s;
    }
    &--select:not(&--disabled):hover {
      --elevation-depth: 20;
      background-color: var(--shikitor-hv-color);
      box-shadow:
        0 calc(.400 * var(--elevation-depth, 0) * 1px) calc(
        .900 * var(--elevation-depth, 0) * 1px
      ) 0 rgba(
        0,
        0,
        0,
        calc(
          .13441 - .00063 * var(--elevation-depth, 0) +
            .00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0)
        )
      ),
        0 calc(.075 * var(--elevation-depth, 0) * 1px) calc(
        .225 * var(--elevation-depth, 0) * 1px
      ) 0 rgba(
        0,
        0,
        0,
        calc(
          .10997 - .00051 * var(--elevation-depth, 0) +
            .00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0)
        )
      );
    }
    &--select > &__input-prefix {
      width: 16px;
      height: 16px;
      line-height: 16px;
    }
    &--select > &__input-prefix:only-child {
      margin: 0 -4px;
    }
    &--select > &__input {
      height: 16px;
      line-height: 16px;
    }
    &--select > &__input-more {
      width: 16px;
      height: 16px;
      text-align: center;
      line-height: 16px;

      transform: rotate(180deg);
    }
    &__btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 20px;
      min-width: 20px;
      border-radius: var(--inner-border-radius);
      cursor: pointer;
      transition: .3s;
    }
    &__btn:not(&--disabled):hover {
      --elevation-depth: 20;
      background-color: var(--shikitor-hv-color);
      box-shadow:
        0 calc(.400 * var(--elevation-depth, 0) * 1px) calc(
        .900 * var(--elevation-depth, 0) * 1px
      ) 0 rgba(
        0,
        0,
        0,
        calc(
          .13441 - .00063 * var(--elevation-depth, 0) +
            .00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0)
        )
      ),
        0 calc(.075 * var(--elevation-depth, 0) * 1px) calc(
        .225 * var(--elevation-depth, 0) * 1px
      ) 0 rgba(
        0,
        0,
        0,
        calc(
          .10997 - .00051 * var(--elevation-depth, 0) +
            .00003 * var(--elevation-depth, 0) * var(--elevation-depth, 0)
        )
      );
    }
    &--disabled {
      opacity: .6;
      cursor: not-allowed;
    }
  }
}
.shikitor-popup-selector {
  --inner-padding: 4px;
  --outer-border-radius: 8px;
  --inner-border-radius: calc(
    var(--outer-border-radius) - var(--inner-padding)
  );
  --elevation-depth: 50;

  position: fixed;

  display: flex;
  flex-direction: column;

  padding: 0;
  border-radius: var(--outer-border-radius);

  font-size: 12px;

  overflow: hidden;
  &__options {
    display: flex;
    flex-direction: column;
    gap: var(--inner-padding);

    padding: var(--inner-padding);

    overflow: overlay;
  }
  &__options--activatable > &__option:not(&__option--activated) {
    padding-left: 24px;
  }
  &__options--direction-row {
    flex-direction: row;
  }
  &__options--direction-row > &__option {
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0;
    border-radius: var(--inner-border-radius);
  }
  &__option {
    display: flex;
    align-items: center;
    gap: var(--inner-padding);

    padding: 0 5px;
    border-radius: var(--inner-border-radius);

    user-select: none;
    cursor: pointer;
    transition: .2s;
    &:hover {
      background-color: var(--shikitor-hv-color);
    }
    &--activated {
      background-color: var(--shikitor-active-color);
    }
    .shikitor-icon {
      font-size: 14px;
      width: 16px;
      height: 16px;
      line-height: 16px;
      text-align: center;
    }
  }
}
