@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";
@import "forms.css";
@import "buttons.css";
@import "tippy.js/dist/tippy.css";
@import "tippy.js/themes/light.css";

.light-font-big-heading {
    @apply text-2xl font-thin mb-4
}

.kebab-menu-action-item {
  @apply no-underline block px-6 py-3 text-gray-800 bg-white hover:text-blue-500 transition ease-in-out duration-200
}

.alert {
  @apply border border-gray-500 bg-gray-100 text-gray-700 p-4 rounded-lg font-sans;
}

.alert.alert-error {
  @apply border-danger-500 bg-danger-100 text-danger-600;
}

/* Modal styling */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    justify-content: center;
    align-items: center;
  }
  
  .modal.active {
    display: flex; /* Show the modal and center its contents */
  }

@keyframes grow-bar {
  from { width: 0%; }
  to { width: var(--target-width); }
}

@layer components {
  .animate-grow-bar {
    animation: grow-bar 0.5s ease-out forwards;
  }
}