/*!
 * 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";
@import "@spectrum-css/commons/basebutton.css";

/* Windows high contrast mode */
@media (forced-colors: active) {
	.spectrum-CloseButton {
		--highcontrast-closebutton-icon-color-disabled: GrayText;
		--highcontrast-closebutton-icon-color-down: Highlight;
		--highcontrast-closebutton-icon-color-hover: Highlight;
		--highcontrast-closebutton-icon-color-focus: Highlight;
		--highcontrast-closebutton-background-color-default: ButtonFace;
		--highcontrast-closebutton-focus-indicator-color: ButtonText;

		&:focus-visible {
			&::after {
				forced-color-adjust: none;
				margin: var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap));
				transition:
					opacity var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-out,
					margin var(--mod-closebutton-animation-duraction, var(--spectrum-closebutton-animation-duration)) ease-out;
			}
		}
	}

	.spectrum-CloseButton--staticBlack {
		--highcontrast-closebutton-static-background-color-default: ButtonFace;
		--highcontrast-closebutton-icon-color-default: Highlight;
		--highcontrast-closebutton-icon-color-disabled: GrayText;
	}

	.spectrum-CloseButton--staticWhite {
		--highcontrast-closebutton-static-background-color-default: ButtonFace;
		--highcontrast-closebutton-icon-color-default: Highlight;
		--highcontrast-closebutton-icon-color-disabled: Highlight;
	}
}

.spectrum-CloseButton {
	/* Cross icon */
	--spectrum-closebutton-icon-color-default: var(--spectrum-neutral-content-color-default);
	--spectrum-closebutton-icon-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-closebutton-icon-color-down: var(--spectrum-neutral-content-color-down);
	--spectrum-closebutton-icon-color-focus: var(--spectrum-neutral-content-color-key-focus);
	--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-content-color);

	/* Focus ring */
	--spectrum-closebutton-focus-indicator-thickness: var(--spectrum-focus-indicator-thickness);
	--spectrum-closebutton-focus-indicator-gap: var(--spectrum-focus-indicator-gap);
	--spectrum-closebutton-focus-indicator-color: var(--spectrum-focus-indicator-color);

	--spectrum-closebutton-animation-duration: var(--spectrum-animation-duration-100);

	&.spectrum-CloseButton--sizeS {
		--spectrum-closebutton-size: var(--spectrum-component-height-75);
		--spectrum-closebutton-border-radius: var(--spectrum-component-height-75);
	}

	&,
	&.spectrum-CloseButton--sizeM {
		--spectrum-closebutton-size: var(--spectrum-component-height-100);
		--spectrum-closebutton-border-radius: var(--spectrum-component-height-100);
	}

	&.spectrum-CloseButton--sizeL {
		--spectrum-closebutton-size: var(--spectrum-component-height-200);
		--spectrum-closebutton-border-radius: var(--spectrum-component-height-200);
	}

	&.spectrum-CloseButton--sizeXL {
		--spectrum-closebutton-size: var(--spectrum-component-height-300);
		--spectrum-closebutton-border-radius: var(--spectrum-component-height-300);
	}

	&.spectrum-CloseButton--staticWhite {
		--spectrum-closebutton-static-background-color-default: transparent;

		--spectrum-closebutton-icon-color-default: var(--spectrum-white);
		--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-white-content-color);
		--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-white-focus-indicator-color);
	}

	&.spectrum-CloseButton--staticBlack {
		--spectrum-closebutton-static-background-color-default: transparent;

		--spectrum-closebutton-icon-color-default: var(--spectrum-black);
		--spectrum-closebutton-icon-color-disabled: var(--spectrum-disabled-static-black-content-color);
		--spectrum-closebutton-focus-indicator-color: var(--spectrum-static-black-focus-indicator-color);
	}

	@extend %spectrum-BaseButton;

	block-size: var(--mod-closebutton-height, var(--spectrum-closebutton-size));
	inline-size: var(--mod-closebutton-width, var(--mod-closebutton-height, var(--spectrum-closebutton-size)));

	position: relative;

	color: inherit;

	border-color: transparent;
	border-radius: var(--mod-closebutton-border-radius, var(--spectrum-closebutton-border-radius));
	border-width: 0;

	justify-content: center;
	align-items: center;
	flex-direction: row;
	display: inline-flex;
	padding: 0;

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

	margin-inline: var(--mod-closebutton-margin-inline);
	margin-block-start: var(--mod-closebutton-margin-top);
	align-self: var(--mod-closebutton-align-self);

	/* Represents focus ring */
	&::after {
		pointer-events: none;
		content: "";
		position: absolute;
		inset-inline-start: 0;
		inset-inline-end: 0;
		inset-block-end: 0;
		inset-block-start: 0;
		margin: calc(var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)) * -1);
		border-radius: calc(var(--mod-closebutton-size, var(--spectrum-closebutton-size)) + var(--mod-closebutton-focus-indicator-gap, var(--spectrum-closebutton-focus-indicator-gap)));
		transition: box-shadow var(--mod-closebutton-animation-duration, var(--spectrum-closebutton-animation-duration)) ease-in-out;
	}

	&:focus-visible {
		box-shadow: none;
		outline: none;

		&::after {
			box-shadow: 0 0 0 var(--mod-closebutton-focus-indicator-thickness, var(--spectrum-closebutton-focus-indicator-thickness)) var(--highcontrast-closebutton-focus-indicator-color, var(--mod-closebutton-focus-indicator-color, var(--spectrum-closebutton-focus-indicator-color)));
		}
	}

	&:not(:disabled) {
		background-color: var(--highcontrast-closebutton-background-color-default, var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default)));

		&:hover {
			background-color: var(--mod-closebutton-background-color-hover, var(--spectrum-closebutton-background-color-hover));

			.spectrum-CloseButton-UIIcon {
				color: var(--highcontrast-closebutton-icon-color-hover, var(--mod-closebutton-icon-color-hover, var(--spectrum-closebutton-icon-color-hover)));
			}
		}

		&:active {
			background-color: var(--mod-closebutton-background-color-down, var(--spectrum-closebutton-background-color-down));

			.spectrum-CloseButton-UIIcon {
				color: var(--highcontrast-closebutton-icon-color-down, var(--mod-closebutton-icon-color-down, var(--spectrum-closebutton-icon-color-down)));
			}
		}

		&:focus-visible,
		&.is-keyboardFocused {
			background-color: var(--mod-closebutton-background-color-focus, var(--spectrum-closebutton-background-color-focus));

			.spectrum-CloseButton-UIIcon {
				color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
			}
		}

		.spectrum-CloseButton-UIIcon {
			color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
		}

		&:focus,
		&.is-focused {
			.spectrum-CloseButton-UIIcon {
				color: var(--highcontrast-closebutton-icon-color-focus, var(--mod-closebutton-icon-color-focus, var(--spectrum-closebutton-icon-color-focus)));
			}
		}
	}

	&:disabled {
		background-color: var(--mod-closebutton-background-color-default, var(--spectrum-closebutton-background-color-default));

		.spectrum-CloseButton-UIIcon {
			color: var(--highcontrast-closebutton-icon-color-disabled, var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled)));
		}
	}
}

