/*!
 * Copyright 2024 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.
 */

@media (forced-colors: active) {
	.spectrum-ColorHandle {
		forced-color-adjust: none;

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

.spectrum-ColorHandle {
	/* outer border as box shadow on the colorhandle */
	/* TODO replace --spectrum-black-rgb with color-handle-outer-border-color when supported by RGBA */
	--spectrum-colorhandle-outer-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-outer-border-opacity));
	--spectrum-colorhandle-outer-border-width: var(--spectrum-color-handle-outer-border-width);

	/* inner border as inset boxshadow on the colorhandle-inner */
	/* TODO replace --spectrum-black-rgb with color-handle-inner-border-color when supported by RGBA */
	--spectrum-colorhandle-inner-border-color: rgb(var(--spectrum-black-rgb), var(--spectrum-color-handle-inner-border-opacity));

	/* @passthrough -- opacity checkerboard customization */
	--mod-opacity-checkerboard-position: 50%;

	display: block;
	position: absolute;
	z-index: 1; /* Be above */
	box-sizing: border-box;
	inline-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));
	block-size: var(--mod-colorhandle-size, var(--spectrum-color-handle-size));

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

	border-width: var(--mod-colorhandle-border-width, var(--spectrum-color-handle-border-width));
	border-color: var(--mod-colorhandle-border-color, var(--spectrum-white));
	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-animation-duration-100)) var(--mod-colorhandle-animation-easing, ease-in-out);

	&::after {
		content: "";
		inset-inline: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
		inset-block: calc(50% - calc(var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width)) / 2));
		position: absolute;
		display: block;
		inline-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
		block-size: var(--mod-colorhandle-hitarea-size, var(--spectrum-color-control-track-width));
		border-radius: var(--mod-colorhandle-hitarea-border-radius, 100%);
	}

	&.is-focused,
	&:focus-visible {
		/* Bigger handle when focused */
		inline-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));
		block-size: var(--mod-colorhandle-focused-size, var(--spectrum-color-handle-size-key-focus));

		margin-inline: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
		margin-block: calc(-1 * var(--mod-colorhandle-size, var(--spectrum-color-handle-size)));
		outline: none;
	}

	&.is-disabled {
		pointer-events: none;
		border-color: var(--highcontrast-colorhandle-border-color-disabled, var(--mod-colorhandle-border-color-disabled, var(--spectrum-disabled-content-color)));
		background: var(--highcontrast-colorhandle-fill-color-disabled, var(--mod-colorhandle-fill-color-disabled, var(--spectrum-disabled-background-color)));
		box-shadow: none;

		.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-color-handle-inner-border-width)) var(--mod-colorhandle-inner-border-color, var(--spectrum-colorhandle-inner-border-color));
	background-color: var(--spectrum-picked-color);
}
