@layer components {
  .modal-overlay {
    @apply fixed top-0 right-0 bottom-0 left-0 z-[9999] hidden items-start justify-end bg-black/50 backdrop-blur-[2px] transition-all duration-300;

    &.closing {
      @apply opacity-0 invisible;
    }
  }

  .modal-container {
    @apply flex h-full w-full max-w-2xl flex-col overflow-hidden rounded-none bg-white;
    animation: modalSlideInRight 0.3s ease-out;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  }

  .modal-header {
    @apply flex items-center justify-between bg-primary p-6 text-secondary;
  }

  .modal-header-left {
    @apply flex items-center gap-2;
  }

  .modal-icon {
    @apply flex size-7 items-center justify-center;

    .ti {
      @apply text-[24px] text-secondary;
    }
  }

  .modal-title {
    @apply m-0 text-xl font-bold text-secondary;
  }

  .modal-body {
    @apply flex-1 overflow-y-auto bg-lightgray p-6;
  }

  .modal-footer {
    @apply flex justify-end gap-3 border-t border-border bg-white p-6;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
  }
}

@keyframes modalSlideInRight {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}