.offcanvas {
  background-color: $color-1;
  &.offcanvas-end {
    border-left: 5px solid $color-primary;
  }
}
.offcanvas-menu,
.mean-container {
  overflow: hidden;
  .mean-bar {
    padding: 0;
    background: transparent;

    * {
      box-sizing: border-box;
    }
    .meanmenu-reveal {
      display: none !important;
      display: -ms-none !important;
      display: -webkit-none !important;
    }
    .mean-nav {
      background: transparent;
      > ul {
        display: block !important;
        display: -ms-block !important;
        display: -webkit-block !important;

        li {
          background: transparent;

          a {
            line-height: 1;
            background: transparent;
            text-transform: capitalize;
            border-top: 1px solid rgba($color-primary, 0.4);
            border-bottom: none;
            width: 100%;
            @extend %d-flex, %justify-between, %item-center;

            &.mean-expand {
              width: 100%;
              line-height: 1;
              height: 55px;
              @extend %d-flex, %justify-end, %item-center;
              border-left: none !important;
              border-bottom: none !important;
              background: transparent;
              border-bottom: none;
              &:hover {
                background: transparent;
              }
            }
            &:has(~ .sub-menu) {
              @extend %d-flex, %justify-between, %item-center;

              i {
                @include transition($transition);
              }
            }
            &:has(~ .mean-clicked) {
              i {
                @include transform(rotate(-180deg));
              }
            }
          }
        }
        .sub-menu {
          > {
            li {
              a {
                padding-left: 12px;
                margin-left: 25px;
                padding-right: 12%;
                border-left: 1px solid rgba($color-primary, 0.4);
                border-bottom: 1px solid rgba($color-primary, 0.4);
              }
              .sub-menu {
                > {
                  li {
                    a {
                      padding-left: 12px;
                      margin-left: 50px;
                      padding-right: 20%;
                      border-left: 1px solid rgba($color-primary, 0.4);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

.hamburger-menu-close {
  @extend %d-grid, %place-center, %shrink-0;
  width: 40px;
  height: 40px;
  font-size: 20px;
  border: none;
  border-radius: 50%;
  background-color: $color-primary;
  color: $color-1;
  margin-left: auto;

  i {
    &::before,
    &::after {
      opacity: 1;
    }
  }
}
