.spectrum-ColorWheel {
  --spectrum-colorwheel-border-radius: 100%;
  --spectrum-colorwheel-width: calc(var(--spectrum-global-dimension-size-125) * 16);
  --spectrum-colorwheel-height: var(--spectrum-colorwheel-width);
}

.spectrum-ColorWheel.is-focused .spectrum-ColorWheel-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-ColorWheel-slider {
  opacity: 0.0001;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  margin: 0;
  pointer-events: none;
}

.spectrum-ColorWheel {
  position: relative;
  display: block;
  width: var(--spectrum-colorwheel-width);
  height: var(--spectrum-colorwheel-height);

  border-radius: var(--spectrum-colorwheel-border-radius);

  -webkit-user-select: none;

     -moz-user-select: none;

      -ms-user-select: none;

          user-select: none;
  cursor: default;
}

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

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

.spectrum-ColorWheel.is-dragged {
    z-index: 2;
  }

.spectrum-ColorWheel-gradient {
  position: relative;
  z-index: 0;
  width: var(--spectrum-colorwheel-width);
  height: var(--spectrum-colorwheel-height);
  border-radius: 100%;
  box-sizing: border-box;

  border-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
  border-style: solid;
}

.spectrum-ColorWheel-wheel {
  position: relative;
  z-index: 1;
}

.spectrum-ColorWheel-outerCircle,
.spectrum-ColorWheel-innerCircle {
  fill: transparent;

  stroke-width: var(--spectrum-colorwheel-border-size, var(--spectrum-alias-border-size-thin));
}

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

.spectrum-ColorWheel {
  --spectrum-colorwheel-border-color: var(--spectrum-colorarea-border-color);
}

.spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-outerCircle,
    .spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-innerCircle {
      stroke: var(--spectrum-colorwheel-border-color-disabled, var(--spectrum-global-color-gray-300));
    }

.spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-outerCircle {
      fill: var(--spectrum-colorwheel-fill-color-disabled, var(--spectrum-global-color-gray-300));
    }

.spectrum-ColorWheel.is-disabled .spectrum-ColorWheel-segment {
      display: none;
    }

.spectrum-ColorWheel-gradient {
  border-color: var(--spectrum-colorwheel-border-color);
}

.spectrum-ColorWheel-outerCircle,
.spectrum-ColorWheel-innerCircle {
  stroke: var(--spectrum-colorwheel-border-color);
}

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