.bar-chart-wrapper {
  border: $light-border;
  border-radius: $radius-large;
  padding: $spacing-l $spacing-l $spacing-s $spacing-l;
  height: 100%;
  width: 100%;

  > div.is-border {
    border: 0.3px solid $ui-gray-200;
    margin-bottom: $spacing-xxs;
  }
}

.chart-header {
  display: grid;
  grid-template-columns: 3fr 1fr;

  .header-left {
    .chart-title {
      font-size: $size-5;
      font-weight: $font-weight-bold;
      line-height: normal;
    }

    .chart-description {
      font-size: $size-8;
      font-weight: $font-weight-normal;
      color: $ui-gray-700;
      margin-bottom: $spacing-xs;
    }
  }

  .header-right {
    text-align: right;

    > button {
      font-size: $size-8;

      &:hover {
        text-decoration: underline;
      }
    }
  }
}

.bar-chart-container {
  padding: $spacing-m 0;
}

.bar-chart {
  .tick > text {
    font-weight: $font-weight-semibold;
    font-size: $size-8;
  }
}

.legend-container {
  height: $spacing-l;
  margin-top: $spacing-xs;
}

.legend {
  width: 100%;
  height: 100%;
}