.tags {
  @extend .ul--no-style;
  display: flex;
  flex-wrap: wrap;
  min-width: 0;

  .tag {
    margin-left: 0;
    margin-bottom: var(--spacing-small);
    margin-right: var(--spacing-small);
  }
}

.tags--remove {
  @extend .tags;
  margin-bottom: var(--spacing-medium);

  .tag {
    margin-top: 0;
    margin-bottom: var(--spacing-small);
  }
}

.tags--vertical {
  @extend .tags;
  flex-direction: column;
  align-items: flex-start;

  li:last-child .tag {
    margin-bottom: 0;
  }
}

.tags--selected {
  @extend .tags;
  margin: var(--spacing-large) 0;
}

.tags__input-wrapper {
  // Nested style needed for more specificity
  .tag__input {
    @extend .tag--remove;
    height: var(--tag-height);
    padding: calc(var(--spacing-miniscule) + 1px) var(--spacing-small);
    background-color: var(--color-input-bg);
    margin-bottom: var(--spacing-medium);
  }
}

.tag {
  @extend .badge;
  @extend .badge--tag;
}

.tag--remove {
  max-width: 20rem;
}

.tag--disabled {
  opacity: 0.3;
}

.tag--large {
  height: var(--height-input);
  padding: 0 var(--spacing-s);
}

.tag--mature {
  @extend .badge--tag-mature;
}
