// -----------------------------------------------------------------------------
// Modals & Popups
// -----------------------------------------------------------------------------

// .popup needs to be depricated in favor of modal
.popup {
  position: fixed;
  z-index: 2000;
  top: 10%;
  right: 10%;
  left: 10%;
  margin: auto;
  max-width: 900px;
  padding: $grid-gutter-width/2 $grid-gutter-width $grid-gutter-width;
  @include shadow-level(4);
}

.modal-dialog {
  @media (max-width: $screen-xs-max) {
    margin: 0px;
  }
}

.modal-content {
  border: none;
  @include shadow-level(4);
}

.modal-header,
.modal-footer {
  background-color: $gray-lighter;
}
.modal-header,
.modal-footer,
.modal-body {
  padding: 32px 16px;
  @media(min-width:$screen-sm) {
    padding: 32px 64px;
  }
}
.modal-header {
  @media(max-width:$screen-xs-max) {
    padding-top: 48px;
  }
}
.modal-body {
  @media(min-width:$screen-sm) {
    padding-top: 64px;
    padding-bottom: 64px;
  }
}

.modal-sm {
  .modal-header,
  .modal-footer,
  .modal-body {
    @media(min-width:$screen-sm) {
      padding: 32px 32px;
    }
  }
}

.modal-footer {
  text-align: left;
}

.modal .close {
  position: absolute;
  top: 0px;
  right: 0px;
  opacity: .5;
  &:hover {
      opacity: 1;
  }
}

// need to make new class instead of using .modal .close because bootstrap defaults are getting in the way
.modal-close {
  position: absolute;
  top: 0;
  right: 0;
  width: 32px;
  height: 32px;
  padding: 0;
  @media (min-width: $screen-sm-min) {
    top: -16px;
    right: -16px;
  }
}