@import "tailwindcss";

@theme {
  --color-primary-bg: #E4CDFF;
  --color-primary: #24153A;
}

@custom-variant hotwire-native {
  html[data-hotwire-native] & {
    @slot
  }
}

@custom-variant not-hotwire-native {
  html:not([data-hotwire-native]) & {
    @slot
  }
}

.form-row {
  @apply flex flex-col gap-y-1.5;
}
.form-label {
  @apply font-bold block;
}
.form-input {
  @apply w-full py-3 px-3.5 text-lg rounded-lg outline-2 -outline-offset-1 outline-slate-300 focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 bg-white placeholder:text-gray-400;
}
.form-button {
  @apply hotwire-native:hidden w-full py-3.5 rounded-lg bg-primary text-white font-medium text-center text-lg;
}