.pills {
  padding: 0;
  margin: 0 0 20px;
  letter-spacing: -.4em;
  list-style: none;

  li {
    position: relative;
    display: inline-block;
    margin-right: 8px;
    letter-spacing: normal;

    &.is-active {
      a {
        font-weight: bold;
        color: $white;
        cursor: default;
        background-color: $primary-color;
      }
    }
  }

  a {
    $pills-height: 34px;

    display: block;
    height: $pills-height;
    padding: 0 15px;
    line-height: $pills-height;
    color: $text-color;
    background-color: transparent;
    border-radius: $pills-height / 2;

    &:hover {
      text-decoration: none;
      background-color: darken($bg-color, 8%);
    }
  }
}