:host {
  position: relative;
  box-sizing: border-box;
  font-feature-settings: "cv03", "cv04", "cv11";
}
:host *, :host *:before, :host *:after {
  box-sizing: inherit;
}

/**
 * @prop --hide-delay: The amount of time to wait before hiding the tooltip.
 * @prop --hide-duration: The amount of time the hide transition takes to complete.
 * @prop --hide-timing-function: The timing function (easing) to use for the hide transition.
 * @prop --max-width: The maximum width of the tooltip.
 * @prop --show-delay: The amount of time to wait before showing the tooltip.
 * @prop --show-duration: The amount of time the show transition takes to complete.
 * @prop --show-timing-function: The timing function (easing) to use for the show transition.
 */
: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;
  display: contents;
}

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

.tooltip {
  max-width: var(--max-width);
  border-radius: var(--sl-tooltip-border-radius);
  background-color: var(--sl-tooltip-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(--sl-tooltip-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: none;
  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(--sl-tooltip-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(--sl-tooltip-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(--sl-tooltip-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(--sl-tooltip-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);
}

::slotted(sl-button[shape=block-middle]),
::slotted(sl-button[shape=block-last]) {
  margin-left: -1px;
}