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

/* cf: chip-set */

.strand-chip-set {
  display: flex;
  flex-wrap: wrap;
  gap: var(--strand-space-2);
}

.strand-chip-set--scroll {
  flex-wrap: nowrap;
}

.strand-chip-set__chip {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: var(--strand-space-1);
  padding-block: var(--strand-space-1);
  padding-inline: var(--strand-space-3);
  font-family: var(--strand-font-sans);
  font-size: var(--strand-text-sm);
  color: var(--strand-gray-600);
  background: var(--strand-surface-elevated);
  border: 1px solid var(--strand-gray-300);
  border-radius: var(--strand-radius-full);
  cursor: pointer;
  white-space: nowrap;
  transition:
    background-color var(--strand-duration-fast) ease,
    border-color var(--strand-duration-fast) ease,
    color var(--strand-duration-fast) ease;
}

@media (pointer: coarse) {
  .strand-chip-set__chip {
    min-block-size: 44px;
  }
}

.strand-chip-set__chip:hover {
  border-color: var(--strand-gray-400);
  color: var(--strand-gray-800);
}

.strand-chip-set__chip[aria-pressed="true"],
.strand-chip-set__chip[aria-checked="true"] {
  background: var(--strand-blue-midnight);
  border-color: var(--strand-blue-midnight);
  color: var(--strand-on-blue-primary);
}

.strand-chip-set__chip[aria-pressed="true"]:hover,
.strand-chip-set__chip[aria-checked="true"]:hover {
  background: var(--strand-blue-abyss);
  border-color: var(--strand-blue-abyss);
  color: var(--strand-on-blue-primary);
}

.strand-chip-set--sm .strand-chip-set__chip {
  padding-block: var(--strand-space-1);
  padding-inline: var(--strand-space-2);
  font-size: var(--strand-text-xs);
}