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