@include max-width($lbaic-settings-wp-breakpoint) {
  .lbaic-settings-nav {
    &-layout {
      --lbaic-settings-nav-mobile-events: none;
      --lbaic-settings-nav-mobile-overlay-opacity: 0;
      --lbaic-settings-nav-mobile-transform: translate3d(100%, 0, 0);
    }

    &-opened {
      --lbaic-settings-nav-mobile-events: all;
      --lbaic-settings-nav-mobile-overlay-opacity: 1;
      --lbaic-settings-nav-mobile-transform: translate3d(0, 0, 0);
    }

    &-header {
      height: 62px;
      padding-block: 16px;
      padding-inline: 16px;
      background-color: var(--lbaic-settings-nav-mobile-bg);
      box-shadow: var(--lbaic-settings-nav-mobile-shadow);
    }

    &-mobile-toggle {
      width: 24px;
      height: 24px;

      @include min-width($lbaic-settings-wp-breakpoint) {
        display: none;
      }

      &-in {
        width: 100%;
        height: 100%;
        border-radius: 3px;
      }

      &-i {
        width: 100%;
        height: auto;
        display: block;
        fill: var(--lbaic-settings-nav-mobile-trigger-fill);
      }
    }

    & {
      position: fixed;
      top: 108px;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      overflow: hidden;
      pointer-events: var(--lbaic-settings-nav-mobile-events);
      z-index: 100;

      &-overlay{
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: var(--lbaic-settings-nav-mobile-overlay);
        opacity: var(--lbaic-settings-nav-mobile-overlay-opacity);
        transition: opacity 480ms ease-in-out;
        z-index: 1;
      }
    }

    &-in {
      position: relative;
      min-width: 287px;
      width: 73.5%;
      height: 100%;
      padding: 10px;
      background-color: var(--lbaic-settings-nav-mobile-bg);
      margin-inline-start: auto;
      transform: var(--lbaic-settings-nav-mobile-transform);
      transition: transform 480ms ease-in-out;
      z-index: 2;
    }
  }
}