/*!
Copyright 2023 Adobe. All rights reserved.
This file is licensed to you under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License. You may obtain a copy
of the License at http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under
the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
OF ANY KIND, either express or implied. See the License for the specific language
governing permissions and limitations under the License.
*/
.spectrum-ColorHandle{
  --spectrum-colorhandle-size:var(--spectrum-color-handle-size);
  --spectrum-colorhandle-focused-size:var(--spectrum-color-handle-size-key-focus);
  --spectrum-colorhandle-hitarea-size:var(--spectrum-color-control-track-width);

  --spectrum-colorhandle-animation-duration:var(--spectrum-animation-duration-100);
  --spectrum-colorhandle-animation-easing:ease-in-out;
  --spectrum-colorhandle-outer-border-color:rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
  --spectrum-colorhandle-outer-border-width:var(--spectrum-color-handle-outer-border-width);
  --spectrum-colorhandle-inner-border-color:rgba(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));
  --spectrum-colorhandle-inner-border-width:var(--spectrum-color-handle-inner-border-width);
  --spectrum-colorhandle-border-width:var(--spectrum-color-handle-border-width);
  --spectrum-colorhandle-border-color:var(--spectrum-white);

	--spectrum-colorhandle-border-color-disabled:var(
		--spectrum-disabled-content-color
	);
	--spectrum-colorhandle-fill-color-disabled:var(
		--spectrum-disabled-background-color
	);
	--mod-opacity-checkerboard-position:50%;
}
.spectrum-ColorHandle{
  display:block;
  position:absolute;
  z-index:1;
  box-sizing:border-box;
  inline-size:var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));
  block-size:var(--mod-colorhandle-size, var(--spectrum-colorhandle-size));

  margin-inline:calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));
  margin-block:calc(-1 * calc(var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)) / 2));

  border-width:var(--mod-colorhandle-border-width, var(--spectrum-colorhandle-border-width));
  border-color:var(--highcontrast-colorhandle-border-color, var(--mod-colorhandle-border-color, var(--spectrum-colorhandle-border-color)));
  border-style:solid;

  box-shadow:0 0 0 var(--mod-colorhandle-outer-border-width, var(--spectrum-colorhandle-outer-border-width)) var(--mod-colorhandle-outer-border-color, var(--spectrum-colorhandle-outer-border-color));

  border-radius:100%;

  transition:all var(--mod-colorhandle-animation-duration, var(--spectrum-colorhandle-animation-duration)) var(--mod-colorhandle-animation-easing, var(--spectrum-colorhandle-animation-easing));
}
.spectrum-ColorHandle::after{
    content:'';
    inset-inline:calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
    inset-block:calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size)) / 2));
    position:absolute;
    display:block;
    inline-size:var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
    block-size:var(--mod-colorhandle-hitarea-size, var(--spectrum-colorhandle-hitarea-size));
    border-radius:var(--mod-colorhandle-hitarea-border-radius, 100%);
  }
.spectrum-ColorHandle.is-focused, .spectrum-ColorHandle:focus-visible,
.spectrum-ColorHandle.is-focus-visible{
      inline-size:var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));
      block-size:var(--mod-colorhandle-focused-size, var(--spectrum-colorhandle-focused-size));

      margin-inline:calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
      margin-block:calc(-1 * var(--mod-colorhandle-size, var(--spectrum-colorhandle-size)));
      outline:none;
  }
.spectrum-ColorHandle.is-disabled{
    pointer-events:none;
    border-color:var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-colorhandle-border-color-disabled)));
    background:var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-colorhandle-fill-color-disabled)));
    box-shadow:none;
  }
.spectrum-ColorHandle.is-disabled .spectrum-ColorHandle-inner{
      display:none;
    }
.spectrum-ColorHandle-inner{
  border-radius:100%;
  inline-size:100%;
  block-size:100%;
  box-shadow:inset 0 0 0 var(--mod-colorhandle-inner-border-width, var(--spectrum-colorhandle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
  background-color:var(--spectrum-picked-color);
}
@media (forced-colors: active){
  .spectrum-ColorHandle{
    forced-color-adjust:none;
  }

    .spectrum-ColorHandle.is-disabled{
      --highcontrast-colorhandle-border-color-disabled:GrayText;
      --highcontrast-colorhandle-fill-color-disabled:Canvas;
    }
}
