.label {
  display: inline-flex;
  align-items: center;
  font-size: $font-size-h5;
  text-decoration: none;
  color: $color-muted;
  line-height: 1.25rem;
  background: rgba($color-muted, .05);
  border-radius: $border-radius;
  padding: $gap-2 $gap-3;
  user-select: none;
  transition: .3s color, .3s background-color;

  svg {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0 .5rem 0 -.25rem;
    stroke-width: 1.5;
  }

  @at-root a#{&}:hover,
  &.active {
    color: $color-text;
    background: rgba($color-text, .08);
  }
}

.label-sm {
  font-size: $font-size-h6;
  padding: px2rem(2px) $gap-2;
}

.labels-list {
  display: inline-flex;
  flex-wrap: wrap;
  margin: 0 -.25rem -.25rem 0;

  >* {
    margin: 0 .25rem .25rem 0;
  }
}