/*!
 * SPDX-License-Identifier: Apache-2.0
 *
 * The OpenSearch Contributors require contributions made to
 * this file be licensed under the Apache-2.0 license or a
 * compatible open source license.
 *
 * Modifications Copyright OpenSearch Contributors. See
 * GitHub history for details.
 */

/**
 * 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.
 */

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

  position: relative;
  background-color: $ouiColorEmptyShade;
  border-radius: $ouiBorderRadius;
  z-index: $ouiZModal;
  min-width: $ouiFormMaxWidth;
  animation: ouiModal $ouiAnimSpeedSlow $ouiAnimSlightBounce;
  max-width: calc(100vw - #{$ouiSize});

  // Remove the outline from the focusable container
  &:focus {
    outline: none;
  }

  .ouiModal__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
  }
}

.ouiModal--maxWidth-default {
  // Sass and CSS's versions of `min` collide here, so we use all uppercase to ensure the CSS version is used
  // https://css-tricks.com/when-sass-and-new-css-features-collide/#the-solution
  // sass-lint:disable-block function-name-format
  max-width: MIN(#{map-get($ouiBreakpoints, 'm')}, calc(100vw - #{$ouiSize}));
}

.ouiModal--confirmation {
  min-width: $ouiFormMaxWidth;
}

.ouiModalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: $ouiSizeL $ouiSizeXXL $ouiSize $ouiSizeL;
  flex-grow: 0;
  flex-shrink: 0;
}

.ouiModalHeader__title {
  @include ouiTitle('m');
}

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

  .ouiModalBody__overflow {
    @include ouiYScrollWithShadows;
    padding: $ouiSizeS $ouiSizeL;
  }
}

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

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

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

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


// 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.
.ouiModal__closeIcon {
  background-color: transparentize($ouiColorEmptyShade, .1);
  position: absolute;
  right: $ouiSizeXS;
  top: $ouiSizeXS;
  z-index: 3;
}

@keyframes ouiModal {
  0% {
    opacity: 0;
    transform: translateY($ouiSizeXL);
  }

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

// On mobile we fix modals as a takeover.
@include ouiBreakpoint('xs', 's') {
  .ouiModal {
    // 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;

    &.ouiModal--confirmation {
      @include ouiBottomShadowLarge($ouiShadowColorLarge, $reverse: true);
      top: auto;
    }

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

  .ouiModalHeader {
    width: 100%;
  }

  .ouiModalFooter {
    width: 100%;
    background: $ouiColorLightestShade;
    padding: $ouiSizeM $ouiSizeL !important; // sass-lint:disable-line no-important
    justify-content: stretch;

    > * {
      flex: 1;

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

  .ouiModalBody {
    width: 100%;

    .ouiModalBody__overflow {
      padding-bottom: $ouiSizeL;
    }
  }
}