.wmw-chip {
  --wmw-chip-border-color: color-mix(in srgb, var(--border-color) 75%, transparent);
  --wmw-chip-background: var(--panel-bg, #e5e7eb);
  --wmw-chip-text-color: var(--text-color);
  --wmw-chip-focus-border-color: var(--accent-color, #2563eb);
  --wmw-chip-focus-shadow: 0 0 0 2px
    color-mix(in srgb, var(--accent-color, #2563eb) 22%, transparent);
  --wmw-chip-hover-border-color: var(--accent-color, #2563eb);
  --wmw-chip-hover-background: color-mix(
    in srgb,
    var(--accent-color, #2563eb) 12%,
    var(--panel-bg, #e5e7eb)
  );
  --wmw-chip-hover-text-color: var(--accent-color, #2563eb);
  --wmw-chip-active-border-color: var(--accent-color, #2563eb);
  --wmw-chip-active-background: var(--accent-color, #2563eb);
  --wmw-chip-active-text-color: white;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.42rem 0.9rem;
  min-height: 2.25rem;
  border-radius: 999px;
  border: 1px solid var(--wmw-chip-border-color);
  background: var(--wmw-chip-background);
  color: var(--wmw-chip-text-color);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease,
    color 0.2s ease;
}

.wmw-chip--sm {
  padding: 0.32rem 0.7rem;
  font-size: 0.78rem;
  gap: 0.4rem;
  min-height: 1.95rem;
}

.wmw-chip--md {
  padding: 0.42rem 0.9rem;
  font-size: 0.85rem;
  gap: 0.5rem;
  min-height: 2.25rem;
}

.wmw-chip:focus-visible {
  outline: none;
  border-color: var(--wmw-chip-focus-border-color);
  box-shadow: var(--wmw-chip-focus-shadow);
}

.wmw-chip:hover:not(:disabled) {
  border-color: var(--wmw-chip-hover-border-color);
  background: var(--wmw-chip-hover-background);
  color: var(--wmw-chip-hover-text-color);
}

.wmw-chip:active:not(:disabled),
.wmw-chip[aria-pressed='true'] {
  border-color: var(--wmw-chip-active-border-color);
  background: var(--wmw-chip-active-background);
  color: var(--wmw-chip-active-text-color);
}

[data-theme='dark'] .wmw-chip:active:not(:disabled),
[data-theme='dark'] .wmw-chip[aria-pressed='true'] {
  background: var(
    --wmw-chip-active-background,
    color-mix(in srgb, var(--accent-color, #2563eb) 50%, var(--panel-bg, #e5e7eb))
  );
}

.wmw-chip--selected {
  --wmw-chip-border-color: var(--accent-color, #2563eb);
  --wmw-chip-background: color-mix(in srgb, var(--accent-color, #2563eb) 18%, transparent);
  --wmw-chip-text-color: var(--accent-color, #2563eb);
}

[data-theme='dark'] .wmw-chip--selected {
  --wmw-chip-background: color-mix(in srgb, var(--accent-color, #2563eb) 28%, transparent);
}

.wmw-chip--outlined {
  --wmw-chip-border-color: var(--accent-color, #2563eb);
  --wmw-chip-background: transparent;
  --wmw-chip-text-color: var(--text-color, #202020);
}

.wmw-chip--outlined:hover:not(:disabled) {
  --wmw-chip-hover-border-color: var(--accent-color, #2563eb);
  --wmw-chip-hover-background: color-mix(in srgb, var(--accent-color, #2563eb) 10%, transparent);
  --wmw-chip-hover-text-color: var(--text-color, #202020);
}

.wmw-chip--outlined:active:not(:disabled),
.wmw-chip--outlined[aria-pressed='true'],
.wmw-chip--outlined.wmw-chip--selected {
  --wmw-chip-active-border-color: var(--accent-color, #2563eb);
  --wmw-chip-active-background: color-mix(in srgb, var(--accent-color, #2563eb) 14%, transparent);
  --wmw-chip-active-text-color: var(--text-color, #202020);
}

.wmw-chip--disabled {
  opacity: 0.6;
  cursor: not-allowed;
  box-shadow: none;
}

.wmw-chip--static {
  --wmw-chip-focus-border-color: var(--wmw-chip-border-color);
  --wmw-chip-focus-shadow: none;
  --wmw-chip-hover-border-color: var(--wmw-chip-border-color);
  --wmw-chip-hover-background: var(--wmw-chip-background);
  --wmw-chip-hover-text-color: var(--wmw-chip-text-color);
  --wmw-chip-active-border-color: var(--wmw-chip-border-color);
  --wmw-chip-active-background: var(--wmw-chip-background);
  --wmw-chip-active-text-color: var(--wmw-chip-text-color);
  cursor: default;
  box-shadow: none;
}

.wmw-chip--static:hover,
.wmw-chip--static:active,
.wmw-chip--static[aria-pressed='true'] {
  border-color: var(--wmw-chip-border-color);
  background: var(--wmw-chip-background);
  color: var(--wmw-chip-text-color);
  box-shadow: none;
}

.wmw-chip__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.wmw-chip__icon--trailing {
  margin-left: 0.1rem;
}

.wmw-chip__label {
  line-height: 1.2;
  white-space: nowrap;
}