/*
 * .c-chip: info chips (read only) and filter chips (interactive, with the yellow dot when selected).
 *
 *   <span class="c-chip">Barbería</span>                                  info
 *   <label class="c-chip-option"><input class="c-chip__input" type="checkbox" name="familia" value="mascotas">
 *     <span class="c-chip c-chip--filter">Mascotas</span></label>                    form filter (works without JS and without :has)
 *   <a class="c-chip c-chip--filter" href="?comuna=3" aria-current="true">Comuna 3</a>   selected link
 *   <a class="c-chip c-chip--filter" href="?page=2" aria-current="page">2</a>             current page (pagination): same look
 *   <button class="c-chip c-chip--filter" type="button" aria-pressed="true">Todos</button>
 *
 * The input comes BEFORE the visible chip, so selection, focus and disabled use sibling selectors
 * (`.c-chip__input:checked + .c-chip--filter`): no :has() needed.
 * Selected = deep green fill + white label + yellow dot. The state is carried by fill, dot and
 * label together, never by the yellow alone (yellow on white is 1.9:1).
 */
.c-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--md-space-2);
  min-block-size: 2rem;
  padding: var(--md-space-1) var(--md-space-3);
  border-radius: var(--md-radius-full);
  background: var(--md-color-tint-primary);
  color: var(--md-color-ink);
  font-size: var(--md-font-size-sm);
  font-weight: var(--md-weight-bold);
  line-height: 1.2;
  text-decoration: none;
}

.c-chip--filter {
  position: relative;
  isolation: isolate;
  min-block-size: var(--md-target);
  padding-inline: var(--md-space-4);
  border: var(--md-border-width-strong) solid var(--md-color-border);
  background: var(--md-color-surface);
  font-size: var(--md-font-size-base);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform var(--md-duration-fast) var(--md-ease-out);
}

.c-chip--filter::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--md-color-primary);
  opacity: 0;
  transition: opacity var(--md-duration-fast) var(--md-ease-out);
}

@media (hover: hover) {
  .c-chip--filter:hover::before {
    opacity: 0.08;
  }
}

.c-chip--filter:active {
  transform: scale(0.97);
}

/* Label wrapper of the form variant: it holds the hidden input and the visible chip. */
.c-chip-option {
  position: relative;
  display: inline-flex;
}

/* Native input kept for forms and keyboards, hidden to the eye (still focusable and checkable). */
.c-chip__input {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 1px;
  block-size: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.c-chip__input:focus-visible + .c-chip--filter {
  outline: var(--md-focus-width) solid var(--md-color-primary);
  outline-offset: var(--md-focus-offset);
}

/* Selected */
.c-chip--filter[aria-pressed='true'],
.c-chip--filter[aria-current='true'],
.c-chip--filter[aria-current='page'],
.c-chip__input:checked + .c-chip--filter {
  border-color: var(--md-color-primary);
  background: var(--md-color-primary);
  color: var(--md-color-on-primary);
}

.c-chip--filter[aria-pressed='true']::before,
.c-chip--filter[aria-current='true']::before,
.c-chip--filter[aria-current='page']::before,
.c-chip__input:checked + .c-chip--filter::before {
  background: var(--md-color-on-primary);
  opacity: 0;
}

@media (hover: hover) {
  .c-chip--filter[aria-pressed='true']:hover::before,
  .c-chip--filter[aria-current='true']:hover::before,
  .c-chip--filter[aria-current='page']:hover::before,
  .c-chip__input:checked + .c-chip--filter:hover::before {
    opacity: 0.14;
  }
}

/* The dot: the ".pro" point, the interaction signature. Appears only on the selected chip. */
.c-chip--filter[aria-pressed='true']::after,
.c-chip--filter[aria-current='true']::after,
.c-chip--filter[aria-current='page']::after,
.c-chip__input:checked + .c-chip--filter::after {
  content: '';
  order: -1;
  inline-size: 0.625rem;
  block-size: 0.625rem;
  border-radius: var(--md-radius-full);
  background: var(--md-color-action);
  animation: c-chip-dot var(--md-duration-base) var(--md-ease-out);
}

@keyframes c-chip-dot {
  from {
    opacity: 0;
    transform: scale(0.4);
  }
}

.c-chip--filter:disabled,
.c-chip--filter[aria-disabled='true'],
.c-chip__input:disabled + .c-chip--filter {
  background: var(--md-color-surface-alt);
  color: var(--md-color-ink-soft);
  border-color: var(--md-color-divider);
  cursor: not-allowed;
}

/* A horizontal row of chips that wraps; --scroll below keeps it on one line and swipes. */
.c-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--md-space-2);
}

.c-chip-row--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  /* Room for the focus ring, which overflow would otherwise clip. The end side is wider: it is the
     fade zone below, so the last chip comes to rest in clear space when the row is scrolled to its end. */
  padding: var(--md-space-2);
  padding-inline-end: var(--md-space-6);
  margin: calc(-1 * var(--md-space-2));
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  /*
   * Overflow cue: the last 2rem of the row fade out, so a chip cut by the edge reads as "more this way"
   * instead of as the end of the list. Pure CSS, no layout shift (the fade zone is padding that already
   * exists), and static, so it is the same with reduced motion. A row that fits shows nothing in that
   * zone, and a row scrolled to its end rests clear of it. The colour is irrelevant to a mask (only
   * its alpha counts); a token keeps the file free of literals.
   */
  -webkit-mask-image: linear-gradient(to right, var(--md-color-ink) calc(100% - var(--md-space-6)), transparent);
  mask-image: linear-gradient(to right, var(--md-color-ink) calc(100% - var(--md-space-6)), transparent);
}

/* Right-to-left pages fade the other edge. */
.c-chip-row--scroll:dir(rtl) {
  -webkit-mask-image: linear-gradient(to left, var(--md-color-ink) calc(100% - var(--md-space-6)), transparent);
  mask-image: linear-gradient(to left, var(--md-color-ink) calc(100% - var(--md-space-6)), transparent);
}

.c-chip-row--scroll > * {
  flex: none;
  scroll-snap-align: start;
}