tw-nav {
  display: block;

  #contents {
    anchor-name: --contents;
  }

  #crumbs {
    color: var(--fg2);
    font-family: var(--sans);
    font-size: 0.9rem;
    list-style: none;
    margin: 0;
    overflow: hidden;
    padding: 0;
    white-space: nowrap;

    .crumb {
      display: inline-block;

      a {
        text-decoration-line: none;
        text-overflow: ellipsis;
      }
    }

    .crumb + .crumb::before {
      content: ">" / "";
      margin: 0 0.25rem;
    }
  }

  #nav {
    display: none;

    .post & {
      align-items: center;
      background-color: var(--bg2);
      border: 1px solid var(--border1);
      border-bottom: none;
      /* box-shadow: none; */
      color: var(--fg1);
      display: flex;
      gap: var(--base);
      justify-content: space-between;
      min-width: 0;
      padding: var(--base) var(--base) 0 var(--base);
    }
  }

  #pagenav {
    background-color: var(--bg2);
    border: 1px solid var(--border1);
    /* box-shadow: var(--card-shadow); */
    color: var(--fg1);
    inset: auto;
    margin-top: calc(var(--base) / 2);
    padding: var(--base);
    position-anchor: --contents;
    right: anchor(right);
    top: anchor(bottom);

    &::backdrop {
      background-color: transparent;
    }
  }
}