/*
 * The cart panel next to the menu (tablet in landscape; desktop from 1200px). A placeholder until the cart of
 * Sprint 3: an empty basket and a line that ordering is coming. Sprint 3 puts the lines and the total here.
 */

@layer components {
  /* Next to the menu: on a tablet in landscape, and on the desktop from 1200px (below that the cart is the header button). */
  .cart-panel {
    display: none;
  }

  @media (min-width: 1024px) {
    .cart-panel {
      display: block;
    }
  }

  @media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
    .cart-panel {
      display: none;
    }
  }

  @media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
    .cart-panel {
      display: block;
    }
  }

  /*
   * The box is never higher than the screen below the header (--panel-room, set by layout.css). The panel is a size container
   * (its height is that room), and what it does with a lot of lines depends on how high it is in rem, so that large text counts:
   * from 32rem the lines scroll inside the panel and the totals and the way on stay in view at the bottom of it (cart.css); on
   * a screen too small for that (a window a few hundred pixels high, or the text at 200%) the box scrolls as a whole, so that
   * everything in it is within reach and there is one scroller, not one inside the other.
   */
  .cart-panel {
    container: cart-panel / size;
  }

  .cart-panel__box {
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    max-height: var(--panel-room);
    padding: var(--s-5);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: var(--r-lg);
    background: var(--surface);
    box-shadow: var(--shadow-1);
  }

  .cart-panel__content {
    display: flex;
    flex: none;
    flex-direction: column;
  }

  @container cart-panel (min-height: 32rem) {
    .cart-panel__content {
      flex: 1 1 auto;
      min-height: 0;
    }
  }

  .cart-panel__title {
    font-family: var(--font-display);
    font-style: var(--display-style);
    font-weight: var(--display-weight);
    font-size: 1.25rem;
  }

  .cart-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-4) 0;
    text-align: center;
  }

  .cart-panel__icon {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    margin-bottom: var(--s-2);
    border-radius: 50%;
    background: var(--primary-soft);
    color: var(--primary);
  }

  .cart-panel__icon .icon {
    width: 1.625rem;
    height: 1.625rem;
  }

  .cart-panel__lead {
    font-weight: 700;
  }

  .cart-panel__text {
    color: var(--muted);
    font-size: 0.875rem;
  }
}