/* ==========================================================================
   studio-chips.css — Orcheum Studio chip row
   --------------------------------------------------------------------------
   Locked visual source: Figma 874:6019 / Button 874:6020 (Homepage 874:5166).

     Row        gap 10 · 40.905 tall
     Chip       padding 8.452 10.143 · gap 3.381 · radius 10.143
                min-width 54.096 · 1px #d9d1cb · white @ 68% · blur 42
                shadow 0 2 5 -2 rgba(0,0,0,.12)
     Selected   white @ 90% · 2px rgba(240,88,34,.8) — the frame draws Research
                in this state; here it is the aria-pressed state
     Icon       24 × 24
     Label      14 / 1.35 Geist Medium #24252d · 3.381 side padding

   Requires artboard.css on an ancestor.
   ========================================================================== */

.oc-studio-chips {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--oc-u));
}

.oc-studio-chip {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  gap: calc(3.381 * var(--oc-u));
  min-width: calc(54.096 * var(--oc-u));
  margin: 0;
  /* Figma's 1px stroke is drawn inside the 40.905-tall chip, so the border is
     taken out of the padding — outer box stays 116.43 × 40.905. */
  padding: calc(7.452 * var(--oc-u)) calc(9.143 * var(--oc-u));
  overflow: clip;
  color: var(--oc-studio-chip-ink, #24252d);
  background: rgba(255, 255, 255, 0.68);
  border: calc(1 * var(--oc-u)) solid var(--oc-studio-chip-border, #d9d1cb);
  border-radius: calc(10.143 * var(--oc-u));
  box-shadow: 0 calc(2 * var(--oc-u)) calc(5 * var(--oc-u)) calc(-2 * var(--oc-u))
    rgba(0, 0, 0, 0.12);
  -webkit-backdrop-filter: blur(42px);
  backdrop-filter: blur(42px);
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease,
    box-shadow 120ms ease;
}

.oc-studio-chip__icon {
  display: block;
  flex: 0 0 auto;
  width: calc(24 * var(--oc-u-ui));
  height: calc(24 * var(--oc-u-ui));
}

.oc-studio-chip__label {
  display: block;
  padding: 0 calc(3.381 * var(--oc-u));
  font-family: var(--font-sans, "Geist", Inter, system-ui, sans-serif);
  font-size: calc(14 * var(--oc-u-ui));
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
}

.oc-studio-chip:hover {
  background: rgba(255, 255, 255, 0.86);
}

.oc-studio-chip:focus-visible {
  outline: 2px solid var(--oc-studio-chip-ink, #24252d);
  outline-offset: 3px;
}

/* Selected — Button 874:6020, the state the frame draws Research in. The 2px
   stroke is drawn inside the 40.905 box, so the extra pixel comes out of the
   padding and the chip does not grow when it is chosen. */
.oc-studio-chip[aria-pressed="true"] {
  padding: calc(6.452 * var(--oc-u)) calc(8.143 * var(--oc-u));
  background: rgba(255, 255, 255, 0.9);
  border-width: calc(2 * var(--oc-u));
  border-color: rgba(240, 88, 34, 0.8);
}