#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.5);
  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;
  }
  .offcanvas-inner {
    padding: 25px;
    .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;
        font-weight: 600;
        > 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 5 Free";
                content: "\f105";
                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 5 Free";
                content: "\f105";
                font-weight: 900;
              }
            }
            &.menu-parent-open {
              .menu-toggler {
                &:after {
                  content: "\f107";
                }
              }
            }
          }

          &.menu-parent-open {
            > a,
            > .menu-separator {
              > .menu-toggler {
                &:after {
                  font-family: "Font Awesome 5 Free";
                  content: "\f107";
                  font-weight: 900;
                }
              }
            }
            > .nav-header {
              > .menu-toggler {
                &:after {
                  font-family: "Font Awesome 5 Free";
                  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 5 Free";
                content: "\f105";
                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 {
          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;
            }
          }
        }
      }
    }
  }
}