$zindex-modal-background:  1040 !default;
$zindex-modal:             1050 !default;

//== Modals
//
//##

//** Padding applied to the modal body
$modal-inner-padding:         15px !default;


//** Padding applied to the modal title
$modal-title-padding:            15px !default;
$modal-title-padding-top-bottom: 5px !default;
//** Modal title line-height
$modal-title-line-height:     $line-height-base !default;

//** Background color of modal content area
$modal-content-bg:                             #fff !default;
//** Modal content border color
$modal-content-border-color: transparent;
//** Modal content border color **for IE8**
$modal-content-fallback-border-color:          #999 !default;

//** Modal backdrop background color
$modal-backdrop-bg:           #000 !default;
//** Modal backdrop opacity
$modal-backdrop-opacity:      .5 !default;
//** Modal header border color
$modal-header-border-color:   #e5e5e5 !default;
//** Modal footer border color
$modal-footer-border-color:   $modal-header-border-color !default;

$modal-lg:                    900px !default;
$modal-md:                    600px !default;
$modal-sm:                    300px !default;
$modal-full: 85%;
$modal-full-max-width: 1200px;





//
// Modals
// --------------------------------------------------

// .modal-open      - body class for killing the scroll
// .modal           - container to scroll within
// .modal-dialog    - positioning shell for the actual modal
// .modal-content   - actual modal w/ bg and corners and shit

// Kill the scroll on the body
.modal-open {
  overflow: hidden;
}

// Container that the modal scrolls within
.modal {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal;
  -webkit-overflow-scrolling: touch;

  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;

  // When fading in the modal, animate it to slide down
  &.fade .modal-dialog {
    @include translate(0, -25%);
    @include transition-transform(0.3s ease-out);
  }
  &.in .modal-dialog { @include translate(0, 0) }
}
.modal-open .modal {
  overflow-x: hidden;
  overflow-y: auto;
}

// Shell div to position the modal with bottom padding
.modal-dialog {
  position: relative;
  width: auto;
  margin: 10px;

  //Sizing
  &.full {
    width: $modal-full;
    max-width: $modal-full-max-width;
    height: 100vh;
    margin: 0;
    padding: 0;

    .modal-content {
      border-radius: $border-rad-normal;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
  }
}

// Actual modal
.modal-content {
  position: relative;
  background-color: $modal-content-bg;
  border: 1px solid $modal-content-fallback-border-color; //old browsers fallback (ie8 etc)
  border: 1px solid $modal-content-border-color;
  border-radius: $border-radius-large;
  @include box-shadow(0 3px 9px rgba(0,0,0,.5));
  background-clip: padding-box;
  // Remove focus outline from opened modal
  outline: 0;
}

// Modal background
.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: $zindex-modal-background;
  background-color: $modal-backdrop-bg;
  // Fade for backdrop
  &.fade { @include opacity(0); }
  &.in { @include opacity($modal-backdrop-opacity); }
}

// Modal header
// Top section of the modal w/ title and dismiss
.modal-header {
  padding: $modal-title-padding-top-bottom $modal-title-padding;
  border-bottom: 1px solid $modal-header-border-color;
  min-height: ($modal-title-padding + $modal-title-line-height);
}
// Close icon
.modal-header .close {
  margin-top: -2px;
}

// Title text within header
.modal-title {
  margin: 0;
  line-height: $modal-title-line-height;
}

// Modal body
// Where all modal content resides (sibling of .modal-header and .modal-footer)
.modal-body {
  position: relative;
  padding: $modal-inner-padding;
}

// Footer (for actions)
.modal-footer {
  padding: $modal-inner-padding;
  text-align: right; // right align buttons
  border-top: 1px solid $modal-footer-border-color;
  @include clearfix; // clear it in case folks use .pull-* classes on buttons

  // Properly space out buttons
  .btn + .btn {
    margin-left: 5px;
    margin-bottom: 0; // account for input[type="submit"] which gets the bottom margin like all other inputs
  }
  // but override that for button groups
  .btn-group .btn + .btn {
    margin-left: -1px;
  }
  // and override it for block buttons as well
  .btn-block + .btn-block {
    margin-left: 0;
  }
}

// Measure scrollbar width for padding body during modal show/hide
.modal-scrollbar-measure {
  position: absolute;
  top: -9999px;
  width: 50px;
  height: 50px;
  overflow: scroll;
}

// Scale up the modal
@media (min-width: $screen-sm-min) {
  // Automatically set modal's width for larger viewports
  .modal-dialog {
    width: $modal-md;
    margin: 30px auto;
  }
  .modal-content {
    @include box-shadow(0 5px 15px rgba(0,0,0,.5));
  }

  // Modal sizes
  .modal-sm { width: $modal-sm; }
}

@media (min-width: $screen-md-min) {
  .modal-lg { width: $modal-lg; }
}

.sl-row [class*="col"] {
  padding: 0;
}

.sl-title, .sl-title > * {
  font-weight: bold;
  color: $black;
}

.sl-date {
  color: $gray-4;
  font-size: $font-smaller;
}




// ------------
// Modal Overrides
// ------------

/*
Workaround for Mobile Safari scrolling issue on modals; users were unable to
scroll modal after activating on-screen keyboard
ref: https://github.com/twbs/bootstrap/issues/14839
*/
.modal {
	-webkit-overflow-scrolling: auto !important;
}
// CENTER MODALS
.modal {
  text-align: center;
	overflow: visible;
	@include clearfix;
}

@media screen and (min-width: 768px) {
  .modal:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

// Temporary fix for modal positioning off
.body-estimates,
.body-project_payments,
.body-project_documents,
.body-project_photos,
.body-projects,
.body-credit_applications,
.body-candidate_interviews {
  .modal:before {
    content: " ";
    display: table;
    height: auto;
  }
}
.modal-dialog {
  display: inline-block;
  text-align: left;
  vertical-align: middle;
}

// Temporary fix for candidate interview modal height
.candidate-interview-modal {
  .modal-body {
    max-height: 90vh;
    overflow-y: auto;
  }
}

// Actual modal
.modal-content {
	border-radius: $border-rad-heavy;
  box-shadow: $shadow-deepest;
	border: 0;
}

.modal-header .close {
	font-size: $font-jumbo;
  font-weight: $regular;
	margin-top: 0;
}

.modal-body {
	@include clearfix;
	.no-padding {
		padding: 0;
	}
}

.modal-title {
	font-size: $font-base;
}

.modal-footer {
  text-align: left; // Buttons should align next to form if not multiple steps. Explination: http://uxmovement.com/forms/where-to-align-form-buttons-on-different-layouts/
}