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

@layer utilities {
  .main-gradient {
    background-image: linear-gradient(90deg, #BD072E 0%,  #2509D3 100%);
  }
  .poppins {
    font-family: 'Poppins', sans-serif;
  }
  .robotoMono {
    font-family: 'Roboto Mono', monospace;
  }
}

@layer components {
  .p-list-item {
    @apply before:block before:rounded before:content-[''] before:w-1 before:h-1 before:bg-gry-600 before:absolute before:left-0 before:top-[10px] text-gry-700 leading-6 relative pl-3 font-normal;
  }
  .p-list-item-small {
    @apply before:block before:rounded before:content-[''] before:w-1 before:h-1 before:bg-gry-600 before:absolute before:left-0 before:top-2 text-gry-500 leading-5 relative pl-3 font-normal text-sm;
  }
  .sizing-var {
    @apply robotoMono font-medium text-prm-400 underline underline-offset-2 decoration-dashed inline-flex px-1 rounded mx-0.5 text-xs h-4;
  }
  .sizing-var-important {
    @apply robotoMono font-medium text-white bg-prm-500 inline-flex px-1 rounded mx-0.5 text-xs h-4;
  }
  .sizing-val {
    @apply text-gry-800 font-medium bg-gryl-300 inline-flex px-1 rounded mx-0.5 text-xs h-4;
  }
  .sizing-val-important {
    @apply font-bold text-white bg-prm-500 inline-flex px-1 rounded mx-0.5 text-xs h-4;
  }
}

.stop-scrolling {
  height: 100vh;
  max-height: 100vh;
  overflow-y: hidden;  
}

input[type=range] {
  appearance: none;
  outline: none;
  overflow: hidden;
}

input[type=range]::-webkit-slider-runnable-track {
  height: 12px;
  background: #F2F2F3;
  border-radius: 12px;
}

input[type=range]::-moz-range-track {
  height: 12px;
  background: #F2F2F3;
  border-radius: 12px;
}

input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none; 
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #5C4BF7;
  box-shadow: -407px 0 0 400px #5C4BF7;
}

input[type=range]::-moz-range-thumb {
  height: 12px;
  width: 12px;
  background-color: #fff;
  border-radius: 50%;
  border: 2px solid #5C4BF7;
  box-shadow: -407px 0 0 400px #5C4BF7;
}