@import url('../tools/x-truncate.css');



/* Generic */

.modal-content,
.modal-header,
.modal-body,
.modal-footer {
  border-radius: 0;
}
.modal-footer {
  border-top: none;
}



/* Content */

.modal-content {
  border-color: var(--global-color-primary--dark);
}



/* Header */

.modal-header {
  align-items: center;

  border: none;
  background-color: var(--global-color-primary--x-light);
  padding: 1.35rem 1.75rem; /* (18px 23.5px design * 1.2 design-to-app ratio) */
}
.modal-title {
  color: var(--global-color-primary--xx-dark);
  font-weight: normal;

  @mixin truncate--one-line;
}

/* To darken close button */
.modal-header .close {
  opacity: 1;
}
/* FAQ: The specificity matches Bootstrap */
.modal-header .close:not(:disabled):not(.disabled):focus,
.modal-header .close:not(:disabled):not(.disabled):hover {
  color: var(--global-color-primary--xx-dark);
  opacity: 1;
}

/* To render modal close button icon as a Cortal icon */
/* CAVEAT: Pass `charCode="&#xe912;"` to `<ModalHeader>` */
.modal-header .close span {
  /* TODO: Use `.icon` styles via a `@mixin` instead */
  /* HACK: Copied (and reduced and edited) from `src/styles/trumps/icon...` */
  font-size: 1.5rem; /* bigger to match header text font height (like design) */
  font-family: Cortal-Icons !important;
}

/* Header: MUI Tabs */

.modal-header.has-MuiTabs {
  flex-direction: row;
  position: relative;
  height: 63.5px;
  border-bottom: 1px solid #afafaf;
  padding: 5px;
}
.modal-header.has-MuiTabs .close {
  transform: translate(-25%, 25%);
}
.modal-header.has-MuiTabs .MuiTabs-indicator {
  background-color: white;
}



/* Body */

.modal-body {
  overflow: auto;
  max-height: 60vh;
}