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

@layer base {
  textarea {
    @apply appearance-none border border-gray-300 rounded-none shadow-sm placeholder-gray-400 focus:outline-none focus:ring-gray-500 focus:border-gray-500 scrollbar;
  }

  /*button[type='button'] {
        @apply text-white bg-gray-950 rounded hover:bg-gray-800 focus:outline-none;
    }*/

  input[type='range'] {
    height: 0.25rem;
    @apply appearance-none bg-gray-900 rounded-md;
  }

  select {
    @apply appearance-none text-sm border-gray-300 focus:outline-none focus:ring-gray-500 focus:border-gray-500;
  }

  input[type='checkbox'] {
    @apply appearance-none w-4 h-4 border border-gray-400 checked:bg-gray-900 checked:border-transparent focus:outline-none focus:ring-gray-500 focus:border-gray-500;
  }

  input[type='range']::-webkit-slider-thumb {
    @apply appearance-none bg-white border-2 border-gray-900 border-solid rounded-full h-4 w-4 mt-px hover:bg-gray-200;
  }

  input[type='range']::-moz-range-thumb {
    @apply appearance-none bg-white border-2 border-gray-900 border-solid rounded-full h-3 w-3 hover:bg-gray-200;
  }

  input[type='range']::-ms-thumb {
    @apply appearance-none bg-white border-2 border-gray-400 rounded-full h-4 w-4;
  }

  input[type='number'] {
    @apply appearance-none text-gray-700 border-gray-300 shadow-sm focus:ring-gray-500 focus:border-gray-500;
  }

  input[type='text'] {
    @apply appearance-none text-gray-700 border-gray-300 shadow-sm focus:ring-gray-500 focus:border-gray-500;
  }

  input[type='number']::-webkit-outer-spin-button,
  input[type='number']::-webkit-inner-spin-button,
  input[type='number'] {
    -webkit-appearance: none;
    margin: 0;
    -moz-appearance: textfield !important;
  }
}

@layer utilities {
  /* Chrome, Safari and Opera */
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }

  .no-scrollbar {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }

  /* Firefox */
  .scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #000000 #8d8d8d;
  }

  /* Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 20px;
  }

  /* Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar-track {
    border-radius: 100vh;
    background: #8d8d8d;
  }

  /* Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar-thumb {
    background: #000000;
    border-radius: 100vh;
    /*border: 1px solid #f9a8d4;*/
  }

  /* Chrome, Safari and Opera */
  .scrollbar::-webkit-scrollbar-thumb:hover {
    background: #333333;
  }
}