//
// Convert Default Collapsible Navbar to Offcanvas.
//

.body-offcanvas-navbar {
  // Change this with breakpoint mixin or var
  @media all and (max-width: 991px) {
    .navbar-collapse {
      position: fixed;
      top: 0;
      left: -100%;
      z-index: 9;
      display: block;
      width: 100%;
      height: 100vh;
      transition-timing-function: ease-in-out;
      transition-duration: .2s;
      transition-property: left, visibility;

      &.show {
        left: 0;
      }
    }

    .navbar-brand {
      z-index: 12;
    }

    .navbar-toggler {
      z-index: 15;

      &.collapsed > .close,
      &:not(.collapsed) > .navbar-toggler-icon {
        background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve" width="24px" height="24px"%3E%3Cg id="Outlined"%3E%3Cline style="fill:none;stroke:#00000080;stroke-width:2;stroke-miterlimit:10;" x1="4" y1="4" x2="20" y2="20"/%3E%3Cline style="fill:none;stroke:#00000080;stroke-width:2;stroke-miterlimit:10;" x1="20" y1="4" x2="4" y2="20"/%3E%3C/g%3E%3C/svg%3E');
        background-size: 85% 85%;
      }

      &:focus {
        outline: none;
      }
    }

    .collapsed-wrapper {
      padding-top: 7.5rem;
    }
  }
}