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

@import "./themes/spectrum-two.css";

.spectrum-Dial {
	--spectrum-dial-handle-marker-color: var(--spectrum-gray-700);
	--spectrum-dial-border-color: var(--spectrum-gray-700);

	--spectrum-dial-handle-marker-color-hover: var(--spectrum-gray-800);
	--spectrum-dial-border-color-hover: var(--spectrum-gray-800);

	--spectrum-dial-handle-marker-color-mouse-focus: var(--spectrum-gray-700);

	--spectrum-dial-min-max-tick-color: var(--spectrum-gray-600);

	--spectrum-dial-label-text-color: var(--spectrum-gray-700);
	--spectrum-dial-label-text-color-disabled: var(--spectrum-gray-700);
	--spectrum-dial-handle-border-color-disabled: var(--spectrum-gray-400);

	--spectrum-dial-container-width: 48px;

	--spectrum-dial-handle-marker-width: 12px;
	--spectrum-dial-handle-marker-height: 2px;

	--spectrum-dial-handle-marker-border-radius: 1px;

	--spectrum-dial-handle-size: 100%;
	--spectrum-dial-min-height: 0;
	--spectrum-dial-controls-min-height: 0;

	--spectrum-dial-min-max-tick-angles: 45deg;

	--spectrum-dial-width: 32px;
	--spectrum-dial-height: 32px;

	--spectrum-dial-handle-border-size: var(--spectrum-border-width-200);
	--spectrum-dial-label-text-size: var(--spectrum-font-size-75);
	--spectrum-dial-label-line-height: var(--spectrum-line-height-200);

	&.spectrum-Dial--small {
		--spectrum-dial-width: 24px;
		--spectrum-dial-height: 24px;
	}

	position: relative;

	/* Don't let z-index'd child elements float above other things on the page */
	z-index: 1;
	user-select: none;
	display: inline-flex;
	flex-direction: column;
	block-size: auto;
	min-inline-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
	min-block-size: var(--mod-dial-min-height, var(--spectrum-dial-min-height));
	inline-size: var(--mod-dial-container-width, var(--spectrum-dial-container-width));

	&.is-disabled {
		.spectrum-Dial-labelContainer {
			color: var(--highcontrast-dial-label-text-color-disabled, var(--mod-dial-label-text-color-disabled, var(--spectrum-dial-label-text-color-disabled)));
		}

		.spectrum-Dial-controls {
			&::after,
			&::before {
				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
			}
		}

		.spectrum-Dial-handle {
			cursor: default;
			border-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
			background: var(--mod-dial-background-color-default, var(--spectrum-dial-background-color-default));

			&::after,
			&::before {
				background-color: var(--highcontrast-dial-handle-border-color-disabled, var(--mod-dial-handle-border-color-disabled, var(--spectrum-dial-handle-border-color-disabled)));
			}
		}
	}
}

.spectrum-Dial-label {
	padding-inline-start: 0;
	flex-grow: 1;

	&:only-child {
		/* Only center if we don't have a value */
		text-align: center;
	}
}

.spectrum-Dial-value {
	flex-grow: 0;
	padding-inline-end: 0;
	cursor: default;
}

.spectrum-Dial-labelContainer {
	color: var(--mod-dial-label-text-color, var(--spectrum-dial-label-text-color));
	display: flex;
	position: relative;
	inline-size: auto;
	padding-block-start: var(--mod-dial-label-container-top-to-text, var(--spectrum-dial-label-container-top-to-text));
	font-size: var(--mod-dial-label-text-size, var(--spectrum-dial-label-text-size));
	line-height: var(--mod-dial-label-line-height, var(--spectrum-dial-label-line-height));
	margin-block-end: var(--mod-dial-label-gap-y, var(--spectrum-dial-label-gap-y));
}

.spectrum-Dial-controls {
	display: inline-block;
	box-sizing: border-box;

	position: relative;
	z-index: auto;

	vertical-align: top;

	inline-size: var(--mod-dial-width, var(--spectrum-dial-width));
	block-size: var(--mod-dial-height, var(--spectrum-dial-height));
	min-block-size: var(--mod-dial-controls-min-height, var(--spectrum-dial-controls-min-height));
	margin-inline-start: var(--mod-dial-controls-margin, var(--spectrum-dial-controls-margin));

	border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
	margin-block: 0;

	outline: none;

	&::before,
	&::after {
		background-color: var(--highcontrast-dial-min-max-tick-color, var(--mod-dial-min-max-tick-color, var(--spectrum-dial-min-max-tick-color)));
		content: "";
		inline-size: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * 2);
		block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
		border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
		position: absolute;
		inset-block-end: 0;
	}

	&::before {
		inset-inline-start: auto;
		inset-inline-end: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
		transform: rotate(var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles)));
	}

	&::after {
		inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
		transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
	}
}

