.HotbarMenu {
  .HotbarIcon {
    --size: 37px;

    border-radius: 6px;
    user-select: none;
    cursor: pointer;
    transition: none;

    div.MuiAvatar-colorDefault {
      font-weight:500;
      text-transform: uppercase;
      border-radius: 6px;
    }

    &.active {
      box-shadow: 0 0 0px 3px #ffffff;
      transition: all 0s 0.8s;
    }

    &.active, &.interactive:hover {
      img {
        opacity: 1;
      }
    }

    .badge {
      position: absolute;
      right: -2px;
      bottom: -3px;
      margin: -8px;
      font-size: var(--font-size-small);
      background: var(--clusterMenuBackground);
      color: white;
      padding: 0px;
      border-radius: 50%;
      border: 3px solid var(--clusterMenuBackground);
      width: 15px;
      height: 15px;

      &.online {
        background-color: #44b700;
      }

      svg {
        width: 13px;
      }
    }

    img {
      width: var(--size);
      height: var(--size);
    }
  }

  .HotbarIconMenu {
    left: 30px;
    min-width: 250px;

    li.MenuItem {
      font-size: 0.9em;
    }
  }
}