.wrapper {
  display: flex;
  margin: 5px 0;
}

.y-axis {
  display: flex;
  flex-flow: column-reverse;
  justify-content: space-between;
  height: calc(100% + 10px);
  padding: 0 5px;
  margin: -5px 0;

  span {
    font-size: 8px;
    line-height: 12px;
    color: var(--color-summary);
    text-align: end;
    letter-spacing: 0.05em;
  }
}

.chart-grid {
  display: grid;
  flex: 1 1 100%;
  overflow-x: auto;
}

.bar-background {
  display: flex;
  align-items: flex-end;
  height: 100%;
  background: var(--background-light);
  border-radius: 100px;
}

.bar {
  width: 100%;
  min-height: 20px;
  cursor: pointer;
  background: transparent;
  border-radius: 100px;
  transition: height 0.2s ease;

  &-running {
    background-color: var(--color-running-light);
    // background: linear-gradient(45deg, #FDED72, #FFCC00);
  }

  &-success {
    background-color: #06c270;
    // background: linear-gradient(45deg, #57EBA1, #06C270);
  }

  &-failure,
  &-killed,
  &-error {
    background-color: #ff3b3b;
    // background: linear-gradient(45deg, #FF8080, #FF3B3B);
  }

  &-pending {
    background-color: transparent;
  }
}
