.modal-header {
  position: relative;

  .close {
    opacity: 1;
    position: absolute;
    margin: 0;
    padding: 0;
    top: 0;
    right: 0;
    width: $spacing;
    height: $spacing;
    color: $modal-footer-bg;
    @include hover-focus {
      color: $link-hover-color;
    }
    .icon {
      margin: 0;
    }
  }
}

.modal-lg, .modal-md {
  .modal-header {
    padding: $spacing $modal-inner-padding $spacing-md $modal-inner-padding;
  }
}

.modal-sm {
  .modal-header {
    .modal-title {
      text-align: center;
    }
  }
}

.modal-body {
  padding-top: 0;
  word-wrap: break-word;

  section {
    margin: 0 $modal-inner-padding*-1 $spacing $modal-inner-padding*-1;
    width: auto;
    padding: $spacing-sm $modal-inner-padding;
    width: auto;

    p, a, h1, h2, h3, h4, h5 {
      &:last-child {
        margin-bottom: 0;
      }
    }

    &.gray {
      background-color: $gray-lightest;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }
}

.modal-footer {
  padding: $spacing-md $modal-inner-padding;
  color: $modal-footer-color;
  text-align: right;
  background-color: $modal-footer-bg;
  border-radius: 0 0 $border-radius $border-radius;
}

// Use outdated modal sizes
@include media-breakpoint-up(sm) {
  .modal-dialog {
    width: $modal-md;
    max-width: unset;
    margin: 30px auto;
  }
  .modal-content {
    @include box-shadow(0 5px 15px rgba(0,0,0,.5));
  }

  .modal-sm { width: $modal-sm; }
}

@include media-breakpoint-up(md) {
  .modal-lg { width: $modal-lg; }
}