/* Form Components */
@layer components {
  .parameter-input {
    @apply inline-block min-w-[4ch] px-1 mx-1 border-b-[5px] border-gray-100 focus:border-gray-300 focus:outline-none transition-all duration-200 hover:border-gray-200 align-baseline;
  }

  .parameter-input[data-empty="true"] {
    @apply text-gray-400 cursor-text select-none;
  }

  .parameter-input[data-empty="false"] {
    @apply text-gray-900 font-medium border-gray-300;
  }

  .parameter-input:focus {
    @apply scale-[1.01] origin-bottom;
  }

  .parameter-input[data-type="month"] {
    @apply min-w-[12ch] cursor-pointer hover:border-gray-400 relative pr-4 py-0.5 rounded hover:bg-gray-50 transform hover:shadow-sm;
  }

  .parameter-input[data-type="month"]::after {
    content: "▼";
    @apply absolute right-1 top-1/2 -translate-y-1/2 text-gray-400 text-[10px] pointer-events-none transition-colors duration-200;
  }

  .parameter-input[data-type="month"]:hover::after {
    @apply text-gray-600;
  }

  .parameter-input[data-type="month"][data-empty="false"] {
    @apply text-gray-900 font-medium shadow-sm;
  }

  .parameter-input[data-type="month"]:hover .month-picker {
    @apply translate-y-1;
  }

  .parameter-input[data-type="date"] {
    @apply min-w-[10ch];
  }

  .parameter-input[data-type="integer"] {
    @apply min-w-[2ch] text-center;
  }

  .parameter-input-container {
    @apply relative inline-block;
  }

  .month-picker {
    @apply z-10 min-w-[300px] transform opacity-0 scale-95 transition-all duration-100 ease-out shadow-lg -translate-y-1 bg-white rounded-lg border border-gray-200;
  }

  .month-picker:not(.hidden) {
    @apply opacity-100 scale-100;
  }

  .month-picker select {
    @apply w-1/2 text-sm bg-white border-gray-300 rounded-md shadow-sm transition-colors duration-200;
  }

  .month-picker select:focus {
    @apply ring-2 ring-indigo-500 ring-offset-2 border-indigo-500;
  }

  .month-picker select:hover:not(:focus) {
    @apply border-gray-400 bg-gray-50;
  }

  .month-picker select option {
    @apply py-1.5 px-2;
  }

  .month-picker select option:checked {
    @apply bg-indigo-50 text-indigo-900;
  }

  /* Rich Input */
  .rich-input {
    @apply flex items-center flex-1 rounded-lg border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-base min-h-[48px] grow max-h-[200px] p-2 overflow-y-auto bg-white;
  }
  .rich-input[contenteditable=true]:empty:before {
    content: attr(data-placeholder);
    @apply text-gray-400;
  }
}