@layer components {
  /* Pinned to the bottom of the page: the main sections side by side, with a round button for adding
     a customer between them. It sits half above them, cutting a notch into each. */
  .bar {
    --bar-notch: 0.3rem;

    background-color: var(--color-canvas);
    border-block-start: var(--border);
    display: flex;
    inset: auto 0 0;
    justify-content: center;
    padding-block-end: var(--safe-inset-bottom);
    padding-inline: calc(var(--main-padding) + var(--safe-inset-left)) calc(var(--main-padding) + var(--safe-inset-right));
    position: fixed;
    z-index: var(--z-bar);

    /* Phones give the buttons the full width */
    @media (max-width: 639px) {
      padding-inline: var(--safe-inset-left) var(--safe-inset-right);
    }
  }

  /* The round button shares the row with the other two, spanning both and centered over their seam */
  .bar__buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: var(--bar-height);
    inline-size: min(100%, 22rem);
    margin-block-start: -1px; /* Over the bar's top border, so the buttons' top edges share its line */

    @media (max-width: 639px) {
      inline-size: 100%;
    }
  }

  /* Outlined like the bar's top border */
  .bar__button {
    --btn-background: transparent;
    --btn-border-color: var(--color-ink-lighter);
    --clearance: calc(var(--bar-add-size) / 2 + var(--bar-notch));

    grid-row: 1;

    &:first-child {
      --btn-padding: 0 var(--clearance) 0 var(--inline-space);

      grid-column: 1;
    }

    /* Over the first button's end border, so the two share one line */
    &:last-child {
      --btn-padding: 0 var(--inline-space) 0 var(--clearance);

      grid-column: 2;
      margin-inline-start: -1px;
    }

    @media (any-hover: hover) {
      &:hover {
        --btn-background: var(--color-ink-lightest);
      }
    }

    &[aria-current] {
      --btn-background: var(--color-selected);
    }
  }

  /* A ring the color of the bar makes the notch */
  .bar__add {
    --btn-icon-size: 1.6rem;
    --btn-size: var(--bar-add-size);
    --radius: 50%;

    align-self: start;
    box-shadow: 0 0 0 var(--bar-notch) var(--color-canvas);
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
    translate: 0 -50%;
    z-index: 1;
  }
}