/* Voice Recorder Button Styles */
button[data-voice-recorder-target="startButton"] {
  padding: 0.5rem;
  border-radius: 9999px;
  background-color: rgb(79 70 229);
  color: white;
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

button[data-voice-recorder-target="startButton"]:hover {
  background-color: rgb(99 102 241);
}

button[data-voice-recorder-target="startButton"].recording {
  background-color: rgb(220 38 38);
}

button[data-voice-recorder-target="startButton"].recording:hover {
  background-color: rgb(185 28 28);
}

button[data-voice-recorder-target="startButton"].processing {
  background-color: rgb(156 163 175);
  cursor: not-allowed !important;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

button[data-voice-recorder-target="startButton"]:disabled {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

button[data-voice-recorder-target="startButton"] svg {
  color: white !important;
}

button[data-voice-recorder-target="startButton"].not-recording svg {
  color: white !important;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* Dropdown Menu Styles */
.relative .dropdown-menu {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.relative:focus-within .dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

/* Dream Form Text Areas */
textarea[name="dream[description]"] {
  min-height: 150px !important;
}

textarea[name="dream[connections]"],
textarea[name="dream[associations]"] {
  min-height: 100px !important;
}

/*

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

*/

/* Show the dropdown when the button is focused (clicked) */
/*button:focus + .hidden {
  display: block;
}

.hidden:focus {
  display: block;
}*/