skill-box {
  display: flex;
  position: relative;
  transform: translateZ(1px);
  width: 62px;
  height: 32px;

  font-family: "rstiny";
}

.skill-box__left {
  background-image: url(/ui/174-0.png);
}

.dark-mode .skill-box__left {
  background-image: url(/ui/174-0-dark.png);
}

.skill-box__right {
  position: relative;
  background-image: url(/ui/175-0.png);
}

.dark-mode .skill-box__right {
  background-image: url(/ui/175-0-dark.png);
}

.skill-box__left,
.skill-box__right {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 31px;
  height: 32px;
  background-repeat: no-repeat;
  background-size: contain;
}

.skill-box__left,
.skill-box__right,
.skill-box__progress {
  pointer-events: none;
}

.skill-box__current-level,
.skill-box__baseline-level {
  position: absolute;
  font-size: 16px;
  color: yellow;
  text-shadow: 1px 1px var(--black);
  min-width: 10px;
}

.skill-box__baseline-level {
  transform: translate(calc(50% - 1px), 5px);
  text-align: right;
}

.skill-box__current-level {
  transform: translate(calc(-50% - 2px), -5px);
  text-align: left;
}

.skill-box__progress {
  width: 100%;
  padding: 0 4px;
  box-sizing: border-box;
  position: absolute;
  bottom: 1px;
}

.skill-box__progress-bar {
  height: 2px;
  width: 100%;
  transform-origin: left;
}