@import '~@kaizen/design-tokens/sass/shadow';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/layout';
@import '../../../styles/utils/legacy/layout';
@import '../../../styles/utils/responsive';
@import '../../../styles/utils/layers';
@import '../../../styles/utils/border';
@import '../../../styles/utils/animation';

@layer kz-components {
  .defaultModalWidth {
    min-width: 300px;
    max-width: 600px;
  }

  .backdropLayer {
    position: fixed;
    background-color: #000;
    opacity: 50%;
    z-index: $ca-z-index-modal-backdrop;

    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
  }

  .scrollLayer {
    position: fixed;
    display: flex;
    align-items: center;
    z-index: $ca-z-index-modal;
    overflow-y: auto;

    @include ca-position($start: 0, $end: 0, $top: 0, $bottom: 0);
  }

  .modalLayer {
    // use flexbox auto margins to horizontally and vertically centre the modal
    // because in IE11, `align-items: center` and `justify-content: center` cause
    // long modal content to become unreachable if they go off-screen
    margin: auto;
    padding: $ca-grid 0;
    width: 100%;
  }

  %genericModal {
    margin: auto;
    background-color: $color-white;
    border-radius: $border-solid-border-radius;
    box-shadow: $shadow-large-box-shadow;
    position: relative;
    width: 90%;
    -webkit-font-smoothing: antialiased;
    color: $color-purple-800;

    @include ca-media-tablet-and-up {
      width: 100%;
    }

    // wrap the modal container with a focus ring when the title has focus
    // for the rebuild: rather than putting the focus on the title, put it on the role=dialog element itself
    &:has(:global([class*='modalLabel']):focus-visible) {
      outline: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style)
        var(--color-blue-300);
      outline-offset: 2px;
    }
  }

  .transitionLayer {
    transition: opacity $ca-duration-fast ease-in-out;
    opacity: 1;
    position: relative;
    z-index: $ca-z-index-modal;

    .backdropLayer {
      /*
      There's a weird bug in Chrome/Blink 102.x that animates the opacity
      all the way to 1 with 200ms ("rapid" token), but is fine with
      201ms, see Jira [KDS-523]
    */
      @include ca-animation-fade($duration: 201ms, $from: 0, $to: 0.5);
    }

    [data-modal] {
      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));
    }
  }

  // WAITING FOR TEXTFIELD
  .animatingEnter {
    [data-modal] {
      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 {
    transition-duration: $ca-duration-rapid;
    opacity: 0;

    .backdropLayer {
      @include ca-animation-fade($duration: $ca-duration-rapid, $from: 0.5, $to: 0);
    }

    [data-modal] {
      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));
    }
  }

  .unscrollable {
    /* Tech debt - this !important existed before Stylelint rules */
    overflow: hidden !important; /* stylelint-disable-line declaration-no-important */
  }

  .pseudoScrollbar {
    /* Tech debt - this !important existed before Stylelint rules */
    padding-inline-end: 15px !important; /* stylelint-disable-line declaration-no-important */
  }

  .hide {
    opacity: 0%;
    pointer-events: none;
  }
}