@layer components {
  .dock {
    --icon-size: var(--dock-icon-size);

    position: fixed;
    inset-inline: var(--space-0);
    inset-block-end: var(--space-0);
    z-index: var(--z-chrome);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(var(--space-0), var(--dock-slot-max));
    justify-content: center;

    padding-block: var(--space-3) calc(var(--space-2) + var(--safe-bottom));
    padding-inline: var(--safe-left) var(--safe-right);

    border-block-start: var(--border-width) solid var(--color-border);
  }

  .dock__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-block-size: var(--tap-min);
    font: var(--type-dock);
    color: var(--color-ink-faint);
    -webkit-tap-highlight-color: transparent;
    transition: color var(--dur-fast) var(--ease-calm), transform var(--dur-fast) var(--ease-spring);
  }

  .dock__icon {
    position: relative;
    display: inline-flex;
  }

  .dock__count {
    position: absolute;
    inset-block-start: calc(var(--space-2) * -1);
    inset-inline-start: calc(var(--size-fill) - var(--space-2));
    min-inline-size: var(--space-6);
    block-size: var(--space-6);
    padding-inline: var(--space-1);
    border-radius: var(--radius-pill);
    background-color: var(--color-accent);
    color: var(--color-ink-on-accent);
    font: var(--type-dock);
    line-height: var(--space-6);
    text-align: center;
  }

  .dock__item[aria-current="page"] {
    color: var(--color-accent-ink);
  }

  .dock__item:active {
    transform: scale(var(--press-scale));
  }

  @media (any-hover: hover) {
    .dock__item:hover {
      color: var(--color-ink);
    }
  }
}

@layer platform {
  html.keyboard .dock {
    display: none;
  }
}

@layer components {
  @media (width >= 800px) {
    .dock {
      inset-inline: 50% auto;
      inset-block-end: calc(var(--space-5) + var(--safe-bottom));
      translate: -50% var(--space-0);
      grid-auto-columns: var(--dock-slot-max);
      padding: var(--space-3);
      border: var(--border-width) solid var(--color-border);
      border-radius: var(--radius-pill);
      box-shadow: var(--elev-3);
    }
  }
}