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

  @include respond-to('medium') {
    visibility: hidden;
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    padding: 30px 0 20px 0;
    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;
      -webkit-backface-visibility: visible !important;
      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') {
      -webkit-backface-visibility: visible !important;
      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;
  }
}