@import '../../../../styles/common';

$top-offset-slide-in-start: rem(200px);
$vertical-spacing: 60px;
$horizontal-spacing: spacing(extra-loose) * 2;
$height-limit: 600px;
$small-width: rem(620px);
$large-width: rem(980px);

.Container {
  position: fixed;
  z-index: z-index(modal, $fixed-element-stacking-order);
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  @include breakpoint-after(layout-width(page-with-nav)) {
    justify-content: center;
  }
}

.Modal {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: 100vw;
  max-height: calc(100vh - #{$vertical-spacing});
  background: color('white');
  box-shadow: shadow(layer);

  @include frame-when-nav-hidden {
    bottom: 0;
    max-height: 100%;
  }

  &:focus {
    outline: 0;
  }

  @include breakpoint-after(layout-width(page-with-nav)) {
    position: relative;
    max-width: $small-width;
    margin: 0 auto;
    border-radius: border-radius(large);
  }

  &.limitHeight {
    @include breakpoint-after(layout-width(page-with-nav)) {
      @media (min-height: $height-limit + $vertical-spacing) {
        max-height: $height-limit;
      }
    }
  }

  &.sizeLarge {
    @include breakpoint-after(layout-width(page-with-nav)) {
      max-width: calc(100vw - #{$horizontal-spacing});
    }

    @include breakpoint-after($large-width + $horizontal-spacing) {
      max-width: $large-width;
    }
  }
}

.animateFadeUp {
  will-change: transform, opacity;
  opacity: 1;
  transform: translateY(0);
  transition: transform easing() duration(), opacity easing() duration();

  &.entering,
  &.exiting,
  &.exited {
    opacity: 0;
    transform: translateY($top-offset-slide-in-start);
  }

  &.entered {
    opacity: 1;
    transform: translateY(0);
  }
}
