@layer components {
  .bar {
    --row-gap: 0.2lh;

    background-color: var(--color-terminal-bg);
    block-size: calc(var(--footer-height) + env(safe-area-inset-bottom));
    color: var(--color-terminal-text);
    display: flex;
    flex-direction: column;
    font-size: 0.9em;
    inset: auto 0 0 0;
    max-block-size: 100%;
    padding-block: var(--block-space) calc(var(--block-space) + env(safe-area-inset-bottom));
    padding-inline:
      calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-left))
      calc(var(--tray-size) + calc(var(--inline-space) * 3) + env(safe-area-inset-right));
    place-content: center;
    position: fixed;
    view-transition-name: bar;
    z-index: var(--z-bar);

    html[data-theme="dark"] & {
      border-block: 1px solid var(--color-ink-lighter);
    }

    @media (prefers-color-scheme: dark) {
      html:not([data-theme]) & {
        border-block: 1px solid var(--color-ink-lighter);
      }
    }
  }

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

  .bar__placeholder {
    .btn--plain {
      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: oklch(var(--lch-blue-dark));
        opacity: 1;
      }
    }
  }

  .bar__search.popup {
    --panel-border-color: var(--color-selected-dark);
    --popup-display: flex;

    box-shadow: 0 0 0 1px oklch(var(--lch-blue-medium) / 5%),
                0 0.2em 0.2em oklch(var(--lch-blue-medium) / 5%),
                0 0.4em 0.4em oklch(var(--lch-blue-medium) / 5%),
                0 0.8em 0.8em oklch(var(--lch-blue-medium) / 5%);
    position: fixed;
    inset: auto 0 calc(var(--footer-height) + env(safe-area-inset-bottom)) 0;
    flex-direction: column;
    max-block-size: 70dvh;
    inline-size: min(55ch, 100vw);
    margin-inline: auto;
    transform: none;

    &[open] {
      transform: none;
    }

    @media (any-hover: none) {
      inset: 0;
      inline-size: 100vw;
      max-inline-size: 100vw;
      max-block-size: 100dvh;
      block-size: 100dvh;
      border-radius: 0;
      margin: 0;

      &::backdrop {
        display: none;
      }

      .popup__btn {
        padding-block: var(--inline-space);
        font-size: var(--text-small);
      }

      .bar__search-header {
        padding: var(--inline-space);
      }
    }
  }

  .bar__search-header {
    display: flex;
    align-items: center;
    gap: var(--inline-space-half);
    padding: var(--block-space);
    border-block-end: 1px solid var(--color-ink-lighter);

    input { flex: 1; }

    .bar__search-close {
      flex-shrink: 0;
    }
  }

  .bar__search .nav__scroll-container:has(.popup__section) .blank-slate--empty {
    display: none;
  }
}