@use "../variables" as *;
// Retro Tag/Chip Input
.retro-tag-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  background: var(--retro-input-bg);
  border: 2px solid var(--retro-border-dark);
  border-radius: var(--retro-border-radius);
  padding: 8px 12px;
  min-width: 220px;
}
.retro-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.retro-tag {
  display: inline-flex;
  align-items: center;
  background: var(--retro-input-bg);
  color: var(--retro-input-text);
  border: 1px solid var(--retro-border-medium);
  // Deliberate, like .retro-nav-pills: a tag reads as a chip. The wrapper
  // above it is square. Allowlisted in scripts/check-radius.mjs.
  border-radius: 12px;
  padding-block: 3px 3px;
  padding-inline: 10px 12px;
  font-size: var(--retro-font-size);
  margin-inline-end: 4px;
  margin-bottom: 4px;
  box-shadow: 1px 1px 0 var(--retro-border-light);
}
.retro-tag-remove {
  margin-inline-start: 8px;
  color: var(--retro-danger-text);
  cursor: pointer;
  font-weight: bold;
  font-size: var(--retro-font-size-lg);
  transition: color 0.2s;
  &:hover { color: var(--retro-primary-text); }
}
.retro-tag-text {
  border: none;
  outline: none;
  background: transparent;
  font-size: var(--retro-font-size);
  min-width: 80px;
  margin-inline-start: 4px;
  padding: 2px 0;
}