$modal-max-height: 80% !default;
$modal-width: 55% !default;
$medium-modal-max-height: 80% !default;
$medium-modal-width: 80% !default;
$small-modal-max-height: 90% !default;
$small-modal-width: 90% !default;

.modal {
  @extend .z-depth-4;

  display: none;
  position: fixed;
  left: 0;
  right: 0;
  background-color: #fafafa;
  padding: 0;
  max-height: $modal-max-height;
  width: $modal-width;
  margin: auto;
  overflow-y: auto;
  z-index: 1000;

  border-radius: 2px;
  will-change: top, opacity;

  @media #{$medium-and-down} {
    max-height: $medium-modal-max-height;
    width: $medium-modal-width;
  }

  @media #{$small-and-down} {
    //top: 5%;
    max-height: $small-modal-max-height;
    width: $small-modal-width;
    //padding: 0.25rem;
  }

  h1,h2,h3,h4 {
    margin-top: 0;
  }

  .modal-content {
    padding: 24px;
  }
  .modal-close {
    cursor: pointer;
  }

  .modal-footer {
    border-radius: 0 0 2px 2px;
    background-color: #fafafa;
    padding: 4px 6px;
    height: 56px;
    width: 100%;

    .btn, .btn-flat {
      float: right;
      margin: 6px 0;
    }
  }
}
.lean-overlay {
    position: fixed;
    z-index:999;
    top: -100px;
    left: 0;
    bottom: 0;
    right: 0;
    height: 125%;
    width: 100%;
    background: #000;
    display: none;

    will-change: opacity;
}

// Modal with fixed action footer
.modal.modal-fixed-footer {
  padding: 0;
  height: 70%;

  .modal-content {
    position: absolute;
    height: calc(100% - 56px);
    max-height: 100%;
    width: 100%;
    overflow-y: auto;
  }

  .modal-footer {
    border-top: 1px solid rgba(0,0,0,.1);
    position: absolute;
    bottom: 0;
  }
}

// Modal Bottom Sheet Style
.modal.bottom-sheet {
  top: auto;
  bottom: -100%;
  margin: 0;
  width: 100%;
  max-height: 45%;
  border-radius: 0;
  will-change: bottom, opacity;
}

body.ios, body.android {
  .modal {
    //padding: 0;
    top: 0;
    left: 0;
    right: 0;
    max-height: 100%;
    height: 100%;
    width: 100%;
    overflow-x: hidden;

    .modal-header {
      position: fixed;
      left: 0;
      top: 0;
      height: $navbar-height-mobile;
      @extend .grey;
      @extend .z-depth-1;
      z-index: 2;

      .modal-close {
        float: left;
        height: $navbar-height-mobile;
        line-height: $navbar-height-mobile;
        @extend .white-text;
      }
    }

    .modal-content {
      padding: $navbar-height-mobile 0 0;
      position: fixed;
      max-height: 100%;
      overflow-y: auto;
    }
  }
}

body.ios {
  .modal {
    .modal-header {
      height: $navbar-height-mobile + $ios-status-bar-height;

      .modal-close {
        margin-top: $ios-status-bar-height;
      }
    }

    .modal-content {
      padding-top: $navbar-height-mobile + $ios-status-bar-height;
    }
  }
}