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

  display: flex;
  flex-wrap: wrap;

  margin-top: -4px;

  > li {
    margin-top: 4px;
    margin-right: 4px;

    &:last-child {
      margin-right: 0;
    }
  }

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

    font-size: 11px;
    font-weight: normal;
    white-space: nowrap;

    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);
  }
}