:root {
  /* todo: fix this in DNA */
  --spectrum-colorslider-border-color: var(--spectrum-colorarea-border-color);
}

.spectrum-ColorSlider {
  background-color: var(--spectrum-global-color-static-white);
  box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color);

  &:before {
    /* Add a half-percent to fix diagonal line issue in Chrome on non-retina displays */
    background-image:
      linear-gradient(-45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
      linear-gradient(45deg, transparent 75.5%, var(--spectrum-global-color-static-gray-500) 75.5%),
      linear-gradient(-45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%),
      linear-gradient(45deg, var(--spectrum-global-color-static-gray-500) 25.5%, transparent 25.5%);
  }

  &.is-disabled {
    background: var(--spectrum-colorslider-fill-color-disabled) !important;
    box-shadow: inset 0 0 0 var(--spectrum-colorslider-border-size) var(--spectrum-colorslider-border-color-disabled);
  }

  .spectrum-ColorSlider-handle {
    margin: 0;
  }
}