/* Material Design 3 Chip Component
 * ==========================================================================
 * MD3 Chips are compact elements that represent an attribute, text, entity, or action
 * Reference: https://m3.material.io/components/chips
 */

/* Base Chip
 * -------------------------------------------------------------------------- */

.chip {
  /* Structure */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  position: relative;

  /* Sizing */
  height: 32px;
  padding-inline: 16px;

  /* Typography */
  font-size: 0.875rem; /* 15.75px with 18px base */
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;

  /* Appearance */
  border-radius: 8px;
  border: 1px solid var(--color-border--light);
  background: var(--color-bg--surface);
  color: var(--color-ink--surface);

  /* Interaction */
  cursor: default;
  user-select: none;
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Chip Elements
 * -------------------------------------------------------------------------- */

.chip__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-inline-start: -8px;
}

.chip__label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chip__remove {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-inline-end: -8px;
  margin-inline-start: 4px;
  padding: 2px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 200ms ease;
}

.chip__remove:hover {
  background: oklch(0 0 0 / 0.1);
}

/* Chip Variants
 * -------------------------------------------------------------------------- */

/* Assist Chip - Provides smart or automated suggestions */
.chip--assist {
  cursor: pointer;
}

.chip--assist:hover {
  background: oklch(from var(--color-bg--surface) calc(l * 0.95) c h);
}

.chip--assist:active {
  background: oklch(from var(--color-bg--surface) calc(l * 0.9) c h);
}

/* Filter Chip - Allows selection from a set of options */
.chip--filter {
  cursor: pointer;
}

.chip--filter:hover {
  background: oklch(from var(--color-bg--surface) calc(l * 0.95) c h);
}

.chip--filter[aria-pressed="true"],
.chip--filter.chip--selected {
  background: var(--color-bg--primary-container);
  color: var(--color-ink--primary-container);
  border-color: transparent;
}

.chip--filter[aria-pressed="true"]:hover,
.chip--filter.chip--selected:hover {
  background: oklch(from var(--color-bg--primary-container) calc(l * 0.95) c h);
}

/* Input Chip - Represents discrete pieces of information */
.chip--input {
  position: relative;
}

.chip--input.chip--selected {
  background: var(--color-bg--primary-container);
  color: var(--color-ink--primary-container);
  border-color: transparent;
}

/* Suggestion Chip - Provides recommendations for user input */
.chip--suggestion {
  cursor: pointer;
}

.chip--suggestion:hover {
  background: oklch(from var(--color-bg--surface) calc(l * 0.95) c h);
}

.chip--suggestion:active {
  background: oklch(from var(--color-bg--surface) calc(l * 0.9) c h);
}

/* Elevated Chip */
.chip--elevated {
  border: none;
  box-shadow:
    0 1px 2px 0 oklch(0 0 0 / 0.3),
    0 1px 3px 1px oklch(0 0 0 / 0.15);
}

.chip--elevated:hover {
  box-shadow:
    0 2px 4px 0 oklch(0 0 0 / 0.3),
    0 2px 6px 2px oklch(0 0 0 / 0.15);
}

/* Outlined Chip (default, but explicit class available) */
.chip--outlined {
  background: transparent;
  border: 1px solid var(--color-border--light);
}

/* Color Variants
 * -------------------------------------------------------------------------- */

.chip--primary {
  background: var(--color-bg--primary-container);
  color: var(--color-ink--primary-container);
  border-color: transparent;
}

.chip--secondary {
  background: var(--color-bg--secondary-container);
  color: var(--color-ink--secondary-container);
  border-color: transparent;
}

.chip--tertiary {
  background: var(--color-bg--tertiary-container);
  color: var(--color-ink--tertiary-container);
  border-color: transparent;
}

.chip--error {
  background: var(--color-bg--error-container);
  color: var(--color-ink--error-container);
  border-color: transparent;
}

/* States
 * -------------------------------------------------------------------------- */

.chip:disabled,
.chip--disabled {
  opacity: 0.38;
  cursor: not-allowed;
  pointer-events: none;
}

.chip:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Chip Group
 * -------------------------------------------------------------------------- */

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}

.chip-group--scrollable {
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: thin;
}

/* Dark mode adjustments
 * -------------------------------------------------------------------------- */

[data-color-scheme="dark"] {
  .chip--elevated {
    box-shadow:
      0 1px 3px 1px oklch(0 0 0 / 0.15),
      0 1px 2px 0 oklch(0 0 0 / 0.3);
  }

  .chip--elevated:hover {
    box-shadow:
      0 2px 6px 2px oklch(0 0 0 / 0.15),
      0 2px 4px 0 oklch(0 0 0 / 0.3);
  }

  .chip__remove:hover {
    background: oklch(1 0 0 / 0.1);
  }
}

/* System preference fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-color-scheme="light"]) {
    .chip--elevated {
      box-shadow:
        0 1px 3px 1px oklch(0 0 0 / 0.15),
        0 1px 2px 0 oklch(0 0 0 / 0.3);
    }
  }
}