.textarena-toolbar {
  position: absolute;
  z-index: 1;
  pointer-events: none;

  &:hover .textarena-shortcut-hint-short {
    display: none;
  }

  &__pointer {
    display: none;
    position: absolute;
    left: 0;
    width: 0.4em;
    height: 0.4em;
    transform: rotate(-45deg);
    z-index: -1;
    background-color: #333;

    @supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
      background-color: #0000009c;
      backdrop-filter: blur(20px);
    }
  }

  &_bottom {
    transform: translate(0, 0.4em);
  }

  &_bottom &__pointer {
    top: -0.2em;
  }

  &_top {
    transform: translate(0, -0.4em);
  }

  &_top &__pointer {
    bottom: -0.2em;
  }

  &__list {
    pointer-events: all;
    display: flex;
    flex-wrap: wrap;

    // transform: translateX(-50%);
    color: #ccc;
    box-shadow: 0 8px 23px -6px rgb(21 40 54 / 31%), 22px -14px 34px -18px rgb(33 48 73 / 26%);
    border-radius: 0.3em;
    z-index: 2;

    // transition: 0.3s;
    user-select: none;
    background-color: rgb(231 231 231);
    padding: 0.2em;

    @supports ((backdrop-filter: blur(20px))) {
      background-color: #dadada8f;
      backdrop-filter: blur(20px);
    }
  }

  &__item {
    position: relative;
    display: flex;
    background: none;
    border: none;
    color: #4a4a4a;
    line-height: inherit;
    font-size: 1em;
    align-items: center;
    justify-content: center;
    width: 1.4em;
    height: 1.4em;
    cursor: pointer;
    margin: 0.1em;
    padding: 0.2em 0;
    box-sizing: border-box;
    border-radius: 0.3em;
    background-color: none;

    &:hover {
      background: white;
      color: black;

      .textarena-shortcut-hint-full {
        display: block;
      }
    }

    &_active {
      color: #fff !important;
      box-shadow: none;
      background: #00000082;

      &:hover {
        background: #00000062;
        color: #fff !important;
      }
    }
  }

  &__item-icon {
    font-weight: 900;
    font-family: monospace;
    line-height: 0.8em;
    font-size: 0.8em;

    // display: flex;
    justify-content: center;
    width: 100%;

    svg {
      width: 60%;
      height: 100%;
    }

    &.offset {
      position: relative;
      right: 0.4em;
    }
  }

  &__item_show-hint .textarena-shortcut-hint-short {
    display: block;
  }
}