[hidden] {
  display: none !important;
}

:host {
  position: relative;
  box-sizing: border-box;
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --color: The tooltip text color. (Default: text)
 * @prop --background-color: The tooltip background color. (Default: color-step 100)
 * @prop --show-delay: The amount of time to wait before showing the tooltip. (Default: 125ms)
 * @prop --hide-delay: The amount of time to wait before hiding the tooltip. (Default: 0ms)
 * @prop --max-width: The maximum width of the tooltip. (Default: 20rem)
 */
:host {
  --max-width: 20rem;
  --hide-delay: 0s;
  --hide-duration: 0.125s;
  --hide-timing-function: ease;
  --show-delay: 0.125s;
  --show-duration: 0.125s;
  --show-timing-function: ease;
  --color: var(--flow-color-text, #000000);
  --background-color: var(--flow-color-step-100, #e6e6e6);
  --sl-tooltip-border-radius: var(--flow-border-radius-medium, 0.25rem);
  --sl-tooltip-font-family: var(--flow-font-sans, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol);
  --sl-tooltip-font-weight: var(--flow-font-weight-normal, 400);
  --sl-tooltip-font-size: var(--flow-font-size-small, 0.875rem);
  --sl-tooltip-line-height: var(--flow-line-height-normal, 1.8);
  --sl-tooltip-padding: var(--flow-spacing-xxx-small, 0.125rem) var(--flow-spacing-x-small, 0.5rem);
  --sl-tooltip-arrow-size: 5px;
  --sl-tooltip-arrow-start-end-offset: 8px;
  display: contents;
}

.tooltip-positioner {
  position: absolute;
  z-index: var(--flow-z-index-tooltip, 1000);
  pointer-events: none;
}

.tooltip {
  max-width: var(--max-width);
  border-radius: var(--sl-tooltip-border-radius);
  background-color: var(--background-color);
  font-family: var(--sl-tooltip-font-family);
  font-size: var(--sl-tooltip-font-size);
  font-weight: var(--sl-tooltip-font-weight);
  line-height: var(--sl-tooltip-line-height);
  color: var(--color);
  opacity: 0;
  padding: var(--sl-tooltip-padding);
  transform: scale(0.8);
  transform-origin: bottom;
  transition-property: opacity, transform;
  transition-delay: var(--hide-delay);
  transition-duration: var(--hide-duration);
  transition-timing-function: var(--hide-timing-function);
}
.tooltip::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.tooltip-positioner[data-popper-placement^=top] .tooltip {
  transform-origin: bottom;
}
.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: scale(1);
  transition-delay: var(--show-delay);
  transition-duration: var(--show-duration);
  transition-timing-function: var(--show-timing-function);
}

.tooltip-positioner[data-popper-placement^=bottom] .tooltip::after {
  bottom: 100%;
  left: calc(50% - var(--sl-tooltip-arrow-size));
  border-bottom: var(--sl-tooltip-arrow-size) solid var(--background-color);
  border-left: var(--sl-tooltip-arrow-size) solid transparent;
  border-right: var(--sl-tooltip-arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement=bottom-start] .tooltip::after {
  left: var(--sl-tooltip-arrow-start-end-offset);
}

.tooltip-positioner[data-popper-placement=bottom-end] .tooltip::after {
  right: var(--sl-tooltip-arrow-start-end-offset);
  left: auto;
}

.tooltip-positioner[data-popper-placement^=top] .tooltip::after {
  top: 100%;
  left: calc(50% - var(--sl-tooltip-arrow-size));
  border-top: var(--sl-tooltip-arrow-size) solid var(--background-color);
  border-left: var(--sl-tooltip-arrow-size) solid transparent;
  border-right: var(--sl-tooltip-arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement=top-start] .tooltip::after {
  left: var(--sl-tooltip-arrow-start-end-offset);
}

.tooltip-positioner[data-popper-placement=top-end] .tooltip::after {
  right: var(--sl-tooltip-arrow-start-end-offset);
  left: auto;
}

.tooltip-positioner[data-popper-placement^=left] .tooltip::after {
  top: calc(50% - var(--sl-tooltip-arrow-size));
  left: 100%;
  border-left: var(--sl-tooltip-arrow-size) solid var(--background-color);
  border-top: var(--sl-tooltip-arrow-size) solid transparent;
  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement=left-start] .tooltip::after {
  top: var(--sl-tooltip-arrow-start-end-offset);
}

.tooltip-positioner[data-popper-placement=left-end] .tooltip::after {
  top: auto;
  bottom: var(--sl-tooltip-arrow-start-end-offset);
}

.tooltip-positioner[data-popper-placement^=right] .tooltip::after {
  top: calc(50% - var(--sl-tooltip-arrow-size));
  right: 100%;
  border-right: var(--sl-tooltip-arrow-size) solid var(--background-color);
  border-top: var(--sl-tooltip-arrow-size) solid transparent;
  border-bottom: var(--sl-tooltip-arrow-size) solid transparent;
}

.tooltip-positioner[data-popper-placement=right-start] .tooltip::after {
  top: var(--sl-tooltip-arrow-start-end-offset);
}

.tooltip-positioner[data-popper-placement=right-end] .tooltip::after {
  top: auto;
  bottom: var(--sl-tooltip-arrow-start-end-offset);
}