@tailwind base;
@tailwind components;
@tailwind utilities;

.tab-item {
  @apply whitespace-nowrap border-b-2 border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 px-1 py-4 text-sm font-medium;
}

.tab-item[data-active="true"] {
  @apply border-blue-500 text-blue-600 font-medium;
}

@layer components {
  .slideover {
    @apply h-dvh max-h-dvh m-0 ml-auto bg-white text-left w-full sm:max-w-lg backdrop:bg-black/50 backdrop:ease-in-out backdrop:duration-500 transform transition ease-in-out duration-500;
  }

  .dialog {
    @apply rounded-lg bg-white text-left shadow-xl sm:w-full sm:max-w-lg backdrop:bg-black/50;
  }
}