/* showcase-toggle.v1.css - the two inert pills under the purchases carousel.
 *
 * WHAT THEY ARE. A marketplace switch (Vinted / Mercari) and a category switch
 * below it, for the IMAGE CAROUSEL - the "Recent purchases" stage, not the
 * interface tablet. They only borrow the LOOK of that tablet's Light/Dark
 * pill - .ss-theme / .ss-theme-btn, straight out of interface-mobile.v1.css -
 * because they are the same kind of control doing a different job, and a
 * second segmented pill drawn from scratch would read as a second idea.
 *
 * THEY DO NOT WORK YET, AND THEY SAY SO. There is no artwork behind them - the
 * data side is built and empty (see landing_showcase.py, GET /api/showcase),
 * and every button is rendered `disabled` with a "Coming soon" title. So the
 * pair is dimmed: a control at full contrast that swallows a click reads as a
 * broken site, and a dimmed one reads as "not yet", which is the truth.
 *
 * When the shots exist, this file is what gets deleted: drop the opacity rule,
 * take `disabled` off the buttons in the bundle, and the pills are already the
 * right shape. */

.ss-pick {
  /* .ss-theme carries `margin: 1.5rem auto 0` for the case where it is the
     only control under the tablet. Inside .ss-controls the column already
     provides the gap, and the existing rule zeroes it for .ss-theme - these
     carry the same class, so they inherit that, and this is only here to say
     so out loud. */
  margin: 0;
}

/* The dimming, on the GROUP and not on each button, so the pill's own rim and
   ground fade with the labels. Dimming only the buttons leaves a fully
   painted container around ghosted text, which looks like a rendering fault
   rather than a disabled control. */
.ss-pick[data-showcase] {
  opacity: .5;
  /* No pointer cursor anywhere in here, including on the pill's padding. */
  cursor: default;
}
.ss-pick .ss-theme-btn[disabled] {
  cursor: default;
  /* Buttons carry a UA opacity of their own in some engines; the group above
     owns the fade, so neutralise it rather than compounding it. */
  opacity: 1;
}
/* is-on still marks which one WOULD be selected, so the pair reads as a
   switch with a current position rather than as two dead labels. */

/* The pair, under the carousel's dots. .ss-theme carries `width: max-content`,
   so the column is what centres them; its own `margin: 1.5rem auto 0` is
   overridden above, which is why the gap is declared here instead. */
.cf-picks {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  margin-top: 1.5rem;
}