@layer components {
  .bar {
    align-items: center;
    background-color: var(--color-canvas);
    block-size: calc(var(--footer-height) + env(safe-area-inset-bottom));
    border-block-start: 1px solid var(--color-ink-lighter);
    display: grid;
    font-size: 0.9em;
    grid-template-columns: auto 1fr auto 1fr auto;
    inset: auto 0 0 0;
    justify-items: center;
    max-block-size: 100%;
    padding-block-end: env(safe-area-inset-bottom);
    padding-inline:
      calc(0.75rem + env(safe-area-inset-left))
      calc(0.75rem + env(safe-area-inset-right));
    position: fixed;
    view-transition-name: bar;
    z-index: var(--z-bar);

    /* Hide bar on desktop */
    @media (min-width: 640px) {
      display: none;
    }
  }

  ::view-transition-group(bar) {
    z-index: 99;
  }

  /* Slots
  /* ------------------------------------------------------------------------ */

  .bar__slot {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .bar__slot--actions {
    display: flex;
    gap: 0.5ch;
    min-inline-size: 4rem;

    .btn {
      --btn-border-size: 0;
      --btn-background: transparent;
    }
  }

  .bar__slot--disabled {
    opacity: 0.4;
    pointer-events: none;
  }

  /* Border separators: logo (first) and bell (last) */
  .bar > .bar__slot:first-child {
    border-inline-end: 1px dashed var(--color-ink-light);
    padding-inline-end: var(--inline-space);
  }

  .bar > .bar__slot:last-child {
    border-inline-start: 1px dashed var(--color-ink-light);
    padding-inline-start: var(--inline-space);
  }

  .bar__link {
    align-items: center;
    color: var(--color-ink);
    display: flex;
    flex-direction: column;
    font-size: var(--text-x-small);
    gap: 0.15em;
    text-decoration: none;

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  .bar__logo {
    display: block;

    img {
      block-size: 1.5rem;
      display: block;
      inline-size: auto;
    }

    @media (any-hover: hover) {
      &:hover {
        opacity: 0.7;
      }
    }
  }

  /* Center search button */
  .bar__search {
    color: inherit;
    font-size: var(--text-x-small);
    font-weight: 600;
    opacity: 0.66;
    padding-inline: 1ch;
    text-transform: uppercase;
    white-space: nowrap;

    &:hover {
      color: var(--color-link);
      opacity: 1;
    }
  }
}