/* Control bar */
/* =========== */

/* Control bar container - contains all of the controls and buttons on the control bar */
.control-bar-container {
  display: flex;
  flex-direction: row;
  column-gap: 1rem;

  justify-content: flex-start;
  align-items: center;

  padding: 0.5rem;

  background-color: var(--bs-dark-bg-subtle);

  @media (width <=576px) {
    flex-direction: column;
    row-gap: 0.5rem;
  }
}

/* Controls that are a compact set rather than full-width buttons - the calendar's
   Add Event and its List/Month toggle - stay as one row at every width, with the
   spacer still pushing them to opposite ends. Stacking them would put the toggle
   under the button it belongs beside, and stretch two small controls across the
   whole screen. Opted into per view with :control_bar_class. */
.control-bar-container--inline {
  @media (width <=576px) {
    flex-direction: row;
    column-gap: 0.5rem;
  }

  &.control-bar-button-container {
    @media (width <=576px) {
      align-self: center;
    }
  }

  &.control-bar-spacer {
    @media (width <=576px) {
      display: block;
    }
  }

  /* .control-bar-button-container switches to a stacked column below 576px by default
     (see control_bar_buttons.css) - right for a lone full-width "New X" button, wrong
     for a compact group like this. A descendant rather than the compound selector above,
     since the button containers here are nested inside the bar rather than being it. */
  .control-bar-button-container {
    @media (width <=576px) {
      flex-direction: row;
    }
  }

  /* Same story for a spacer nested in the bar rather than being it - the compound
     selector above only ever matches a spacer that is *also* the whole bar, which
     none of these are. Without this the spacer between the two groups disappears
     below 576px and the second group collapses back against the first instead of
     being pushed to the far end. */
  .control-bar-spacer {
    @media (width <=576px) {
      display: block;
    }
  }
}

/* Three columns, for a bar with something in the middle that has to be *centred on the
   bar* rather than centred in what the controls either side leave over. The outer
   columns are an equal share whatever they hold, so the middle sits on the bar's centre
   line and stays there as the controls beside it change width - which the calendar's
   month nav needs, since its own name changes width as the reader steps through months
   and the Today button comes and goes. minmax(0, ...) so a column that outgrows its
   share shrinks its contents rather than stealing from the other two. */
.control-bar-container--centred {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto) minmax(0, 1fr);
  align-items: center;

  &> :last-child {
    justify-self: end;
  }
}


/* Flexible spacer to use between controls to align them across control bar */
.control-bar-spacer {
  flex-grow: 1;

  @media (width <=576px) {
    display: none;
  }
}

/* Icon-only collapse for a control-bar button that runs out of room on a phone: hide
   the label and shrink to a square matching the icon. Shared by the calendar's Today
   button and the packing list bar's action buttons, so a size change stays in one
   place instead of drifting across the two. */
.calendar-today-button__text,
.packing-list__bar-action-text {
  @media (width <=576px) {
    display: none;
  }
}

.calendar-today-button,
.packing-list__bar-action {
  @media (width <=576px) {
    width: 2.25rem;
    padding: 0;
  }
}