.scopes { list-style: none; margin-top: -0.25rem; margin-bottom: 0; padding: 0; display: flex; flex-wrap: wrap; li { margin-top: 0.25rem; margin-right: 0.35rem; &:last-child { margin-right: 0; } } a { display: inline-block; background-color: $scope-bg; font-size: 0.8rem; font-weight: normal; white-space: nowrap; border-radius: 50rem; padding: $scope-padding; &, &:hover, &:focus { color: $scope-color; } &:hover, &:focus { background-color: $scope-hover-bg; text-decoration: none; } } li.active a { &, &:hover, &:focus, strong { color: $scope-active-color; } &, &:hover, &:focus { background-color: $scope-active-bg; } } strong { font-weight: 500; color: $scope-label-color; } }