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

// Container that the modal scrolls within
.modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: $zindex-modal;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  // Prevent Chrome on Windows from adding a focus outline. For details, see
  // https://github.com/twbs/bootstrap/pull/10951.
  outline: 0;
  // We deliberately don't use `-webkit-overflow-scrolling: touch;` due to a
  // gnarly iOS Safari bug: https://bugs.webkit.org/show_bug.cgi?id=158342
  // See also https://github.com/twbs/bootstrap/issues/17695
  .modal-dialog {
    @media (min-width: 768px) {
      &.modal-left {
        left: 0;
      }
      &.modal-right {
        right: 0;
      }
      &.modal-bottom {
        top: auto;
        bottom: 0;
        min-width: 100%;
        min-height: 0;
      }
      &.modal-top {
        top: 0;
        bottom: auto;
        min-width: 100%;
        min-height: 0;
      }
    }
  }

  .close {
    border: none;
    outline: none;
    &:active, &:focus {
      border: none;
      outline: none;
    }
  }

  @media (min-width: 768px) {
    .modal-full-height {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      width: 100%;
      height: auto;
      min-height: 100%;
      margin: 0;
      .modal-content {
        width: 100%;
      }
    }
  }
}