:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host,
*,
*::before,
*::after {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: reduce) {
    :host,
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }:host {
  /**
  * @prop --border-radius: border radius of the tooltip. Defaults to 0px.
  * @prop --max-width: maximum width of the tooltip. Defaults to 20rem.
  * @prop --hide-delay: delay before hiding the tooltip. Defaults to 0.125s.
  * @prop --hide-duration: duration of the hide transition. Defaults to 0.125s.
  * @prop --hide-timing-function: timing function for the hide transition. Defaults to ease.
  * @prop --show-delay: delay before showing the tooltip. Defaults to 0.125s.
  * @prop --show-duration: duration of the show transition. Defaults to 0.125s.
  * @prop --show-timing-function: timing function for the show transition. Defaults to ease.
  * @prop --background: background color of the tooltip. Defaults to var(--nano-color-neutral-1200).
  * @prop --color: text color of the tooltip. Defaults to var(--nano-color-base-1000).
  * @prop --padding: padding inside the tooltip. Defaults to 0.5rem.
  * @prop --arrow-size: size of the tooltip arrow. Defaults to 5px.
  */
  --border-radius: 0px;
  --max-width: 20rem;
  --hide-delay: var(--nano-transition-x-fast);
  --hide-duration: var(--nano-transition-x-fast);
  --hide-timing-function: ease;
  --show-delay: var(--nano-transition-x-fast);
  --show-duration: var(--nano-transition-x-fast);
  --show-timing-function: ease;
  --background: var(--nano-color-neutral-1200);
  --color: var(--nano-color-base-0);
  --padding: var(--nano-spacing-sm);
  --arrow-size: 5px;
  --arrow-offset: 5px;
  /* autoprefixer: ignore next */
  display: contents;
}

.tooltip-arrow {
  content: "";
  position: absolute;
  color: var(--background);
  transform: none !important;
  inset-inline-start: unset !important;
}

.tooltip {
  max-inline-size: var(--max-width);
  border-radius: var(--border-radius);
  background-color: var(--background);
  font-size: var(--nano-font-size-2xs);
  line-height: 1.5;
  color: var(--color);
  opacity: 0;
  padding: var(--padding);
  transform: translateY(10px) translateZ(0);
  transform-origin: bottom;
  transition: opacity, transform var(--hide-duration) var(--hide-timing-function) var(--hide-delay);
  white-space: normal;
  transition-delay: var(--show-delay);
  transition-duration: var(--show-duration);
  transition-timing-function: var(--show-timing-function);
}
.tooltip ::slotted(*) {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}

.tooltip-positioner {
  position: absolute;
  z-index: var(--nano-z-index-tooltip);
  border: 0;
  background: none;
  padding: 0;
  overflow: visible;
  color: unset;
}
.tooltip-positioner::backdrop {
  display: none;
}
.tooltip-positioner[popover], .tooltip-positioner:popover-open {
  inset: unset;
}
.tooltip-positioner[data-popper-placement^=top] .tooltip {
  transform-origin: bottom;
  transform: translateY(-10px) translateZ(0);
}
.tooltip-positioner[data-popper-placement^=bottom] .tooltip {
  transform-origin: top;
}
.tooltip-positioner[data-popper-placement^=left] .tooltip {
  transform-origin: right;
}
.tooltip-positioner[data-popper-placement^=right] .tooltip {
  transform-origin: left;
}
.tooltip-positioner.popover-visible .tooltip {
  opacity: 1;
  transform: none;
}
.tooltip-positioner[data-popper-placement^=bottom] .tooltip-arrow {
  inset-block-end: 100%;
  inset-inline-start: calc(50% - var(--arrow-size)) !important;
  border-block-end: var(--arrow-size) solid;
  border-inline-start: var(--arrow-size) solid transparent;
  border-inline-end: var(--arrow-size) solid transparent;
}
.tooltip-positioner[data-popper-placement=bottom-start] .tooltip-arrow {
  inset-inline-start: var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement=bottom-end] .tooltip-arrow {
  inset-inline: auto var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement^=top] .tooltip-arrow {
  inset-block-start: 100%;
  inset-inline-start: calc(50% - var(--arrow-size)) !important;
  border-block-start: var(--arrow-size) solid;
  border-inline-start: var(--arrow-size) solid transparent;
  border-inline-end: var(--arrow-size) solid transparent;
}
.tooltip-positioner[data-popper-placement=top-start] .tooltip-arrow {
  inset-inline-start: var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement=top-end] .tooltip-arrow {
  inset-inline: auto var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement^=left] .tooltip-arrow {
  inset-block-start: calc(50% - var(--arrow-size)) !important;
  inset-inline-start: 100% !important;
  border-inline-start: var(--arrow-size) solid;
  border-block-start: var(--arrow-size) solid transparent;
  border-block-end: var(--arrow-size) solid transparent;
}
.tooltip-positioner[data-popper-placement=left-start] .tooltip-arrow {
  inset-block-start: var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement=left-end] .tooltip-arrow {
  inset-block: auto var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement^=right] .tooltip-arrow {
  inset-block-start: calc(50% - var(--arrow-size)) !important;
  inset-inline-end: 100% !important;
  border-inline-end: var(--arrow-size) solid;
  border-block-start: var(--arrow-size) solid transparent;
  border-block-end: var(--arrow-size) solid transparent;
}
.tooltip-positioner[data-popper-placement=right-start] .tooltip-arrow {
  inset-block-start: var(--arrow-offset) !important;
}
.tooltip-positioner[data-popper-placement=right-end] .tooltip-arrow {
  inset-block: auto var(--arrow-offset) !important;
}