@tailwind components;

@layer components {
  .slider-track-wrapper {
    @apply w-full bg-gray-200 h-[16px] rounded-[8px] px-10 my-20;
  }

  .slider-track {
    @apply relative;
  }

  .slider-fill {
    @apply bg-blue-600 h-[16px] rounded-l-[8px] relative -translate-x-10;
  }

  .slider-handle {
    @apply w-[26px] h-[26px] rounded-full border border-gray-600 bg-white absolute -top-5 -translate-x-[13px];
  }

  .slider-marks-container {
    @apply absolute top-0 pointer-events-none w-full;
  }

  .slider-mark {
    &:before {
      @apply w-[6px] h-[6px] bg-gray-900 content-[''] block rounded-full mt-5 mb-10;
    }

    &[data-active='true']:before {
      @apply bg-white;
    }
    @apply absolute -translate-x-[50%] text-[8px] top-0 flex flex-col items-center;
  }
}