#offcanvas-toggler {
  display: inline-flex;
  align-items: center;
  height: $header_height;
  line-height: $header_height;
  font-size: 20px;

  >span {
    &:hover {
      color: #fff;
    }
  }
}

.offcanvas-init {
  overflow-x: hidden;
  position: relative;
}

.offcanvas-active {
  .offcanvas-overlay {
    visibility: visible;
    opacity: 1;
  }
}

.offcanvas-overlay {
  background: rgba(0, 0, 0, 0.7);
  bottom: 0;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 9999;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.body-wrapper {
  position: relative;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  backface-visibility: hidden;
}

.close-offcanvas {
  position: absolute;
  top: 25px;
  z-index: 1;
}

.offcanvas-menu {
  width: $offcanvas_width;
  height: 100%;
  position: fixed;
  top: 60px;
  overflow: inherit;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  z-index: 10000;

  #offcanvas-toggler {
    display: none !important;
  }

  .logo-sticky {
    display: none !important;
  }

  .offcanvas-inner {
    padding: 25px;

    // Make offcanvas scrollable
    max-height: calc(100vh - 60px);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;

    .header-modules {
      margin-left: 0px;
    }

    .finder {
      margin-bottom: 10px;
    }

    .sp-sign-in {
      position: relative;
      top: 10px;

      .signin-text {
        display: none !important;
      }
    }

    .sp-profile-wrapper {
      .user-text {
        display: none !important;
      }
    }

    .sp-contact-info,
    .social-icons {
      font-size: 14px;

      >li>a {
        opacity: 0.7;

        &:hover,
        &:focus {
          opacity: 1;
        }
      }
    }

    .sp-contact-info {
      margin-top: 20px;

      >li:not(:last-child) {
        margin-bottom: 10px;
      }
    }

    .sp-module {
      padding: 0;
      margin: 0;

      &:not(:last-child) {
        margin-right: 20px;
      }

      .sp-module-title {
        font-size: 1rem;
        font-weight: bold;
      }

      &:not(:last-child) {
        margin-bottom: 20px;
      }

      //search width
      .awesomplete {
        width: 210px;
      }
    }

    ul.menu {

      &,
      ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
        -ms-flex-direction: column;
        flex-direction: column;
        padding: 0;
        margin: 0;
        margin: 0 0 15px 0;
        list-style: none;
      }

      >li {
        border: 0;
        padding: 0;
        margin: 0;
        position: relative;
        overflow: hidden;
        display: block;

        >a,
        >span {
          display: block;
          font-size: 18px;
          padding: 10px 0px;
          position: relative;
          line-height: 18px;
          opacity: 0.7;
          transition: 0.3s;

          &:hover {
            opacity: 1;
          }
        }

        ul.menu-child {
          display: none;
        }

        &.menu-parent {

          >a,
          >.menu-separator {
            >.menu-toggler {
              display: block;
              position: absolute;
              top: 50%;
              cursor: pointer;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              padding: 10px;

              &:after {
                font-family: $font_awesome_font_family;
                font-weight: 900;
              }
            }
          }

          & li.menu-parent {
            >a {
              position: relative;
              display: block;
            }

            .menu-toggler {
              right: -10px;
              display: block;
              position: absolute;
              top: 50%;
              cursor: pointer;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);
              padding: 2px 10px;

              &:after {
                font-family: $font_awesome_font_family;
                font-weight: 900;
              }
            }
          }

          &.menu-parent-open {

            >a,
            >.menu-separator {
              >.menu-toggler {
                &:after {
                  font-family: $font_awesome_font_family;
                  content: "\f107";
                  font-weight: 900;
                }
              }
            }

            >.nav-header {
              >.menu-toggler {
                &:after {
                  font-family: $font_awesome_font_family;
                  content: "\f107";
                  font-weight: 900;
                }
              }
            }
          }

          >.nav-header {
            >.menu-toggler {
              display: block;
              position: absolute;
              top: 50%;
              cursor: pointer;
              transform: translateY(-50%);
              -webkit-transform: translateY(-50%);

              &:after {
                font-family: $font_awesome_font_family;
                font-weight: 900;
              }
            }
          }
        }

        >ul {
          display: none;

          li {
            a {
              font-size: 15px;
              padding: 4px 0px;
              line-height: 18px;
              font-weight: 400;
            }
          }
        }
      }
    }
  }

  // border-menu
  &.border-menu {
    .offcanvas-inner ul.menu {
      >li {
        border-bottom: 1px solid rgba(32, 31, 31, 0.1);
        margin-bottom: 0;

        >a,
        >.nav-header {
          padding: 15px 30px 15px 10px;
        }
      }

      // ul {
      //   padding-bottom: 15px;
      // }
    }
  }

  // center alignment
  &.center-alignment {
    .offcanvas-inner {
      padding: 0px 15px;
    }
  }
}

