.hotbar {
  align-self: center;
  --border: calc(var(--unit) * 3px);
  background-color: rgba(0, 0, 0, 0.2);
  border: var(--border) solid #444444;
  box-sizing: border-box;
  display: inline-block;
  line-height: 0;
  position: absolute;
  top: calc(var(--unit) * 25px);
}

.slotWrapper {
  border: var(--border) solid #999999;
  box-sizing: border-box;
  display: inline-block;
  line-height: 0;
  padding: 0;

  &.active + .slotWrapper {
    border-left: none;
  }
  &:not(:last-child) {
    border-right: none;
  }

  &.active {
    border-right: var(--border) solid #999999;
    border-color: yellow;
  }

  &:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
}