@react95/core/esm/Range/Range.css.ts.vanilla.css

Windows 95 styleguide

.r95_1i4w9z20 {
  appearance: none;
  width: 100%;
}
.r95_1i4w9z20::hover,.r95_1i4w9z20::focus,.r95_1i4w9z20::active {
  outline: none;
}
.r95_1i4w9z20::-webkit-slider-runnable-track {
  width: 100%;
  height: var(--r95-space-4);
  background-color: var(--r95-color-borderDarkest);
  cursor: pointer;
  border-style: solid;
  border-top-width: var(--r95-space-1);
  border-top-color: var(--r95-color-borderLight);
  border-right-width: var(--r95-space-2);
  border-right-color: var(--r95-color-borderLightest);
  border-bottom-width: var(--r95-space-1);
  border-bottom-color: var(--r95-color-borderLighter);
  border-left-width: var(--r95-space-2);
  border-left-color: var(--r95-color-borderLightest);
  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
}
.r95_1i4w9z20::-moz-range-track {
  width: 100%;
  height: var(--r95-space-4);
  background-color: var(--r95-color-borderDarkest);
  cursor: pointer;
  border-style: solid;
  border-top-width: var(--r95-space-1);
  border-top-color: var(--r95-color-borderLight);
  border-right-width: var(--r95-space-2);
  border-right-color: var(--r95-color-borderLightest);
  border-bottom-width: var(--r95-space-1);
  border-bottom-color: var(--r95-color-borderLighter);
  border-left-width: var(--r95-space-2);
  border-left-color: var(--r95-color-borderLightest);
  box-shadow: 0px 1px 0px 0px var(--r95-color-borderLightest);
}
.r95_1i4w9z20::-webkit-slider-thumb {
  width: var(--r95-space-12);
  height: var(--r95-space-20);
  background-color: var(--r95-color-material);
  cursor: pointer;
  margin-top: calc(var(--r95-space-8) * -1);
  border-style: solid;
  border-top-width: var(--r95-space-1);
  border-top-color: var(--r95-color-borderLightest);
  border-right-width: var(--r95-space-1);
  border-right-color: var(--r95-color-borderDarkest);
  border-bottom-width: var(--r95-space-1);
  border-bottom-color: var(--r95-color-borderDarkest);
  border-left-width: var(--r95-space-1);
  border-left-color: var(--r95-color-borderLightest);
  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
inset -1px 0px 0px var(--r95-color-borderDark),
inset 0px 1px 0px var(--r95-color-borderLighter),
inset 1px 0px 0px var(--r95-color-borderLighter);
  appearance: none;
}
.r95_1i4w9z20::-moz-range-thumb {
  width: var(--r95-space-12);
  height: var(--r95-space-20);
  background-color: var(--r95-color-material);
  cursor: pointer;
  margin-top: calc(var(--r95-space-8) * -1);
  border-style: solid;
  border-top-width: var(--r95-space-1);
  border-top-color: var(--r95-color-borderLightest);
  border-right-width: var(--r95-space-1);
  border-right-color: var(--r95-color-borderDarkest);
  border-bottom-width: var(--r95-space-1);
  border-bottom-color: var(--r95-color-borderDarkest);
  border-left-width: var(--r95-space-1);
  border-left-color: var(--r95-color-borderLightest);
  box-shadow: inset 0px -1px 0px var(--r95-color-borderDark),
inset -1px 0px 0px var(--r95-color-borderDark),
inset 0px 1px 0px var(--r95-color-borderLighter),
inset 1px 0px 0px var(--r95-color-borderLighter);
  appearance: none;
}
.r95_1i4w9z20:focus::-webkit-slider-runnable-track {
  background-color: var(--r95-color-borderDarkest);
}