// prevents the page from scrolling when the nav is open
// stylelint-disable-next-line
body.site-menu--open {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.site-menu {
  $self: &;

  position: fixed;
  top: calculate-navbar-height-for(default);
  bottom: 0;
  z-index: $theme-site-header-z-index - 1;

  width: $theme-site-navbar-menu-width;
  max-width: $theme-site-navbar-menu-max-width;

  overflow-x: auto;
  overflow-y: scroll;

  font-family: $theme-site-navbar-menu-font-family;

  will-change: visibility;
  visibility: hidden;

  background-color: $theme-site-navbar-menu-bg-color;
  opacity: 1;

  transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
  transform: translateX(-#{$theme-site-navbar-menu-width});

  @media (min-width: $skin-desktop-menu-breakpoint) {
    position: absolute;
    bottom: auto;
    background-color: $gray-100;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    transform: translateY(-#{$theme-site-navbar-menu-width});

    &--open {
      width: 100%;
      transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
      transform: translateY(0);
    }
  }

  @each $breakpoint, $width in sort-map-by-values($theme-site-header-breakpoints, desc) {
    @media (max-width: $width) {
      top: calculate-navbar-height-for($breakpoint);
      max-height: calc(100vh - calculate-navbar-height-for($breakpoint));
    }
  }

  &--open {
    visibility: visible;
    box-shadow: $theme-site-navbar-menu-box-shadow;
    transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear 0s;
    transform: translateX(0);
  }

  &__link {
    display: block;
    padding: $theme-site-navbar-menu-link-padding-x $theme-site-navbar-menu-link-padding-y;
    color: $theme-site-navbar-menu-link-color;
    &:hover {
      color: $theme-site-navbar-menu-link-hover-color;
      text-decoration: none;
      background-color: $theme-site-navbar-menu-hover-background-color;
    }
    &--active {
      font-weight: $theme-site-navbar-menu-active-item-font-weight;
      background-color: $theme-site-navbar-menu-hover-background-color;
    }
  }

  &__link-wrapper {
    display: flex;
    justify-content: space-between;
    #{ $self }-items__toggler {
      background-color: transparent;
      border: none;
      outline: none;
      min-width: 40px;
    }
  }

  &__item {
    font-size: $theme-site-navbar-menu-item-font-size;
    font-weight: $theme-site-navbar-menu-item-font-weight;
    border-bottom: 1px solid $theme-site-navbar-menu-item-border-color;
    &--with-children {
      > #{ $self }__items {
        display: none;
        &[class$="-open"] {
          display: block;
        }
        #{ $self }__link {
          font-size: .75em;
          font-weight: $font-weight-normal;
        }
      }
    }
  }

  &__items {
    display: flex;
    flex-direction: column;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
  }

  &__contents {
    width: 100%;
    height: 100%;
    padding: $theme-site-navbar-menu-padding-x $theme-site-navbar-menu-padding-y;
  }

  &__contents-mobile {
    width: 100%;
    height: 100%;
    padding: 24px;

    @media (min-width: $skin-desktop-menu-breakpoint) {
      display: none;
    }
  }

  &__contents-desktop {
    display: none;
    max-width: $marko-web-document-container-max-width;
    padding-top: 28px;
    padding-right: $marko-web-page-wrapper-padding;
    padding-bottom: 28px;
    padding-left: $marko-web-page-wrapper-padding;
    margin-right: auto;
    margin-left: auto;

    @media (min-width: $marko-web-document-container-max-width) {
      padding-right: 0;
      padding-left: 0;
    }

    @media (min-width: $skin-desktop-menu-breakpoint) {
      display: block;
    }
  }

  &__header {
    padding: 0;
    font-weight: 600;
    color: $black;
    letter-spacing: normal;
    background-color: $gray-100;
    border-bottom: none;
  }

  &__section {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: transparent;
    background-clip: border-box;

    &--primary {
      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;
      border-bottom: 1px solid $gray-200;

      @media (min-width: $skin-desktop-menu-breakpoint) {
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
      }

      #{ $self } {
        &__header {
          @include skin-typography($style: "menu-item-primary-header");
          margin-bottom: 12px;
        }
        &__item {
          @include skin-typography($style: "menu-item-primary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            font-size: 18px;
            line-height: 1.22;
          }
        }

        &__link {
          @include skin-typography-link($style: "menu-item-primary", $link-style: "primary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            padding-top: 8px;
            padding-bottom: 8px;
          }
          &--active {
            // stylelint-disable-next-line
            font-weight: skin-typography-prop("menu-item-primary", "font-weight");
            color: skin-typography-link-prop("menu-item-primary", "primary", "hover-color");
          }
        }
      }
    }

    &--secondary {
      padding-top: $theme-site-navbar-menu-link-padding-x + 4px;
      padding-bottom: $theme-site-navbar-menu-link-padding-x + 4px;

      @media (min-width: $skin-desktop-menu-breakpoint) {
        padding-top: 0;
        padding-bottom: 0;
      }

      #{ $self } {
        &__header {
          @include skin-typography($style: "menu-item-secondary-header");
          margin-bottom: 6px;
        }

        &__item {
          @include skin-typography($style: "menu-item-secondary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            font-size: 18px;
            font-weight: $font-weight-normal;
          }
        }

        &__link {
          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            padding-top: 10px;
            padding-bottom: 10px;
          }
          &--active {
            // stylelint-disable-next-line
            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
          }
        }
      }
    }

    &--search {
      padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;

      .input-group {
        .form-control {
          border-top-right-radius: 0;
          border-bottom-right-radius: 0;
        }
        .btn {
          padding-right: 18px;
          padding-left: 18px;
          border-top-left-radius: 0;
          border-bottom-left-radius: 0;
        }
        .search-sponsor__logo {
          margin-left: 1rem;
        }
      }
    }

    &--social-icons {
      flex-direction: row;
      padding: $theme-site-navbar-menu-link-padding-x $theme-site-navbar-menu-link-padding-y;

      > .social-icon-link {
        margin-right: .75rem;
        &:last-child {
          margin-right: 0;
        }
      }
    }

    &--user {
      padding-top: 0;
      padding-bottom: 4px;
      margin-bottom: 12px;
      border-bottom: 1px solid $gray-200;

      #{ $self } {
        &__header {
          @include skin-typography($style: "menu-item-secondary-header");
          background-color: transparent;
          margin-bottom: 6px;
        }

        &__item {
          @include skin-typography($style: "menu-item-secondary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            font-size: 18px;
            font-weight: $font-weight-normal;
          }
        }

        &__link {
          @include skin-typography-link($style: "menu-item-secondary", $link-style: "primary");
          @media (min-width: $skin-desktop-menu-breakpoint) {
            padding-top: 10px;
            padding-bottom: 10px;
          }
          &--active {
            // stylelint-disable-next-line
            font-weight: skin-typography-prop("menu-item-secondary", "font-weight");
            color: skin-typography-link-prop("menu-item-secondary", "primary", "hover-color");
          }
        }
      }
    }
  }
}

.social-follow {
  $self: &;

  &--site-menu {
    padding-bottom: $theme-site-navbar-menu-link-padding-x * 2 + 4px;
    border-bottom: 1px solid $gray-200;
    @media (min-width: $skin-desktop-menu-breakpoint) {
      border-width: 0;
    }
  }
}