@import 'shared';

.root {
  @include z-index(nav);
  @include flex-center-vert;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 0 px(20);
  box-shadow: $element-shadow;
  background-color: $white;
  height: $navbar-height-mobile;

  @include media-tablet {
    height: $navbar-height-desktop;
  }

  .skipToContent {
    position: absolute;
    top: 0;
    left: 0;
    height: fit-content;
    pointer-events: none;
    opacity: 0.0001;
  }

  .skipToContent:focus,
  .skipToContent:active {
    color: $white;
    background-color: $black;
    opacity: 1;
  }

  > .wrapper {
    display: flex;
    max-width: px(1440);
    margin: 0 auto;
    width: 100%;

    > ul {
      @include flex-center-vert;
      flex-grow: 1;

      &.routes {
        justify-content: flex-start;

        .mainLogo {
          width: auto;
          height: px(35);
        }
      }

      &.links {
        justify-content: flex-end;

        a {
          img {
            @include box(px(25));
          }
        }
      }

      > li {
        padding: 0 px(10);
      }
    }
  }
}
