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

@layer components {
  .rnd-modifier-slider {
    height: 1.25rem;
    background: transparent;
  }

  .rnd-modifier-slider::-webkit-slider-runnable-track {
    height: 0.75rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
  }

  .rnd-modifier-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: -0.25rem;
    border-radius: 9999px;
    background: #2563eb;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  }

  .rnd-modifier-slider::-moz-range-track {
    height: 0.75rem;
    border-radius: 9999px;
    background: rgb(243 244 246);
  }

  .rnd-modifier-slider::-moz-range-thumb {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 9999px;
    background: #2563eb;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.35);
  }

  .dark .rnd-modifier-slider::-webkit-slider-runnable-track {
    background: rgb(55 65 81);
  }

  .dark .rnd-modifier-slider::-moz-range-track {
    background: rgb(55 65 81);
  }
}

/*

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

*/