.HorizontalStackedBarChart {
  $this: &;
  display: flex;
  width: 100%;
  border-radius: 4px;
  height: 8px;

  &--has-backdrop {
    background: #1c2545;
  }
  &--loading {
    animation: 1000ms linear infinite alternate skeleton-glow;
  }
  &__bar {
    height: 8px;
    transition: height 0.2s cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 0.2s cubic-bezier(0.22, 1, 0.36, 1);
    margin-left: 1px;
    margin-right: 1px;
    flex-shrink: 0;

    &:first-child {
      margin-left: 0;
      border-top-left-radius: 4px;
      border-bottom-left-radius: 4px;
    }
    &:last-child {
      margin-right: 0;
      border-top-right-radius: 4px;
      border-bottom-right-radius: 4px;
    }
    &--active {
      height: 14px;
      margin-top: -3px;

      &:first-child {
        border-radius: 7px 0 0 7px;
      }
      &:last-child {
        border-radius: 0 7px 7px 0;
      }
      &:first-child#{$this}__bar--active:last-child {
        border-radius: 7px 7px 7px 7px;
      }
    }
  }
}