/* theme-selector.css — layout fix for the global theme switcher.
   PatternFly's toggle group is built for a horizontal toolbar, where it sits in
   a flex row and sizes to its content. The theme menu instead stacks three
   toggle groups vertically inside a pf-v6-c-menu, so each group becomes a
   block-level flex box that STRETCHES to fill the menu. The buttons then share
   that fixed width via flex-shrink and wrap their labels — most visibly "High
   contrast" onto two lines.

   PatternFly's menu is width:auto (content-sized), so the cure is to stop the
   labels from wrapping: with each button's min-content pinned to its full
   label, the toggle group can no longer collapse, and the menu grows to the
   widest row — matching patternfly.org, where the dropdown adapts to the
   buttons. Scoped to .pha-theme-selector so other toggle groups are untouched. */
.pha-theme-selector .pf-v6-c-toggle-group__button {
  white-space: nowrap;
}

/* Placement: floating bottom-left by default; the --masthead variant sits
 * inline in the masthead toolbar and drops its menu down, anchored right. */
.pha-theme-selector {
  position: fixed;
  bottom: var(--pf-t--global--spacer--md);
  left: var(--pf-t--global--spacer--md);
  z-index: var(--pf-t--global--z-index--lg);
}

.pha-theme-selector .pf-v6-c-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
}

.pha-theme-selector--masthead {
  position: relative;
  display: inline-block;
  bottom: auto;
  left: auto;
  z-index: auto;
}

.pha-theme-selector--masthead .pf-v6-c-menu {
  inset: 100% 0 auto auto;
  z-index: var(--pf-t--global--z-index--lg);
}

/* Below the PF sm breakpoint the right-anchored, content-sized menu (the
 * nowrap contrast row alone is ~350px) overhangs the viewport's left edge,
 * where it is unreachable. Anchor it to the masthead instead, span the full
 * width, and let the toggle groups wrap as whole buttons — labels stay on
 * one line, rows break instead. */
@media (width <= 575.98px) {
  .pf-v6-c-masthead:has(.pha-theme-selector--masthead) {
    position: relative;
  }

  .pha-theme-selector--masthead {
    position: static;
  }

  .pha-theme-selector--masthead .pf-v6-c-menu {
    inset: 100% var(--pf-t--global--spacer--md) auto var(--pf-t--global--spacer--md);
  }

  .pha-theme-selector--masthead .pf-v6-c-toggle-group {
    flex-wrap: wrap;
    row-gap: var(--pf-t--global--spacer--xs);
  }
}