/*shout out temani afif*/

input {
    --c: #424d51; /* active color */
    --g: 0px; /* the gap */
    --l: 5px; /* line thickness*/
    --s: 20px; /* thumb size*/
    
    height: var(--s); /* needed for Firefox*/
    --_c: color-mix(in srgb, var(--c), #000 var(--p,0%));
    -webkit-appearance :none;
    -moz-appearance :none;
    appearance :none;
    background: none;
    cursor: pointer;
    overflow: hidden;
  }

  /* chromium */
  input[type="range" i]::-webkit-slider-thumb{
    height: var(--s);
    aspect-ratio: 1;
    border-radius: 0%;
    box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
    border-image: linear-gradient(90deg,var(--_c) 50%,#101314 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    -webkit-appearance: none;
    appearance: none;
    background-color: var(--c);

  }
  /* Firefox */
  input[type="range"]::-moz-range-thumb {
    height: var(--s);
    width: var(--s);
    background: none;
    border-radius: 0%;
    box-shadow: 0 0 0 var(--_b,var(--l)) inset var(--_c);
    border-image: linear-gradient(90deg,var(--_c) 50%,#101314 0) 0 1/calc(50% - var(--l)/2) 100vw/0 calc(100vw + var(--g));
    -moz-appearance: none;
    appearance: none;
    background-color: var(--c);

  }
  @supports not (color: color-mix(in srgb,red,red)) {
    input {
      --_c: var(--c);
    }
  }