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


@layer utilities {
  input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 32px; 
    height: 32px;
    background-color: #448087 ;
    border-radius: 50%; 
    cursor: pointer; 
  }

  input[type="range"]::-moz-range-thumb {
    width: 32px; 
    height: 32px;
    background-color: #448087 ;
    border-radius: 50%;
    cursor: pointer;
  }

  input[type="range"]::-ms-thumb {
    width: 32px; 
    height: 32px;
    background-color: #448087 ;
    border-radius: 50%;
    cursor: pointer;
  }
}


@layer components {
  
  .button-container {
    @apply w-full flex justify-center ;
  }
  .bubble-container {
    @apply w-full flex flex-row justify-center ;
  }
  .textbox-container {
    @apply w-full flex justify-center ;
  }
  .slider-container {
    @apply m-4 w-full flex justify-center items-center ;
  }
  .radio-boolean-label {
    @apply flex w-full items-center p-4 mb-4 rounded-lg bg-havn-pink bg-opacity-90 backdrop-blur-2xl shadow-xl hover:bg-opacity-75 peer-checked:text-havn-white peer-checked:bg-havn-dgreen cursor-pointer ;
  }
  .next-button {
    @apply mt-10 mb-20 h-14 p-4 text-center text-white bg-havn-red font-medium rounded-lg font-bold text-xl focus:outline-none;
  }
  .share-link {
    @apply mt-10 mb-20 h-14 p-4 text-center text-havn-base-content font-medium rounded-lg font-bold text-xl ;
  }
  .sortable-button {
    @apply flex w-full items-center gap-4 p-4 rounded-lg bg-havn-green bg-opacity-90 backdrop-blur-2xl shadow-xl hover:bg-havn-dgreen cursor-pointer transition delay-100;
  }
  .question-prompt {
    @apply mb-6 ml-0 mr-0 text-havn-base-content text-havn-base;
  }
  .info-card {
    @apply rounded-3xl  bg-havn-green ;
  }


}