/*
 * The tab bar: Menu, Mandje, Bestellingen, Account. Sticky at the bottom of the column, clear of the home indicator.
 *
 * Four labels share the width of the phone, so they do not grow with the text size of the user, like the tab bars of
 * the phone itself: the label is at most 3.4vw (the longest word, Bestellingen, then fits its tab) and 13px, the icon
 * at most 26px. That keeps the bar as high as --tabbar-h says.
 */

@layer components {
  .tabbar {
    position: sticky;
    bottom: 0;
    z-index: 25;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    padding: 6px var(--s-1) calc(6px + env(safe-area-inset-bottom));
    background: var(--surface);
    border-top: 1px solid var(--border);
  }

  .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 48px;
    color: var(--muted);
    font-size: min(0.75rem, 3.4vw, 13px);
    font-weight: 600;
    text-decoration: none;
  }

  .tab .icon {
    width: min(1.375rem, 26px);
    height: min(1.375rem, 26px);
  }

  .tab[aria-current='page'] {
    color: var(--primary);
  }

  /* Pressed: the tab dims under the finger, as the tab bars of the phone do. */
  .tab:active {
    opacity: 0.55;
  }

  .tab__badge {
    position: absolute;
    top: 2px;
    left: calc(50% + 6px);
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--primary);
    color: var(--on-primary);
    font-size: min(0.6875rem, 11px);
    font-weight: 700;
  }

  /* Not on a tablet or a desktop: there the sections are tabs at the top, a sidebar or the header of the website. */
  @media (min-width: 600px) and (min-height: 501px), (min-width: 600px) and (pointer: fine) {
    .tabbar {
      display: none;
    }
  }

  /* Whatever the height: a wide screen that is touched and not tall (an Android tablet with its keyboard open) has the sidebar, never the sidebar and the tab bar. */
  @media (min-width: 1024px) {
    .tabbar {
      display: none;
    }
  }

  /* A phone on its side: a slimmer bar with the icon next to the label, as native apps have in landscape. */
  @media (pointer: coarse) and (max-height: 500px) {
    :root {
      --tabbar-h: 49px;
    }

    .tabbar {
      padding-block: 2px calc(2px + env(safe-area-inset-bottom));
    }

    .tab {
      flex-direction: row;
      gap: var(--s-2);
      min-height: var(--tap);
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    .tab {
      transition: color var(--dur) ease-out;
    }
  }
}