.modal-mask {
  // @include flex;
  // @include flex-align(center, middle);
  @apply flex items-center justify-center bg-modal-backdrop-light dark:bg-modal-backdrop-dark  z-[9990] h-full left-0 fixed top-0 w-full;
}

.page-top-bar {
  @apply px-8 pt-9 pb-0;

  img {
    @apply max-h-[3.75rem];
  }
}

.modal-container {
  @apply shadow-md rounded-sm max-h-full overflow-auto relative w-[37.5rem];

  &.medium {
    @apply max-w-[80%] w-[56.25rem];
  }

  .content-box {
    @apply h-auto p-0;
  }

  h2 {
    @apply text-slate-800 dark:text-slate-100 text-lg font-semibold;
  }

  p {
    @apply text-sm m-0 p-0 text-slate-600 mt-2 text-sm dark:text-slate-300;
  }

  .content {
    @apply p-8;
  }

  form,
  .modal-content {
    @apply pt-4 pb-8 px-8 self-center;

    a {
      @apply p-4;
    }
  }

  .modal-footer {
    // @include flex;
    // @include flex-align($x: flex-end, $y: middle);
    @apply flex justify-end items-center py-2 px-0 gap-2;

    &.justify-content-end {
      @apply justify-end;
    }
  }

  .delete-item {
    @apply p-8;

    button {
      @apply m-0;
    }
  }
}

.modal-enter,
.modal-leave {
  @apply opacity-0;
}

.modal-enter .modal-container,
.modal-leave .modal-container {
  transform: scale(1.1);
  // @apply transform scale-110;
}