a.spectrum-CloseButton {
	@extend %spectrum-AnchorButton;
}

/* Modifier Classes */
.spectrum-CloseButton--staticBlack:not(:disabled),
.spectrum-CloseButton--staticWhite:not(:disabled) {
	background-color: var(--highcontrast-closebutton-static-background-color-default, var(--mod-closebutton-static-background-color-default, var(--spectrum-closebutton-static-background-color-default)));

	&:hover {
		background-color: var(--mod-closebutton-static-background-color-hover, var(--spectrum-closebutton-static-background-color-hover));

		.spectrum-CloseButton-UIIcon {
			color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
		}
	}

	&:active {
		background-color: var(--mod-closebutton-static-background-color-down, var(--spectrum-closebutton-static-background-color-down));

		.spectrum-CloseButton-UIIcon {
			color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
		}
	}

	&:focus-visible,
	&.is-keyboardFocused {
		background-color: var(--mod-closebutton-static-background-color-focus, var(--spectrum-closebutton-static-background-color-focus));

		.spectrum-CloseButton-UIIcon {
			color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
		}
	}

	&:focus,
	&.is-focused {
		.spectrum-CloseButton-UIIcon {
			color: var(--highcontrast-closebutton-icon-color-default, var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default)));
		}
	}

	.spectrum-CloseButton-UIIcon {
		color: var(--mod-closebutton-icon-color-default, var(--spectrum-closebutton-icon-color-default));
	}
}

.spectrum-CloseButton--staticBlack:disabled,
.spectrum-CloseButton--staticWhite:disabled {
	.spectrum-CloseButton-UIIcon {
		color: var(--mod-closebutton-icon-color-disabled, var(--spectrum-closebutton-icon-color-disabled));
	}
}

.spectrum-CloseButton-UIIcon {
	margin: 0;
}
