/*!
 * 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-InfieldButton {
	/* Medium size is the default */
	--spectrum-infield-button-height: var(--spectrum-component-height-100);
	--spectrum-infield-button-width: var(--spectrum-component-height-100);
	--spectrum-infield-button-stacked-border-radius-reset: var(--spectrum-in-field-button-fill-stacked-inner-border-rounding);

	--spectrum-infield-button-edge-to-fill: var(--spectrum-in-field-button-edge-to-fill);
	--spectrum-infield-button-inner-edge-to-fill: var(--spectrum-in-field-button-stacked-inner-edge-to-fill);
	--spectrum-infield-button-fill-padding: 0px;
	--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-medium);
	--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-medium);
	--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-medium);

	--spectrum-infield-button-icon-color: var(--spectrum-neutral-content-color-default);
	--spectrum-infield-button-icon-color-hover: var(--spectrum-neutral-content-color-hover);
	--spectrum-infield-button-icon-color-down: var(--spectrum-neutral-content-color-down);
	--spectrum-infield-button-icon-color-key-focus: var(--spectrum-neutral-content-color-key-focus);

	--spectrum-infield-button-fill-justify-content: center;

	&:disabled {
		--mod-infield-button-background-color: var(--mod-infield-button-background-color-disabled, var(--spectrum-disabled-background-color));
		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-disabled, var(--spectrum-disabled-background-color));
		--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-disabled, var(--spectrum-disabled-background-color));

		--mod-infield-button-border-color: var(--mod-infield-button-border-color-disabled, var(--spectrum-infield-button-border-color));

		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-disabled, var(--spectrum-disabled-content-color));
		--mod-infield-button-icon-color-hover: var(--mod-infield-button-icon-color-hover-disabled, var(--spectrum-disabled-content-color));
		--mod-infield-button-icon-color-down: var(--mod-infield-button-icon-color-down-disabled, var(--spectrum-disabled-content-color));
		--mod-infield-button-icon-color-key-focus: var(--mod-infield-button-icon-color-key-focus-disabled, var(--spectrum-disabled-content-color));
	}

	&.spectrum-InfieldButton--sizeS {
		--spectrum-infield-button-height: var(--spectrum-component-height-75);
		--spectrum-infield-button-width: var(--spectrum-component-height-75);
		--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-small);
		--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-small);
		--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-small);
	}

	&.spectrum-InfieldButton--sizeL {
		--spectrum-infield-button-height: var(--spectrum-component-height-200);
		--spectrum-infield-button-width: var(--spectrum-component-height-200);
		--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-large);
		--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-large);
		--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-large);
	}

	&.spectrum-InfieldButton--sizeXL {
		--spectrum-infield-button-height: var(--spectrum-component-height-300);
		--spectrum-infield-button-width: var(--spectrum-component-height-300);
		--spectrum-infield-button-stacked-fill-padding-inline: var(--spectrum-in-field-button-edge-to-disclosure-icon-stacked-extra-large);
		--spectrum-infield-button-stacked-fill-padding-outer: var(--spectrum-in-field-button-outer-edge-to-disclosure-icon-stacked-extra-large);
		--spectrum-infield-button-stacked-fill-padding-inner: var(--spectrum-in-field-button-inner-edge-to-disclosure-icon-stacked-extra-large);
	}

	&.spectrum-InfieldButton--top,
	&.spectrum-InfieldButton--bottom {
		--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-medium));

		&.spectrum-InfieldButton--sizeS {
			--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-small));
		}

		&.spectrum-InfieldButton--sizeL {
			--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-large));
		}

		&.spectrum-InfieldButton--sizeXL {
			--mod-infield-button-width: var(--mod-infield-button-width-stacked, var(--spectrum-in-field-button-width-stacked-extra-large));
		}
	}

	&.spectrum-InfieldButton--quiet {
		--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet, transparent);
		--mod-infield-button-background-color-hover: var(--mod-infield-button-background-color-hover-quiet, transparent);
		--mod-infield-button-background-color-down: var(--mod-infield-button-background-color-down-quiet, transparent);
		--mod-infield-button-background-color-key-focus: var(--mod-infield-button-background-color-key-focus-quiet, transparent);

		--mod-infield-border-color: var(--mod-infield-border-color-quiet, transparent);
		--mod-infield-button-border-width: var(--mod-infield-button-border-width-quiet, 0);

		&:disabled {
			--mod-infield-button-background-color: var(--mod-infield-button-background-color-quiet-disabled, transparent);
			--mod-infield-button-border-color: var(--mod-infield-button-border-color-quiet-disabled, transparent);
		}
	}

	&:hover {
		--mod-infield-button-background-color: var(--mod-infield-button-background-color-hover, var(--spectrum-infield-button-background-color-hover));
		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-hover, var(--spectrum-infield-button-icon-color-hover));
	}

	&:active {
		--mod-infield-button-background-color: var(--mod-infield-button-background-color-down, var(--spectrum-infield-button-background-color-down));
		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-down, var(--spectrum-infield-button-icon-color-down));
	}

	&:focus-visible {
		--mod-infield-button-background-color: var(--mod-infield-button-background-color-key-focus, var(--spectrum-infield-button-background-color-key-focus));
		--mod-infield-button-icon-color: var(--mod-infield-button-icon-color-key-focus, var(--spectrum-infield-button-icon-color-key-focus));
	}
}

