/*!
 * 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-Tabs {
	/* Default is Medium sizing */
	--spectrum-tabs-item-height: var(--spectrum-tab-item-height-medium);
	--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-medium);
	--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-medium);
	--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-medium);
	--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-medium);
	--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-medium);

	--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-75);
	--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-100);
	--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-medium);

	--spectrum-tabs-color: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-tabs-color-selected: var(--spectrum-neutral-subdued-content-color-down);
	--spectrum-tabs-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
	--spectrum-tabs-color-key-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
	--spectrum-tabs-color-disabled: var(--spectrum-gray-500);

	--spectrum-tabs-font-family: var(--spectrum-sans-font-family-stack);
	--spectrum-tabs-font-style: var(--spectrum-default-font-style);
	--spectrum-tabs-font-size: var(--spectrum-font-size-100);
	--spectrum-tabs-line-height: var(--spectrum-line-height-100);

	/* Focus Indicator */
	--spectrum-tabs-focus-indicator-width: var(--spectrum-focus-indicator-thickness);
	--spectrum-tabs-focus-indicator-border-radius: var(--spectrum-corner-radius-100);
	--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-medium);
	--spectrum-tabs-focus-indicator-color: var(--spectrum-focus-indicator-color);
	--spectrum-tabs-selection-indicator-color: var(--spectrum-neutral-subdued-content-color-down);

	--spectrum-tabs-list-background-direction: top;
	--spectrum-tabs-divider-size: var(--spectrum-border-width-200);
	--spectrum-tabs-divider-border-radius: 1px;

	--spectrum-tabs-animation-duration: var(--spectrum-animation-duration-100);
	--spectrum-tabs-animation-ease: var(--spectrum-animation-ease-in-out);

	&.spectrum-Tabs--sizeS {
		--spectrum-tabs-item-height: var(--spectrum-tab-item-height-small);
		--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-small);
		--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-small);
		--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-small);
		--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-small);
		--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-small);

		--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-50);
		--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-75);
		--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-small);

		--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-small);
		--spectrum-tabs-font-size: var(--spectrum-font-size-75);
	}

	&.spectrum-Tabs--sizeL {
		--spectrum-tabs-item-height: var(--spectrum-tab-item-height-large);
		--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-large);
		--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-large);
		--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-large);
		--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-large);
		--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-large);

		--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-100);
		--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-200);
		--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-large);

		--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-large);
		--spectrum-tabs-font-size: var(--spectrum-font-size-200);
	}

	&.spectrum-Tabs--sizeXL {
		--spectrum-tabs-item-height: var(--spectrum-tab-item-height-extra-large);
		--spectrum-tabs-item-horizontal-spacing: var(--spectrum-tab-item-to-tab-item-horizontal-extra-large);
		--spectrum-tabs-item-vertical-spacing: var(--spectrum-tab-item-to-tab-item-vertical-extra-large);
		--spectrum-tabs-start-to-edge: var(--spectrum-tab-item-start-to-edge-extra-large);
		--spectrum-tabs-top-to-text: var(--spectrum-tab-item-top-to-text-extra-large);
		--spectrum-tabs-bottom-to-text: var(--spectrum-tab-item-bottom-to-text-extra-large);

		--spectrum-tabs-icon-size: var(--spectrum-workflow-icon-size-200);
		--spectrum-tabs-icon-to-text: var(--spectrum-text-to-visual-300);
		--spectrum-tabs-top-to-icon: var(--spectrum-tab-item-top-to-workflow-icon-extra-large);

		--spectrum-tabs-focus-indicator-gap: var(--spectrum-tab-item-focus-indicator-gap-extra-large);
		--spectrum-tabs-font-size: var(--spectrum-font-size-300);
	}

	&.spectrum-Tabs--emphasized {
		--mod-tabs-color-selected: var(--mod-tabs-color-selected-emphasized, var(--spectrum-accent-content-color-default));
		--mod-tabs-color-hover: var(--mod-tabs-color-hover-emphasized, var(--spectrum-accent-content-color-hover));
		--mod-tabs-color-key-focus: var(--mod-tabs-color-key-focus-emphasized, var(--spectrum-accent-content-color-key-focus));

		--mod-tabs-selection-indicator-color: var(--mod-tabs-selection-indicator-color-emphasized, var(--spectrum-accent-content-color-default));
	}
}

