.modal-header {
  background-color: $modal-body-bg;

  .page-title,
  .modal-title {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;

    .modal-title-with-label span {
      vertical-align: middle;
      display: inline-block;
    }
  }

  .modal-title {
    line-height: $gl-line-height-24;

    // leave enough space for the close icon
    &.mw-100,
    &.w-100 {
      margin-right: -$modal-header-padding-x;
      padding-right: $modal-header-padding-x;
    }
  }

  .close {
    font-weight: $gl-font-weight-normal;
    line-height: $gl-line-height;
    color: $gray-900;
    opacity: 1;
  }
}

.modal-body {
  background-color: $modal-body-bg;
  line-height: $line-height-base;
  position: relative;
  min-height: $modal-body-height;
  padding: #{2 * $grid-size};
  text-align: left;
  white-space: normal;

  .form-actions {
    margin: #{2 * $grid-size} #{-2 * $grid-size} #{-2 * $grid-size};
  }

  .text-danger:not(.dropdown-item) {
    font-weight: $gl-font-weight-bold;
  }
}

.modal-footer {
  display: flex;
  flex-direction: row;

  .btn {
    margin: 0;
  }

  .btn + .btn,
  .btn + .btn-group,
  .btn-group + .btn,
  .btn-group + .btn-group {
    margin-left: $grid-size;
  }

  .btn-group .btn + .btn {
    margin-left: -1px;
  }

  @include media-breakpoint-down(xs) {
    flex-direction: column;

    .btn-group .btn + .btn {
      margin-left: -1px;
      margin-top: 0;
    }
  }
}

body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

.modal {
  background-color: $black-transparent;

  .modal-content {
    border-radius: $modal-border-radius;

    > :first-child {
      border-top-left-radius: $modal-border-radius;
      border-top-right-radius: $modal-border-radius;
    }

    > :last-child {
      border-bottom-left-radius: $modal-border-radius;
      border-bottom-right-radius: $modal-border-radius;
    }
  }
}