////// New clean tags, because the actual tags have been misused in many way and we don't want to break things ////

.list-tags {
  display: flex;
  flex-direction: row;
  align-items: start;
  flex-wrap: wrap;
  .tag-item {
    margin-right: $spacing-xxs;
    margin-bottom: $spacing-xxs;
  }
}

.tag-item {
  display: inline-flex;
  align-items: center;
  height: $tag-height;
  padding: 2px $spacing-xs;
  font-size: $font-size-sm;
  line-height: 1;
  background-color: $gray-light;
  border-radius: $border-radius;
}

.tag-item .icon {
  font-size: $icon-xs;
  height: 16px;
}

.tag-item.sm {
  height: $spacing-sm;
  font-size: $font-size-xs;
  padding: 2px $spacing-xxs;
}

.tag-item.focus-group {
  color: $white;
  background-color: $orange;
} 

.tag-item.teamleader-verified {
  color: $white;
  background-color: $gray-dark;
} 

// Removable tags for selected options

.tag-item.removable {
  color: $white;
  background-color: $primary;
  user-select: none;
  padding: 0 0 0 $spacing-xs;
  min-height: $spacing-md;
}

.tag-item.removable .remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: $spacer;
  padding: 0;
  border: none;
  border-radius: 0 $border-radius $border-radius 0;
  background: transparent;
  cursor: pointer;

  &::before {
    content: '';
    display: inline-block;
    mask-image: url("@images/cross-thick.svg");
    mask-repeat: no-repeat;
    mask-size: contain;
    width: $spacing-xs;
    height: $spacing-xs;
    background-color: $white;
  }
}

.tag-item.removable .remove-btn:hover {
  background-color: $danger;
}