$bar-height: 72px;
$bar-value: var(--wds-internal-bar-chart-value);

.bar-chart {
  display: flex;
  background: linear-gradient(
    var(--wds-color-blue-400, var(--wsr-color-B40, #d6e6fe)) $bar-height,
    transparent $bar-height
  );

  &__bars {
    margin: 0 auto;
    text-align: center;
    display: flex;
  }

  &__item {
    min-width: 30px;
    flex-grow: $bar-value;
    flex-basis: calc(#{$bar-value} * 1px);
    flex-shrink: calc(1 / #{$bar-value} + 1);
  }

  &__value {
    overflow: hidden;
    padding: 0 24px;
    height: $bar-height;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }

  &__value:empty {
    padding: 0 12px;
  }

  &__item:nth-child(6n-5) &__value {
    background-color: var(--wsr-color-A1, #1684ea);
  }

  &__item:nth-child(6n-4) &__value {
    background-color: var(--wsr-color-A2, #17b0e2);
  }

  &__item:nth-child(6n-3) &__value {
    background-color: var(--wsr-color-A3, #6544f9);
  }

  &__item:nth-child(6n-2) &__value {
    background-color: var(--wsr-color-A4, #3d9fa1);
  }

  &__item:nth-child(6n-1) &__value {
    background-color: var(--wsr-color-A5, #d04091);
  }

  &__item:nth-child(6n) &__value {
    background-color: var(--wsr-color-A6, #fdb10c);
  }

  @media (hover: hover) {
    &__item:hover &__value {
      filter: brightness(120%);
    }
  }

  &__description {
    padding: 0 12px;
  }
}