prenix_components

@layer components {
  .modal-backdrop {
    background-color: hsl(var(--overlay) / 0.5);
    @apply z-[1050] w-[100vw] h-[100vh] fixed inset-0;
    @apply transition-opacity opacity-0;
  }

  .modal-backdrop.show {
    @apply opacity-100 duration-150 ease-linear;
  }

  .modal {
    --modal-dialog-width: initial;
    --modal-dialog-max-width: initial;
    --modal-dialog-height: initial;
    --modal-dialog-margin-x: auto;
    --modal-dialog-margin-y: 8px;
    --modal-content-height: initial;
    --modal-content-border-radius: theme(borderRadius.xl);
    --modal-body-overflow-y: initial;

    @media screen(md) {
      --modal-dialog-margin-y: 12px;
    }

    @media screen(lg) {
      --modal-dialog-margin-y: 16px;
    }

    @media screen(xl) {
      --modal-dialog-margin-y: 24px;
    }

    @apply w-full h-full fixed top-0 left-0 z-[1055] opacity-0;
    @apply hidden;
  }

  .modal.show {
    @apply opacity-100 duration-150 ease-linear;
  }

  .modal--sm {
    --modal-dialog-max-width: theme(maxWidth.sm);
  }

  .modal--md {
    --modal-dialog-max-width: theme(maxWidth.lg);
  }

  .modal--lg {
    --modal-dialog-max-width: theme(maxWidth.2xl);
  }

  .modal-dialog {
    transform: translate(0, -50px);
    min-height: calc(100% - var(--modal-dialog-margin-y) * 2);
    @apply transition-transform ease-out duration-300 pointer-events-none;
    @apply flex items-center my-[--modal-dialog-margin-y] relative;
    @apply w-[--modal-dialog-width] h-[--modal-dialog-height];
    @apply max-w-[--modal-dialog-max-width] mx-[--modal-dialog-margin-x];
  }

  .modal.show .modal-dialog {
    transform: none;
  }

  .modal-content {
    @apply flex flex-col relative w-full box-border shadow-medium;
    @apply rounded-[--modal-content-border-radius] pointer-events-auto;
    @apply h-[--modal-content-height];
    @apply bg-content text-content-foreground;
    @apply mx-[--modal-dialog-margin-y];
  }

  .modal-header {
    @apply py-4 px-6 flex-initial text-lg font-semibold flex flex-col gap-1;
  }

  .modal-body {
    @apply flex flex-1 flex-col gap-3 px-6 py-2;
    overflow-y: --modal-body-overflow-y;
  }

  .modal-footer {
    @apply flex flex-row gap-2 px-6 py-4 justify-end;
  }

  .modal-close {
    @apply absolute appearance-none select-none top-1 right-1 p-2 text-neutral1-foreground;
  }

  .modal--scroll-outside {
    @apply overflow-x-hidden overflow-y-auto;
  }

  .modal-dialog--scroll-inside {
    height: calc(100% - var(--modal-dialog-margin-y) * 2);
  }

  .modal-content--scroll-inside {
    @apply max-h-full overflow-hidden;
  }

  .modal-body--scroll-inside {
    @apply overflow-y-auto;
  }

  .modal--fullscreen-always {
    --modal-dialog-max-width: none;
    --modal-dialog-width: 100vw;
    --modal-dialog-height: 100%;
    --modal-dialog-margin-x: 0;
    --modal-dialog-margin-y: 0;
    --modal-content-height: 100%;
    --modal-content-border-radius: 0;
    --modal-body-overflow-y: auto;
  }

  @media (max-width: theme(screens.2xl)) {
    .modal--fullscreen-2xl-below {
      --modal-dialog-max-width: none;
      --modal-dialog-width: 100vw;
      --modal-dialog-height: 100%;
      --modal-dialog-margin-x: 0;
      --modal-dialog-margin-y: 0;
      --modal-content-height: 100%;
      --modal-content-border-radius: 0;
      --modal-body-overflow-y: auto;
    }
  }

  @media (max-width: theme(screens.xl)) {
    .modal--fullscreen-xl-below {
      --modal-dialog-max-width: none;
      --modal-dialog-width: 100vw;
      --modal-dialog-height: 100%;
      --modal-dialog-margin-x: 0;
      --modal-dialog-margin-y: 0;
      --modal-content-height: 100%;
      --modal-content-border-radius: 0;
      --modal-body-overflow-y: auto;
    }
  }

  @media (max-width: theme(screens.lg)) {
    .modal--fullscreen-lg-below {
      --modal-dialog-max-width: none;
      --modal-dialog-width: 100vw;
      --modal-dialog-height: 100%;
      --modal-dialog-margin-x: 0;
      --modal-dialog-margin-y: 0;
      --modal-content-height: 100%;
      --modal-content-border-radius: 0;
      --modal-body-overflow-y: auto;
    }
  }

  @media (max-width: theme(screens.md)) {
    .modal--fullscreen-md-below {
      --modal-dialog-max-width: none;
      --modal-dialog-width: 100vw;
      --modal-dialog-height: 100%;
      --modal-dialog-margin-x: 0;
      --modal-dialog-margin-y: 0;
      --modal-content-height: 100%;
      --modal-content-border-radius: 0;
      --modal-body-overflow-y: auto;
    }
  }

  @media (max-width: theme(screens.sm)) {
    .modal--fullscreen-sm-below {
      --modal-dialog-max-width: none;
      --modal-dialog-width: 100vw;
      --modal-dialog-height: 100%;
      --modal-dialog-margin-x: 0;
      --modal-dialog-margin-y: 0;
      --modal-content-height: 100%;
      --modal-content-border-radius: 0;
      --modal-body-overflow-y: auto;
    }
  }
}