.pf-c-modal-box {
  --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--xl);
  --pf-c-modal-box--ZIndex: var(--pf-global--ZIndex--xl);
  --pf-c-modal-box--Width: 100%;
  --pf-c-modal-box--MaxWidth: calc(100% - var(--pf-global--spacer--xl)); // Ensure modal has gutters at full width
  --pf-c-modal-box--m-sm--sm--MaxWidth: #{pf-size-prem(560px)}; // MaxWidth is based on optimal line length for reading
  --pf-c-modal-box--m-md--Width: #{pf-size-prem(840px)};
  --pf-c-modal-box--m-lg--lg--MaxWidth: #{pf-size-prem(1120px)};
  --pf-c-modal-box--MaxHeight: calc(100% - var(--pf-global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll
  --pf-c-modal-box--m-align-top--spacer: var(--pf-global--spacer--sm);
  --pf-c-modal-box--m-align-top--xl--spacer: var(--pf-global--spacer--xl);
  --pf-c-modal-box--m-align-top--MarginTop: var(--pf-c-modal-box--m-align-top--spacer); // Rename to --Top at breaking change
  --pf-c-modal-box--m-align-top--MaxHeight: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer), var(--pf-global--spacer--2xl)) - var(--pf-c-modal-box--m-align-top--spacer));
  --pf-c-modal-box--m-align-top--MaxWidth: calc(100% - min(var(--pf-c-modal-box--m-align-top--spacer) * 2, var(--pf-global--spacer--xl)));

  // States
  --pf-c-modal-box--m-danger__title-icon--Color: var(--pf-global--danger-color--100);
  --pf-c-modal-box--m-warning__title-icon--Color: var(--pf-global--warning-color--100);
  --pf-c-modal-box--m-success__title-icon--Color: var(--pf-global--success-color--100);
  --pf-c-modal-box--m-info__title-icon--Color: var(--pf-global--info-color--100);
  --pf-c-modal-box--m-default__title-icon--Color: var(--pf-global--default-color--200);

  @media (min-width: $pf-global--breakpoint--xl) {
    --pf-c-modal-box--m-align-top--spacer: var(--pf-c-modal-box--m-align-top--xl--spacer);
  }

  // Header
  --pf-c-modal-box__header--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-modal-box__header--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-modal-box__header--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-modal-box__header--last-child--PaddingBottom: var(--pf-global--spacer--lg);

  // Title
  --pf-c-modal-box__title--LineHeight: var(--pf-global--LineHeight--sm);
  --pf-c-modal-box__title--FontFamily: var(--pf-global--FontFamily--heading--sans-serif);
  --pf-c-modal-box__title--FontSize: var(--pf-global--FontSize--2xl);

  // Title icon
  --pf-c-modal-box__title-icon--MarginRight: var(--pf-global--spacer--sm);
  --pf-c-modal-box__title-icon--Color: var(--pf-global--Color--100);

  // Description
  --pf-c-modal-box__description--PaddingTop: var(--pf-global--spacer--xs);

  // Body
  --pf-c-modal-box__body--MinHeight: calc(var(--pf-global--FontSize--md) * var(--pf-global--LineHeight--md)); // Allow for at least 1 line of content in the body
  --pf-c-modal-box__body--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-modal-box__body--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-modal-box__body--PaddingLeft: var(--pf-global--spacer--lg);
  --pf-c-modal-box__body--last-child--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-modal-box__header--body--PaddingTop: var(--pf-global--spacer--md);

  // Close
  --pf-c-modal-box--c-button--Top: calc(var(--pf-global--spacer--lg));
  --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
  --pf-c-modal-box--c-button--sibling--MarginRight: calc(var(--pf-global--spacer--xl) + var(--pf-global--spacer--sm));

  // Footer
  --pf-c-modal-box__footer--PaddingTop: var(--pf-global--spacer--lg);
  --pf-c-modal-box__footer--PaddingRight: var(--pf-global--spacer--lg);
  --pf-c-modal-box__footer--PaddingBottom: var(--pf-global--spacer--lg);
  --pf-c-modal-box__footer--PaddingLeft: var(--pf-global--spacer--lg);

  // Footer buttons
  --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-global--spacer--md); // Button spacer is used to manipulate margin-left and/or margin-right values at various breakpoints, with a single value.
  --pf-c-modal-box__footer--c-button--sm--MarginRight: calc(var(--pf-c-modal-box__footer--c-button--MarginRight) / 2);

  position: relative;
  z-index: var(--pf-c-modal-box--ZIndex);
  display: flex;
  flex-direction: column;
  width: var(--pf-c-modal-box--Width);
  max-width: var(--pf-c-modal-box--MaxWidth);
  max-height: var(--pf-c-modal-box--MaxHeight);
  background-color: var(--pf-c-modal-box--BackgroundColor);
  box-shadow: var(--pf-c-modal-box--BoxShadow);

  &.pf-m-sm {
    --pf-c-modal-box--Width: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
  }

  &.pf-m-md {
    --pf-c-modal-box--Width: var(--pf-c-modal-box--m-md--Width);
  }

  &.pf-m-lg {
    --pf-c-modal-box--Width: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
  }

  &.pf-m-align-top {
    top: var(--pf-c-modal-box--m-align-top--MarginTop);
    align-self: flex-start;
    max-width: var(--pf-c-modal-box--m-align-top--MaxWidth);
    max-height: var(--pf-c-modal-box--m-align-top--MaxHeight);
  }

  &.pf-m-danger {
    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-danger__title-icon--Color);
  }

  &.pf-m-warning {
    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-warning__title-icon--Color);
  }

  &.pf-m-success {
    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-success__title-icon--Color);
  }

  &.pf-m-default {
    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-default__title-icon--Color);
  }

  &.pf-m-info {
    --pf-c-modal-box__title-icon--Color: var(--pf-c-modal-box--m-info__title-icon--Color);
  }

  // Close button
  > .pf-c-button {
    position: absolute;
    top: var(--pf-c-modal-box--c-button--Top);
    right: var(--pf-c-modal-box--c-button--Right);

    + * {
      margin-right: var(--pf-c-modal-box--c-button--sibling--MarginRight); // Create room for the close button
    }
  }
}

