.site-menu {
  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: .98;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .25s;
  transform: translateX(-#{$theme-site-navbar-menu-width});

  @each $breakpoint, $width in sort-map-by-values($theme-site-header-breakpoints, desc) {
    @media (max-width: $width) {
      top: 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);
  }

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

  &__section {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: $theme-site-navbar-menu-bg-color;
    background-clip: border-box;

    &--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;
        }
      }
    }
  }

  &__header {
    padding: .5rem 1rem;
    font-weight: 600;
    color: $black;
    letter-spacing: normal;
    background-color: $gray-100;
    border-bottom: $list-group-border-width solid $list-group-border-color;
  }

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

  &__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;
  }

  &__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;
    }
  }
}