/*!
 * 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";

/*
 * Radio:
 *  ::before is to style the input circle (selection indicator)
 *  ::after is to style the focus ring
 */

.spectrum-Radio {
	/* state colors for all themes */
	--spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
	--spectrum-radio-neutral-content-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-radio-neutral-content-color-down: var(--spectrum-neutral-content-color-down);
	--spectrum-radio-neutral-content-color-focus: var(--spectrum-neutral-content-color-key-focus);

	/* focus ring all themes */
	--spectrum-radio-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
	--spectrum-radio-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
	--spectrum-radio-focus-indicator-color: var(--spectrum-focus-indicator-color);

	/* disabled all themes */
	--spectrum-radio-disabled-content-color: var(--spectrum-disabled-content-color);
	--spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);

	/* emphasized state colors selection indicator all themes */
	--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
	--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
	--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
	--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);

	/* selection indicator all themes */
	--spectrum-radio-border-width: var(--spectrum-border-width-200);

	/* checked selection indicator */
	--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
	--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
	--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
	--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);

	--spectrum-radio-line-height: var(--spectrum-line-height-100);

	/* animation all themes */
	--spectrum-radio-animation-duration: var(--spectrum-animation-duration-100);

	/* CJK language support all themes */
	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		--spectrum-radio-line-height-cjk: var(--spectrum-cjk-line-height-100);
	}
}

.spectrum-Radio,
.spectrum-Radio--sizeM {
	--spectrum-radio-height: var(--spectrum-component-height-100);
	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-medium);

	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-100);
	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-100);
	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-100);
	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);

	--spectrum-radio-font-size: var(--spectrum-font-size-100);
}

.spectrum-Radio--sizeS {
	--spectrum-radio-height: var(--spectrum-component-height-75);
	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-small);

	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-75);
	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-75);
	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-75);
	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-small);

	--spectrum-radio-font-size: var(--spectrum-font-size-75);
}

.spectrum-Radio--sizeL {
	--spectrum-radio-height: var(--spectrum-component-height-200);
	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-large);

	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-200);
	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-200);
	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-200);
	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-large);

	--spectrum-radio-font-size: var(--spectrum-font-size-200);
}

.spectrum-Radio--sizeXL {
	--spectrum-radio-height: var(--spectrum-component-height-300);
	--spectrum-radio-button-control-size: var(--spectrum-radio-button-control-size-extra-large);

	--spectrum-radio-text-to-control: var(--spectrum-text-to-control-300);
	--spectrum-radio-label-top-to-text: var(--spectrum-component-top-to-text-300);
	--spectrum-radio-label-bottom-to-text: var(--spectrum-component-bottom-to-text-300);
	--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-extra-large);

	--spectrum-radio-font-size: var(--spectrum-font-size-300);
}

/* windows high contrast mode */
@media (forced-colors: active) {
	.spectrum-Radio {
		/* high contrast text */
		--highcontrast-radio-neutral-content-color: CanvasText;
		--highcontrast-radio-neutral-content-color-hover: CanvasText;
		--highcontrast-radio-neutral-content-color-down: CanvasText;
		--highcontrast-radio-neutral-content-color-focus: CanvasText;

		/* high contrast selector */
		--highcontrast-radio-button-border-color-default: ButtonText;
		--highcontrast-radio-button-border-color-hover: Highlight;
		--highcontrast-radio-button-border-color-down: ButtonText;
		--highcontrast-radio-button-border-color-focus: Highlight;

		/* high contrast emphasized selector */
		--highcontrast-radio-emphasized-accent-color: ButtonText;
		--highcontrast-radio-emphasized-accent-color-hover: Highlight;
		--highcontrast-radio-emphasized-accent-color-down: ButtonText;
		--highcontrast-radio-emphasized-accent-color-focus: Highlight;

		/* high contrast checked selector */
		--highcontrast-radio-button-checked-border-color-default: Highlight;
		--highcontrast-radio-button-checked-border-color-hover: Highlight;
		--highcontrast-radio-button-checked-border-color-down: Highlight;
		--highcontrast-radio-button-checked-border-color-focus: Highlight;

		/* high contrast disabled text */
		--highcontrast-radio-disabled-content-color: GrayText;

		/* high contrast disabled selector */
		--highcontrast-radio-disabled-border-color: GrayText;

		/* high contrast focus ring */
		--highcontrast-radio-focus-indicator-color: CanvasText;

		/* ensure focus ring is visible if user agent has non-accessible system overrides */
		.spectrum-Radio-button {
			&::after {
				forced-color-adjust: none;
			}
		}
	}
}

.spectrum-Radio {
	display: inline-flex;
	align-items: flex-start;
	position: relative;
	vertical-align: top;

	min-block-size: var(--mod-radio-height, var(--spectrum-radio-height));
	max-inline-size: 100%;

	&:hover {
		/* selection indicator hover */
		.spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-border-color-hover, var(--mod-radio-button-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
		}

		/* checked selection indicator hover */
		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
		}

		.spectrum-Radio-label {
			color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
		}
	}

	&:active {
		/* selection indicator active */
		.spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
		}

		/* checked selection indicator active */
		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
		}

		.spectrum-Radio-label {
			color: var(--highcontrast-radio-neutral-content-color-down, var(--mod-radio-neutral-content-color-down, var(--spectrum-radio-neutral-content-color-down)));
		}
	}

	&:focus {
		/* selection indicator is focused state */
		.spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-border-color-focus, var(--mod-radio-button-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
		}

		/* focus ring is focused state */
		.spectrum-Radio-button::after {
			border-style: solid;
			border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
			border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));

			inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
			block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
		}

		/* selected selection indicator is focused state */
		.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
			border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
		}

		.spectrum-Radio-label {
			color: var(--highcontrast-radio-neutral-content-color-focus, var(--mod-radio-neutral-content-color-focus, var(--spectrum-radio-neutral-content-color-focus)));
		}
	}

	&.is-readOnly {
		.spectrum-Radio-input {
			pointer-events: none;
		}

		.spectrum-Radio-label,
		/* ensure disabled readonly has normal text color */
		& .spectrum-Radio-input:disabled ~ .spectrum-Radio-label,
		& .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label {
			color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
		}
	}
}