@media (forced-colors: active) {
	.spectrum-InfieldButton {
		--highcontrast-infield-button-border-color: ButtonText;
		--highcontrast-infield-button-border-color-active: Highlight;

		&:disabled {
			--highcontrast-infield-button-border-color: inherit;
		}

		&:not(:disabled):hover,
		&:not(:disabled):active,
		&:not(:disabled):focus-visible {
			--highcontrast-infield-button-border-color: var(--highcontrast-infield-button-border-color-active);
		}
	}
}

.spectrum-InfieldButton {
	border-style: none;
	background-color: transparent;
	cursor: pointer;

	display: flex;
	justify-content: center;
	align-items: center;

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

	padding: var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill));

	&:disabled {
		cursor: auto;
	}

	&:focus-visible {
		outline: none;
	}

	/* Stacked in-field buttons */
	/* Not currently in use (stepper uses Action Buttons) but adding the CSS so the option is there */
	&.spectrum-InfieldButton--top,
	&.spectrum-InfieldButton--bottom {
		block-size: calc(var(--mod-infield-button-height, var(--spectrum-infield-button-height)) / 2);
	}

	&.spectrum-InfieldButton--top {
		padding-block-end: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
	}

	&.spectrum-InfieldButton--bottom {
		padding-block-start: var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill));
	}
}

.spectrum-InfieldButton-fill {
	block-size: 100%;
	inline-size: 100%;

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

	border-width: var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width));
	border-style: solid;
	border-color: var(--highcontrast-infield-button-border-color, var(--mod-infield-button-border-color, var(--spectrum-infield-button-border-color)));
	border-end-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
	border-start-end-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
	border-end-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));
	border-start-start-radius: var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius));

	padding: var(--mod-infield-button-fill-padding, var(--spectrum-infield-button-fill-padding));

	/* center icon */
	display: flex;
	align-items: center;
	justify-content: var(--mod-infield-button-fill-justify-content, var(--spectrum-infield-button-fill-justify-content));

	transition: border-color var(--spectrum-animation-duration-100) ease-in-out;

	.spectrum-InfieldButton--right & {
		border-end-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
		border-start-start-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
	}

	.spectrum-InfieldButton--left & {
		border-end-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
		border-start-end-radius: var(--mod-infield-button-border-radius-reset, var(--spectrum-infield-button-border-radius-reset));
	}

	.spectrum-InfieldButton--top &,
	.spectrum-InfieldButton--bottom & {
		box-sizing: border-box;
		padding-inline-start: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
		padding-inline-end: calc(var(--mod-infield-button-stacked-fill-padding-inline, var(--spectrum-infield-button-stacked-fill-padding-inline)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
	}

	.spectrum-InfieldButton--top & {
		padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
		padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)));
		border-block-end: none;
		border-start-start-radius: var(--mod-infield-button-stacked-top-border-radius-start-start, var(--spectrum-infield-button-stacked-top-border-radius-start-start));
		border-end-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
		border-end-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
	}

	.spectrum-InfieldButton--bottom & {
		padding-block-start: calc(var(--mod-infield-button-stacked-fill-padding-inner, var(--spectrum-infield-button-stacked-fill-padding-inner)) - var(--mod-infield-button-edge-to-fill, var(--spectrum-infield-button-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
		padding-block-end: calc(var(--mod-infield-button-stacked-fill-padding-outer, var(--spectrum-infield-button-stacked-fill-padding-outer)) - var(--mod-infield-button-inner-edge-to-fill, var(--spectrum-infield-button-inner-edge-to-fill)) - var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
		border-end-start-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-start, var(--spectrum-infield-button-stacked-bottom-border-radius-end-start));
		border-start-start-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
		border-start-end-radius: var(--mod-infield-button-stacked-border-radius-reset, var(--spectrum-infield-button-stacked-border-radius-reset));
		border-end-end-radius: var(--mod-infield-button-stacked-bottom-border-radius-end-end, var(--mod-infield-button-border-radius, var(--spectrum-infield-button-border-radius)));
		border-block-end-width: var(--mod-infield-button-stacked-bottom-border-block-end-width, var(--mod-infield-button-border-width, var(--spectrum-infield-button-border-width)));
	}
}

.spectrum-InfieldButton-icon {
	display: initial;

	/* don't be small, ever */
	flex-shrink: 0;

	/* remove margin used for centering */
	margin: 0 !important;

	color: var(--mod-infield-button-icon-color, var(--spectrum-infield-button-icon-color));
}
