/**
 * 1. Fix IE overflow issue (min-height) by adding a separate wrapper for the
 *    flex display. https://github.com/philipwalton/flexbugs#flexbug-3
 * 2. IE has trouble with min-widths on flex elements. Use the pixel value
 *    from our forms since that's usually the smallest we want them.
 */

.euiModal {
  border: $euiBorderThin;
  // This mixin overwrites some of the border above
  @include euiBottomShadowLarge($adjustBorders: true); // sass-lint:disable-line mixins-before-declarations
  display: flex; /* 1 */

  position: relative;
  background-color: $euiColorEmptyShade;
  border-radius: $euiBorderRadius;
  z-index: $euiZModal;
  min-width: $euiFormMaxWidth;
  animation: euiModal $euiAnimSpeedSlow $euiAnimSlightBounce;

  .euiModal__flex { /* 1 */
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    max-height: 75vh; // We overflow the modal body based off this
    overflow: hidden; // Ensure long, non-breaking text doesn't expand beyond the modal bounds
  }
}

.euiModal--maxWidth-default {
  max-width: map-get($euiBreakpoints, 'm');
}

.euiModal--confirmation {
  min-width: $euiFormMaxWidth;
}

.euiModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $euiSizeL $euiSizeXXL $euiSize $euiSizeL;
  flex-grow: 0;
  flex-shrink: 0;
}

.euiModalHeader__title {
  @include euiTitle('m');
}

.euiModalBody {
  flex-grow: 1;
  overflow: hidden;
  // The below fixes scroll on Chrome and Safari
  display: flex;
  flex-direction: column;

  .euiModalBody__overflow {
    @include euiYScrollWithShadows;
    padding: $euiSizeS $euiSizeL;
  }
}

.euiModalFooter {
  display: flex;
  justify-content: flex-end;
  padding: $euiSize $euiSizeL $euiSizeL;
  flex-grow: 0;
  flex-shrink: 0; // ensure the height of the footer is based off its contents and doesn't squish

  > * + * {
    margin-left: $euiSize;
  }
}

// If a body doesn't exist, remove some extra padding from footer
.euiModalHeader + .euiModalFooter {
  padding-top: $euiSizeS;
}

// If a footer doesn't exist (body is the last element) add padding to the bottom
.euiModalBody:last-of-type .euiModalBody__overflow {
  padding-bottom: $euiSizeL;
}


// The actual size of the X button in pixels is a bit fuzzy because of all the
// button padding so there is some pixel pushing here.
.euiModal__closeIcon {
  background-color: transparentize($euiColorEmptyShade, .1);
  position: absolute;
  right: $euiSizeXS;
  top: $euiSizeXS;
  z-index: 3;
}

@keyframes euiModal {
  0% {
    opacity: 0;
    transform: translateY($euiSizeXL);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

// On mobile we fix modals as a takeover.
@include euiBreakpoint('xs', 's') {
  .euiModal {
    // sass-lint:disable-block no-important
    position: fixed;
    width: 100vw !important;
    max-width: none !important;
    min-width: 0 !important;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    border-radius: 0;
    border: none;

    &.euiModal--confirmation {
      @include euiBottomShadowLarge($euiShadowColorLarge, $reverse: true);
      top: auto;
    }

    .euiModal__flex { /* 1 */
      max-height: 100vh;
    }
  }

  .euiModalHeader {
    width: 100vw;
  }

  .euiModalFooter {
    background: $euiColorLightestShade;
    padding: $euiSizeM $euiSizeL !important; // sass-lint:disable-line no-important
    width: 100vw;
    justify-content: stretch;

    > * {
      flex: 1;

      + * {
        margin-left: 0;
      }
    }
  }

  .euiModalBody {
    width: 100vw;

    .euiModalBody__overflow {
      padding-bottom: $euiSizeL;
    }
  }
}