.spectrum-Dial-handle {
	box-shadow: none;
	border-color: var(--highcontrast-dial-border-color, var(--mod-dial-border-color, var(--spectrum-dial-border-color)));
	position: absolute;
	z-index: 2;
	display: inline-block;
	box-sizing: border-box;

	/* large 20px, med 16px */

	margin-block: calc(var(--mod-dial-handle-block-margin, var(--spectrum-dial-handle-block-margin)) / -2) 0;
	margin-inline: calc(var(--mod-dial-handle-inline-margin, var(--spectrum-dial-handle-inline-margin)) / -2) 0;

	outline: none;

	inline-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
	block-size: var(--mod-dial-handle-size, var(--spectrum-dial-handle-size));
	border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
	border-style: solid;
	inset-block-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
	inset-inline-start: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
	inset-inline-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
	inset-block-end: var(--mod-dial-handle-position, var(--spectrum-dial-handle-position));
	border-radius: var(--mod-dial-border-radius, var(--spectrum-dial-border-radius));
	transform: rotate(calc(-1 * var(--mod-dial-min-max-tick-angles, var(--spectrum-dial-min-max-tick-angles))));
	cursor: grab;

	&::before {
		display: none;
	}

	&::after {
		content: "";
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: calc(var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height)) * -1);
		inline-size: var(--mod-dial-handle-marker-width, var(--spectrum-dial-handle-marker-width));
		block-size: var(--mod-dial-handle-marker-height, var(--spectrum-dial-handle-marker-height));
		border-radius: var(--mod-dial-handle-marker-border-radius, var(--spectrum-dial-handle-marker-border-radius));
		transform: translateY(-50%);
		background-color: var(--highcontrast-dial-handle-marker-color, var(--mod-dial-handle-marker-color, var(--spectrum-dial-handle-marker-color)));
	}

	&:active,
	&:focus-visible,
	&:focus-within,
	&.is-dragged {
		border-width: var(--mod-dial-handle-border-size, var(--spectrum-dial-handle-border-size));
		cursor: ns-resize;
		cursor: grabbing;
	}

	&:hover {
		border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));

		&::after {
			background-color: var(--highcontrast-dial-handle-marker-color-hover, var(--mod-dial-handle-marker-color-hover, var(--spectrum-dial-handle-marker-color-hover)));
		}
	}

	&:focus-visible,
	&:focus-within {
		background-color: var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus));
		border-color: var(--mod-dial-handle-marker-color-mouse-focus, var(--spectrum-dial-handle-marker-color-mouse-focus));

		&::after {
			background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
		}
	}

	&:active,
	&.is-dragged {
		background-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));
		border-color: var(--highcontrast-dial-border-color-hover, var(--mod-dial-border-color-hover, var(--spectrum-dial-border-color-hover)));

		&::after {
			background-color: var(--highcontrast-dial-handle-marker-color-key-focus, var(--mod-dial-handle-marker-color-key-focus, var(--spectrum-dial-handle-marker-color-key-focus)));
		}
	}
}

/**
 * The input is visually hidden (with opacity), and remains accessible using assistive tech.
 * It is still sized and positioned where it would naturally be present so that touch users can find it with haptics.
 */
.spectrum-Dial-input {
	/*  Remove the margin for input in Firefox and Safari. */
	margin: 0;
	padding: 0;
	position: absolute;
	overflow: hidden;
	opacity: 0;
	cursor: default;
	appearance: none;
	border: 0;
	pointer-events: none;
	inline-size: var(--spectrum-dial-handle-size);
	block-size: var(--spectrum-dial-handle-size);
	inset-inline-start: 0;
	inset-block-start: 0;

	&:focus {
		outline: none;
	}
}

/* @deprecated .u- prefixed states are a legacy implementation still supported */
.u-isGrabbing {
	cursor: ns-resize;
	/* stylelint-disable-next-line -- required for webkit cursor grab/grabbing support */
	cursor: -webkit-grabbing;
	cursor: grabbing;

	user-select: none;

	.spectrum-Dial {
		.spectrum-Dial-label,
		.spectrum-Dial-value {
			cursor: inherit;
		}
	}
}

@media (forced-colors: active) {
	.spectrum-Dial {
		--highcontrast-dial-min-max-tick-color: Highlight;
		--highcontrast-dial-border-color: Highlight;
		--highcontrast-dial-handle-marker-color: Highlight;
		--highcontrast-dial-border-color-hover: Highlight;
		--highcontrast-dial-handle-marker-color-hover: Highlight;
		--highcontrast-dial-handle-marker-color-key-focus: HighlightText;
		--highcontrast-dial-label-text-color-disabled: GrayText;
		--highcontrast-dial-handle-border-color-disabled: GrayText;
	}
}
