.modal-overlay {
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: $primary-dark;
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  opacity: 0;
}

.modal-overlay.active {
  z-index: 100;
  opacity: 0.5;
  display: block;
  @include fastTransition-all;
}

.modal:not(.uib-modal) {
  width: auto;
  min-width: 450px;
  max-width: 960px;
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  max-width: 850px;
  min-width: 450px;
  padding: 0.8em 1.5em;
  border: thin $primary-dark solid;
  background-color: $background-01;
  z-index: 101;
  position: fixed;
  overflow: hidden;
  @include fastTransition-all;
  @include mediaQuery(medium) {
    padding: 2.5em;
  }
}

.modal.active {
  @include fastTransition-all;
  display: block;
}

.modal .page-header {
  padding-bottom: 0.7em;
}

.screen-reader-offscreen {
  position: absolute;
  left: -999px;
  width: 1px;
  height: 1px;
  top: auto;
}
.modal__content {
  border-bottom: 1px solid $border-color-02;
  padding-bottom: 1em;
  margin-bottom: 2em;
}
.modal__link {
  display: block;
  margin: 0.8em 0 1em;
  @include mediaQuery(medium) {
    display: inline-block;
    margin: 0.6em 0;
  }
}
// TODO: Use the form__actions pattern / selector
.modal__button-wrapper {
  float: right;
  button {
    margin-bottom: 0.8em;
    margin-right: 0.8em;
    display: inline-block;
    @include mediaQuery(medium) {
      margin-left: 0.8em;
      margin-right: 0;
    }
  }
}

/**
  * Markup  for bootstrap modal
  <div class="uib-modal__content">
    <div class="modal-header">
      <h2 class="modal-title" id="modal_label">
        Title here
      </h2>
      <button
        type="button"
        class="btn  btn--close"
        ng-click="$dismiss()"
        aria-label="close">
        <icon file="icon-close.svg" aria-hidden="true"></icon>
      </button>
    </div>
    <div class="modal-body">
      Body content
    </div>
    <div class="modal-footer">
      <button
        type="button"
        class="btn btn-secondary"
        ng-click="$dismiss()">
        Cancel
      </button>
      <button
        type="submit"
        class="btn btn-primary"
        ng-click="function()">
        Save
      </button>
    </div>
  </div>
*/

.uib-modal.fade.in {
  opacity: 1;
}

.uib-modal.in .modal-dialog {
  transform: translate(0, 10vh);
  margin-top: 50px;
  .icon__close {
    margin: 0;
    padding: 0;
  }
  .modal-content {
    border-radius: 0;
    border-color: $primary-dark;
  }
}

.modal-backdrop.in {
  opacity: 0.5;
}

.uib-modal__content {
  padding: 1em;
  .modal-header {
    display: block;
  }
  .btn--close {
    padding: 0;
    svg {
      height: 1.6em;
    }
  }
}

.uib-modal {
  .btn--close {
    position: absolute;
    right: 0;
    top: 0;
    svg {
      height: 2em;
    }
  }
}