.modalOuterContainer {
  --modal-max-width: calc(
    100vw - 48px
  ); // We want 24px of space on the left and right of the modal
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9000; // Needs to be higher than other elements on the page, but not higher than dev-tools which is 9999
}

.modalContainer {
  background-color: var(--white);
  border: 1px solid var(--medium-gray);
  position: relative;
  max-width: var(--modal-max-width);
  max-height: 90%;
  border-radius: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  animation-duration: 0.25s;
  &.sm {
    width: 400px;
  }
  &.md {
    width: 600px;
  }
  &.lg {
    width: 800px;
  }
  &.xl {
    width: 1200px;
  }
  &.fullWidth {
    width: var(--modal-max-width);
  }
}

.modalBody {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  overflow-y: auto;
  position: relative;
}

.modalContent {
  &.noPadding {
    margin: 0 -24px; // offset the padding on the modalBody
  }
}

.modalHeader {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: var(--white);
  z-index: 10;
  &:before {
    content: '';
    position: absolute;
    top: -24px;
    left: 0;
    right: 0;
    height: 24px;
    background-color: var(--white);
  }
}

.modalHeaderContent {
  font-size: var(--font-size-22);
  font-weight: var(--font-weight-semibold);
}

.modalFooterContent {
  padding: 16px 24px;
  border-top: 1px solid var(--medium-gray);
  background-color: var(--lighter-gray);
  border-radius: 0 0 16px 16px;
}

.confirmationFooterContent {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}