@use "sass:math";

nav {
  display: flex;
  flex-direction: column;
  @include bg-color("black");
  overflow-y: auto;

  .navbar {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: spacer(3);
    @include font-size(3);
    padding: $body-padding-mobile;

    h1 {
      @include font-size(2);
      width: 100%;
      text-align: center;
      @include text-singleline;
    }

    .toggle::after {
      @extend %icon, .icon-outline-menu;
    }
  }

  .logo-full {
    @include font-size(5);
    width: 100%;
  }

  a {
    text-decoration: none;
  }

  header {
    display: none;
    padding: spacer(5);
  }

  section,
  footer {
    display: none;

    > a,
    details > summary {
      @include text-singleline;
      padding: spacer(4) spacer(5);
      border-top: $border-width solid gray(3);
      border-bottom: $border-width solid transparent;
      .icon {
        margin-right: spacer(4);
      }

      &:last-child {
        border-color: gray(3);
      }

      &[aria-current="page"],
      &:hover {
        color: full-color(accent);
      }
    }
  }

  section {
    margin-bottom: spacer(7);
  }

  footer {
    margin-top: auto;

    .popover {
      position: relative;

      & > summary {
        display: revert;

        &::before {
          float: right;
          margin: 0;
          @extend %icon, .icon-outline-cheveron-down;
        }
      }

      &[open] > summary {
        margin: 0;

        &::before {
          @extend .icon-outline-cheveron-up;
        }
      }

      .user-avatar {
        margin-right: spacer(3);
      }

      .dropdown {
        width: 100%;
        margin: 0 spacer(4);
      }

      [role="menu"] {
        .icon {
          margin-left: spacer(1);
          margin-right: spacer(1) + spacer(2);
        }

        > hr {
          margin: spacer(2) 0;
        }

        [role="menuitemradio"] {
          > * {
            vertical-align: middle;
          }
          &[aria-checked="true"] {
            &::before {
              @extend %icon, .icon-solid-check-circle;
              color: full-color(success);
              margin-left: spacer(2);
              float: right;
              height: $big-icon-size;
            }
          }
        }
      }
    }
  }

  &.open {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: z-index(menubar);

    .navbar .toggle::after {
      @extend .icon-x;
    }

    section,
    footer {
      display: grid;
    }
  }

  &.compact {
    @include breakpoint-up(lg) {
      width: unset;

      header .logo-full {
        mask-size: auto nth($font-sizes, 3);
        mask-position: 0;
      }

      section > a,
      footer > a,
      details > summary,
      [role="menuitem"] {
        font-size: 0;
        img,
        .icon {
          margin-right: 0;
        }
      }

      footer > details > summary {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
      }
    }
  }

  @include breakpoint-up(lg) {
    grid-row: span 2;
    grid-column: -3;
    &.open,
    &:not(.open) {
      position: static;
      width: size(12.8125);
    }

    .navbar {
      display: none;
    }

    header,
    section,
    footer {
      display: grid;
    }
  }

  @media print {
    display: none;
  }
}

[role="navigation"] {
  menu {
    display: grid;
    gap: spacer(3);

    menu {
      @include font-size(1);
      padding-left: spacer(4);
      margin-top: spacer(3);
    }
  }

  &.breadcrumbs {
    ol {
      @include font-size(4);
      display: flex;
      flex-wrap: wrap;
      list-style-type: none;
      padding: 0;

      li {
        &:not(:last-of-type)::after {
          content: "/";
          margin: 0 spacer(2);
        }
        a[aria-current="page"] {
          text-decoration: none;
        }
      }
    }
  }
}
