silphius/app/react/components/dom/hotbar.module.css

.hotbar {
  align-self: left;
  --border: calc(var(--unit) * 3px);
  background-color: rgba(02, 02, 57, 0.6);
  border: var(--border) solid #444444;
  box-sizing: border-box;
  display: inline-block;
  left: calc(var(--unit) * 20px);
  line-height: 0;
  position: absolute;
  top: calc(var(--unit) * 20px);
  transition: top 150ms;
}

.label {
  background-color: transparent;
  color: white;
  font-family: Cookbook, Georgia, 'Times New Roman', Times, serif;
  left: 50%;
  margin: 0;
  position: absolute;
  text-shadow:
    0px -1px 0px black,
    1px 0px 0px black,
    0px 1px 0px black,
    -1px 0px 0px black
  ;
  top: -17.5px;
  transform: translateX(-50%);
}

.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);
  }
}