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

/*!
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-Tooltip{
  --spectrum-overlay-animation-distance:6px;
  --spectrum-overlay-animation-duration:var(--spectrum-animation-duration-100);

  visibility:hidden;

  opacity:0;

  transition:transform var(--spectrum-overlay-animation-duration) ease-in-out,
              opacity var(--spectrum-overlay-animation-duration) ease-in-out,
              visibility 0ms linear var(--spectrum-overlay-animation-duration);

  pointer-events:none;
}

.spectrum-Tooltip.is-open{
  visibility:visible;
  opacity:1;
  transition-delay:0ms;
  pointer-events:auto;
}

.spectrum-Tooltip--bottom.is-open,
.spectrum-Tooltip--bottom-left.is-open,
.spectrum-Tooltip--bottom-right.is-open,
.spectrum-Tooltip--bottom-start.is-open,
.spectrum-Tooltip--bottom-end.is-open{
  --spectrum-overlay-animation-distance:6px;
  transform:translateY(var(--spectrum-overlay-animation-distance));
}

.spectrum-Tooltip.is-open,
.spectrum-Tooltip--top.is-open,
.spectrum-Tooltip--top-left.is-open,
.spectrum-Tooltip--top-right.is-open,
.spectrum-Tooltip--top-start.is-open,
.spectrum-Tooltip--top-end.is-open{
  --spectrum-overlay-animation-distance:6px;
  transform:translateY(calc(-1 * var(--spectrum-overlay-animation-distance)));
}

.spectrum-Tooltip--right.is-open,
.spectrum-Tooltip--right-bottom.is-open,
.spectrum-Tooltip--right-top.is-open,
[dir="rtl"] .spectrum-Tooltip--start.is-open,
[dir="rtl"] .spectrum-Tooltip--start-top.is-open,
[dir="rtl"] .spectrum-Tooltip--start-bottom.is-open,
.spectrum-Tooltip--end.is-open,
.spectrum-Tooltip--end-top.is-open,
.spectrum-Tooltip--end-bottom.is-open{
  --spectrum-overlay-animation-distance:6px;
  transform:translateX(var(--spectrum-overlay-animation-distance));
}

.spectrum-Tooltip--left.is-open,
.spectrum-Tooltip--left-bottom.is-open,
.spectrum-Tooltip--left-top.is-open,
.spectrum-Tooltip--start.is-open,
.spectrum-Tooltip--start-top.is-open,
.spectrum-Tooltip--start-bottom.is-open,
[dir="rtl"] .spectrum-Tooltip--end.is-open,
[dir="rtl"] .spectrum-Tooltip--end-top.is-open,
[dir="rtl"] .spectrum-Tooltip--end-bottom.is-open{
  --spectrum-overlay-animation-distance:6px;
  transform:translateX(calc(-1 * var(--spectrum-overlay-animation-distance)));
}

.spectrum-Tooltip{
  --spectrum-tooltip-animation-duration:var(--spectrum-animation-duration-100);
  --spectrum-tooltip-animation-distance:var(--spectrum-spacing-75);
  --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{
    forced-color-adjust:none;
    --highcontrast-tooltip-background-color-default:CanvasText;
    --highcontrast-tooltip-background-color-informative:CanvasText;
    --highcontrast-tooltip-background-color-positive:CanvasText;
    --highcontrast-tooltip-background-color-negative:CanvasText;
  }
}

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

.spectrum-Tooltip:lang(ja),
  .spectrum-Tooltip:lang(zh),
  .spectrum-Tooltip:lang(ko){
    line-height:var(--mod-tooltip-cjk-line-height, var(--spectrum-tooltip-cjk-line-height));
  }

.spectrum-Tooltip{
    cursor:default;
    -webkit-user-select:none;
    user-select:none;
  }

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

  top:100%;
  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-left .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-start .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-end .spectrum-Tooltip-tip{
    top:100%;
  }

.spectrum-Tooltip--bottom .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--bottom-end .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)))
    );
    top:auto;
    bottom:100%;
  }

.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-start .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip,
  .spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip{
    transform:none;
  }

.spectrum-Tooltip--top-left .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-left .spectrum-Tooltip-tip{
    left:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
  }

.spectrum-Tooltip--top-right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-right .spectrum-Tooltip-tip{
    left:auto;
    right:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
  }

.spectrum-Tooltip--top-start .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip{
    left:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
    right:auto;
  }

[dir="rtl"] .spectrum-Tooltip--top-start .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--bottom-start .spectrum-Tooltip-tip{
      right:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
      left:auto;
    }

.spectrum-Tooltip--top-end .spectrum-Tooltip-tip,
  .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip{
    left:auto;
    right:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
  }

[dir="rtl"] .spectrum-Tooltip--top-end .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--bottom-end .spectrum-Tooltip-tip{
      left:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
      right:auto;
    }

.spectrum-Tooltip--right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--right-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--start .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip{
    top:50%;
    transform:translateY(-50%);
  }

.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip{
    transform:none;
    top:auto;
  }

.spectrum-Tooltip--right .spectrum-Tooltip-tip,
  .spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-bottom .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
    );
    left:auto;
    right: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-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-bottom .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%
    );
    left:100%;
  }

.spectrum-Tooltip--right-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--left-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-top .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-top .spectrum-Tooltip-tip{
    top:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
  }

.spectrum-Tooltip--right-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--left-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--start-bottom .spectrum-Tooltip-tip,
  .spectrum-Tooltip--end-bottom .spectrum-Tooltip-tip{
    bottom:var(--mod-tooltip-pointer-corner-spacing, var(--spectrum-tooltip-pointer-corner-spacing));
  }

[dir="rtl"] .spectrum-Tooltip--end .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--end-top .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--end-bottom .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%;
    }

[dir="rtl"] .spectrum-Tooltip--start .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--start-top .spectrum-Tooltip-tip, [dir="rtl"] .spectrum-Tooltip--start-bottom .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-left,
.spectrum-Tooltip--top-right,
.spectrum-Tooltip--top-start,
.spectrum-Tooltip--top-end{
  margin-bottom:calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}

.spectrum-Tooltip--bottom,
.spectrum-Tooltip--bottom-left,
.spectrum-Tooltip--bottom-right,
.spectrum-Tooltip--bottom-start,
.spectrum-Tooltip--bottom-end{
  margin-top:calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}

.spectrum-Tooltip--right,
.spectrum-Tooltip--right-bottom,
.spectrum-Tooltip--right-top{
  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--left,
.spectrum-Tooltip--left-bottom,
.spectrum-Tooltip--left-top{
  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--start,
.spectrum-Tooltip--start-top,
.spectrum-Tooltip--start-bottom{
  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--end,
.spectrum-Tooltip--end-top,
.spectrum-Tooltip--end-bottom{
  margin-inline-start:calc(var(--mod-tooltip-tip-block-size, var(--spectrum-tooltip-tip-block-size)) + var(--mod-tooltip-margin, var(--spectrum-tooltip-margin)));
}

.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:hover .spectrum-Tooltip,
  .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--top,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-left,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-right,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-start,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-end,
  .u-tooltip-showOnHover .spectrum-Tooltip--bottom,
  .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--bottom-end{
    left:50%;
    transform:translate(-50%, 0);
  }

.u-tooltip-showOnHover .spectrum-Tooltip--top,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-left,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-right,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-start,
  .u-tooltip-showOnHover .spectrum-Tooltip--top-end{
    bottom:100%;
  }

.u-tooltip-showOnHover .spectrum-Tooltip--bottom,
  .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--bottom-end{
    top:100%;
  }

.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-top,
  .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom,
  .u-tooltip-showOnHover .spectrum-Tooltip--end,
  .u-tooltip-showOnHover .spectrum-Tooltip--end-top,
  .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom{
    top:50%;
    transform:translate(0, -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-top,
  .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom{
    right:100%;
  }

[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start,
    [dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-top,
    [dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--start-bottom{
      left:100%;
      right:auto;
    }

.u-tooltip-showOnHover .spectrum-Tooltip--right,
  .u-tooltip-showOnHover .spectrum-Tooltip--right-top,
  .u-tooltip-showOnHover .spectrum-Tooltip--right-bottom,
  .u-tooltip-showOnHover .spectrum-Tooltip--end,
  .u-tooltip-showOnHover .spectrum-Tooltip--end-top,
  .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom{
    left:100%;
    right:auto;
  }

[dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end,
    [dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-top,
    [dir="rtl"] .u-tooltip-showOnHover .spectrum-Tooltip--end-bottom{
      left:auto;
      right:100%;
    }

.u-tooltip-showOnHover:hover .spectrum-Tooltip--top,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-left,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-right,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-start,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--top-end,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--top,
    .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:focus .spectrum-Tooltip--top-end,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--top,
    .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.is-focused .spectrum-Tooltip--top-end,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--top,
    .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 *:focus .spectrum-Tooltip--top-end{
      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-left,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-right,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-start,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--bottom-end,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--bottom,
    .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:focus .spectrum-Tooltip--bottom-end,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--bottom,
    .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.is-focused .spectrum-Tooltip--bottom-end,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--bottom,
    .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 *:focus .spectrum-Tooltip--bottom-end{
      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-top,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
    .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-top,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
    .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-top,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
    .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-top,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--start-bottom{
      transform:translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
    }

[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start,
      [dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-top,
      [dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--start-bottom,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-top,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--start-bottom,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-top,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--start-bottom,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--start,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--start-top,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--start-bottom{
        transform:translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
      }

.u-tooltip-showOnHover:hover .spectrum-Tooltip--right,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-top,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--right-bottom,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top,
    .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--right,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-top,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--right-bottom,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,
    .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-top,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--right-bottom,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
    .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--right,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--right-top,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--right-bottom,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end-top,
    .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end-bottom{
      transform:translate(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)), -50%);
    }

[dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end,
      [dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-top,
      [dir="rtl"] .u-tooltip-showOnHover:hover .spectrum-Tooltip--end-bottom,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-top,
      [dir="rtl"] .u-tooltip-showOnHover:focus .spectrum-Tooltip--end-bottom,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-top,
      [dir="rtl"] .u-tooltip-showOnHover.is-focused .spectrum-Tooltip--end-bottom,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end-top,
      [dir="rtl"] .u-tooltip-showOnHover *:focus .spectrum-Tooltip--end-bottom{
        transform:translate(calc(var(--mod-tooltip-animation-distance, var(--spectrum-tooltip-animation-distance)) * -1), -50%);
      }

.spectrum{
  --system-spectrum-tooltip-backgound-color-default-neutral:var(--spectrum-neutral-subdued-background-color-default);
}

.spectrum--express{
  --system-spectrum-tooltip-backgound-color-default-neutral:var(--spectrum-neutral-background-color-default);
}

.spectrum-Tooltip{
  --spectrum-tooltip-backgound-color-default-neutral:var(--system-spectrum-tooltip-backgound-color-default-neutral);
}