/* recommendations/_themes — the theme (action_type) tabs. Figma "Tab button":
 * 48px tall, 4px radius, 16/500, surface-2 fill, active = brand gradient.
 * Mobile & tablet: stay on one row; if they don't fit, the row scrolls/swipes
 * full-bleed out to the screen edge (mouse-draggable via the drag-scroll
 * controller, matching the banner). Desktop (>=64rem): fill the content width,
 * wrapping when cramped. */

.rec-themes {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--spacing-8);
  margin-bottom: var(--spacing-12);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox — hide the scrollbar, keep the swipe */
  /* Full-bleed: cancel the .app-main gutter so the row scrolls to the screen
     edge, but keep matching padding so the first/last tab align with the
     content when at rest. */
  margin-inline: calc(-1 * var(--spacing-16));
  padding-inline: var(--spacing-16);
  cursor: grab; /* hint the mouse drag-to-scroll (drag-scroll controller) */
}
.rec-themes::-webkit-scrollbar { display: none; } /* WebKit/Blink */
/* While a mouse drag is in progress: grabbing cursor + no text selection. */
.rec-themes.is-dragging {
  cursor: grabbing;
  user-select: none;
}
/* Tablet: the dashboard wrapper (.app-main--gutter) widens its side gutter to
   48px at 48rem, so the full-bleed must cancel 48px here to reach the screen
   edge (mirrors the banner). */
@media (min-width: 48rem) and (max-width: 63.999rem) {
  .rec-themes {
    margin-inline: calc(-1 * var(--spacing-48));
    padding-inline: var(--spacing-48);
  }
}

.rec-theme {
  flex: 0 0 auto; /* keep natural width so the row overflows and swipes */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding-inline: var(--spacing-24);
  border-radius: var(--corner-radius-xs);
  background-color: var(--background-surface-2);
  color: var(--text-primary);
  font-size: var(--font-size-16);
  font-weight: var(--font-weight-500);
  white-space: nowrap;
}
.rec-theme:hover { background-color: var(--background-hover); }
.rec-theme.is-active {
  background-image: var(--brand-gradient);
  color: var(--text-light);
}

/* Desktop: enough room to fill the width and wrap instead of scroll. */
@media (min-width: 64rem) {
  .rec-themes {
    flex-wrap: wrap;
    overflow-x: visible;
    margin-inline: 0;
    padding-inline: 0;
    cursor: auto;
  }
  .rec-theme { flex: 1 1 6rem; padding-inline: var(--spacing-8); }
}