/* ── Input Chip ───────────────────────────────────────────────────────────────
   Input chips represent a piece of user-entered information.
   They have a trailing remove (×) button and optional leading avatar or icon.
   ─────────────────────────────────────────────────────────────────────────── */

:host {
  --md-chip-container-color: var(--md-sys-color-surface-container-low);
  --md-chip-label-color: var(--md-sys-color-on-surface-variant);
  --md-chip-border-color: var(--md-sys-color-outline);
  --md-input-chip-avatar-size: 1.5rem; /* 24dp */
  --md-input-chip-remove-icon-size: 1.125rem; /* 18dp */
  --md-input-chip-remove-hover-color: color-mix(
    in oklch,
    var(--md-sys-color-on-surface-variant) 12%,
    transparent
  );
  --md-input-chip-unselected-hover-color: color-mix(
    in oklch,
    var(--md-sys-color-on-surface-variant) 8%,
    transparent
  );
  --_ripple-color: var(--md-sys-color-on-surface-variant);
}

:host([selected]) {
  --md-input-chip-selected-hover-color: color-mix(
    in oklch,
    var(--md-sys-color-secondary-container) 92%,
    var(--md-sys-color-on-secondary-container) 8%
  );
}

/* Trailing remove button — reset + layout */
.chip__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--md-input-chip-remove-icon-size);
  height: var(--md-input-chip-remove-icon-size);
  margin-inline-start: 0.25rem;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--md-chip-label-color);
  border-radius: 50%;
  flex-shrink: 0;
  outline: none;
  transition: background-color 150ms ease;
}

.chip__remove_hidden {
  display: none;
}

.chip__remove:hover:not(:disabled) {
  background-color: var(--md-input-chip-remove-hover-color);
}

.chip__remove-icon {
  display: inline-flex;
  align-items: center;
  width: var(--md-input-chip-remove-icon-size);
  height: var(--md-input-chip-remove-icon-size);
}

.chip__remove-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: currentColor;
}

/* Tighten trailing padding when trailing icon is present */
:host(:has([slot="trailing-icon"])) .chip {
  padding-inline-end: 0.5rem;
}

/* Avatar */
.chip__avatar {
  display: inline-flex;
  align-items: center;
  width: var(--md-input-chip-avatar-size);
  height: var(--md-input-chip-avatar-size);
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

::slotted([slot="avatar"]) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

/* Tighten start padding when avatar is shown */
.chip_has-avatar {
  padding-inline-start: 0.25rem;
}

/* Hover (unselected) */
:host(:not([selected])) .chip:hover:not(.chip_disabled) {
  background-color: var(--md-input-chip-unselected-hover-color);
}

/* Hover (selected) */
:host([selected]) .chip:hover:not(.chip_disabled) {
  background-color: var(--md-input-chip-selected-hover-color);
}