.spectrum-Tabs--vertical {
	--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
}

.spectrum-Tabs--vertical-right {
	--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical-right, left);
}

.spectrum-Tabs--vertical:dir(rtl) {
	--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
}

.spectrum-Tabs--vertical-right:dir(rtl) {
	--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, right);
}

.spectrum-Tabs.spectrum-Tabs--compact {
	--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-medium));
	--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
	--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-medium));
	--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-medium));

	&.spectrum-Tabs--sizeS {
		--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-small));
		--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
		--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-small));
		--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-small));
	}

	&.spectrum-Tabs--sizeL {
		--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-large));
		--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
		--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-large));
		--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-large));
	}

	&.spectrum-Tabs--sizeXL {
		--mod-tabs-item-height: var(--mod-tabs-item-height-compact, var(--spectrum-tab-item-compact-height-extra-large));
		--mod-tabs-top-to-text: var(--mod-tabs-top-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
		--mod-tabs-bottom-to-text: var(--mod-tabs-bottom-to-text-compact, var(--spectrum-tab-item-top-to-text-compact-extra-large));
		--mod-tabs-top-to-icon: var(--mod-tabs-top-to-icon-compact, var(--spectrum-tab-item-top-to-workflow-icon-compact-extra-large));
	}
}

.spectrum-Tabs {
	display: flex;

	/* Contain the selection indicator */
	position: relative;
	z-index: 0;

	margin: 0;
	padding-block: 0;

	/* Friends should align to the top of the tabs */
	vertical-align: top;

	background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
}

.spectrum-Tabs-item {
	/* Contain the focus ring */
	position: relative;
	box-sizing: border-box;

	block-size: calc(var(--mod-tabs-item-height, var(--spectrum-tabs-item-height)) - var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));

	/* Float above the tab line */
	z-index: 1;

	text-decoration: none;
	white-space: nowrap;

	color: var(--highcontrast-tabs-color, var(--mod-tabs-color, var(--spectrum-tabs-color)));

	transition: color var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) ease-out;
	cursor: pointer;
	outline: none;

	.spectrum-Icon {
		/* Vertical centering */
		block-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
		inline-size: var(--mod-tabs-icon-size, var(--spectrum-tabs-icon-size));
		margin-block-start: var(--mod-tabs-top-to-icon, var(--spectrum-tabs-top-to-icon));

		& + .spectrum-Tabs-itemLabel {
			margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text));
		}
	}

	&::before {
		content: "";
		position: absolute;

		box-sizing: border-box;

		block-size: calc(100% - var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)));
		inline-size: calc(100% + var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * 2);

		inset-block-start: calc(var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text)) / 2);
		inset-inline-start: calc(-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)));
		inset-inline-end: calc(-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)));

		border: var(--mod-tabs-focus-indicator-width, var(--spectrum-tabs-focus-indicator-width)) solid transparent;
		border-radius: var(--mod-tabs-focus-indicator-border-radius, var(--spectrum-tabs-focus-indicator-border-radius));

		pointer-events: none;
	}

	&:hover {
		color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)));
	}

	&.is-selected {
		color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
	}

	&.is-disabled {
		cursor: default;
		color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));

		.spectrum-Tabs-itemLabel {
			cursor: default;
		}
	}

	&:focus-visible {
		color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));

		&::before {
			border-color: var(--highcontrast-tabs-focus-indicator-color, var(--mod-tabs-focus-indicator-color, var(--spectrum-tabs-focus-indicator-color)));
		}
	}
}

.spectrum-Tabs-itemLabel {
	cursor: pointer;
	display: inline-block;
	vertical-align: top;

	font-family: var(--mod-tabs-font-family, var(--spectrum-tabs-font-family));
	font-style: var(--mod-tabs-font-style, var(--spectrum-tabs-font-style));
	font-size: var(--mod-tabs-font-size, var(--spectrum-tabs-font-size));
	font-weight: var(--mod-tabs-font-weight, var(--spectrum-tabs-font-weight));
	line-height: var(--mod-tabs-line-height, var(--spectrum-tabs-line-height));
	margin-block-start: var(--mod-tabs-top-to-text, var(--spectrum-tabs-top-to-text));
	margin-block-end: var(--mod-tabs-bottom-to-text, var(--spectrum-tabs-bottom-to-text));

	/* support links */
	text-decoration: none;

	&:empty {
		/* Hide the tab label if it's not being used */
		display: none;
	}
}