.spectrum-Radio--emphasized {
	/* selection indicator emphasized */
	.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
		border-color: var(--highcontrast-radio-emphasized-accent-color, var(--mod-radio-emphasized-accent-color, var(--spectrum-radio-emphasized-accent-color)));
	}

	/* selection indicator emphasized hover */
	&:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
		border-color: var(--highcontrast-radio-emphasized-accent-color-hover, var(--mod-radio-emphasized-accent-color-hover, var(--spectrum-radio-emphasized-accent-color-hover)));
	}

	/* selection indicator emphasized active */
	&:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
		border-color: var(--highcontrast-radio-emphasized-accent-color-down, var(--mod-radio-emphasized-accent-color-down, var(--spectrum-radio-emphasized-accent-color-down)));
	}

	/* selection indicator emphasized focus */
	&:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
		border-color: var(--highcontrast-radio-emphasized-accent-color-focus, var(--mod-radio-emphasized-accent-color-focus, var(--spectrum-radio-emphasized-accent-color-focus)));
	}
}

/* Disabled state */
.spectrum-Radio .spectrum-Radio-input:disabled,
.spectrum-Radio .spectrum-Radio-input:checked:disabled {
	/* selection indicator */
	& + .spectrum-Radio-button::before {
		border-color: var(--highcontrast-radio-disabled-border-color, var(--mod-radio-disabled-border-color, var(--spectrum-radio-disabled-border-color)));
	}

	& ~ .spectrum-Radio-label {
		color: var(--highcontrast-radio-disabled-content-color, var(--mod-radio-disabled-content-color, var(--spectrum-radio-disabled-content-color)));
	}
}

.spectrum-Radio-input {
	/* Change the font styles in all browsers for input. */
	font-family: inherit;
	font-size: 100%;
	line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));

	/* Remove the margin for input in Firefox and Safari. */
	margin: 0;

	/* Show the overflow for input in Edge. */
	overflow: visible;

	/* Add the correct box sizing for [type="radio"] in IE 10-. */
	box-sizing: border-box;

	/* Remove the padding for [type="radio"] in IE 10-. */
	padding: 0;

	position: absolute;
	inline-size: 100%;
	block-size: 100%;

	opacity: 0;
	z-index: 1;

	cursor: pointer;

	&:disabled {
		cursor: default;
	}

	/* selection indicator checked */
	&:checked + .spectrum-Radio-button {
		&::before {
			/* half of element width minus half of indicator width is checked border width */
			border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
			border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
		}
	}

	/* focused state */
	&:focus-visible {
		+ .spectrum-Radio-button::after {
			border-width: var(--mod-radio-focus-indicator-thickness, var(--spectrum-radio-focus-indicator-thickness));
			border-color: var(--highcontrast-radio-focus-indicator-color, var(--mod-radio-focus-indicator-color, var(--spectrum-radio-focus-indicator-color)));
			border-style: solid;

			inline-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
			block-size: calc(var(--spectrum-radio-button-control-size) + (var(--spectrum-radio-focus-indicator-gap) * 2));
		}
	}
}

.spectrum-Radio-label {
	text-align: start;
	margin-inline-start: var(--mod-radio-text-to-control, var(--spectrum-radio-text-to-control));
	margin-block-start: var(--spectrum-radio-label-top-to-text);
	margin-block-end: var(--spectrum-radio-label-bottom-to-text);

	font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));

	/* TODO: font weight and style tokens */
	/* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
	/* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
	color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
	line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));

	transition: color var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;

	/* CJK language support */
	&:lang(ja),
	&:lang(zh),
	&:lang(ko) {
		line-height: var(--mod-radio-line-height-cjk, var(--spectrum-radio-line-height-cjk));
	}
}

.spectrum-Radio-button {
	position: relative;
	box-sizing: border-box;
	inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
	block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
	margin-block-start: var(--mod-radio-button-top-to-control, var(--spectrum-radio-button-top-to-control));

	flex-grow: 0;
	flex-shrink: 0;

	/* selection indicator unchecked */
	&::before {
		display: block;
		z-index: 0;
		content: "";
		box-sizing: border-box;
		position: absolute;

		inline-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));
		block-size: var(--mod-radio-button-control-size, var(--spectrum-radio-button-control-size));

		background-color: var(--mod-radio-button-background-color, var(--spectrum-radio-button-background-color));

		border-radius: 50%;
		border-width: var(--mod-radio-border-width, var(--spectrum-radio-border-width));
		border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-button-border-color-default, var(--spectrum-radio-button-border-color-default)));
		border-style: solid;

		transition:
			border var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out,
			box-shadow var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-in-out;
	}

	/* focus ring is not focused state */
	&::after {
		border-radius: 50%;

		content: "";
		display: block;
		position: absolute;
		inset-inline-start: 50%;
		inset-block-start: 50%;
		transform: translateX(-50%) translateY(-50%);

		transition:
			opacity var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out,
			margin var(--mod-radio-animation-duration, var(--spectrum-radio-animation-duration)) ease-out;

		.spectrum-Radio:dir(rtl) & {
			transform: translateX(50%) translateY(-50%);
		}
	}
}