.bottom-bar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: var(--z-bar);
  display: flex;
  align-items: stretch;
  block-size: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
  padding-block-end: env(safe-area-inset-bottom, 0px);
  background-color: var(--color-bg);
  box-shadow: var(--shadow-bar);
}

.bottom-bar__item {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  min-inline-size: 3rem;
  color: var(--color-text-subtle);
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
}

.bottom-bar__item:focus-visible {
  outline-offset: -4px;
}

.bottom-bar__item[aria-current="page"] {
  color: var(--color-forest-800);
  font-weight: var(--weight-semibold);
}

.bottom-bar__item[aria-current="page"] > .icon {
  color: var(--color-gold-600);
}

.bottom-bar__give {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: var(--radius-pill);
  background-color: var(--color-accent);
  color: var(--color-ink-900);
}

.bottom-bar__item--give {
  color: var(--color-text-strong);
  font-weight: var(--weight-semibold);
}

.bottom-bar__item--give[aria-current="page"] .bottom-bar__give {
  background-color: var(--color-forest-800);
  color: var(--color-on-dark);
}

.site-bottom-spacer {
  block-size: calc(var(--bottom-bar-height) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 64rem) {
  .bottom-bar,
  .site-bottom-spacer {
    display: none;
  }
}