.pf-c-modal-box {
  --pf-c-modal-box--BackgroundColor: var(--pf-global--BackgroundColor--100);
  --pf-c-modal-box--BorderColor: transparent;
  --pf-c-modal-box--PaddingTop: var(--pf-global--spacer--xl);
  --pf-c-modal-box--PaddingRight: var(--pf-global--spacer--xl);
  --pf-c-modal-box--PaddingBottom: var(--pf-global--spacer--xl);
  --pf-c-modal-box--PaddingLeft: var(--pf-global--spacer--xl);
  --pf-c-modal-box--BorderSize: var(--pf-global--BorderWidth--sm);
  --pf-c-modal-box--BoxShadow: var(--pf-global--BoxShadow--lg);
  --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-lg--lg--MaxWidth: #{pf-size-prem(1120px)};
  --pf-c-modal-box--MaxHeight: calc(100vh - var(--pf-global--spacer--2xl)); // MaxHeight ensures that the modal will not go off the screen and instead the body will scroll

  // Description
  --pf-c-modal-box__c-title--description--MarginTop: var(--pf-global--spacer--sm);

  // 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__description--body--MarginTop: var(--pf-global--spacer--lg);
  --pf-c-modal-box--c-title--body--MarginTop: var(--pf-global--spacer--lg);

  // Close
  --pf-c-modal-box--c-button--Top: calc(var(--pf-c-modal-box--PaddingTop) - var(--pf-global--spacer--form-element) + #{pf-size-prem(1px)}); // align top of button with top of text
  --pf-c-modal-box--c-button--Right: var(--pf-global--spacer--md);
  --pf-c-modal-box--c-button--sibling--MarginRight: var(--pf-global--spacer--xl);

  // Footer
  --pf-c-modal-box__footer--MarginTop: var(--pf-global--spacer--xl);

  // 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);
  --pf-c-modal-box__footer__c-button--first-of-type--MarginLeft: auto;

  @include pf-t-light; // This component always needs to be light

  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);
  padding: var(--pf-c-modal-box--PaddingTop) var(--pf-c-modal-box--PaddingRight) var(--pf-c-modal-box--PaddingBottom) var(--pf-c-modal-box--PaddingLeft);
  background-color: var(--pf-c-modal-box--BackgroundColor);
  border: var(--pf-c-modal-box--BorderSize) solid var(--pf-c-modal-box--BorderColor);
  box-shadow: var(--pf-c-modal-box--BoxShadow);

  // At breakpoint--sm, set max width to variable value and ignore margins
  &.pf-m-sm {
    @media screen and (min-width: $pf-global--breakpoint--sm) {
      --pf-c-modal-box--MaxWidth: var(--pf-c-modal-box--m-sm--sm--MaxWidth);
    }
  }

  // At breakpoint--xl, set max width to variable value and ignore margins
  &.pf-m-lg {
    @media screen and (min-width: $pf-global--breakpoint--xl) {
      --pf-c-modal-box--MaxWidth: var(--pf-c-modal-box--m-lg--lg--MaxWidth);
    }
  }

  // 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-title {
    @include pf-text-overflow;

    flex: 0 0 auto;

    + .pf-c-modal-box__description {
      margin-top: var(--pf-c-modal-box__c-title--description--MarginTop);
    }

    + .pf-c-modal-box__body {
      margin-top: var(--pf-c-modal-box--c-title--body--MarginTop);
    }
  }
}

.pf-c-modal-box__description {
  + .pf-c-modal-box__body {
    margin-top: var(--pf-c-modal-box__description--body--MarginTop);
  }
}

// Body
.pf-c-modal-box__body {
  flex: 1 1 auto;
  min-height: var(--pf-c-modal-box--body--MinHeight);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  word-break: break-word;
  -webkit-overflow-scrolling: touch;
}

// Footer
.pf-c-modal-box__footer {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  margin-top: var(--pf-c-modal-box__footer--MarginTop);

  // Using margin-left instead of justify: flex-end; as there may be other elements in the footer that align left
  // Limit scope to direct child buttons, allows use of layouts if needed
  > .pf-c-button:first-of-type {
    margin-left: var(--pf-c-modal-box__footer__c-button--first-of-type--MarginLeft);
  }

  // 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);
    }
  }

  &.pf-m-align-left {
    --pf-c-modal-box__footer__c-button--first-of-type--MarginLeft: 0;
  }
}

