@spectrum-css/tooltip/dist/index.css

The Spectrum CSS tooltip component

/*!
 * 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-Tooltip {
	--spectrum-tooltip-backgound-color-default-neutral: var(--spectrum-neutral-subdued-background-color-default);
	pointer-events: none;
	visibility: hidden;
	opacity: 0;
	transition:
		transform 0.13s ease-in-out,
		opacity 0.13s ease-in-out,
		visibility 0s linear 0.13s;
	transition:
		transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
		opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s)) ease-in-out,
		visibility 0s linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 0.13s));
}
.spectrum-Tooltip.is-open {
	pointer-events: auto;
	visibility: visible;
	opacity: 1;
	transition-delay: 0s;
	transition-delay: var(--mod-overlay-animation-duration-opened, var(--spectrum-animation-duration-0, 0s));
}
.spectrum-Tooltip {
	--spectrum-tooltip-animation-duration: var(--spectrum-animation-duration-100);
	--spectrum-tooltip-margin: 0px;
	--spectrum-tooltip-height: var(--spectrum-component-height-75);
	--spectrum-tooltip-max-inline-size: var(--spectrum-tooltip-maximum-width);
	--spectrum-tooltip-border-radius: var(--spectrum-corner-radius-100);
	--spectrum-tooltip-icon-width: var(--spectrum-workflow-icon-size-50);
	--spectrum-tooltip-icon-height: var(--spectrum-workflow-icon-size-50);
	--spectrum-tooltip-font-size: var(--spectrum-font-size-75);
	--spectrum-tooltip-line-height: var(--spectrum-line-height-100);
	--spectrum-tooltip-cjk-line-height: var(--spectrum-cjk-line-height-100);
	--spectrum-tooltip-font-weight: var(--spectrum-regular-font-weight);
	--spectrum-tooltip-spacing-inline: var(--spectrum-component-edge-to-text-75);
	--spectrum-tooltip-spacing-block-start: var(--spectrum-component-top-to-text-75);
	--spectrum-tooltip-spacing-block-end: var(--spectrum-component-bottom-to-text-75);
	--spectrum-tooltip-icon-spacing-inline-start: var(--spectrum-text-to-visual-75);
	--spectrum-tooltip-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
	--spectrum-tooltip-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
	--spectrum-tooltip-background-color-informative: var(--spectrum-informative-background-color-default);
	--spectrum-tooltip-background-color-positive: var(--spectrum-positive-background-color-default);
	--spectrum-tooltip-background-color-negative: var(--spectrum-negative-background-color-default);
	--spectrum-tooltip-content-color: var(--spectrum-white);
	--spectrum-tooltip-tip-inline-size: var(--spectrum-tooltip-tip-width);
	--spectrum-tooltip-tip-block-size: var(--spectrum-tooltip-tip-height);
	--spectrum-tooltip-tip-square-size: var(--spectrum-tooltip-tip-inline-size);
	--spectrum-tooltip-tip-height-percentage: 50%;
	--spectrum-tooltip-tip-antialiasing-inset: 0.5px;
	--spectrum-tooltip-pointer-corner-spacing: var(--spectrum-corner-radius-100);
	--spectrum-tooltip-background-color-default: var(--spectrum-tooltip-backgound-color-default-neutral);
}
@media (forced-colors: active) {
	.spectrum-Tooltip {
		border: 1px solid transparent;
	}
	.spectrum-Tooltip-tip {
		--highcontrast-tooltip-background-color-default: CanvasText;
		--highcontrast-tooltip-background-color-informative: CanvasText;
		--highcontrast-tooltip-background-color-positive: CanvasText;
		--highcontrast-tooltip-background-color-negative: CanvasText;
		forced-color-adjust: none;
	}
}
.spectrum-Tooltip {
	position: relative;
	display: inline-flex;
	flex-direction: row;
	align-items: center;
	box-sizing: border-box;
	vertical-align: top;
	inline-size: auto;
	padding-inline: var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline));
	border-radius: var(--mod-tooltip-border-radius, var(--spectrum-tooltip-border-radius));
	block-size: auto;
	min-block-size: var(--mod-tooltip-height, var(--spectrum-tooltip-height));
	max-inline-size: var(--mod-tooltip-max-inline-size, var(--spectrum-tooltip-max-inline-size));
	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
	color: var(--mod-tooltip-content-color, var(--spectrum-tooltip-content-color));
	font-size: var(--mod-tooltip-font-size, var(--spectrum-tooltip-font-size));
	font-weight: var(--mod-tooltip-font-weight, var(--spectrum-tooltip-font-weight));
	line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
	word-break: break-word;
	-webkit-font-smoothing: antialiased;
	cursor: default;
	-webkit-user-select: none;
	user-select: none;
}
.spectrum-Tooltip:lang(ja),
.spectrum-Tooltip:lang(ko),
.spectrum-Tooltip:lang(zh) {
	line-height: var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height));
}
.spectrum-Tooltip p {
	margin: 0;
}
.spectrum-Tooltip--info {
	background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}
.spectrum-Tooltip--positive {
	background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}
.spectrum-Tooltip--negative {
	background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}
.spectrum-Tooltip-tip {
	position: absolute;
	block-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
	inline-size: var(--mod-tooltip-tip-square-size, var(--spectrum-tooltip-tip-square-size));
	inset-block-start: 100%;
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	left: 50%;
	transform: translateX(-50%);
	background-color: var(--highcontrast-tooltip-background-color-default, var(--mod-tooltip-background-color-default, var(--spectrum-tooltip-background-color-default)));
	clip-path: polygon(0 calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 50% var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)), 100% calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
}
.spectrum-Tooltip--info .spectrum-Tooltip-tip {
	background-color: var(--highcontrast-tooltip-background-color-informative, var(--mod-tooltip-background-color-informative, var(--spectrum-tooltip-background-color-informative)));
}
.spectrum-Tooltip--positive .spectrum-Tooltip-tip {
	background-color: var(--highcontrast-tooltip-background-color-positive, var(--mod-tooltip-background-color-positive, var(--spectrum-tooltip-background-color-positive)));
}
.spectrum-Tooltip--negative .spectrum-Tooltip-tip {
	background-color: var(--highcontrast-tooltip-background-color-negative, var(--mod-tooltip-background-color-negative, var(--spectrum-tooltip-background-color-negative)));
}
.spectrum-Tooltip--top .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
	inset-block-start: 100%;
}
.spectrum-Tooltip--bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip {
	clip-path: polygon(50% calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))), 0 calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))), 100% calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))));
	inset-block: auto 100%;
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
	transform: none;
}
.spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-left .spectrum-Tooltip-tip {
	inset-inline-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-right .spectrum-Tooltip-tip {
	inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
	inset-inline: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing)) auto;
}
.spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--top-start .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip {
	right: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	left: auto;
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip {
	inset-inline: auto var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--top-end .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip {
	left: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
	right: auto;
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
	inset-block-start: 50%;
	transform: translateY(-50%);
}
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
	transform: none;
	inset-block-start: auto;
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip {
	clip-path: polygon(calc(100% - var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage))) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
	inset-inline: auto 100%;
}
.spectrum-Tooltip--left .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
	clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
	inset-inline-start: 100%;
}
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
	inset-block-start: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip {
	inset-block-end: var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
}
.spectrum-Tooltip--end .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--end-top .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--left-top .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--end .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--left-top .spectrum-Tooltip-tip {
	clip-path: polygon(calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0, calc(0% - var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%);
	right: auto;
	left: 100%;
}
.spectrum-Tooltip--right .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--right-top .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip:dir(rtl),
.spectrum-Tooltip--start-top .spectrum-Tooltip-tip:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--right .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
[dir="rtl"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip {
	clip-path: polygon(var(--mod-tooltip-tip-height-percentage, var(--spectrum-tooltip-tip-height-percentage)) 50%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 100%, calc(100% + var(--mod-tooltip-tip-antialiasing-inset, var(--spectrum-tooltip-tip-antialiasing-inset))) 0);
	left: auto;
	right: 100%;
}
.spectrum-Tooltip-typeIcon {
	margin-inline-start: calc(var(--mod-tooltip-icon-spacing-inline-start, var(--spectrum-tooltip-icon-spacing-inline-start)) - var(--mod-tooltip-spacing-inline, var(--spectrum-tooltip-spacing-inline)));
	margin-inline-end: var(--mod-tooltip-icon-spacing-inline-end, var(--spectrum-tooltip-icon-spacing-inline-end));
	margin-block-start: var(--mod-tooltip-icon-spacing-block-start, var(--spectrum-tooltip-icon-spacing-block-start));
	inline-size: var(--mod-tooltip-icon-width, var(--spectrum-tooltip-icon-width));
	block-size: var(--mod-tooltip-icon-height, var(--spectrum-tooltip-icon-height));
	align-self: flex-start;
	flex-shrink: 0;
}
.spectrum-Tooltip-label {
	line-height: var(--mod-tooltip-line-height, var(--spectrum-tooltip-line-height));
	margin-block-start: var(--mod-tooltip-spacing-block-start, var(--spectrum-tooltip-spacing-block-start));
	margin-block-end: var(--mod-tooltip-spacing-block-end, var(--spectrum-tooltip-spacing-block-end));
}
.spectrum-Tooltip,
.spectrum-Tooltip--top,
.spectrum-Tooltip--top-end,
.spectrum-Tooltip--top-left,
.spectrum-Tooltip--top-right,
.spectrum-Tooltip--top-start {
	margin-block-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--top-end.is-open,
.spectrum-Tooltip--top-left.is-open,
.spectrum-Tooltip--top-right.is-open,
.spectrum-Tooltip--top-start.is-open,
.spectrum-Tooltip--top.is-open,
.spectrum-Tooltip.is-open {
	transform: translateY(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--bottom,
.spectrum-Tooltip--bottom-end,
.spectrum-Tooltip--bottom-left,
.spectrum-Tooltip--bottom-right,
.spectrum-Tooltip--bottom-start {
	margin-block-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--bottom-end.is-open,
.spectrum-Tooltip--bottom-left.is-open,
.spectrum-Tooltip--bottom-right.is-open,
.spectrum-Tooltip--bottom-start.is-open,
.spectrum-Tooltip--bottom.is-open {
	transform: translateY(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--right,
.spectrum-Tooltip--right-bottom,
.spectrum-Tooltip--right-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	margin-left: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--right-bottom.is-open,
.spectrum-Tooltip--right-top.is-open,
.spectrum-Tooltip--right.is-open {
	transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--left,
.spectrum-Tooltip--left-bottom,
.spectrum-Tooltip--left-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	margin-right: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--left-bottom.is-open,
.spectrum-Tooltip--left-top.is-open,
.spectrum-Tooltip--left.is-open {
	transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--start,
.spectrum-Tooltip--start-bottom,
.spectrum-Tooltip--start-top {
	margin-inline-end: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--start-bottom.is-open,
.spectrum-Tooltip--start-top.is-open,
.spectrum-Tooltip--start.is-open {
	transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.spectrum-Tooltip--start-bottom.is-open:dir(rtl),
.spectrum-Tooltip--start-top.is-open:dir(rtl),
.spectrum-Tooltip--start.is-open:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--start-bottom.is-open,
[dir="rtl"] .spectrum-Tooltip--start-top.is-open,
[dir="rtl"] .spectrum-Tooltip--start.is-open {
	transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--end,
.spectrum-Tooltip--end-bottom,
.spectrum-Tooltip--end-top {
	margin-inline-start: calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}
.spectrum-Tooltip--end-bottom.is-open,
.spectrum-Tooltip--end-top.is-open,
.spectrum-Tooltip--end.is-open {
	transform: translateX(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.spectrum-Tooltip--end-bottom.is-open:dir(rtl),
.spectrum-Tooltip--end-top.is-open:dir(rtl),
.spectrum-Tooltip--end.is-open:dir(rtl),
[dir="rtl"] .spectrum-Tooltip--end-bottom.is-open,
[dir="rtl"] .spectrum-Tooltip--end-top.is-open,
[dir="rtl"] .spectrum-Tooltip--end.is-open {
	transform: translateX(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.u-tooltip-showOnHover {
	display: inline-block;
	position: relative;
}
.u-tooltip-showOnHover .spectrum-Tooltip {
	position: absolute;
	white-space: nowrap;
	visibility: visible !important;
	transition: transform var(--spectrum-tooltip-animation-duration) ease-in-out;
}
.u-tooltip-showOnHover .spectrum-Tooltip-label {
	max-inline-size: none;
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip,
.u-tooltip-showOnHover:focus .spectrum-Tooltip {
	opacity: 1;
}
.u-tooltip-showOnHover .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover .spectrum-Tooltip--top,
.u-tooltip-showOnHover .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover .spectrum-Tooltip--top-start {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	left: 50%;
	transform: translate(-50%);
}
.u-tooltip-showOnHover .spectrum-Tooltip--top,
.u-tooltip-showOnHover .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover .spectrum-Tooltip--top-start {
	inset-block-end: 100%;
}
.u-tooltip-showOnHover .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover .spectrum-Tooltip--bottom-start {
	inset-block-start: 100%;
}
.u-tooltip-showOnHover .spectrum-Tooltip--end,
.u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover .spectrum-Tooltip--left,
.u-tooltip-showOnHover .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover .spectrum-Tooltip--right,
.u-tooltip-showOnHover .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover .spectrum-Tooltip--start,
.u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--start-top {
	inset-block-start: 50%;
	transform: translateY(-50%);
}
.u-tooltip-showOnHover .spectrum-Tooltip--left,
.u-tooltip-showOnHover .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover .spectrum-Tooltip--start,
.u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--start-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	right: 100%;
}
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top {
	left: 100%;
	right: auto;
}
.u-tooltip-showOnHover .spectrum-Tooltip--end,
.u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover .spectrum-Tooltip--right,
.u-tooltip-showOnHover .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover .spectrum-Tooltip--right-top {
	/* stylelint-disable-next-line csstools/use-logical -- intentional use of non-logical property */
	left: 100%;
}
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl) .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top {
	left: auto;
	right: 100%;
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--top-start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top-start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--top-start {
	transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom-start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom-start {
	transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--left-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top {
	transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover :focus .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-bottom,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--start-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right-bottom,
.u-tooltip-showOnHover:focus .spectrum-Tooltip--right-top,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top {
	transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
}
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover.is-focused:dir(rtl) .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl) :focus .spectrum-Tooltip--end-top,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-bottom,
.u-tooltip-showOnHover:dir(rtl):focus .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover :focus .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
[dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top {
	transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
}
@media (hover: hover) {
	.u-tooltip-showOnHover:hover .spectrum-Tooltip {
		opacity: 1;
	}
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--top,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start {
		transform: translate(-50%, calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1));
	}
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-end,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-left,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-right,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-start {
		transform: translate(-50%, var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)));
	}
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--left,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--left-bottom,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--left-top,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--start,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top {
		transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
	}
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start,
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-bottom,
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--start-top,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--right,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--right-bottom,
	.u-tooltip-showOnHover:hover .spectrum-Tooltip--right-top,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top {
		transform: translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
	}
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end,
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-bottom,
	.u-tooltip-showOnHover:dir(rtl):hover .spectrum-Tooltip--end-top,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
	[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top {
		transform: translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
	}
}