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

.spectrum-ColorLoupe {
	inline-size: var(--spectrum-color-loupe-width);
	block-size: var(--spectrum-color-loupe-height);

	position: absolute;
	transform: translate(0, var(--mod-colorloupe-animation-distance, 8px));
	opacity: 0;
	transform-origin: bottom center;
	inset-block-end: calc(var(--spectrum-color-handle-size) - var(--spectrum-color-handle-outer-border-width) + var(--mod-colorloupe-offset, var(--spectrum-color-loupe-bottom-to-color-handle)));
	inset-inline-end: calc(50% - var(--spectrum-color-loupe-width) / 2);

	transition:
		transform 100ms ease-in-out,
		opacity 125ms ease-in-out;
	pointer-events: none;

	filter: drop-shadow(var(--mod-colorloupe-drop-shadow-x, var(--spectrum-drop-shadow-x)) var(--mod-colorloupe-drop-shadow-y, var(--spectrum-color-loupe-drop-shadow-y)) var(--mod-colorloupe-drop-shadow-blur, var(--spectrum-color-loupe-drop-shadow-blur)) var(--mod-colorloupe-drop-shadow-color, var(--spectrum-color-loupe-drop-shadow-color)));

	&:dir(rtl) {
		inset-inline-end: calc(50% - (var(--spectrum-color-loupe-width) / 2) - 1px);
	}

	&.is-open {
		transform: translate(0, 0);
		opacity: 1;
	}

	&.is-disabled {
		opacity: 0;
	}
}

.spectrum-ColorLoupe-inner-border {
	fill: var(--spectrum-picked-color);
	stroke: var(--mod-colorloupe-inner-border-color, var(--spectrum-color-loupe-inner-border));
	stroke-width: var(--mod-colorloupe-inner-border-width, var(--spectrum-color-loupe-inner-border-width));
}

.spectrum-ColorLoupe-outer-border {
	fill: none;
	stroke: var(--highcontrast-colorloupe-outer-border-color, var(--mod-colorloupe-outer-border-color, var(--spectrum-color-loupe-outer-border)));
	stroke-width: calc(var(--mod-colorloupe-outer-border-width, var(--spectrum-color-loupe-outer-border-width)) + 2px);
}

/* The checkerboard classes use opacity checkerboard tokens for dark and light color.
 The opacity-checkerboard-square-size token is not able to be used witin the SVG pattern and instead colorloupe docs are using two different patterns toggled by --spectrum-colorloupe-checkerboard-fill */

.spectrum-ColorLoupe-checkerboard-pattern {
	fill: var(--spectrum-opacity-checkerboard-square-dark);
}

.spectrum-ColorLoupe-checkerboard-background {
	fill: var(--spectrum-opacity-checkerboard-square-light);
}

.spectrum-ColorLoupe-checkerboard-fill {
	fill: var(--spectrum-colorloupe-checkerboard-fill);
}

@media (forced-colors: active) {
	.spectrum-ColorLoupe {
		--highcontrast-colorloupe-outer-border-color: CanvasText;
	}
}
