// // Modal // —————————————-

// Kill the scroll on the body .modal-open {

overflow: hidden;

}

.modal {

display: none;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: $z-index-modal;
-webkit-overflow-scrolling: touch;

&:empty {
  display: none;
}

outline: 0;

// When fading in the modal, animate it to slide down
&.fade .modal-dialog {
  @include vendor-prefix('transform', 'translate(0, -25%)');
  @include vendor-prefix('transition', 'transform 0.3s ease-out');
}

&.in .modal-dialog {
  @include vendor-prefix('transform', 'translate(0, 0)');
}

}

.modal-open .modal {

overflow-x: hidden;
overflow-y: auto;

}

.modal-dialog {

position: relative;
width: auto;
margin: $modal-margin;

}

.modal-content {

position: relative;
background-color: $modal-content-bgr;
border-radius: $modal-border-radius;
padding: $modal-padding;
@include box-shadow(0 1px 3px rgba(0, 0, 0, .75));
background-clip: padding-box;
outline: 0;

}

.modal-content .close {

margin-top: 10px; // + 2px font gap = 1bu
margin-right: 10px; // + 2px font gap = 1bu

}

.modal-backdrop {

position: absolute;
top: 0;
right: 0;
left: 0;
background-color: $modal-backdrop-bgr;
&.fade { opacity: 0; }
&.in { opacity: $modal-backdrop-opacity; }

}

.modal-header {

padding: $modal-header-padding;
border-bottom: 1px solid $modal-header-border-color;

}

.modal-title {

text-align: center;

}

.modal-body {

position: relative;
padding: $modal-body-padding;

}

.modal-footer {

text-align: right;
padding: $modal-footer-padding;
border-top: 1px solid $modal-footer-border-color;

}

// 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: #{$grid-medium-min}px) {

// Automatically set modal's width for larger viewports
.modal-dialog {
  width: $modal-regular-width;
  margin: $modal-regular-margin;
}

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

}

@media (min-width: #{$grid-large-min}px) {

.modal-large { width: $modal-large-width; }

}