.bar-chart {
  list-style-type: none;
  padding: 0;
  margin: 0;
  --scale: 127;
  --bar-bg-color: hsla(var(--yellow-hsl), 1);

  &__item {
    display: flex;
    padding-bottom: 8px;
  }

  &__bar {
    flex: 4;
    position: relative;
    margin-right: 40px;

    > span {
      display: inline-block;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      background-color: var(--bar-bg-color);
      width: var(--width);
    }

    > span:after {
      content: attr(data-val);
      position: absolute;
      left: calc(100% + 8px);
    }
  }

  &__label {
    flex: 0;
    min-width: 136px;
    font-size: 1rem;
    padding-right: 16px;
    text-align: right;
  }
}