@use 'sass:map';
@use '../../scss/spacers' as spacers;
@use '../../scss/palette' as palette;
@use '../../scss/font-settings' as font-settings;
@use '../../scss/breakpoints' as breakpoints;
@import '../../scss/supernova/styles/colors.css';
@import '../../scss/supernova/styles/spacers.css';

.modal-overlay {
  background: var(--color-shadow-pagemask);
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  inset: 0;
  container-type: inline-size;

  @media print {
    position: absolute;
  }
}

.align {
  position: absolute;

  @media print {
    position: initial;
    left: 0;
    top: 0;
    transform: none;
  }
}

.modal {
  pointer-events: auto;
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 50%);
  background-color: palette.$white;
  animation: open 200ms 1;
  outline: none;

  &__title {
    &--error {
      color: palette.$cherry600;
    }

    &--success {
      color: palette.$kiwi900;
    }
  }

  &__iconWrapper {
    padding-right: spacers.getSpacer(xs);
  }

  &__afterTitleChildren {
    padding-left: spacers.getSpacer(xs);
  }

  p {
    font-size: 1.125rem;
  }

  &--normal {
    background-color: palette.$white;
  }

  &--error {
    background-color: palette.$cherry100;
  }

  &--warning {
    background-color: palette.$banana50;
  }

  &--success {
    background-color: palette.$kiwi50;
  }

  &--large {
    width: calc(100vw - 0.75rem);
    padding-bottom: spacers.getSpacer(l);

    @media (max-width: map.get(breakpoints.$grid-breakpoints, sm)) {
      p {
        font-size: 1.125rem;
      }
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      padding-bottom: spacers.getSpacer(xl);
      width: 612px;
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      width: 696px;
    }

    @include breakpoints.tiny-screens-media-query {
      padding-bottom: spacers.getSpacer(2xs);
    }
  }

  &--medium {
    width: calc(100vw - 0.75rem);
    padding-bottom: spacers.getSpacer(m);

    @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
      width: 335px;
    }

    @media (min-width: map.get(breakpoints.$grid-breakpoints, lg)) {
      width: 515px;
    }
  }

  &--no-actions {
    padding-bottom: 0;
  }

  &__shadow {
    width: 100%;
    height: 16px;
    position: absolute;
    transition: opacity 0.5s;
    opacity: 0;
    z-index: 2;
    pointer-events: none;
  }

  &__shadow--top {
    // box-shadow: 0 3px 8px 4px grey;
    background: linear-gradient(0deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
  }

  &__shadow--bottom {
    // box-shadow: 0 -3px 8px 4px grey;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 45.7%) 100%);
    margin-top: -16px;
  }

  &__shadow--show {
    opacity: 1;
  }

  &__closeWrapper {
    position: relative;
    width: 100%;

    @media print {
      display: none;
    }

    &__close {
      position: absolute;
      right: spacers.getSpacer(3xs);
      top: spacers.getSpacer(3xs);
    }
  }

  &__contentWrapper {
    max-width: 100%;
    max-height: calc(100vh - 10rem);
    overflow: auto;
    overflow-x: hidden;

    &:focus-visible {
      outline: 1px solid palette.$black;
      outline-offset: -1px;
    }

    @media print {
      overflow: hidden;
      max-height: none;
    }

    @include breakpoints.tiny-screens-media-query {
      max-height: calc(100dvh - 4rem);
    }

    &__scroll {
      &--large {
        padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);

        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
          padding: spacers.getSpacer(xl) spacers.getSpacer(xl) spacers.getSpacer(2xs);
        }

        @include breakpoints.tiny-screens-media-query {
          padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) spacers.getSpacer(4xs);
        }
      }

      &--medium {
        padding: spacers.getSpacer(l) spacers.getSpacer(m) spacers.getSpacer(2xs);

        @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
          padding: spacers.getSpacer(xl) spacers.getSpacer(m) spacers.getSpacer(2xs);
        }

        @include breakpoints.tiny-screens-media-query {
          padding: spacers.getSpacer(2xs) spacers.getSpacer(3xs) spacers.getSpacer(4xs);
        }
      }
    }

    &__title {
      display: flex;
      align-items: center;

      div {
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }

  &__description {
    white-space: pre-line;
  }

  &__call-to-action {
    display: flex;
    gap: var(--core-space-m);

    &--large {
      padding: spacers.getSpacer(l) spacers.getSpacer(m) 0;

      @media (min-width: map.get(breakpoints.$grid-breakpoints, md)) {
        padding: spacers.getSpacer(l) spacers.getSpacer(xl) 0;
      }

      @include breakpoints.tiny-screens-media-query {
        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
      }
    }

    &--medium {
      padding: spacers.getSpacer(m) spacers.getSpacer(m) 0;

      @include breakpoints.tiny-screens-media-query {
        padding: spacers.getSpacer(2xs) spacers.getSpacer(2xs) 0;
      }
    }
  }

  /* animation on open */
  @keyframes open {
    0% {
      opacity: 0;
      transform: scale(0.9);
    }

    100% {
      opacity: 1;
      transform: scale(1);
    }
  }

  @media print {
    width: 100%;
  }
}