.m-submenu {
  padding-top: 25px;

  @include respond-to("medium") {
    visibility: hidden;
    position: fixed;
    top: 67px;
    left: 0;
    width: 100%;
    padding: 30px 0 20px 0;
    white-space: normal;
    background-color: var(--background-color);
    border-top: 1px solid var(--secondary-border-color);
    z-index: 5;
    @include bs(0 60px 60px rgba(0, 0, 0, var(--submenu-shadow-color-opacity)));
  }

  @include respond-to("extra-large") {
    padding: 32px 0 23px 0;
  }

  &.opened {
    @include respond-to("medium") {
      visibility: visible;
      backface-visibility: visible !important;
      @include animation("openSubmenuAnimation 0.3s both");
      @include keyframes(openSubmenuAnimation) {
        from {
          opacity: 0;
          @include transform(translate3d(0, -5%, 0));
        }
        to {
          opacity: 1;
          @include transform(translate3d(0, 0, 0));
        }
      }
    }
  }

  &.closed {
    @include respond-to("medium") {
      backface-visibility: visible !important;
      @include animation("closeSubmenuAnimation 0.3s both");
      @include keyframes(closeSubmenuAnimation) {
        from {
          visibility: visible;
          opacity: 1;
          @include transform(translate3d(0, 0, 0));
        }
        to {
          visibility: hidden;
          opacity: 0;
          @include transform(translate3d(0, -2.5%, 0));
        }
      }
    }
  }
}

_:-ms-fullscreen,
:root .m-submenu {
  @include respond-to("medium") {
    top: 65px;
  }
}
