@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/layout';
@import '~@kaizen/design-tokens/sass/spacing';
@import '../GenericModal/GenericModal.module';

@layer kz-components {
  .modal {
    @extend %genericModal;

    min-width: 300px;
    max-width: 840px;

    @media (min-width: $layout-breakpoints-medium) {
      width: 90%;
    }

    .animatingEnter & {
      animation-duration: $ca-duration-fast;
      animation-fill-mode: forwards;
      animation-timing-function: $ca-bounce-in;

      @include ca-animation(fade($from: 0, $to: 1), zoom($from: 0.5, $to: 1));
    }

    .animatingLeave & {
      animation-duration: $ca-duration-rapid;
      animation-fill-mode: forwards;
      animation-timing-function: $ca-bounce-out;

      @include ca-animation(fade($from: 1, $to: 0), zoom($from: 1, $to: 0.5));
    }
  }

  .header {
    color: $color-purple-800;
    text-align: start;

    &.padded {
      padding: $spacing-md;

      @media (min-width: $layout-breakpoints-medium) {
        padding: $spacing-md $spacing-lg;
      }
    }
  }

  %footer {
    white-space: initial;

    @media (min-width: $layout-breakpoints-medium) {
      white-space: nowrap;
    }
  }

  .footer {
    @extend %footer;
  }

  .footerWithSecondaryAction {
    @extend %footer;

    margin-inline-start: calc(-1 * #{$spacing-sm});
  }

  .emptyFooter {
    height: $spacing-sm;
  }

  .portraitContentlayout {
    padding: $spacing-md;
    display: block;
    box-sizing: content-box;

    @media (min-width: $layout-breakpoints-medium) {
      display: grid;
      max-width: 800px;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      column-gap: $spacing-xl;
      padding: $spacing-md $spacing-lg;
    }
  }

  .landscapeContentlayout {
    display: flex;
    padding: $spacing-md;
    flex-direction: column;

    @media (min-width: $layout-breakpoints-medium) {
      padding: $spacing-md $spacing-lg;
    }

    .image {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }

    .content {
      padding-inline-start: 0;

      @media (min-width: $layout-breakpoints-medium) {
        max-width: 100%;
      }
    }
  }
}