/*! Strand UI | MIT License | dillingerstaffing.com */

/* ── Base ── */
.strand-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  padding: var(--strand-space-1) var(--strand-space-2);
  border-radius: var(--strand-radius-sm);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-xs);
  font-weight: var(--strand-weight-medium);
  line-height: var(--strand-leading-snug);
  white-space: nowrap;
  border: 1px solid transparent;
}

/* ── Solid variant ── */
.strand-tag--solid.strand-tag--default {
  background: var(--strand-surface-recessed);
  color: var(--strand-gray-600);
}

.strand-tag--solid.strand-tag--teal {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-teal-tint);
}

.strand-tag--solid.strand-tag--blue {
  background: var(--strand-blue-glow);
  color: var(--strand-blue-deep);
}

.strand-tag--solid.strand-tag--amber {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-amber-tint);
}

.strand-tag--solid.strand-tag--red {
  background: var(--strand-surface-recessed);
  color: var(--strand-on-red-tint);
}

/* ── Outlined variant ── */
.strand-tag--outlined {
  background: transparent;
}

.strand-tag--outlined.strand-tag--default {
  border-color: var(--strand-gray-200);
  color: var(--strand-gray-600);
}

.strand-tag--outlined.strand-tag--teal {
  border-color: var(--strand-teal-vital);
  color: var(--strand-on-teal-tint);
}

.strand-tag--outlined.strand-tag--blue {
  border-color: var(--strand-blue-primary);
  color: var(--strand-blue-deep);
}

.strand-tag--outlined.strand-tag--amber {
  border-color: var(--strand-amber-caution);
  color: var(--strand-on-amber-tint);
}

.strand-tag--outlined.strand-tag--red {
  border-color: var(--strand-red-alert);
  color: var(--strand-on-red-tint);
}

/* ── Remove button ── */
.strand-tag__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: none;
  color: currentColor;
  opacity: 0.6;
  cursor: pointer;
  border-radius: var(--strand-radius-sm);
  transition: opacity var(--strand-duration-fast) var(--strand-ease-out-quart);
}

.strand-tag__remove:hover {
  opacity: 1;
}