Reactive-Resume/client/components/shared/BaseModal.module.scss

.content {
  @apply rounded px-6 text-sm shadow lg:w-1/2 xl:w-2/5;
  @apply absolute inset-4 sm:inset-x-4 sm:inset-y-auto lg:inset-auto;
  @apply overflow-scroll bg-zinc-100 dark:bg-zinc-900 lg:overflow-auto;
  @apply max-h-[90vh] min-h-fit;

  &::-webkit-scrollbar {
    display: none;
  }
}

.header {
  @apply sticky top-0 left-0 right-0 z-50 bg-zinc-100 pt-6 dark:bg-zinc-900;
  @apply flex items-center justify-between;
  @apply w-full border-b pb-5 dark:border-white/10;

  > div {
    @apply flex items-center gap-2;
  }

  button {
    @apply flex items-center justify-center;
    @apply rotate-0 transition-transform hover:rotate-90;
  }

  h1 {
    @apply text-base font-medium;
  }
}

.body {
  @apply grid gap-4 pt-4 pb-6;
}

.footer {
  @apply sticky bottom-0 left-0 right-0 z-50 bg-zinc-100 pb-6 dark:bg-zinc-900;
  @apply flex items-center justify-end gap-x-4;
  @apply w-full border-t pt-5 dark:border-white/10;
}