@use "node_modules/@picocss/pico/scss/pico" with (
  $theme-color: "cyan",
  $modules: (
    "content/code": false,
    "content/embedded": true,
    "content/figure": false,
    "content/miscs": false,
    "content/table": false,
    "forms/checkbox-radio-switch": false,
    "forms/input-color": false,
    "forms/input-date": false,
    "forms/input-file": false,
    "forms/input-range": false,
    "forms/input-search": false,
    "components/card": false,
    "components/dropdown": false,
    "components/loading": false,
    "components/group": false,
    "components/modal": false,
    "components/progress": false,
    "components/tooltip": false,
    "layout/grid": false,
    "layout/landmarks": false,
    "layout/overflow-auto": false,
    "utilities/accessibility": false,
    "utilities/reduce-motion": false,
  )
);

.closed-on-mobile {
  display: none;
}

@media (min-width: 992px) {
  main.responsive-nav {
    --block-spacing-horizontal: calc(var(--spacing) * 1.75);
    grid-column-gap: calc(var(--block-spacing-horizontal) * 3);
    display: grid;
    grid-template-columns: 200px auto;
  }

  .closed-on-mobile {
    display: block;
  }

  main > aside nav {
    position: fixed;
    width: 200px;
    max-height: calc(100vh - 5.5rem);
    overflow-x: hidden;
    overflow-y: auto;
  }
}