.co-delete-modal {
  display: flex;
}

.co-delete-modal__icon {
  flex: 0 0 auto;
  font-size: 30px;
  margin-right: 15px;
}

.co-overlay {
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  position: fixed;
  right: 0;
  top: 0;
  z-index: $zindex-modal;
}

.modal-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  padding: 0;
  @include scroll-shadows-vertical;
  -webkit-overflow-scrolling: touch;
}

.modal-body-content {
  height: 100%;
}

.modal-body-inner-shadow-covers {
  min-height: 100%;
  padding: ($grid-gutter-width / 2) $modal-title-padding-horizontal;
  @include scroll-shadows-vertical-covers;
  width: 100%;

  // so that input, textarea, button, and input-group-addon don't mask the inner scroll shadows
  input, textarea {
    &.pf-c-form-control {
      background-color: transparent;
      &[disabled],
      &[readonly] {
        background-color: rgba(128, 128, 128, 0.15);
      }
    }
  }

  .input-group-addon {
    background-color: rgba(227, 227, 227, 0.5);
  }
}

.modal-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  @media(min-width: $screen-sm-min) {
    // Desktop only responsive max-height allows modal to adjust to content height and enable scroll shadows if needed.
    max-height: calc(100vh - 60px);
    // Dropdown workaround:  use when modal content can expand (taints, tolerations)
    &--accommodate-dropdown .modal-body-inner-shadow-covers {
      padding-bottom: 100px;
    }
    // Dropdown workaround: use when modal content is short and cannot expand
    &--no-inner-scroll .modal-body {
      overflow-y: visible ;
    }
  }
}

// setting a height on modal-dialog enables flex child height to shrink and become scrollable
.modal-dialog {
  margin-bottom: 0;
  outline: 0;

  @media(max-width: $screen-xs-max) and (orientation: portrait) {
    height: calc(100% - 20px); // subtract height margin-top 10px + margin-bottom 10px
  }
  @media(max-width: $screen-xs-max) and (orientation: landscape) {
    height: calc(100% - 60px); // At desktop, subtract margin-top 30px + margin-bottom 30px OR in the case of mobile landscape orientation, subtract the height of ios url control bar, since its height is not taken into account when the viewport height is calculated on initial page load. This causes the modal to extend below the viewport and hide modal-footer buttons.
  }
}

.modal-footer {
  margin-top: 0;
}

.toleration-modal__field, .taint-modal__field  {
  padding-right: 0;
}

.toleration-modal__field, .taint-modal__input {
  margin-bottom: 5px;
  @media(max-width: $screen-sm-max) {
    margin-bottom: 10px;
  }
}

.toleration-modal__heading, .taint-modal__heading {
  margin-bottom: 5px;
}

.toleration-modal__row, .taint-modal__row {
  margin-bottom: 15px;
  @media(max-width: $screen-sm-max) {
    margin-bottom: 24px;
  }
}