.spectrum-Tabs-selectionIndicator {
	position: absolute;
	inset-inline-start: 0;
	background-color: var(--highcontrast-tabs-selection-indicator-color, var(--mod-tabs-selection-indicator-color, var(--spectrum-tabs-selection-indicator-color)));

	/* Be below the tab */
	z-index: 0;

	transition: transform var(--mod-tabs-animation-duration, var(--spectrum-tabs-animation-duration)) var(--mod-tabs-animation-ease, var(--spectrum-tabs-animation-ease));
	transform-origin: top left;

	border-radius: var(--mod-tabs-divider-border-radius, var(--spectrum-tabs-divider-border-radius));
}

.spectrum-Tabs--horizontal {
	align-items: center;

	.spectrum-Tabs-item {
		vertical-align: top;

		/* Target anything since React likes to add lots of happy <div>s around all things */
		& + *:not(.spectrum-Tabs-selectionIndicator) {
			margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing));
		}
	}

	.spectrum-Tabs-selectionIndicator {
		position: absolute;
		inset-block-end: 0;
		block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
	}

	&.spectrum-Tabs--compact {
		/* The ActionButton is taller than the tabs, so don't push tabs around */
		box-sizing: content-box;
		align-items: end;
	}
}

/* Quiet tabs should not extend all the way across the screen as their line doesn't */
.spectrum-Tabs--quiet {
	display: inline-flex;
	background: none;
	border-color: transparent;

	.spectrum-Tabs-selectionIndicator {
		padding-inline-start: var(--mod-tabs-start-to-item-quiet);
	}
}

.spectrum-Tabs--vertical,
.spectrum-Tabs--vertical-right {
	display: inline-flex;
	flex-direction: column;
	padding: 0;

	&.spectrum-Tabs--quiet {
		border-color: transparent;
	}

	.spectrum-Tabs-item {
		block-size: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
		line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
		padding-block: 0;

		margin-block-end: var(--mod-tabs-item-vertical-spacing, var(--spectrum-tabs-item-vertical-spacing));
		margin-inline-start: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));
		margin-inline-end: var(--mod-tabs-start-to-edge, var(--spectrum-tabs-start-to-edge));

		&::before {
			inset-inline-start: calc(-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)));
		}
	}

	.spectrum-Icon {
		line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
	}

	.spectrum-Tabs-selectionIndicator {
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;
		inline-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
	}
}

.spectrum-Tabs--vertical-right {
	.spectrum-Tabs-selectionIndicator {
		inset-inline: auto 0;
	}
}

@media (forced-colors: active) {
	.spectrum-Tabs {
		--highcontrast-tabs-divider-background-color: var(--spectrum-gray-500);
		--highcontrast-tabs-selection-indicator-color: Highlight;
		--highcontrast-tabs-focus-indicator-color: CanvasText;
		--highcontrast-tabs-focus-indicator-background-color: Highlight;

		--highcontrast-tabs-color: ButtonText;
		--highcontrast-tabs-color-hover: ButtonText;
		--highcontrast-tabs-color-selected: HighlightText;
		--highcontrast-tabs-color-key-focus: ButtonText;
		--highcontrast-tabs-color-disabled: GrayText;

		/* Prevents black box behind text on Highlight background */
		forced-color-adjust: none;

		.spectrum-Tabs-item {
			.spectrum-Icon {
				z-index: 1;
				position: relative;
			}

			.spectrum-Tabs-itemLabel {
				position: relative;
				z-index: 1;
			}
		}

		.is-selected {
			&::before {
				background-color: var(--highcontrast-tabs-focus-indicator-background-color);
			}

			&:focus,
			&:focus-visible {
				color: var(--highcontrast-tabs-color-selected);
			}
		}

		&.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item {
			&::before {
				block-size: 100%;
				inset-block-start: 0;
			}
		}

		/* Quiet tabs get a bottom border in WHCM */
		&.spectrum-Tabs--quiet {
			background: linear-gradient(to var(--mod-tabs-list-background-direction, var(--spectrum-tabs-list-background-direction)), var(--highcontrast-tabs-divider-background-color, var(--mod-tabs-divider-background-color, var(--spectrum-tabs-divider-background-color))) 0 var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)), transparent var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size)));
		}
	}
}
