@layer components {
  .chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-7);
    font-weight: var(--font-medium);
    color: var(--foreground);
    background: var(--muted);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    cursor: pointer;
    white-space: nowrap;
  }

  /* Reduce right padding when chip has a close button */
  .chip:has(.chip-close) {
    padding-inline-end: var(--space-2);
  }

  .chip:hover:not([aria-pressed="true"]) {
    background: var(--secondary);
  }

  .chip[aria-pressed="true"] {
    background: var(--primary);
    color: var(--primary-foreground);
    border-color: var(--primary);
  }

  .chip-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.125rem;
    height: 1.125rem;
    margin-inline-start: var(--space-1);
    margin-inline-end: 0;
    font-size: var(--text-6);
    line-height: 0;
    padding-top: 2px;
    background: none;
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    opacity: 0.6;
  }

  .chip-close:hover {
    opacity: 1;
    background: rgb(from currentColor r g b / 0.15);
  }

  .chip.success { color: var(--success); background: rgb(from var(--success) r g b / 0.12); }
  .chip.warning { color: var(--warning); background: rgb(from var(--warning) r g b / 0.12); }
  .chip.danger { color: var(--danger); background: rgb(from var(--danger) r g b / 0.15); }

  .chip.outline { background: transparent; }
  .chip.outline.success { border-color: var(--success); }
  .chip.outline.warning { border-color: var(--warning); }
  .chip.outline.danger { border-color: var(--danger); }

  [data-theme="dark"] .chip.success,
  [data-theme="dark"] .chip.warning { background: rgb(from currentColor r g b / 0.25); }
}