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

The Spectrum CSS tags 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-Tag {
	--spectrum-tag-background-color: var(--spectrum-gray-50);
	--spectrum-tag-background-color-hover: var(--spectrum-gray-50);
	--spectrum-tag-background-color-active: var(--spectrum-gray-100);
	--spectrum-tag-background-color-focus: var(--spectrum-gray-50);
	--spectrum-tag-size-small-corner-radius: var(--spectrum-corner-radius-100);
	--spectrum-tag-size-medium-corner-radius: var(--spectrum-corner-radius-100);
	--spectrum-tag-size-large-corner-radius: var(--spectrum-corner-radius-100);
	--spectrum-tag-border-color: var(--spectrum-gray-700);
	--spectrum-tag-border-color-hover: var(--spectrum-gray-800);
	--spectrum-tag-border-color-active: var(--spectrum-gray-900);
	--spectrum-tag-border-color-focus: var(--spectrum-gray-800);
	--spectrum-tag-content-color: var(--spectrum-neutral-subdued-content-color-default);
	--spectrum-tag-content-color-hover: var(--spectrum-neutral-subdued-content-color-hover);
	--spectrum-tag-content-color-active: var(--spectrum-neutral-subdued-content-color-down);
	--spectrum-tag-content-color-focus: var(--spectrum-neutral-subdued-content-color-key-focus);
	--spectrum-tag-content-color-selected: var(--spectrum-gray-25);
	--spectrum-tag-border-color-selected: var(--spectrum-neutral-subdued-background-color-default);
	--spectrum-tag-border-color-selected-hover: var(--spectrum-neutral-subdued-background-color-hover);
	--spectrum-tag-border-color-selected-active: var(--spectrum-neutral-subdued-background-color-down);
	--spectrum-tag-border-color-selected-focus: var(--spectrum-neutral-subdued-background-color-key-focus);
	--spectrum-tag-border-color-disabled: transparent;
	--spectrum-tag-background-color-disabled: var(--spectrum-disabled-background-color);
	--spectrum-tag-size-small-spacing-inline-start: var(--spectrum-component-edge-to-visual-75);
	--spectrum-tag-size-small-label-spacing-inline-end: var(--spectrum-component-edge-to-text-75);
	--spectrum-tag-size-small-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-75);
	--spectrum-tag-size-medium-spacing-inline-start: var(--spectrum-component-edge-to-visual-100);
	--spectrum-tag-size-medium-label-spacing-inline-end: var(--spectrum-component-edge-to-text-100);
	--spectrum-tag-size-medium-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-100);
	--spectrum-tag-size-large-spacing-inline-start: var(--spectrum-component-edge-to-visual-200);
	--spectrum-tag-size-large-label-spacing-inline-end: var(--spectrum-component-edge-to-text-200);
	--spectrum-tag-size-large-clear-button-spacing-inline-end: var(--spectrum-component-edge-to-visual-200);
	--spectrum-avatar-opacity-disabled: 0.3;
	--spectrum-tag-animation-duration: var(--spectrum-animation-duration-100);
	--spectrum-tag-border-width: var(--spectrum-border-width-100);
	--spectrum-tag-focus-ring-thickness: var(--spectrum-focus-indicator-thickness);
	--spectrum-tag-focus-ring-gap: var(--spectrum-focus-indicator-gap);
	--spectrum-tag-focus-ring-color: var(--spectrum-focus-indicator-color);
	--spectrum-tag-label-line-height: var(--spectrum-line-height-100);
	--spectrum-tag-label-font-weight: var(--spectrum-regular-font-weight);
	--spectrum-tag-background-color-selected: var(--spectrum-neutral-background-color-selected-default);
	--spectrum-tag-background-color-selected-hover: var(--spectrum-neutral-background-color-selected-hover);
	--spectrum-tag-background-color-selected-active: var(--spectrum-neutral-background-color-selected-down);
	--spectrum-tag-background-color-selected-focus: var(--spectrum-neutral-background-color-selected-key-focus);
	--spectrum-tag-border-color-invalid: var(--spectrum-negative-color-900);
	--spectrum-tag-border-color-invalid-hover: var(--spectrum-negative-color-1000);
	--spectrum-tag-border-color-invalid-active: var(--spectrum-negative-color-1100);
	--spectrum-tag-border-color-invalid-focus: var(--spectrum-negative-color-1000);
	--spectrum-tag-content-color-invalid: var(--spectrum-negative-content-color-default);
	--spectrum-tag-content-color-invalid-hover: var(--spectrum-negative-content-color-hover);
	--spectrum-tag-content-color-invalid-active: var(--spectrum-negative-content-color-down);
	--spectrum-tag-content-color-invalid-focus: var(--spectrum-negative-content-color-key-focus);
	--spectrum-tag-border-color-invalid-selected: var(--spectrum-negative-background-color-default);
	--spectrum-tag-border-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
	--spectrum-tag-border-color-invalid-selected-focus: var(--spectrum-negative-background-color-down);
	--spectrum-tag-border-color-invalid-selected-active: var(--spectrum-negative-background-color-key-focus);
	--spectrum-tag-background-color-invalid-selected: var(--spectrum-negative-background-color-default);
	--spectrum-tag-background-color-invalid-selected-hover: var(--spectrum-negative-background-color-hover);
	--spectrum-tag-background-color-invalid-selected-active: var(--spectrum-negative-background-color-down);
	--spectrum-tag-background-color-invalid-selected-focus: var(--spectrum-negative-background-color-key-focus);
	--spectrum-tag-content-color-invalid-selected: var(--spectrum-white);
	--spectrum-tag-border-color-emphasized: var(--spectrum-accent-background-color-default);
	--spectrum-tag-border-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
	--spectrum-tag-border-color-emphasized-active: var(--spectrum-accent-background-color-down);
	--spectrum-tag-border-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
	--spectrum-tag-background-color-emphasized: var(--spectrum-accent-background-color-default);
	--spectrum-tag-background-color-emphasized-hover: var(--spectrum-accent-background-color-hover);
	--spectrum-tag-background-color-emphasized-active: var(--spectrum-accent-background-color-down);
	--spectrum-tag-background-color-emphasized-focus: var(--spectrum-accent-background-color-key-focus);
	--spectrum-tag-content-color-emphasized: var(--spectrum-white);
	--spectrum-tag-content-color-disabled: var(--spectrum-disabled-content-color);
}
.spectrum-Tag,
.spectrum-Tag--sizeM {
	--spectrum-tag-height: var(--spectrum-component-height-100);
	--spectrum-tag-font-size: var(--spectrum-font-size-100);
	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-100);
	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-100);
	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-medium);
	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-100);
	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-100);
	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-100);
	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-medium);
	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-medium);
	--spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-100);
	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-100);
	--spectrum-tag-corner-radius: var(--spectrum-tag-size-medium-corner-radius);
	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-medium-spacing-inline-start);
	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-medium-label-spacing-inline-end);
	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-medium-clear-button-spacing-inline-end);
}
.spectrum-Tag--sizeS {
	--spectrum-tag-height: var(--spectrum-component-height-75);
	--spectrum-tag-font-size: var(--spectrum-font-size-75);
	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-75);
	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-75);
	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-small);
	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-75);
	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-75);
	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-75);
	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-small);
	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-small);
	--spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-75);
	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-75);
	--spectrum-tag-corner-radius: var(--spectrum-tag-size-small-corner-radius);
	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-small-spacing-inline-start);
	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-small-label-spacing-inline-end);
	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-small-clear-button-spacing-inline-end);
}
.spectrum-Tag--sizeL {
	--spectrum-tag-height: var(--spectrum-component-height-200);
	--spectrum-tag-font-size: var(--spectrum-font-size-200);
	--spectrum-tag-icon-size: var(--spectrum-workflow-icon-size-200);
	--spectrum-tag-clear-button-spacing-inline-start: var(--spectrum-text-to-visual-200);
	--spectrum-tag-clear-button-spacing-block: var(--spectrum-tag-top-to-cross-icon-large);
	--spectrum-tag-icon-spacing-block-start: var(--spectrum-component-top-to-workflow-icon-200);
	--spectrum-tag-icon-spacing-block-end: var(--spectrum-component-top-to-workflow-icon-200);
	--spectrum-tag-icon-spacing-inline-end: var(--spectrum-text-to-visual-200);
	--spectrum-tag-avatar-spacing-block-start: var(--spectrum-tag-top-to-avatar-large);
	--spectrum-tag-avatar-spacing-block-end: var(--spectrum-tag-top-to-avatar-large);
	--spectrum-tag-avatar-spacing-inline-end: var(--spectrum-text-to-visual-200);
	--spectrum-tag-label-spacing-block: var(--spectrum-component-top-to-text-200);
	--spectrum-tag-corner-radius: var(--spectrum-tag-size-large-corner-radius);
	--spectrum-tag-spacing-inline-start: var(--spectrum-tag-size-large-spacing-inline-start);
	--spectrum-tag-label-spacing-inline-end: var(--spectrum-tag-size-large-label-spacing-inline-end);
	--spectrum-tag-clear-button-spacing-inline-end: var(--spectrum-tag-size-large-clear-button-spacing-inline-end);
}
.spectrum-Tag {
	border-color: var(--highcontrast-tag-border-color, var(--mod-tag-border-color, var(--spectrum-tag-border-color)));
	background-color: var(--highcontrast-tag-background-color, var(--mod-tag-background-color, var(--spectrum-tag-background-color)));
	color: var(--highcontrast-tag-content-color, var(--mod-tag-content-color, var(--spectrum-tag-content-color)));
	border-radius: var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius));
	border-width: var(--mod-tag-border-width, var(--spectrum-tag-border-width));
	border-style: solid;
	padding-inline-start: calc(var(--mod-tag-spacing-inline-start, var(--spectrum-tag-spacing-inline-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	padding-inline-end: 0;
	block-size: var(--mod-tag-height, var(--spectrum-tag-height));
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	vertical-align: bottom;
	max-inline-size: 100%;
	outline: none;
	-webkit-user-select: none;
	user-select: none;
	transition:
		border-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
		color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
		box-shadow var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out,
		background-color var(--mod-tag-animation-duration, var(--spectrum-tag-animation-duration)) ease-in-out;
}
.spectrum-Tag .spectrum-Tag-itemIcon {
	block-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
	inline-size: var(--mod-tag-icon-size, var(--spectrum-tag-icon-size));
	margin-block-start: calc(var(--mod-tag-icon-spacing-block-start, var(--spectrum-tag-icon-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-block-end: calc(var(--mod-tag-icon-spacing-block-end, var(--spectrum-tag-icon-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-inline-end: var(--mod-tag-icon-spacing-inline-end, var(--spectrum-tag-icon-spacing-inline-end));
	flex-shrink: 0;
}
.spectrum-Tag .spectrum-Avatar {
	margin-block-start: calc(var(--mod-tag-avatar-spacing-block-start, var(--spectrum-tag-avatar-spacing-block-start)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-block-end: calc(var(--mod-tag-avatar-spacing-block-end, var(--spectrum-tag-avatar-spacing-block-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-inline-end: var(--mod-tag-avatar-spacing-inline-end, var(--spectrum-tag-avatar-spacing-inline-end));
}
.spectrum-Tag .spectrum-Tag-clearButton {
	--mod-clear-button-width: fit-content;
	--spectrum-clearbutton-fill-size: fit-content;
	--spectrum-clearbutton-fill-background-color: transparent;
	box-sizing: border-box;
	padding-block-start: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	padding-block-end: calc(var(--mod-tag-clear-button-spacing-block, var(--spectrum-tag-clear-button-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-inline-start: calc(var(--mod-tag-clear-button-spacing-inline-start, var(--spectrum-tag-clear-button-spacing-inline-start)) + var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) * -1);
	margin-inline-end: calc(var(--mod-tag-clear-button-spacing-inline-end, var(--spectrum-tag-clear-button-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	color: currentColor;
}
.spectrum-Tag .spectrum-Tag-clearButton .spectrum-ClearButton-fill {
	background-color: var(--mod-clearbutton-fill-background-color, var(--spectrum-clearbutton-fill-background-color));
	inline-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
	block-size: var(--mod-clearbutton-fill-size, var(--spectrum-clearbutton-fill-size));
}
.spectrum-Tag .spectrum-Tag-itemLabel {
	block-size: 100%;
	box-sizing: border-box;
	line-height: var(--mod-tag-label-line-height, var(--spectrum-tag-label-line-height));
	font-weight: var(--mod-tag-label-font-weight, var(--spectrum-tag-label-font-weight));
	flex: 1 1 auto;
	font-size: var(--mod-tag-font-size, var(--spectrum-tag-font-size));
	cursor: default;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	padding-block-start: calc(var(--mod-tag-label-spacing-block, var(--spectrum-tag-label-spacing-block)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	margin-inline-end: calc(var(--mod-tag-label-spacing-inline-end, var(--spectrum-tag-label-spacing-inline-end)) - var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
}
.spectrum-Tag:active {
	border-color: var(--highcontrast-tag-border-color-active, var(--mod-tag-border-color-active, var(--spectrum-tag-border-color-active)));
	background-color: var(--highcontrast-tag-background-color-active, var(--mod-tag-background-color-active, var(--spectrum-tag-background-color-active)));
	color: var(--highcontrast-tag-content-color-active, var(--mod-tag-content-color-active, var(--spectrum-tag-content-color-active)));
}
.spectrum-Tag.is-focused,
.spectrum-Tag:focus-visible {
	border-color: var(--highcontrast-tag-border-color-focus, var(--mod-tag-border-color-focus, var(--spectrum-tag-border-color-focus)));
	background-color: var(--highcontrast-tag-background-color-focus, var(--mod-tag-background-color-focus, var(--spectrum-tag-background-color-focus)));
	color: var(--highcontrast-tag-content-color-focus, var(--mod-tag-content-color-focus, var(--spectrum-tag-content-color-focus)));
}
.spectrum-Tag.is-focused:after,
.spectrum-Tag:focus-visible:after {
	content: "";
	display: inline-block;
	position: absolute;
	inset-block-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
	inset-block-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
	inset-inline-start: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
	inset-inline-end: calc(var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) * -1 - var(--mod-tag-border-width, var(--spectrum-tag-border-width)) - var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness)));
	border-color: var(--highcontrast-tag-focus-ring-color, var(--mod-tag-focus-ring-color, var(--spectrum-tag-focus-ring-color)));
	border-radius: calc(var(--mod-tag-corner-radius, var(--spectrum-tag-corner-radius)) + var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) + var(--mod-tag-border-width, var(--spectrum-tag-border-width)));
	border-width: var(--mod-tag-focus-ring-thickness, var(--spectrum-tag-focus-ring-thickness));
	border-style: solid;
	pointer-events: none;
}
.spectrum-Tag.is-selected {
	border-color: var(--highcontrast-tag-border-color-selected, var(--mod-tag-border-color-selected, var(--spectrum-tag-border-color-selected)));
	background-color: var(--highcontrast-tag-background-color-selected, var(--mod-tag-background-color-selected, var(--spectrum-tag-background-color-selected)));
	color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected)));
}
.spectrum-Tag.is-selected:active {
	border-color: var(--highcontrast-tag-border-color-selected-active, var(--mod-tag-border-color-selected-active, var(--spectrum-tag-border-color-selected-active)));
	background-color: var(--highcontrast-tag-background-color-selected-active, var(--mod-tag-background-color-selected-active, var(--spectrum-tag-background-color-selected-active)));
}
.spectrum-Tag.is-selected.is-focused,
.spectrum-Tag.is-selected:focus-visible {
	border-color: var(--highcontrast-tag-border-color-selected-focus, var(--mod-tag-border-color-selected-focus, var(--spectrum-tag-border-color-selected-focus)));
	background-color: var(--highcontrast-tag-background-color-selected-focus, var(--mod-tag-background-color-selected-focus, var(--spectrum-tag-background-color-selected-focus)));
}
.spectrum-Tag.is-invalid {
	border-color: var(--highcontrast-tag-border-color-invalid, var(--mod-tag-border-color-invalid, var(--spectrum-tag-border-color-invalid)));
	color: var(--highcontrast-tag-content-color-invalid, var(--mod-tag-content-color-invalid, var(--spectrum-tag-content-color-invalid)));
}
.spectrum-Tag.is-invalid:active {
	border-color: var(--highcontrast-tag-border-color-invalid-active, var(--mod-tag-border-color-invalid-active, var(--spectrum-tag-border-color-invalid-active)));
	color: var(--highcontrast-tag-content-color-invalid-active, var(--mod-tag-content-color-invalid-active, var(--spectrum-tag-content-color-invalid-active)));
}
.spectrum-Tag.is-invalid.is-focused,
.spectrum-Tag.is-invalid:focus-visible {
	border-color: var(--highcontrast-tag-border-color-invalid-focus, var(--mod-tag-border-color-invalid-focus, var(--spectrum-tag-border-color-invalid-focus)));
	color: var(--highcontrast-tag-content-color-invalid-focus, var(--mod-tag-content-color-invalid-focus, var(--spectrum-tag-content-color-invalid-focus)));
}
.spectrum-Tag.is-invalid.is-selected {
	border-color: var(--highcontrast-tag-border-color-invalid-selected, var(--mod-tag-border-color-invalid-selected, var(--spectrum-tag-border-color-invalid-selected)));
	background-color: var(--highcontrast-tag-background-color-invalid-selected, var(--mod-tag-background-color-invalid-selected, var(--spectrum-tag-background-color-invalid-selected)));
	color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected)));
}
.spectrum-Tag.is-invalid.is-selected:active {
	border-color: var(--highcontrast-tag-border-color-invalid-selected-active, var(--mod-tag-border-color-invalid-selected-active, var(--spectrum-tag-border-color-invalid-selected-active)));
	background-color: var(--highcontrast-tag-background-color-invalid-selected-active, var(--mod-tag-background-color-invalid-selected-active, var(--spectrum-tag-background-color-invalid-selected-active)));
}
.spectrum-Tag.is-invalid.is-selected.is-focused,
.spectrum-Tag.is-invalid.is-selected:focus-visible {
	border-color: var(--highcontrast-tag-border-color-invalid-selected-focus, var(--mod-tag-border-color-invalid-selected-focus, var(--spectrum-tag-border-color-invalid-selected-focus)));
	background-color: var(--highcontrast-tag-background-color-invalid-selected-focus, var(--mod-tag-background-color-invalid-selected-focus, var(--spectrum-tag-background-color-invalid-selected-focus)));
}
.spectrum-Tag.is-emphasized {
	border-color: var(--highcontrast-tag-border-color-emphasized, var(--mod-tag-border-color-emphasized, var(--spectrum-tag-border-color-emphasized)));
	background-color: var(--highcontrast-tag-background-color-emphasized, var(--mod-tag-background-color-emphasized, var(--spectrum-tag-background-color-emphasized)));
	color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized)));
}
@media (hover: hover) {
	.spectrum-Tag:hover {
		border-color: var(--highcontrast-tag-border-color-hover, var(--mod-tag-border-color-hover, var(--spectrum-tag-border-color-hover)));
		background-color: var(--highcontrast-tag-background-color-hover, var(--mod-tag-background-color-hover, var(--spectrum-tag-background-color-hover)));
		color: var(--highcontrast-tag-content-color-hover, var(--mod-tag-content-color-hover, var(--spectrum-tag-content-color-hover)));
	}
	.spectrum-Tag.is-selected:hover {
		border-color: var(--highcontrast-tag-border-color-selected-hover, var(--mod-tag-border-color-selected-hover, var(--spectrum-tag-border-color-selected-hover)));
		background-color: var(--highcontrast-tag-background-color-selected-hover, var(--mod-tag-background-color-selected-hover, var(--spectrum-tag-background-color-selected-hover)));
		color: var(--highcontrast-tag-content-color-selected, var(--mod-tag-content-color-selected, var(--spectrum-tag-content-color-selected)));
	}
	.spectrum-Tag.is-invalid:hover {
		border-color: var(--highcontrast-tag-border-color-invalid-hover, var(--mod-tag-border-color-invalid-hover, var(--spectrum-tag-border-color-invalid-hover)));
		color: var(--highcontrast-tag-content-color-invalid-hover, var(--mod-tag-content-color-invalid-hover, var(--spectrum-tag-content-color-invalid-hover)));
	}
	.spectrum-Tag.is-invalid.is-selected:hover {
		border-color: var(--highcontrast-tag-border-color-invalid-selected-hover, var(--mod-tag-border-color-invalid-selected-hover, var(--spectrum-tag-border-color-invalid-selected-hover)));
		background-color: var(--highcontrast-tag-background-color-invalid-selected-hover, var(--mod-tag-background-color-invalid-selected-hover, var(--spectrum-tag-background-color-invalid-selected-hover)));
		color: var(--highcontrast-tag-content-color-invalid-selected, var(--mod-tag-content-color-invalid-selected, var(--spectrum-tag-content-color-invalid-selected)));
	}
	.spectrum-Tag.is-emphasized:hover {
		border-color: var(--highcontrast-tag-border-color-emphasized-hover, var(--mod-tag-border-color-emphasized-hover, var(--spectrum-tag-border-color-emphasized-hover)));
		background-color: var(--highcontrast-tag-background-color-emphasized-hover, var(--mod-tag-background-color-emphasized-hover, var(--spectrum-tag-background-color-emphasized-hover)));
		color: var(--highcontrast-tag-content-color-emphasized, var(--mod-tag-content-color-emphasized, var(--spectrum-tag-content-color-emphasized)));
	}
}
.spectrum-Tag.is-emphasized:active {
	border-color: var(--highcontrast-tag-border-color-emphasized-active, var(--mod-tag-border-color-emphasized-active, var(--spectrum-tag-border-color-emphasized-active)));
	background-color: var(--highcontrast-tag-background-color-emphasized-active, var(--mod-tag-background-color-emphasized-active, var(--spectrum-tag-background-color-emphasized-active)));
}
.spectrum-Tag.is-emphasized.is-focused,
.spectrum-Tag.is-emphasized:focus-visible {
	border-color: var(--highcontrast-tag-border-color-emphasized-focus, var(--mod-tag-border-color-emphasized-focus, var(--spectrum-tag-border-color-emphasized-focus)));
	background-color: var(--highcontrast-tag-background-color-emphasized-focus, var(--mod-tag-background-color-emphasized-focus, var(--spectrum-tag-background-color-emphasized-focus)));
}
.spectrum-Tag.is-disabled {
	border-color: var(--highcontrast-tag-border-color-disabled, var(--mod-tag-border-color-disabled, var(--spectrum-tag-border-color-disabled)));
	background-color: var(--highcontrast-tag-background-color-disabled, var(--mod-tag-background-color-disabled, var(--spectrum-tag-background-color-disabled)));
	color: var(--highcontrast-tag-content-color-disabled, var(--mod-tag-content-color-disabled, var(--spectrum-tag-content-color-disabled)));
	pointer-events: none;
}
.spectrum-Tag.is-disabled .spectrum-Avatar {
	opacity: var(--mod-avatar-opacity-disabled, var(--spectrum-avatar-opacity-disabled));
}
@media (forced-colors: active) {
	.spectrum-Tag {
		--highcontrast-tag-border-color: ButtonText;
		--highcontrast-tag-border-color-hover: ButtonText;
		--highcontrast-tag-border-color-active: ButtonText;
		--highcontrast-tag-border-color-focus: Highlight;
		--highcontrast-tag-background-color: ButtonFace;
		--highcontrast-tag-background-color-hover: ButtonFace;
		--highcontrast-tag-background-color-active: ButtonFace;
		--highcontrast-tag-background-color-focus: ButtonFace;
		--highcontrast-tag-content-color: ButtonText;
		--highcontrast-tag-content-color-hover: ButtonText;
		--highcontrast-tag-content-color-active: ButtonText;
		--highcontrast-tag-content-color-focus: ButtonText;
		--highcontrast-tag-focus-ring-color: Highlight;
		forced-color-adjust: none;
	}
	.spectrum-Tag.is-selected {
		--highcontrast-tag-border-color-selected: Highlight;
		--highcontrast-tag-border-color-selected-hover: Highlight;
		--highcontrast-tag-border-color-selected-active: Highlight;
		--highcontrast-tag-border-color-selected-focus: Highlight;
		--highcontrast-tag-background-color-selected: Highlight;
		--highcontrast-tag-background-color-selected-hover: Highlight;
		--highcontrast-tag-background-color-selected-active: Highlight;
		--highcontrast-tag-background-color-selected-focus: Highlight;
		--highcontrast-tag-content-color-selected: HighlightText;
	}
	.spectrum-Tag.is-disabled {
		--highcontrast-tag-border-color-disabled: GrayText;
		--highcontrast-tag-background-color-disabled: ButtonFace;
		--highcontrast-tag-content-color-disabled: GrayText;
	}
	.spectrum-Tag.is-invalid {
		--highcontrast-tag-border-color-invalid: Highlight;
		--highcontrast-tag-border-color-invalid-hover: Highlight;
		--highcontrast-tag-border-color-invalid-active: Highlight;
		--highcontrast-tag-border-color-invalid-focus: Highlight;
		--highcontrast-tag-content-color-invalid: CanvasText;
		--highcontrast-tag-content-color-invalid-hover: CanvasText;
		--highcontrast-tag-content-color-invalid-active: CanvasText;
		--highcontrast-tag-content-color-invalid-focus: CanvasText;
	}
	.spectrum-Tag.is-invalid.is-selected {
		--highcontrast-tag-border-color-invalid-selected: Highlight;
		--highcontrast-tag-border-color-invalid-selected-hover: Highlight;
		--highcontrast-tag-border-color-invalid-selected-focus: Highlight;
		--highcontrast-tag-border-color-invalid-selected-active: Highlight;
		--highcontrast-tag-background-color-invalid-selected: Highlight;
		--highcontrast-tag-background-color-invalid-selected-hover: Highlight;
		--highcontrast-tag-background-color-invalid-selected-active: Highlight;
		--highcontrast-tag-background-color-invalid-selected-focus: Highlight;
		--highcontrast-tag-content-color-invalid-selected: HighlightText;
	}
	.spectrum-Tag.is-emphasized {
		--highcontrast-tag-border-color-emphasized: Highlight;
		--highcontrast-tag-border-color-emphasized-hover: Highlight;
		--highcontrast-tag-border-color-emphasized-active: Highlight;
		--highcontrast-tag-border-color-emphasized-focus: Highlight;
		--highcontrast-tag-background-color-emphasized: ButtonFace;
		--highcontrast-tag-background-color-emphasized-hover: ButtonFace;
		--highcontrast-tag-background-color-emphasized-active: ButtonFace;
		--highcontrast-tag-background-color-emphasized-focus: ButtonFace;
		--highcontrast-tag-content-color-emphasized: CanvasText;
	}
}