$modal-takover-dialog-max-width: 1200px;
$modal-takover-body-container-max-width: 840px;

.modal-header {
  align-items: center;
  @include states;
  border-bottom: none;
  padding-bottom: $luci-space-inset-md;
  padding-top: $luci-space-inset-md;

  .close {
    padding: 12px;
    margin: -14px;
  }

  /* I need to add margin to the bottom of the headers that are is- (states) */

  &[class*=" is-"] {
    margin-bottom: $luci-space-inset-lg;
  }

  &.is-warning {
    g#icon-status-warning #glyph {
      fill: $luci-feedback-color-warning-background;
    }
  }

  &.is-info {
    g#icon-mc-status-info {
      path#base-layer {
        fill: $luci-icon-color-default;
      }

      #glyph {
        fill: $luci-background-color-lightest-blue;
      }
    }
  }

  &.is-error,
  &.is-critical {
    g#icon-mc-status-critical #glyph {
      fill: $luci-feedback-color-error-background;
    }
  }

  &.is-success {
    g#icon-mc-status-OKcirclecheck {
      path#base-layer {
        fill: $luci-feedback-color-success-primary;
      }

      #glyph {
        fill: $luci-feedback-color-success-background;
      }
    }
  }
}

.modal-title {
  font-size: $luci-font-size-h4-md;
  font-weight: $luci-font-weight-semi-bold;
  display: flex;
  align-items: center;
  flex-grow: 1;
  flex-wrap: wrap;
}

.modal-content {
  border: 0;
  box-shadow: $luci-box-shadow-default;
}

.modal-body {
  padding-top: 0;
  padding-bottom: 0;
}

/* Takeover Modal */

body.nwf-takeover-modal {
  &.modal-open {
    overflow: visible;
    padding-right: 0px !important;
    /* the id of nwf-mainbody is applied in the mainbody.component.ts, and scopes this to that main tag exclusively */
    main#nwf-mainbody {
      /* NgB Modal adds the aria-hidden true attribute to all content that is hidden BEHIND the ngbModal. In our takeover case, we want these display: none, because 
      takeover modal COVERS or removes all the content not overlays it!  */
      [aria-hidden="true"]:not(ngb-modal-backdrop):not(span) {
        display: none;
      }
      /* First child IS the actual container for the body content we wish to hide - ngb does not add the aria-hidden true to this, and we have to hide it */
      /* I display none on ui-view and ng-upgrade (for hybrid) it in case of takeover modal, first child of <main> which is the content of the page, so the takeover modal appears */
      > ui-view, [ui-view], ui-view-ng-upgrade {
        display: none;
      }
    }
  }

  /* This is the modal itself */
  .nwf-takeover-modal.modal {
    position: static;
    .modal-dialog {
      max-width: $modal-takover-dialog-max-width;
      margin-bottom: 50px;
    }

    &.is-full {
      .modal-dialog {
        max-width: 100%;
      }
    }

    .modal-content {
      padding: 40px;

      > * {
        display: block;
        margin: 0 auto;
        max-width: $modal-takover-body-container-max-width;
        width: 100%;
      }
    }
    .modal-title {
      font-size: $luci-font-size-h3-lg;
    }
    .modal-footer {
      justify-content: flex-start;
    }
  }
}

.modal-backdrop.nwf-takeover-modal {
  opacity: 0;
}

.modal.nwf-confirmation-modal-dialog {
  z-index: 1600 !important;
}

.close {
  opacity: 1 !important;
  &:hover {
    color: $luci-icon-color-hover;
  }
}

/* Move later to a page-alert and alert theme sheet */

@each $status, $colorMap in $alert-color-theme {
  $border: map-get($colorMap, border);
  .alert-#{$status} {
    border-color: $border;
  }
}

.alert.is-page-level {
  color: black;
  position: fixed;
  left: 0;
  right: 0;
  top: 53px;
  z-index: $zindex-modal;
}

.leftnav-is-open {
  .alert.is-page-level {
    left: 200px; //this is hard coded to the width of the leftnav, not great, but I think we are standardized.
  }
}