body {
  &.ltr {
    #offcanvas-toggler {
      &.offcanvas-toggler-right {
        float: right;
        margin-left: 20px;
      }

      &.offcanvas-toggler-left {
        float: left;
        margin-right: 20px;
      }
    }

    &.offcanvs-position-left {
      .body-wrapper {
        left: 0;
      }

      .offcanvas-menu {
        left: -$offcanvas_width;
        top: 0;
      }

      &.offcanvas-active {
        .offcanvas-menu {
          left: 0;
          top: 0;
        }
      }
    }

    &.offcanvs-position-right {
      .body-wrapper {
        right: 0;
      }

      .offcanvas-menu {
        right: -$offcanvas_width;
        top: 0;
      }

      &.offcanvas-active {
        .offcanvas-menu {
          right: 0;
          top: 0;
        }
      }
    }

    .close-offcanvas {
      right: 15px;
    }

    .offcanvas-menu {
      .offcanvas-inner {
        ul.menu {
          >li {
            &.menu-parent {

              >a,
              >.menu-separator {
                >.menu-toggler {
                  right: -10px;
                }
              }

              >.nav-header {
                >.menu-toggler {
                  right: 0;
                }
              }
            }

            ul {
              margin-left: 10px;
            }
          }
        }
      }
    }
  }
}

body.ltr {
  .offcanvas-menu.offcanvas-arrow-left {

    .offcanvas-inner {
      ul.menu {
        >li {

          /* top level item */
          >a,
          >span,
          >.nav-header {
            padding-left: 40px;
          }

          &.menu-parent {

            >a>.menu-toggler,
            >.menu-separator>.menu-toggler,
            >.nav-header>.menu-toggler {
              left: 0;
              right: auto;
              padding: 10px;
              transform: translateY(-50%);
            }
          }

          ul {
            margin-left: 10px;

            >li {

              /* nested items */
              >a {
                padding-left: 32px;
              }

              &.menu-parent {
                .menu-toggler {
                  left: 0;
                  right: auto;
                  padding: 2px 10px;
                  transform: translateY(-50%);
                }
              }
            }
          }

        }
      }
    }
  }

  .offcanvas-menu.center-alignment {
    .offcanvas-inner {
      ul.menu>li ul>li>a {
        padding-left: 0px;
      }
    }
  }
}

/* Default show closed arrow */
.offcanvas-menu .menu-toggler::after {
  content: "\f105";
}

/* down arrow when submenu is open */
.offcanvas-menu li.menu-parent.menu-parent-open>a>.menu-toggler::after,
.offcanvas-menu li.menu-parent.menu-parent-open>.menu-separator>.menu-toggler::after,
.offcanvas-menu li.menu-parent.menu-parent-open>.nav-header>.menu-toggler::after,
.offcanvas-menu li.menu-parent[aria-expanded="true"]>a>.menu-toggler::after,
.offcanvas-menu li.menu-parent[aria-expanded="true"]>.menu-separator>.menu-toggler::after,
.offcanvas-menu li.menu-parent[aria-expanded="true"]>.nav-header>.menu-toggler::after {
  content: "\f107";
}