pico/scss/components/_nav.scss

@use "sass:map";
@use "../settings" as *;

@if map.get($modules, "components/nav") {
  /**
   * Nav
   */

  // Reboot based on :
  // - sanitize.css v13.0.0 | CC0 1.0 Universal | github.com/csstools/sanitize.css

  // Prevent VoiceOver from ignoring list semantics in Safari (opinionated)
  :where(nav li)::before {
    float: left;
    content: "\200B";
  }

  // Pico
  // ––––––––––––––––––––

  nav,
  nav ul {
    display: flex;
  }

  nav {
    justify-content: space-between;

    ol,
    ul {
      align-items: center;
      margin-bottom: 0;
      padding: 0;
      list-style: none;

      &:first-of-type {
        margin-left: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
      }
      &:last-of-type {
        margin-right: calc(var(#{$✨}nav-element-spacing-horizontal) * -1);
      }
    }

    li {
      display: inline-block;
      margin: 0;
      padding: var(#{$✨}nav-element-spacing-vertical) var(#{$✨}nav-element-spacing-horizontal);

      :where(a, [role="link"]) {
        display: inline-block;
        margin: calc(var(#{$✨}nav-link-spacing-vertical) * -1)
          calc(var(#{$✨}nav-link-spacing-horizontal) * -1);
        padding: var(#{$✨}nav-link-spacing-vertical) var(#{$✨}nav-link-spacing-horizontal);
        border-radius: var(#{$✨}border-radius);

        &:not(:hover) {
          text-decoration: none;
        }
      }

      // Minimal support for buttons and forms elements
      button,
      [role="button"],
      input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"]),
      select {
        height: auto;
        margin-right: inherit;
        margin-bottom: 0;
        margin-left: inherit;
        padding: calc(var(#{$✨}nav-link-spacing-vertical) - (var(#{$✨}border-width) * 2))
          var(#{$✨}nav-link-spacing-horizontal);
      }
    }

    // Breadcrumb
    &[aria-label="breadcrumb"] {
      align-items: center;
      justify-content: start;

      & ul li {
        &:not(:first-child) {
          margin-inline-start: var(#{$✨}nav-link-spacing-horizontal);
        }

        &:not(:last-child) {
          ::after {
            position: absolute;
            width: calc(var(#{$✨}nav-link-spacing-horizontal) * 2);
            margin-inline-start: calc(var(#{$✨}nav-link-spacing-horizontal) / 2);
            content: "/";
            color: var(#{$✨}muted-color);
            text-align: center;
            text-decoration: none;
          }
        }
      }

      // Minimal support for aria-current
      & a[aria-current] {
        background-color: transparent;
        color: inherit;
        text-decoration: none;
        pointer-events: none;
      }
    }
  }

  // Vertical Nav
  aside {
    nav,
    ol,
    ul,
    li {
      display: block;
    }

    li {
      padding: calc(var(#{$✨}nav-element-spacing-vertical) * 0.5)
        var(#{$✨}nav-element-spacing-horizontal);

      a {
        display: block;
      }

      // Minimal support for links as buttons
      [role="button"] {
        margin: inherit;
      }
    }
  }

  // Breadcrumb RTL
  [dir="rtl"] {
    nav {
      &[aria-label="breadcrumb"] {
        & ul li {
          &:not(:last-child) {
            ::after {
              content: "\\";
            }
          }
        }
      }
    }
  }
}