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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

.input-text-field {
  @apply block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6;
}

/* Hotwire Combobox Customization */
.hw-combobox__main__wrapper {
  @apply w-full border border-gray-300 text-sm rounded-md focus-within:border-blue-500 focus-within:outline-none focus-within:ring-2 focus-within:ring-blue-500;
  display: flex !important;
  align-items: center !important;
  min-height: 42px !important;
  width: 100% !important;
  max-width: none !important;
}

.hw-combobox {
  @apply w-full block;
  flex: 1 !important;
  width: 100% !important;
  max-width: none !important;
}

.hw-combobox__input {
  @apply w-full border-0 focus:ring-0 focus:outline-none text-sm px-3 py-2;
  min-width: 0 !important;
  width: 100% !important;
}

.hw-combobox__group__label {
  @apply px-3 py-1.5 text-xs bg-gray-50 uppercase tracking-wide font-medium text-gray-600;
}

.hw-combobox__listbox {
  @apply rounded-md shadow-lg border border-gray-200 bg-white;
}

.hw-combobox__option {
  @apply px-4 py-2 cursor-pointer text-sm text-gray-900 hover:bg-blue-50;
}

.hw-combobox__option[aria-selected="true"] {
  @apply bg-blue-100 text-blue-900;
}

.hw-combobox__handle {
  @apply text-gray-400 hover:text-gray-600;
}

/* Custom Radio Button Styles */
.radio-indicator {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}

label:hover .radio-indicator {
  @apply bg-sage-light border-2 border-sage-dark shadow-none;
}

input[type='radio']:checked + .radio-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.141774 8C-1.01231 2.88959 5.17266 -1.20327e-09 8.07089 2.54395e-07C12.45 6.40596e-07 16 3.58172 16 8C16 11.6966 11.516 16 8.07089 16C3.69176 16 1.12608 12.3586 0.141774 8Z' fill='%236A8473'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: center center;
  @apply shadow-none bg-sage-light border-2 border-sage-dark;
}

/* Custom Checkbox Styles */
.checkbox-indicator {
  box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.08);
}

label:hover .checkbox-indicator {
  @apply bg-sage-light border-2 border-sage-dark shadow-none;
}

input[type='checkbox']:checked + .checkbox-indicator {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='3' fill='%236A8473'/%3E%3Cpath d='M12.207 5.207a1 1 0 0 0-1.414-1.414L7 7.586 5.207 5.793a1 1 0 0 0-1.414 1.414l2.5 2.5a1 1 0 0 0 1.414 0l4.5-4.5z' fill='white'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center center;
  @apply shadow-none bg-sage-light border-2 border-sage-dark;
}