.pf-c-modal-box__header {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding-top: var(--pf-c-modal-box__header--PaddingTop);
  padding-right: var(--pf-c-modal-box__header--PaddingRight);
  padding-left: var(--pf-c-modal-box__header--PaddingLeft);

  &.pf-m-help {
    display: flex;
    flex-direction: row;
  }

  &:last-child {
    padding-bottom: var(--pf-c-modal-box__header--last-child--PaddingBottom);
  }

  + .pf-c-modal-box__body {
    --pf-c-modal-box__body--PaddingTop: var(--pf-c-modal-box__header--body--PaddingTop);
  }
}

.pf-c-modal-box__header-main {
  flex-grow: 1;
  min-width: 0;
}

.pf-c-modal-box__title,
.pf-c-modal-box__title-text {
  @include pf-text-overflow;
}

.pf-c-modal-box__title {
  flex: 0 0 auto;
  font-family: var(--pf-c-modal-box__title--FontFamily);
  font-size: var(--pf-c-modal-box__title--FontSize);
  line-height: var(--pf-c-modal-box__title--LineHeight);

  &.pf-m-icon {
    display: flex;
  }
}

.pf-c-modal-box__title-icon {
  margin-right: var(--pf-c-modal-box__title-icon--MarginRight);
  color: var(--pf-c-modal-box__title-icon--Color);
}

.pf-c-modal-box__description {
  padding-top: var(--pf-c-modal-box__description--PaddingTop);
}

// Body
.pf-c-modal-box__body {
  flex: 1 1 auto;
  min-height: var(--pf-c-modal-box__body--MinHeight);
  padding-top: var(--pf-c-modal-box__body--PaddingTop);
  padding-right: var(--pf-c-modal-box__body--PaddingRight);
  padding-left: var(--pf-c-modal-box__body--PaddingLeft);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;

  &:last-child {
    padding-bottom: var(--pf-c-modal-box__body--last-child--PaddingBottom);
  }
}

// Footer
.pf-c-modal-box__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  padding-top: var(--pf-c-modal-box__footer--PaddingTop);
  padding-right: var(--pf-c-modal-box__footer--PaddingRight);
  padding-bottom: var(--pf-c-modal-box__footer--PaddingBottom);
  padding-left: var(--pf-c-modal-box__footer--PaddingLeft);

  // Base margin left and right equal for buttons when wrapped
  > .pf-c-button:not(:last-child) {
    margin-right: var(--pf-c-modal-box__footer--c-button--MarginRight);

    @media screen and (min-width: $pf-global--breakpoint--sm) {
      --pf-c-modal-box__footer--c-button--MarginRight: var(--pf-c-modal-box__footer--c-button--sm--MarginRight);
    }
  }
}