@use "design";
@use "m";

$bottom-fade-height: 40px;

.modal {
  position: fixed;
  inset: 0;

  display: flex;

  &.autoHeight {
    align-items: center;
  }

  &.fillHeight {
    align-items: stretch;
  }

  padding: calc(20px + design.$app-inset-top) 10px calc(10px + design.$app-inset-bottom) 10px;
}

.background {
  position: absolute;
  inset: 0;
  z-index: 1;

  animation-name: fadeBg;
  animation-duration: 0.25s;
  animation-fill-mode: both;
  animation-timing-function: ease;
}

@keyframes fadeBg {
  from {
    background-color: rgba(#000, 0);
  }
  to {
    background-color: rgba(#000, 0.5);
  }
}

.container {
  overflow: hidden;
  position: relative;
  z-index: 2;
  background-color: design.$color-page-background;
  color: design.$color-on-page-background;
  border-radius: design.$border-radius-large;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);

  @include m.desktop {
    max-width: design.$wrap-narrow-max-width;
  }

  margin: 0 auto;
  max-height: 100%;

  display: flex;
  flex-direction: column;

  animation-name: fadeInUp;
  animation-duration: 0.25s;
  animation-fill-mode: forwards;
  animation-timing-function: ease;

  &:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: $bottom-fade-height;

    background: linear-gradient(0deg, design.$color-surface 15%, rgba(255, 255, 255, 0) 100%);
  }
}

.content {
  position: relative;
  overflow: auto;
  padding-bottom: $bottom-fade-height;
}

.close {
  padding-right: 10px; // Visually align button
  border-bottom: 1px solid design.$card-border-color;
}

@keyframes fadeInUp {
  from {
    opacity: 0.25;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
  }
}