// site-menubar-flipped
// --------------------------------------------------

.site-menubar-flipped {
  // site-navbar
  // .navbar-header {
  //   @include media-breakpoint-up(md) {
  //     float: right;
  //   }
  // }
  .site-navbar {
    @include media-breakpoint-up(md) {
      &, &.navbar-expand-md {
        flex-direction: row-reverse;
      }
    }
  }

  // site-menubar
  .site-menubar, .site-menubar-footer {
    right: 0;
    left: auto;
  }

  // site-gridmenu
  .site-gridmenu {
    right: 0;
    left: auto;
  }

  // Hamburger Menu Arrow Left style
  .hamburger-arrow-left {
    &.collapsed, &.unfolded {
      // transform: rotate(180deg);

      &::before {
        transform: translateX(-.1em) translateY(.1em) rotate(135deg);
      }

      &::after {
        transform: translateX(-.1em) translateY(-.1em) rotate(45deg);
      }
    }
  }
}

// site-menubar-unfold
// --------------------------------------------------

// site-navbar-unfold
// @media screen and (max-width: $grid-float-breakpoint-max),
// screen and (min-width: $screen-lg-min) {
//   .css-menubar {
//     .site-menubar-flipped {
//       .site-navbar {
//         .navbar-container {
//           @include media-breakpoint-up(md) {
//             margin-right: $site-menubar-unfold-width;
//             margin-left: 0;
//           }
//         }
//       }
//     }
//   }
// }

@include media-breakpoint-down(sm) {
  .css-menubar {
    .site-menubar-flipped {
      .site-navbar {
        .navbar-container {
          @include media-breakpoint-up(md) {
            // margin-right: $site-menubar-unfold-width;
            margin-right: 0;
            margin-left: 0;
          }
        }
      }
    }
  }
}

@include media-breakpoint-up(xl) {
  .css-menubar {
    .site-menubar-flipped {
      .site-navbar {
        .navbar-container {
          @include media-breakpoint-up(md) {
            // margin-right: $site-menubar-unfold-width;
            margin-right: 0;
            margin-left: 0;
          }
        }
      }

      .page, .site-footer {
        margin-right: $site-menubar-unfold-width;
        margin-left: 0;
      }
    }
  }
}

//.js-menubar {
.site-menubar-unfold {
  &.site-menubar-flipped {
    .page, .site-footer {
      margin-right: $site-menubar-unfold-width;
      margin-left: 0;
    }

    .site-navbar {
      .navbar-container {
        @include media-breakpoint-up(md) {
          // margin-right: $site-menubar-unfold-width;
          margin-right: 0;
          margin-left: 0;
        }
      }
    }
  }
}
//}

@include media-breakpoint-down(sm) {
  //.js-menubar {
  .site-menubar-flipped {
    &.site-menubar-unfold {
      .page, .site-footer {
        margin-right: auto;
        margin-left: 0;
      }
    }

    &.site-menubar-open {
      .page, .site-footer {
        @include transform(translate3d(-$site-menubar-unfold-width, 0, 0));
        -ms-transform: translate(-$site-menubar-unfold-width, 0);
      }

      .site-menubar {
        @include transform(translate3d(0, 0, 0));
        -ms-transform: translate(0, 0);
      }
    }
  }
  //}
}

// site-menu-fold
// --------------------------------------------------

@include media-breakpoint-between(md, lg) {
  .css-menubar {
    .site-menubar-flipped {
      // site-page-fold()
      .page, .site-footer {
        margin-right: $site-menubar-fold-width;
        margin-left: 0;
      }

      // site-navbar-fold()
      .site-navbar {
        .navbar-container {
          @include media-breakpoint-up(md) {
            // margin-right: $site-menubar-fold-width;
            margin-right: 0;
            margin-left: 0;
          }
        }
      }

      // site-menu-fold()
      .site-menu {
        > .site-menu-item {
          > .site-menu-sub {
            right: $site-menubar-fold-width;
            left: auto;
          }
        }
      }
    }
  }
}

//.js-menubar {
.site-menubar-fold {
  &.site-menubar-flipped {
    // site-page-fold()
    .page, .site-footer {
      margin-right: $site-menubar-fold-width;
      margin-left: 0;
    }

    // site-navbar-fold()
    .site-navbar {
      .navbar-container {
        @include media-breakpoint-up(md) {
          // margin-right: $site-menubar-fold-width;
          margin-right: 0;
          margin-left: 0;
        }
      }
    }

    // site-menu-fold()
    .site-menu {
      > .site-menu-item {
        > .site-menu-sub {
          right: $site-menubar-fold-width;
          left: auto;
        }
      }
    }
  }
}
//}

// responsive-phone
// --------------------------------------------------

@include media-breakpoint-down(sm) {
  .site-menubar-flipped {
    .site-menubar {
      @include transform(translate3d($site-menubar-unfold-width, 0, 0));
      -ms-transform: translate($site-menubar-unfold-width, 0);
    }
  }
}