@import "src/scss/variables";
@import "src/scss/media-queries";

.filter {
  margin: 1rem;
  padding: 0;
  overflow: auto;
  list-style: none;
  border: 1px solid;
  border-radius: 2px;
  display: flex;
  transition: color 0.2s ease;

  &-item {
    padding: 6px 15px;
    background-color: $background-color-secondary;
    transition: color 0.2s ease;
    font-size: 13px;
    font-weight: 200;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
    white-space: nowrap;

    &:nth-child(n + 2) {
      border-left: solid 1px;
    }
    &.active,
    &:hover {
      border-color: transparent;
      background-color: $teal;
      color: $green;
      cursor: pointer;
    }

    @include tablet-min {
      font-size: 16px;
    }
  }
}

// TODO
//  - add buttons