$categories-bg: lighten($blue-dark, 10%);

.charts-wrapper {
  height: 100%;
  display: flex;
  flex-direction: column;
  .chart-categories {
    width: 100%;
    height: 40px;
    display: flex;
    align-items: flex-end;
    background: $categories-bg;
    color: $lightgray;
    text-transform: uppercase;
    font-size: 1rem;
    &-element {
      width: 100px;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      transition: border 0.1s ease;
      &.active {
        // border-bottom: 4px solid $blue;
        background: darken($categories-bg, 5%);
        &:hover {
          background: darken($categories-bg, 5%);
        }
      }
      &:hover {
        background: darken($categories-bg, 5%);
      }
    }
  }
  @media(max-width: 768px) {
    padding: 20px;
  }
}
