/* Input selector: a hi-fi input switch used as tabs. A pill track, an ink thumb that slides to the chosen option on a
   slight overshoot spring, a pilot lamp per option that lights amber on the active one, and panels that rise in.
   Rebuilt from a vinyl listening bar's menu page (Drinks / Food), 10-06. Any number of options (the thumb is 1/n wide). */
.isel {
  --isel-ink: #34302f;          /* track rule, thumb, idle label */
  --isel-on: #ece7dc;           /* label colour on the thumb */
  --isel-bg: rgba(52, 48, 47, .04);  /* track fill */
  --isel-lamp: #ffb54a;         /* lit pilot lamp */
  --isel-lamp-glow: rgba(255, 181, 74, .7);
  --isel-lamp-off: .35;         /* unlit lamp opacity (it is the label colour, dimmed) */
  --isel-pad: 5px;              /* track inset around the thumb */
  --isel-border: 2px;
  --isel-dur: .6s;              /* thumb slide */
  --isel-ease: cubic-bezier(.34, 1.3, .64, 1);   /* overshoot spring: ~4% past, then back */
  --isel-color-dur: .35s;       /* label colour swap */
  --isel-min: 150px;            /* option min width */
  --isel-btn-pad: 15px 26px 14px;
  --isel-gap: 18px;             /* label to track */
  display: flex; align-items: center; justify-content: center; gap: var(--isel-gap);
  font: 15px/1 ui-sans-serif, system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em; color: var(--isel-ink);
}
.isel__lbl { opacity: .6; font-size: 12px; letter-spacing: .3em; }
.isel__track {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  padding: var(--isel-pad); border: var(--isel-border) solid var(--isel-ink); border-radius: 99px; background: var(--isel-bg);
}
.isel__thumb {
  position: absolute; top: var(--isel-pad); bottom: var(--isel-pad); left: var(--isel-pad);
  width: calc((100% - 2 * var(--isel-pad)) / var(--isel-n, 2)); border-radius: 99px; background: var(--isel-ink);
  translate: calc(var(--isel-sel, 0) * 100%) 0; transition: translate var(--isel-dur) var(--isel-ease);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .6); pointer-events: none;
}
.isel__btn {
  all: unset; box-sizing: border-box; position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  min-width: var(--isel-min); padding: var(--isel-btn-pad); cursor: pointer; border-radius: 99px; white-space: nowrap;
  color: var(--isel-ink); transition: color var(--isel-color-dur);
}
.isel__btn[aria-selected="true"] { color: var(--isel-on); }
.isel__btn:focus-visible { outline: 2px solid var(--isel-focus, #457db7); outline-offset: 2px; }
.isel__lamp {
  display: inline-block; flex: none; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%;
  background: currentColor; opacity: var(--isel-lamp-off); transition: background .6s, opacity .6s, box-shadow .6s;
}
.isel__btn[aria-selected="true"] .isel__lamp { background: var(--isel-lamp); opacity: 1; box-shadow: 0 0 10px 2px var(--isel-lamp-glow); }

/* panels: the chosen one rises in (add data-isel-panel to any element; hidden ones are [hidden]) */
.isel-panel[hidden] { display: none; }
.isel-panel.is-enter { animation: isel-in var(--isel-panel-dur, .8s) var(--isel-panel-ease, cubic-bezier(.16, 1, .3, 1)) both; }
@keyframes isel-in { from { opacity: 0; translate: 0 var(--isel-rise, 26px); } }

@media (max-width: 767px) {
  .isel { gap: 10px; }
  .isel__lbl { display: none; }
  .isel__btn { min-width: var(--isel-min-phone, 120px); padding: 14px 18px 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .isel__thumb { transition: none; }
  .isel-panel.is-enter { animation: none; }
}