$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: rgba(255, 255, 255, 1);
  padding: 0;
  max-height: $modal-max-height;
  width: $modal-width;
  margin: auto;
  overflow-y: auto;
  z-index: 1000;

  border-radius: 2px;
  @include transform(translate(0));
  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;
    color: $primary-color;
  }

  .modal-content {
    padding: 1.5rem;
  }

  .modal-footer {
    border-radius: 0 0 2px 2px;
    padding: 4px 1.5rem;
    height: 56px;
    width: 100%;

    .btn, .btn-flat {
      float: right;
      margin: 6px 0;
    }
  }

  //.modal-header {
  //  position: absolute;
  //  top: 0;
  //  width: 100%;
  //
  //  .modal-close {
  //    position: relative;
  //    float: right;
  //    padding: 0 1rem;
  //  }
  //}
}

//.backdrop-layer {
//  position: absolute;
//  top: 0;
//  left: 0;
//  bottom: 0;
//  right: 0;
//  height: 115%;
//  width: 100%;
//  background: rgba(128, 128, 128, 0.95);
//  display: none;
//  z-index: 999;
//  will-change: opacity;
//}

.backdrop-layer {
  position: fixed;
  z-index:999;
  top: -100px;
  left: 0;
  bottom: 0;
  right: 0;
  height: 125%;
  width: 100%;
  background: rgba(128, 128, 128, 0.95);
  display: none;

  will-change: opacity;
}