.scopes {
  @extend .nav;
  @extend .nav-pills;

  display: flex;

  > li + li {
    margin-left: 4px;
  }

  > li > a {
    background-color: rgba(black, 0.025);
    color: rgba(black, 0.3);

    font-size: 11px;
    font-weight: normal;

    border-radius: 15px;
    padding: 2px 8px;

    &:hover {
      background-color: rgba(black, 0.05);
    }
  }

  > li.active a {
    &, &:hover, &:focus, strong {
      color: white;
    }

    &, &:hover, &:focus {
      background-color: rgba(black, 0.25);
      box-shadow: inset 0 2px 4px rgba(black, 0.075);
    }
  }

  strong {
    font-weight: 500;
    color: rgba(black, 0.4);
  }
}