$ease-1: cubic-bezier(0.23, 1, 0.32, 1);
$ease-2: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$speed-medium-1: 200ms;
/* stylelint-disable-next-line plugin/use-baseline -- color-mix has a literal fallback color */
$backdrop: var(
  --wds-color-fill-surface-modal-backdrop,
  color-mix(in srgb, var(--wsr-color-D10, #000624) 66%, transparent)
);

/* The block sits on react-modal's portal element, so every inner selector
   targets react-modal's own global classes. */
.modal {
  /* Default scale animation */
  &--transition-scale :global(.ReactModal__Content) {
    opacity: 0.66;
    transform: scale(0.93);
  }

  &--transition-scale :global(.ReactModal__Content--after-open) {
    opacity: 1;
    transform: scale(1);
    transition: opacity 0.35s $ease-1, transform 0.35s $ease-1;
  }

  &--transition-scale :global(.ReactModal__Content--before-close) {
    pointer-events: none;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.3s $ease-1, transform 0.3s $ease-1;
  }

  /* moveVertical / moveHorizontal animations */
  &--transition-move-horizontal :global(.ReactModal__Content),
  &--transition-move-vertical :global(.ReactModal__Content) {
    transition: transform $speed-medium-1;
  }

  &--transition-move-horizontal :global(.ReactModal__Content--before-close),
  &--transition-move-vertical :global(.ReactModal__Content--before-close) {
    pointer-events: none;
  }

  /* doubled: the later `.ReactModal__Overlay--before-close` rule sets the
     `transition` shorthand, which would reset this delay at equal specificity */
  &#{&}--transition-move-horizontal :global(.ReactModal__Overlay--before-close),
  &#{&}--transition-move-vertical :global(.ReactModal__Overlay--before-close) {
    transition-delay: $speed-medium-1;
  }

  &--transition-move-horizontal :global(.ReactModal__Content) {
    transform: translateX(100%);
  }

  &--transition-move-horizontal :global(.ReactModal__Content--after-open) {
    transform: translateX(0);
  }

  &--transition-move-horizontal :global(.ReactModal__Content--before-close) {
    transform: translateX(100%);
  }

  &--transition-move-vertical :global(.ReactModal__Content) {
    transform: translateY(100%);
  }

  &--transition-move-vertical :global(.ReactModal__Content--after-open) {
    transform: translateY(0);
  }

  &--transition-move-vertical :global(.ReactModal__Content--before-close) {
    transform: translateY(100%);
  }

  & :global(.ReactModal__Overlay) {
    background: transparent;
    opacity: 1;
    pointer-events: auto;
  }

  & :global(.ReactModal__Overlay--after-open) {
    background: $backdrop;
    transition: background 0.2s $ease-1;
  }

  & :global(.ReactModal__Overlay--before-close) {
    background: transparent;
    transition: background 0.15s $ease-2;
  }

  @supports (backdrop-filter: blur(20px)) {
    & :global(.ReactModal__Overlay--after-open) {
      background: $backdrop;
      backdrop-filter: blur(var(--wds-background-blur-modal));
      transition: backdrop-filter 0.2s $ease-1, background 0.2s;
    }

    & :global(.ReactModal__Overlay--before-close) {
      background: transparent;
      backdrop-filter: none;
      transition: backdrop-filter 0.15s $ease-2, background 0.15s;
    }
  }

  &:not(#{&}--scrollable) :global(.ReactModal__Overlay) {
    overflow: hidden;
  }

  @media (prefers-reduced-motion) {
    &--transition-scale :global(.ReactModal__Content--after-open),
    &--transition-scale :global(.ReactModal__Content--before-close),
    &--transition-move-horizontal :global(.ReactModal__Content),
    &--transition-move-vertical :global(.ReactModal__Content),
    &#{&}--transition-move-horizontal :global(.ReactModal__Overlay--before-close),
    &#{&}--transition-move-vertical :global(.ReactModal__Overlay--before-close),
    & :global(.ReactModal__Overlay--after-open),
    & :global(.ReactModal__Overlay--before-close) {
      transition-duration: 0.01ms;
      transition-delay: 0s;
    }
  }

  &__children-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;

    &--screen-full {
      padding: 0px;
    }

    &--screen-desktop {
      padding: var(--wds-space-viewport-spacing, 48px);
    }

    &--screen-mobile {
      padding: var(--wds-space-mobile-viewport-spacing, 30px);
    }
  }

  &__close-button {
    position: absolute;
    top: 40px;
    right: 38px;
    cursor: pointer;
  }

  /* Inner modal element */
  &__modal {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;

    div {
      box-sizing: border-box;
    }
  }

  &__nav-prev {
    margin-inline-end: var(--wds-space-padding-horizontal-large, 24px);
  }

  &__nav-next {
    margin-inline-start: var(--wds-space-padding-horizontal-large, 24px);
    order: 1;
  }

  &__design-system-context-provider {
    display: block;
    width: 100%;
    height: 100%;
  }
}

:global(.ReactModal__Body--open) {
  overflow: hidden;
}