/**
 * Chip Component Styles
 *
 * Sizes:    s (40 px) | m (52 px)
 * Modes:    not-active (default) | active (.chip--active)
 * Contexts: white | ambience | trust | attitude | academy
 * States:   default, hover, focus-visible, pressed (:active), disabled
 *
 * Figma node: 694:29901
 * Figma file: sMFKXUL6d3GFOJZnULkuPl
 */

/* ============================================================
 * Base structure
 * ============================================================ */

.chip {
  --chip-gap:       var(--spacing-100);
  --chip-height:    52px;
  --chip-padding:   2px var(--spacing-300) 2px var(--spacing-250);

  /* Reset button/anchor defaults */
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: none;
  text-decoration: none;

  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--chip-gap);
  height: var(--chip-height, 52px);
  padding: 2px var(--spacing-300);
  border-radius: var(--border-radius-round, 9999px);
  cursor: pointer;
  white-space: nowrap;

  /* Typography */
  font-family: var(--font-bosch-sans, 'Bosch Sans'), sans-serif;
  font-weight: var(--font-weight-bold, 700);
  font-size: var(--chip-font-size, var(--text-button-s, 18px));
  line-height: 1.1;
  letter-spacing: -0.01em;
  font-feature-settings: 'zero' 1;

  @supports (text-box-trim: trim-both) {
    padding-bottom: 0;
    .chip__label {
      text-box-trim: trim-both;
      text-box-edge: cap alphabetic;
    }
  }

  /* Colour — defaults to white context */
  background-color: var(--chip-bg, var(--ambience-300, #efebe7));
  color: var(--chip-text, var(--trust, #550a2d));

  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.1s ease;
}

/* ── Size: Small ── */
.chip--s {
  --chip-gap:       var(--spacing-050);
  --chip-height:    40px;
  --chip-padding:   2px var(--spacing-200) 2px var(--spacing-150);
  --chip-font-size: var(--text-button-xs, 15px);
}

/* ── Icon ── */
.chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.chip__icon svg {
  width: 100%;
  height: 100%;
}

/* ── Label ── */
.chip__label {
  flex-shrink: 0;
}


/* ============================================================
 * Background context — token definitions
 * ============================================================ */

/* ── White ── */
.chip--white {
  /* not-active */
  --chip-bg:               var(--ambience-300, #efebe7);
  --chip-text:             var(--trust, #550a2d);
  --chip-focus-bg:         var(--ambience-200, #f3f0ed);  /* lighter on focus */
  --chip-hover-bg:         var(--ambience-500, #dbd4ce);
  --chip-pressed-bg:       var(--ambience-600, #bab0a7);
  --chip-disabled-bg:      var(--ambience-200, #f3f0ed);
  --chip-disabled-opacity: 0.33;

  /* active */
  --chip-active-bg:                var(--trust, #550a2d);
  --chip-active-text:              var(--white, #ffffff);
  --chip-active-hover-bg:          var(--trust-300, #773b57);
  --chip-active-pressed-bg:        var(--trust-200, #aa8496);
  --chip-active-disabled-opacity:  0.25;

  /* focus ring */
  --chip-focus-ring:       var(--accent, #fa263a);
  --chip-focus-ring-width: 3px;
}

/* ── Ambience ── */
.chip--ambience,
.surface--ambience .chip {
  /* not-active */
  --chip-bg:               var(--ambience-500, #dbd4ce);
  --chip-text:             var(--trust, #550a2d);
  --chip-focus-bg:         var(--ambience-500, #dbd4ce);  /* unchanged on focus */
  --chip-hover-bg:         var(--ambience-600, #bab0a7);
  --chip-pressed-bg:       var(--ambience-700, #998c80);
  --chip-disabled-bg:      var(--ambience-500, #dbd4ce);
  --chip-disabled-opacity: 0.33;

  /* active */
  --chip-active-bg:                var(--trust, #550a2d);
  --chip-active-text:              var(--white, #ffffff);
  --chip-active-hover-bg:          var(--trust-300, #773b57);
  --chip-active-pressed-bg:        var(--trust-200, #aa8496);
  --chip-active-disabled-opacity:  0.33;

  /* focus ring */
  --chip-focus-ring:       var(--accent, #fa263a);
  --chip-focus-ring-width: 3px;
}

/* ── Trust (dark maroon background) ── */
.chip--trust,
.surface--trust .chip {
  /* not-active — inverted: chip is lighter than background */
  --chip-bg:               var(--trust-300, #773b57);
  --chip-text:             var(--white, #ffffff);
  --chip-focus-bg:         var(--trust-300, #773b57);
  --chip-hover-bg:         var(--trust-200, #aa8496);
  --chip-pressed-bg:       var(--trust-100, #ddced5);
  --chip-pressed-text:     var(--trust, #550a2d);   /* light bg → dark text */
  --chip-disabled-bg:      var(--trust-300, #773b57);
  --chip-disabled-opacity: 0.25;

  /* active — white pill on dark background */
  --chip-active-bg:                var(--white, #ffffff);
  --chip-active-text:              var(--trust, #550a2d);
  --chip-active-hover-bg:          var(--ambience-300, #efebe7);
  --chip-active-pressed-bg:        var(--ambience-600, #bab0a7);
  --chip-active-pressed-text:      var(--white, #ffffff);  /* medium bg → white text */
  --chip-active-disabled-opacity:  0.25;

  /* focus ring */
  --chip-focus-ring:       var(--accent, #fa263a);
  --chip-focus-ring-width: 3px;
}

/* ── Attitude (pink background) ── */
.chip--attitude,
.surface--attitude .chip {
  /* not-active */
  --chip-bg:               var(--attitude-200, #ffcffd);
  --chip-text:             var(--trust, #550a2d);
  --chip-focus-bg:         var(--attitude-200, #ffcffd);
  --chip-hover-bg:         var(--attitude-100, #ffecfe);
  --chip-pressed-bg:       var(--white, #ffffff);
  --chip-disabled-bg:      var(--attitude-200, #ffcffd);
  --chip-disabled-opacity: 0.25;

  /* active */
  --chip-active-bg:                var(--trust, #550a2d);
  --chip-active-text:              var(--white, #ffffff);
  --chip-active-hover-bg:          var(--attitude-700, #664064);
  --chip-active-pressed-bg:        var(--attitude-600, #996096);
  --chip-active-disabled-opacity:  0.25;

  /* focus ring — wider on colourful background */
  --chip-focus-ring:       var(--accent, #fa263a);
  --chip-focus-ring-width: 4px;
}

/* ── Academy (warm brown background) ── */
.chip--academy,
.surface--academy .chip {
  /* not-active */
  --chip-bg:               var(--academy-200, #d4c0a1);
  --chip-text:             var(--trust, #550a2d);
  --chip-focus-bg:         var(--academy-200, #d4c0a1);
  --chip-hover-bg:         var(--academy-100, #e8ddcc);
  --chip-pressed-bg:       var(--white, #ffffff);
  --chip-disabled-bg:      var(--academy-200, #d4c0a1);
  --chip-disabled-opacity: 0.25;

  /* active */
  --chip-active-bg:                var(--trust, #550a2d);
  --chip-active-text:              var(--white, #ffffff);
  --chip-active-hover-bg:          var(--academy-700, #614d2f);
  --chip-active-pressed-bg:        var(--academy-600, #7c6037);
  --chip-active-disabled-opacity:  0.25;

  /* focus ring — accent-500 for better contrast on warm brown */
  --chip-focus-ring:       var(--accent-500, #c81e2e);
  --chip-focus-ring-width: 4px;
}


/* ============================================================
 * Active mode
 * ============================================================ */

.chip--active {
  background-color: var(--chip-active-bg, var(--trust, #550a2d));
  color: var(--chip-active-text, var(--white, #ffffff));
}


/* ============================================================
 * Interaction states
 * ============================================================ */

/* ── Hover — not active ── */
.chip:not(.chip--active):not(.chip--disabled):not([aria-disabled="true"]):hover {
  background-color: var(--chip-hover-bg);
}

/* ── Hover — active ── */
.chip--active:not(.chip--disabled):not([aria-disabled="true"]):hover {
  background-color: var(--chip-active-hover-bg);
  color: var(--chip-active-hover-text, var(--chip-active-text, var(--white, #ffffff)));
}

/* ── Pressed — not active ── */
.chip:not(.chip--active):not(.chip--disabled):not([aria-disabled="true"]):active {
  background-color: var(--chip-pressed-bg);
  color: var(--chip-pressed-text, var(--chip-text));
}

/* ── Pressed — active ── */
.chip--active:not(.chip--disabled):not([aria-disabled="true"]):active {
  background-color: var(--chip-active-pressed-bg);
  color: var(--chip-active-pressed-text, var(--chip-active-text, var(--white, #ffffff)));
}

/* ── Focus-visible ── */
.chip:focus-visible {
  outline: none;
  background-color: var(--chip-focus-bg, var(--chip-bg));
  box-shadow: inset 0 0 0 var(--chip-focus-ring-width, 3px) var(--chip-focus-ring, var(--accent, #fa263a));
}

.chip--active:focus-visible {
  background-color: var(--chip-active-bg);
}

/* ── Disabled ── */
.chip--disabled,
.chip:disabled {
  opacity: var(--chip-disabled-opacity, 0.33);
  background-color: var(--chip-disabled-bg, var(--chip-bg));
  color: var(--chip-text);
  cursor: not-allowed;
  pointer-events: none;
}

.chip--active.chip--disabled,
.chip--active:disabled {
  opacity: var(--chip-active-disabled-opacity, 0.25);
  background-color: var(--chip-active-bg);
  color: var(--chip-active-text, var(--white, #ffffff));
}