.hotbar {
  height: 48px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
}

.hotbar-item:hover {
  cursor: pointer;
  box-shadow: 0px 0px 10px 0px white;
}

.hotbar-item.hotbar-success {
  animation: hotbar-success 0.2s ease-out;
}

.hotbar-item.hotbar-reject {
  animation: hotbar-reject 0.3s ease-out;
}

@keyframes hotbar-success {
  0% { box-shadow: 0px 0px 0px 0px rgba(255, 170, 0, 0); border-color: black; transform: scale(1); }
  40% { box-shadow: 0px 0px 14px 3px rgba(255, 170, 0, 0.8); border-color: #ffaa00; transform: scale(1.3); }
  100% { box-shadow: 0px 0px 0px 0px rgba(255, 170, 0, 0); border-color: black; transform: scale(1); }
}

@keyframes hotbar-reject {
  0%, 100% { transform: translateX(0); border-color: black; }
  15% { transform: translateX(-3px); border-color: #ff4444; }
  30% { transform: translateX(3px); border-color: #ff4444; }
  45% { transform: translateX(-2px); border-color: #ff3333; }
  60% { transform: translateX(2px); border-color: #ff3333; }
  75% { transform: translateX(-1px); border-color: #ff2222; }
  90% { transform: translateX(0); border-color: black; }
}

.hotbar-item {
  color: grey;
  display: flex;
  height: 32px;
  width: 32px;
  user-select: none;
  align-items: flex-end;
  justify-content: center;
  border: 1px solid black;
  background-image: url("/png/bg2.png");
  margin: 2px;
  position: relative;
  box-shadow: 0px 0px 10px 0px black;
}

.hotbar-item .hotbar-text {
  flex: 1 1 auto;
  z-index: 10;
  font-size: 8px;
  color: white;
  text-align: center;
}

.hotbar-item .hotbar-key {
  font-size: 8px;
  pointer-events: none;
  position: absolute;
  left: 2px;
  top: 2px;
}

.hotbar-item canvas {
  position: absolute;
  pointer-events: none;
  width: 32px;
  height: 32px;
}

.hotbar-presets {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin-right: 6px;
  align-self: center;
}

.hotbar-preset-btn {
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #555;
  background: #222;
  color: #999;
  font-size: 10px;
  font-weight: bold;
  cursor: pointer;
  line-height: 18px;
  text-align: center;
  font-family: inherit;
}

.hotbar-preset-btn:hover {
  border-color: #888;
  color: #ccc;
}

.hotbar-preset-btn.active {
  color: #ffaa00;
  border-color: #ffaa00;
}

.hotbar-item.rebinding {
  animation: hotbar-rebind 0.8s ease-in-out infinite;
}

@keyframes hotbar-rebind {
  0%, 100% { border-color: #555; }
  50% { border-color: #ffaa00; box-shadow: 0 0 8px #ffaa00; }
}