@adobe/spectrum-css/dist/components/colorslider/index-vars.css

The Spectrum CSS top-level backwards compatible package

.spectrum-ColorSlider {
  --spectrum-colorslider-handle-hitarea-border-radius: 0%;
  --spectrum-colorslider-handle-hitarea-width: var(
    --spectrum-global-dimension-size-300
  );
  --spectrum-colorslider-handle-hitarea-height: var(
    --spectrum-global-dimension-size-300
  );
}

.spectrum-ColorSlider.is-focused .spectrum-ColorSlider-handle {
  width: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);
  height: calc(var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)) * 2);

  margin-left: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
  margin-top: calc(-1 * var(--spectrum-colorhandle-size, var(--spectrum-global-dimension-size-200)));
}

.spectrum-ColorSlider-slider {
  opacity: 0.0001;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.spectrum-ColorSlider {
  position: relative;
  display: block;
  width: var(--spectrum-colorslider-default-length, var(--spectrum-global-dimension-size-2400));
  height: var(--spectrum-colorslider-height, var(--spectrum-global-dimension-size-300));
  -webkit-user-select: none;
      -ms-user-select: none;
          user-select: none;

  cursor: default;
}

.spectrum-ColorSlider.is-focused {
    z-index: 2;
  }

.spectrum-ColorSlider.is-disabled {
    pointer-events: none;
  }

.spectrum-ColorSlider--vertical {
  display: inline-block;

  width: var(--spectrum-colorslider-vertical-width, var(--spectrum-global-dimension-size-300));
  height: var(--spectrum-colorslider-vertical-default-length, var(--spectrum-global-dimension-size-2400));
}

.spectrum-ColorSlider--vertical .spectrum-ColorSlider-handle {
    left: 50%;
    top: 0;
  }

.spectrum-ColorSlider-handle {
  left: 0;
  top: 50%;
}

.spectrum-ColorSlider-handle:after {
    border-radius: var(--spectrum-colorslider-handle-hitarea-border-radius);
    width: var(--spectrum-colorslider-handle-hitarea-width);
    height: var(--spectrum-colorslider-handle-hitarea-height);
  }

.spectrum-ColorSlider-checkerboard {
  background-size: var(--spectrum-global-dimension-static-size-200, 16px)
    var(--spectrum-global-dimension-static-size-200, 16px);
  background-position: 0 0, 0 var(--spectrum-global-dimension-static-size-100, 8px),
    var(--spectrum-global-dimension-static-size-100, 8px)
      calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)),
    calc(-1 * var(--spectrum-global-dimension-static-size-100, 8px)) 0;
}

.spectrum-ColorSlider-checkerboard:before {
    content: "";
    z-index: 1;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
  }

.spectrum-ColorSlider-gradient,
.spectrum-ColorSlider-checkerboard {
  width: 100%;
  height: 100%;
  border-radius: var(--spectrum-colorslider-border-radius, var(--spectrum-alias-border-radius-regular));
}

.spectrum-ColorSlider {
  --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color);
}

.spectrum-ColorSlider-checkerboard {
  background-color: var(--spectrum-global-color-static-white, rgb(255, 255, 255));
  background-image:
    linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 75.5%),
    linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%),
    linear-gradient(45deg, var(--spectrum-global-color-static-gray-500, rgb(188, 188, 188)) 25.5%, transparent 25.5%);
}

.spectrum-ColorSlider-checkerboard:before {
    box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorslider-border-color);
  }

.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard {
      background: var(--spectrum-colorslider-fill-color-disabled, var(--spectrum-global-color-gray-300));
    }

.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-checkerboard:before {
        box-shadow: 0 0 0 var(--spectrum-colorslider-border-size, var(--spectrum-alias-border-size-thin)) var(--spectrum-colorslider-border-color-disabled, var(--spectrum-global-color-gray-300));
      }

.spectrum-ColorSlider.is-disabled .spectrum-ColorSlider-gradient {
      display: none
    }

@media (forced-colors: active) {
  .spectrum-ColorSlider {
    --spectrum-colorslider-border-color-disabled : GrayText;
    --spectrum-colorslider-fill-color-disabled : Canvas;
  }
  .spectrum-ColorSlider {
    forced-color-adjust: none;
  }
}