/*!
 * 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.
 */

.spectrum-Tabs {
	--spectrum-tabs-font-weight: var(--spectrum-regular-font-weight);
	--spectrum-tabs-divider-background-color: var(--spectrum-gray-200);
	--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);
	--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.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.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.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.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),
[dir="rtl"] .spectrum-Tabs--vertical {
	--mod-tabs-list-background-direction: var(--mod-tabs-list-background-direction-vertical, left);
}
.spectrum-Tabs--vertical-right:dir(rtl),
[dir="rtl"] .spectrum-Tabs--vertical-right {
	--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.spectrum-Tabs--compact.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.spectrum-Tabs--compact.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.spectrum-Tabs--compact.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;
	position: relative;
	z-index: 0;
	margin: 0;
	padding-block: 0;
	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 {
	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)));
	z-index: 1;
	-webkit-text-decoration: none;
	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-Tabs-item .spectrum-Icon {
	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-item .spectrum-Icon + .spectrum-Tabs-itemLabel {
	margin-inline-start: var(--mod-tabs-icon-to-text, var(--spectrum-tabs-icon-to-text));
}
.spectrum-Tabs-item: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(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
	inset-inline-end: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
	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;
}
@media (hover: hover) {
	.spectrum-Tabs-item:hover {
		color: var(--highcontrast-tabs-color-hover, var(--mod-tabs-color-hover, var(--spectrum-tabs-color-hover)));
	}
}
.spectrum-Tabs-item.is-selected {
	color: var(--highcontrast-tabs-color-selected, var(--mod-tabs-color-selected, var(--spectrum-tabs-color-selected)));
}
.spectrum-Tabs-item.is-disabled {
	cursor: default;
	color: var(--highcontrast-tabs-color-disabled, var(--mod-tabs-color-disabled, var(--spectrum-tabs-color-disabled)));
}
.spectrum-Tabs-item.is-disabled .spectrum-Tabs-itemLabel {
	cursor: default;
}
.spectrum-Tabs-item:focus-visible {
	color: var(--highcontrast-tabs-color-key-focus, var(--mod-tabs-color-key-focus, var(--spectrum-tabs-color-key-focus)));
}
.spectrum-Tabs-item:focus-visible: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));
	-webkit-text-decoration: none;
	text-decoration: none;
}
.spectrum-Tabs-itemLabel:empty {
	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)));
	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--horizontal .spectrum-Tabs-item {
	vertical-align: top;
}
.spectrum-Tabs--horizontal .spectrum-Tabs-item + :not(.spectrum-Tabs-selectionIndicator) {
	margin-inline-start: var(--mod-tabs-item-horizontal-spacing, var(--spectrum-tabs-item-horizontal-spacing));
}
.spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
	position: absolute;
	inset-block-end: 0;
	block-size: var(--mod-tabs-divider-size, var(--spectrum-tabs-divider-size));
}
.spectrum-Tabs--horizontal.spectrum-Tabs--compact {
	box-sizing: initial;
	align-items: end;
}
.spectrum-Tabs--quiet {
	display: inline-flex;
	background: none;
	border-color: transparent;
}
.spectrum-Tabs--quiet .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--vertical-right.spectrum-Tabs--quiet,
.spectrum-Tabs--vertical.spectrum-Tabs--quiet {
	border-color: transparent;
}
.spectrum-Tabs--vertical .spectrum-Tabs-item,
.spectrum-Tabs--vertical-right .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));
}
.spectrum-Tabs--vertical .spectrum-Tabs-item:before,
.spectrum-Tabs--vertical-right .spectrum-Tabs-item:before {
	inset-inline-start: calc(var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap)) * -1);
}
.spectrum-Tabs--vertical .spectrum-Icon,
.spectrum-Tabs--vertical-right .spectrum-Icon {
	line-height: var(--mod-tabs-item-height, var(--spectrum-tabs-item-height));
}
.spectrum-Tabs--vertical .spectrum-Tabs-selectionIndicator,
.spectrum-Tabs--vertical-right .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;
		forced-color-adjust: none;
	}
	.spectrum-Tabs .spectrum-Tabs-item .spectrum-Icon,
	.spectrum-Tabs .spectrum-Tabs-item .spectrum-Tabs-itemLabel {
		z-index: 1;
		position: relative;
	}
	.spectrum-Tabs .is-selected:before {
		background-color: var(--highcontrast-tabs-focus-indicator-background-color);
	}
	.spectrum-Tabs .is-selected:focus,
	.spectrum-Tabs .is-selected:focus-visible {
		color: var(--highcontrast-tabs-color-selected);
	}
	.spectrum-Tabs.spectrum-Tabs--vertical.spectrum-Tabs--compact .spectrum-Tabs-item:before {
		block-size: 100%;
		inset-block-start: 0;
	}
	.spectrum-Tabs.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)));
	}
}
