.mobile-page {
  &-header, &-footer {
    display: none !important;
  }

  @include                                                  media-breakpoint-down(sm) {
    display: block !important;
    position: fixed;
    z-index: 100000000;
    left: 0px;
    top: 0px;
    height: calc(100vh + 20px);
    width: 100vw;
    padding: $mobile-page-default-padding;
    overflow: auto;
    animation: slideInRight;
    animation-duration: .5s;
    animation-fill-mode: both;
    right: 0px;
    background: white;
    margin: 0px;

    @each $side, $config in (
            x: (
                    padding: #{$mobile-page-default-padding} 0px,
                    sides: (left, right),
                    width: 100%
            ),
            y: (
                    padding: 0px #{$mobile-page-default-padding},
                    sides: (top, bottom)
            )
    ) {
      &.no-padding-#{$side} {
        padding:                                            map-get($config, padding) !important;

        .mobile-page-header {
          @each $sd in (top, left, bottom, right) {
            @if (null != index(map-get($config, 'sides'), $sd)){
              #{$sd}:                                       0px;
            }
          }
          @if (map-has-key($config, width)) {
            width:                                          map-get($config, width);
          }
        }
      }
    }

    &.has-footer {
      padding-bottom:                                       $mobile-page-footer-height;
    }

    &-header {
      display: flex !important;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1);
      padding: 13px 10px;
      cursor: pointer;
      -webkit-box-shadow: 0px -20px 25px 10px rgba(0, 0, 0, 0.75);
      -moz-box-shadow: 0px -20px 25px 10px rgba(0, 0, 0, 0.75);
      box-shadow: 0px -20px 25px 10px rgba(0, 0, 0, 0.75);
      width: calc(100% + #{$mobile-page-default-padding * 2});
      position: sticky;
      top: $mobile-page-default-padding * -1;
      left: $mobile-page-default-padding * -1;
      margin: $mobile-page-default-padding * -1;
      z-index: 10000000;
      background: $white;
    }

    &-footer {
      $nagative-padding: $mobile-page-default-padding * -1;
      display: flex !important;
      position: sticky;
      bottom: (($mobile-page-footer-height / 2) + ($mobile-page-default-padding / 2) ) * -1;
      margin: 0px $nagative-padding $nagative-padding $nagative-padding;
      height: $mobile-page-footer-height;
      max-height: $mobile-page-footer-height;
      padding: 15px 10px;
      background: white;
      text-align: center;
      border-top: solid 1px rgba(0,0,0,0.1);
      border-bottom: solid 2px white;
    }
  }
}

body.mobile-page-on {
  @include                                                  media-breakpoint-down(sm) {
    overflow: hidden;
  }
}
