/*!
Copyright 2023 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{
  --system-spectrum-tabs-font-weight:var(--spectrum-default-font-weight);
}

.spectrum--express{
  --system-spectrum-tabs-font-weight:var(--spectrum-bold-font-weight);
}

.spectrum-Tabs{
	--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-background-color:var(--spectrum-gray-300);
	--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
	);
}

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

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

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

.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.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(
			-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;
	}

@media (hover: hover){

.spectrum-Tabs-item:hover,
.spectrum-Tabs-item.is-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,
.spectrum-Tabs-item.is-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,
.spectrum-Tabs-item.is-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:content-box;
		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,
			var(--spectrum-tabs-start-to-item-quiet)
		);
	}

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

.spectrum-Tabs--vertical.spectrum-Tabs--quiet, .spectrum-Tabs--vertical-right.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(
				-1 * var(--mod-tabs-focus-indicator-gap, var(--spectrum-tabs-focus-indicator-gap))
			);
		}

.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{
				z-index:1;
				position:relative;
			}

			.spectrum-Tabs .spectrum-Tabs-item .spectrum-Tabs-itemLabel{
				position:relative;
				z-index:1;
			}
			.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,
.spectrum-Tabs .is-selected.is-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))
			);
		}
}

.spectrum-Tabs{
  --spectrum-tabs-font-weight:var(--system-spectrum-tabs-font-weight);
}
