/*
 * A page's main actions, pinned to the bottom of the scrolling #main so they
 * stay under the thumb however long the list above them gets. Sticky offsets
 * count from inside main's padding, so the bar's own inset is zero.
 *
 * The bar itself has no ground: its buttons float over the list as glass,
 * the primary action alone on the right and the rest sharing one capsule on
 * the left. Primary or not, it's all the same glass; position says which
 * one matters. The bar's bottom padding lifts them off the screen's edge.
 */
.action-bar {
  align-items: center;
  block-size: var(--action-bar-block-size);
  column-gap: var(--size-3);
  display: flex;
  inset-block-end: 0;
  margin-block-start: auto;
  padding-block-end: var(--size-1);
  position: sticky;

  .btn {
    --btn-icon-size: var(--size-5);
    --btn-padding: 0;
    --btn-radius: var(--rounded-full);
  }

  /* The primary action comes last and is pushed right whatever precedes it;
     a search between the two takes up the room they leave. */
  > :last-child {
    margin-inline-start: auto;
  }

  > .action-bar__search-form {
    flex: 1;
    min-inline-size: 0;
  }

  .btn--primary {
    --btn-background: var(--color-glass);
    --btn-block-size: var(--size-12);
    --btn-box-shadow: var(--glass-shadow);
    --btn-color: var(--color-text);
    --btn-hover-color: color-mix(in oklab, var(--color-glass), var(--color-text) 6%);
    --btn-inline-size: var(--size-12);

    backdrop-filter: var(--glass-filter);
    background-image: var(--glass-sheen);
  }
}

.action-bar__group {
  backdrop-filter: var(--glass-filter);
  background-color: var(--color-glass);
  background-image: var(--glass-sheen);
  border-radius: var(--rounded-full);
  box-shadow: var(--glass-shadow);
  display: flex;
  padding: var(--size-0_5);

  /* button_to wraps its button in a form; let the button sit in the row. */
  > form {
    display: contents;
  }

  .btn {
    --btn-background: transparent;
    --btn-block-size: var(--size-11);
    --btn-hover-color: var(--color-glass-hover);
    --btn-inline-size: var(--size-11);
  }
}

/* The same bar heading a dialog, so closing and confirming sit where the
   page's own actions do. It's in the flow rather than pinned, and the title
   takes the room between the two buttons. */
.action-bar--header {
  block-size: auto;
  margin-block: 0 var(--size-4);
  padding-block-end: 0;
  position: static;
}

.action-bar__title {
  flex: 1;
  min-inline-size: 0;
  text-align: center;
}

/* The whole capsule is the label, so a tap anywhere on it, icon included,
   lands in the field. */
.action-bar__search {
  align-items: center;
  backdrop-filter: var(--glass-filter);
  background-color: var(--color-glass);
  background-image: var(--glass-sheen);
  block-size: var(--size-12);
  border-radius: var(--rounded-full);
  box-shadow: var(--glass-shadow);
  column-gap: var(--size-2);
  display: flex;
  padding-inline: var(--size-4);

  .icon {
    --icon-color: var(--color-text-subtle);
    --icon-size: var(--size-5);
  }

  &:focus-within {
    outline: 2px solid var(--color-selected-dark);
    outline-offset: 2px;
  }
}

.action-bar__search-input {
  appearance: none;
  background: none;
  block-size: 100%;
  border: none;
  color: var(--color-text);
  flex: 1;
  font-size: var(--input-font-size, var(--text-sm));
  min-inline-size: 0;
  outline: none;

  &::placeholder {
    color: var(--color-text-subtle);
  }

  /* The bar's own clear button does this job, beside the field. */
  &::-webkit-search-cancel-button {
    display: none;
  }
}

/* While a search is being typed or narrows the list, the bar is about the
   search alone: the page's other actions step aside until it's cleared.
   Clearing is offered as soon as there's something to clear. */
.action-bar:has(.action-bar__search-input:is(:focus, :not(:placeholder-shown))) >
  :not(.action-bar__search-form, .action-bar__clear) {
  display: none;
}

.action-bar__clear {
  display: none;
}

.action-bar:has(.action-bar__search-input:not(:placeholder-shown)) .action-bar__clear {
  display: flex;
}

/* iOS won't shrink the page for the keyboard, so a search field at the
   bottom sits under it and Safari pans the whole page up to reveal it,
   taking the results out of sight. While typing, the bar moves to the top
   instead: nothing to pan for, and the results fill the space between it
   and the keyboard. The menu bar makes way for it until the field lets go. */
@media (pointer: coarse) {
  .action-bar:has(.action-bar__search-input:focus) {
    inset-block: 0 auto;
    margin-block-start: 0;
    order: -1;
    z-index: 10;
  }

  #main:has(.action-bar__search-input:focus) .action-bar--top {
    display: none;
  }
}

/* The same bar along the top of a phone screen, with the menu button that
   opens the sidebar. It stays pinned as the page scrolls under it, as the
   bottom bar does, and goes once the sidebar has room to be a column. */
.action-bar--top {
  block-size: auto;
  inset-block: 0 auto;
  margin-block: 0;
  padding-block-end: 0;
  z-index: 10;

  > :last-child {
    margin-inline-start: 0;
  }

  @media (width >= 48rem) {
    display: none;
  }
}

/* A form page's own header takes the menu bar's place: its close button is
   already the way out, and two bars would stack at the top of a phone. */
#main:has(.action-bar--page) .action-bar--top {
  display: none;
}

/* The bar sits where a flash rises on phones, so the flash rises past it
   rather than covering the button you're about to press. Only the page's own
   bottom bar counts; a dialog's header bar isn't in its way. */
body:has(.container > .action-bar) {
  --action-bar-block-size: calc(var(--size-16) + var(--size-6));
  --flash-offset: var(--action-bar-block-size);
}