.tag-input > * {
  margin-block-end: 0;
  margin-block-start: 0;
}
.tag-input > * + * {
  margin-block-start: 0.5rem;
}
.tag-input__box {
  align-items: center;
  background-color: var(--spruce-form-color-background);
  border: 1px solid var(--spruce-form-color-border);
  border-radius: 0.425rem;
  cursor: text;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.25rem;
  transition-duration: var(--spruce-duration);
  transition-property: border-color, box-shadow;
  transition-timing-function: var(--spruce-timing-function);
}
.tag-input__box:focus-within {
  border-color: var(--spruce-form-color-border-focus);
  box-shadow: 0 0 0 0.25rem var(--spruce-form-color-ring-focus);
  outline: 2px solid transparent;
}
.tag-input__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: contents;
}
.tag-input__tag {
  align-items: center;
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 12%, transparent);
  border-radius: var(--spruce-border-radius-sm);
  color: var(--spruce-base-color-heading);
  display: inline-flex;
  font-size: var(--spruce-font-size-sm);
  gap: 0.25rem;
  margin: 0 !important;
  padding: 0.2em 0.25em 0.2em 0.6em;
}
.tag-input__remove {
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  font: inherit;
  outline: inherit;
  padding: 0;
  border-radius: var(--spruce-border-radius-sm);
  font-size: 1.15em;
  line-height: 1;
  padding: 0 0.3em;
}
.tag-input__remove:hover, .tag-input__remove:focus-visible {
  background-color: color-mix(in srgb, var(--spruce-base-color-primary) 20%, transparent);
  color: var(--spruce-base-color-primary);
}
.tag-input__remove:focus-visible {
  outline: 2px solid var(--spruce-base-color-focus-ring);
}
.tag-input__field {
  background: transparent;
  border: 0;
  color: var(--spruce-form-color-text);
  flex: 1 0 8rem;
  font: inherit;
  padding: 0.25em 0.5em;
}
.tag-input__field:focus {
  outline: none;
}