breadcrumb-the-shire/web/css/layout/app-topbar.css

.app-header {
  --app-topbar-item-padding: 5px;
  --app-topbar-list-gap: 8px;
  --app-topbar-divider: 1px solid var(--app-border);
  --app-topbar-margin-bottom: calc(var(--app-spacing) * 2);
  --app-topbar-muted: var(--app-form-element-placeholder-color);
  --app-topbar-bg: var(--app-background-color);
  padding-block-start: 0;
  padding-left: var(--app-spacing);
  padding-right: var(--app-spacing);
  margin-bottom: var(--app-topbar-margin-bottom);
  color: var(--app-contrast);
  border-bottom: var(--app-topbar-divider);
}

main:has(.app-details-container) .app-header {
  margin-bottom: 0;
}

.app-header nav {
  gap: var(--app-spacing);
}

.app-header nav li {
  padding: 0;
}

.app-header form:has(input#app-search) {
  flex: 1;
}

.app-header li:has(#toggle-main-content-aside) {
  display: none;
}

main:has(#app-details-aside-section) li:has(#toggle-main-content-aside) {
  display: block;
}

.app-header nav > ul {
  display: flex;
  gap: var(--app-topbar-list-gap);
  align-items: center;
  color: var(--app-muted-color);
}

.app-header details.dropdown > summary:not([role]) {
  border: none;
  height: auto;
  padding: var(--app-topbar-item-padding);
  border-radius: 0;
  background: transparent;
}

.app-header details.dropdown > summary:not([role]):after {
  display: none;
}

.app-header nav > ul li a {
  padding: var(--app-topbar-item-padding);
  color: var(--app-topbar-muted);
  display: block;
  margin: 0;
}

.app-header button {
  padding: var(--app-topbar-item-padding);
  color: var(--app-topbar-muted);
  display: block;
  margin: 0;
  background: transparent;
  border: none;
  border-radius: 0;
}
.app-header #global-back.is-disabled,
.app-header #global-forward.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

@media (min-width: 768px) {
  header.app-header {
    position: sticky;
    top: 0;
    background: var(--app-topbar-bg);
    z-index: 10;
  }
}

.app-header details.dropdown[open] > summary::before {
  display: none;
}