#nav {
  align-items: center;
  column-gap: var(--inline-space-half);
  display: flex;
  inset: 0 0 auto 0;
  inset-inline-end: var(--right-sidebar-width);
  inset-inline-start: var(--left-sidebar-width);
  padding-block: var(--block-space);
  padding-inline: var(--inline-space);
  pointer-events: none;
  position: fixed;
  row-gap: var(--block-space);
  z-index: 2;

  .sidebars & {
    inset-inline-end: calc(var(--right-sidebar-width));
    padding-inline-end: calc(var(--btn-size) + var(--inline-space) * 2);
    padding-block: var(--block-space);

    @media (min-width: 100ch) {
      padding-inline-end: var(--inline-space);
      inset-inline-end: var(--right-sidebar-width);
    }

    &::before {
      background: linear-gradient(180deg, oklch(var(--lch-white)) 20%, oklch(var(--lch-white) / 0) 100%);
      content: "";
      inset: 0;
      inset-inline: 1px;
      position: absolute;
      z-index: -1;
    }
  }
}

.nav__user-settings {
  display: grid;

  @media (min-width: 100ch) {
    display: none;
  }
}