/*!
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-tag-border-color:var(--spectrum-gray-700);
  --system-spectrum-tag-border-color-hover:var(--spectrum-gray-800);
  --system-spectrum-tag-border-color-active:var(--spectrum-gray-900);
  --system-spectrum-tag-border-color-focus:var(--spectrum-gray-800);
  --system-spectrum-tag-size-small-corner-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-tag-size-medium-corner-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-tag-size-large-corner-radius:var(--spectrum-corner-radius-100);
  --system-spectrum-tag-background-color:var(--spectrum-gray-75);
  --system-spectrum-tag-background-color-hover:var(--spectrum-gray-75);
  --system-spectrum-tag-background-color-active:var(--spectrum-gray-200);
  --system-spectrum-tag-background-color-focus:var(--spectrum-gray-75);
  --system-spectrum-tag-content-color:var(--spectrum-neutral-subdued-content-color-default);
  --system-spectrum-tag-content-color-hover:var(--spectrum-neutral-subdued-content-color-hover);
  --system-spectrum-tag-content-color-active:var(--spectrum-neutral-subdued-content-color-down);
  --system-spectrum-tag-content-color-focus:var(--spectrum-neutral-subdued-content-color-key-focus);
  --system-spectrum-tag-border-color-selected:var(--spectrum-neutral-subdued-background-color-default);
  --system-spectrum-tag-border-color-selected-hover:var(--spectrum-neutral-subdued-background-color-hover);
  --system-spectrum-tag-border-color-selected-active:var(--spectrum-neutral-subdued-background-color-down);
  --system-spectrum-tag-border-color-selected-focus:var(--spectrum-neutral-subdued-background-color-key-focus);
  --system-spectrum-tag-border-color-disabled:transparent;
  --system-spectrum-tag-background-color-disabled:var(--spectrum-disabled-background-color);
  --system-spectrum-tag-size-small-spacing-inline-start:var(--spectrum-component-edge-to-visual-75);
  --system-spectrum-tag-size-small-label-spacing-inline-end:var(--spectrum-component-edge-to-text-75);
  --system-spectrum-tag-size-small-clear-button-spacing-inline-end:var(--spectrum-component-edge-to-visual-75);
  --system-spectrum-tag-size-medium-spacing-inline-start:var(--spectrum-component-edge-to-visual-100);
  --system-spectrum-tag-size-medium-label-spacing-inline-end:var(--spectrum-component-edge-to-text-100);
  --system-spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--spectrum-component-edge-to-visual-100);
  --system-spectrum-tag-size-large-spacing-inline-start:var(--spectrum-component-edge-to-visual-200);
  --system-spectrum-tag-size-large-label-spacing-inline-end:var(--spectrum-component-edge-to-text-200);
  --system-spectrum-tag-size-large-clear-button-spacing-inline-end:var(--spectrum-component-edge-to-visual-200);
}

.spectrum--express{
  --system-spectrum-tag-background-color:transparent;
  --system-spectrum-tag-background-color-hover:var(--spectrum-gray-300);
  --system-spectrum-tag-background-color-active:var(--spectrum-gray-400);
  --system-spectrum-tag-background-color-focus:var(--spectrum-gray-300);
  --system-spectrum-tag-size-small-corner-radius:var(--spectrum-component-height-75);
  --system-spectrum-tag-size-medium-corner-radius:var(--spectrum-component-height-100);
  --system-spectrum-tag-size-large-corner-radius:var(--spectrum-component-height-200);
  --system-spectrum-tag-border-color:var(--spectrum-gray-300);
  --system-spectrum-tag-border-color-hover:var(--spectrum-gray-400);
  --system-spectrum-tag-border-color-active:var(--spectrum-gray-500);
  --system-spectrum-tag-border-color-focus:var(--spectrum-gray-400);
  --system-spectrum-tag-content-color:var(--spectrum-neutral-content-color-default);
  --system-spectrum-tag-content-color-hover:var(--spectrum-neutral-content-color-hover);
  --system-spectrum-tag-content-color-active:var(--spectrum-neutral-content-color-down);
  --system-spectrum-tag-content-color-focus:var(--spectrum-neutral-content-color-key-focus);
  --system-spectrum-tag-border-color-selected:var(--spectrum-neutral-background-color-default);
  --system-spectrum-tag-border-color-selected-hover:var(--spectrum-neutral-background-color-hover);
  --system-spectrum-tag-border-color-selected-active:var(--spectrum-neutral-background-color-down);
  --system-spectrum-tag-border-color-selected-focus:var(--spectrum-neutral-background-color-key-focus);
  --system-spectrum-tag-border-color-disabled:var(--spectrum-disabled-border-color);
  --system-spectrum-tag-background-color-disabled:transparent;
  --system-spectrum-tag-size-small-spacing-inline-start:var(--spectrum-component-pill-edge-to-visual-75);
  --system-spectrum-tag-size-small-label-spacing-inline-end:var(--spectrum-component-pill-edge-to-text-75);
  --system-spectrum-tag-size-small-clear-button-spacing-inline-end:var(--spectrum-component-pill-edge-to-visual-75);
  --system-spectrum-tag-size-medium-spacing-inline-start:var(--spectrum-component-pill-edge-to-visual-100);
  --system-spectrum-tag-size-medium-label-spacing-inline-end:var(--spectrum-component-pill-edge-to-text-100);
  --system-spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--spectrum-component-pill-edge-to-visual-100);
  --system-spectrum-tag-size-large-spacing-inline-start:var(--spectrum-component-pill-edge-to-visual-200);
  --system-spectrum-tag-size-large-label-spacing-inline-end:var(--spectrum-component-pill-edge-to-text-200);
  --system-spectrum-tag-size-large-clear-button-spacing-inline-end:var(--spectrum-component-pill-edge-to-visual-200);
}

.spectrum-Tag{
  --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-content-color-selected:var(--spectrum-gray-50);
  --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-icon-spacing-inline-end:var(--spectrum-text-to-visual-100);
  --spectrum-tag-icon-size:var(--spectrum-workflow-icon-size-100);
  --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-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-clear-button-spacing-inline-start:var(--spectrum-text-to-visual-100);
  --spectrum-tag-height:var(--spectrum-component-height-100);
  --spectrum-tag-font-size:var(--spectrum-font-size-100);
  --spectrum-tag-clear-button-spacing-block:var(--spectrum-tag-top-to-cross-icon-medium);
}

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

.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{
    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;
    --mod-clear-button-width:fit-content;
    --spectrum-clearbutton-fill-size:fit-content;
    --spectrum-clearbutton-fill-background-color:transparent;
  }

.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,
.spectrum-Tag.is-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:focus-visible, .spectrum-Tag.is-focused,
.spectrum-Tag.is-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:focus-visible::after, .spectrum-Tag.is-focused::after,
.spectrum-Tag.is-focus-visible::after{
      content:"";
      display:inline-block;
      position:absolute;
      inset-block-start:calc(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - 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(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - 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(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - 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(-1 * var(--mod-tag-focus-ring-gap, var(--spectrum-tag-focus-ring-gap)) - 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,
.spectrum-Tag.is-selected.is-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:focus-visible, .spectrum-Tag.is-selected.is-focused,
.spectrum-Tag.is-selected.is-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,
.spectrum-Tag.is-invalid.is-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:focus-visible, .spectrum-Tag.is-invalid.is-focused,
.spectrum-Tag.is-invalid.is-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,
.spectrum-Tag.is-invalid.is-selected.is-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:focus-visible, .spectrum-Tag.is-invalid.is-selected.is-focused,
.spectrum-Tag.is-invalid.is-selected.is-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,
.spectrum-Tag.is-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,
.spectrum-Tag.is-selected.is-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,
.spectrum-Tag.is-invalid.is-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,
.spectrum-Tag.is-invalid.is-selected.is-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,
.spectrum-Tag.is-emphasized.is-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,
.spectrum-Tag.is-emphasized.is-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:focus-visible, .spectrum-Tag.is-emphasized.is-focused,
.spectrum-Tag.is-emphasized.is-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{
    forced-color-adjust:none;

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

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

.spectrum-Tag{
  --spectrum-tag-border-color:var(--system-spectrum-tag-border-color);
  --spectrum-tag-border-color-hover:var(--system-spectrum-tag-border-color-hover);
  --spectrum-tag-border-color-active:var(--system-spectrum-tag-border-color-active);
  --spectrum-tag-border-color-focus:var(--system-spectrum-tag-border-color-focus);
  --spectrum-tag-size-small-corner-radius:var(--system-spectrum-tag-size-small-corner-radius);
  --spectrum-tag-size-medium-corner-radius:var(--system-spectrum-tag-size-medium-corner-radius);
  --spectrum-tag-size-large-corner-radius:var(--system-spectrum-tag-size-large-corner-radius);
  --spectrum-tag-background-color:var(--system-spectrum-tag-background-color);
  --spectrum-tag-background-color-hover:var(--system-spectrum-tag-background-color-hover);
  --spectrum-tag-background-color-active:var(--system-spectrum-tag-background-color-active);
  --spectrum-tag-background-color-focus:var(--system-spectrum-tag-background-color-focus);
  --spectrum-tag-content-color:var(--system-spectrum-tag-content-color);
  --spectrum-tag-content-color-hover:var(--system-spectrum-tag-content-color-hover);
  --spectrum-tag-content-color-active:var(--system-spectrum-tag-content-color-active);
  --spectrum-tag-content-color-focus:var(--system-spectrum-tag-content-color-focus);
  --spectrum-tag-border-color-selected:var(--system-spectrum-tag-border-color-selected);
  --spectrum-tag-border-color-selected-hover:var(--system-spectrum-tag-border-color-selected-hover);
  --spectrum-tag-border-color-selected-active:var(--system-spectrum-tag-border-color-selected-active);
  --spectrum-tag-border-color-selected-focus:var(--system-spectrum-tag-border-color-selected-focus);
  --spectrum-tag-border-color-disabled:var(--system-spectrum-tag-border-color-disabled);
  --spectrum-tag-background-color-disabled:var(--system-spectrum-tag-background-color-disabled);
  --spectrum-tag-size-small-spacing-inline-start:var(--system-spectrum-tag-size-small-spacing-inline-start);
  --spectrum-tag-size-small-label-spacing-inline-end:var(--system-spectrum-tag-size-small-label-spacing-inline-end);
  --spectrum-tag-size-small-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-small-clear-button-spacing-inline-end);
  --spectrum-tag-size-medium-spacing-inline-start:var(--system-spectrum-tag-size-medium-spacing-inline-start);
  --spectrum-tag-size-medium-label-spacing-inline-end:var(--system-spectrum-tag-size-medium-label-spacing-inline-end);
  --spectrum-tag-size-medium-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-medium-clear-button-spacing-inline-end);
  --spectrum-tag-size-large-spacing-inline-start:var(--system-spectrum-tag-size-large-spacing-inline-start);
  --spectrum-tag-size-large-label-spacing-inline-end:var(--system-spectrum-tag-size-large-label-spacing-inline-end);
  --spectrum-tag-size-large-clear-button-spacing-inline-end:var(--system-spectrum-tag-size-large-clear-button-spacing-inline-end);
}
