:host {
  --border-radius-overlay: var(--pine-border-radius-125);
  --border-width-arrow-down: var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
  --border-width-arrow-left: var(--sizing-arrow-default) var(--sizing-arrow-default) var(--sizing-arrow-default) 0;
  --border-width-arrow-right: var(--sizing-arrow-default) 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
  --border-width-arrow-up: 0 var(--sizing-arrow-default) var(--sizing-arrow-default);
  --box-shadow-default: var(--pine-box-shadow-md);
  --color-background-default: var(--pine-color-charcoal-400);
  --color-text-default: var(--pine-color-white);
  --font-size-overlay: var(--pine-font-size-087);
  --line-height-overlay: var(--pine-line-height-125);
  --sizing-arrow-default: 6px;
  --sizing-arrow-offset: 14px;
  --sizing-width-default: 320px;
  --spacing-padding-overlay: var(--pine-spacing-100) calc(var(--pine-spacing-300) / 2);
  display: inline-block;
  position: relative;
}
:host ::slotted(*) {
  display: flex;
}
:host ::slotted([slot=content]) {
  display: block;
  white-space: normal;
  width: var(--sizing-width-default);
}

.pds-tooltip__content {
  background-color: var(--color-background-default);
  border-radius: var(--border-radius-overlay);
  box-shadow: var(--box-shadow-default);
  color: var(--color-text-default);
  font-size: var(--font-size-overlay);
  line-height: var(--line-height-overlay);
  opacity: 0;
  padding: var(--spacing-padding-overlay);
  position: absolute;
  visibility: hidden;
  width: max-content;
}
.pds-tooltip--is-open .pds-tooltip__content {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}
:host(.pds-tooltip--has-html-content) .pds-tooltip__content {
  width: auto;
}
.pds-tooltip__content::after {
  border-color: transparent;
  border-right-color: transparent;
  border-style: solid;
  border-width: var(--border-width-arrow-left);
  content: "";
  height: 0;
  position: absolute;
  width: 0;
}
.pds-tooltip--right .pds-tooltip__content::after {
  border-inline-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-left);
  left: calc(var(--sizing-arrow-default) * -1);
  top: 50%;
  transform: translateY(-50%);
}
.pds-tooltip--right-end .pds-tooltip__content::after {
  border-inline-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-left);
  bottom: var(--sizing-arrow-offset);
  left: calc(var(--sizing-arrow-default) * -1);
  top: initial;
}
.pds-tooltip--right-start .pds-tooltip__content::after {
  border-inline-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-left);
  left: calc(var(--sizing-arrow-default) * -1);
  top: var(--sizing-arrow-offset);
}
.pds-tooltip--top .pds-tooltip__content::after {
  border-block-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-down);
  bottom: calc(var(--sizing-arrow-default) * -1);
  left: 50%;
  top: initial;
  transform: translateX(-50%);
}
.pds-tooltip--top-start .pds-tooltip__content::after {
  border-block-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-down);
  bottom: calc(var(--sizing-arrow-default) * -1);
  left: var(--sizing-arrow-offset);
  top: initial;
}
.pds-tooltip--top-end .pds-tooltip__content::after {
  border-block-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-down);
  bottom: calc(var(--sizing-arrow-default) * -1);
  left: initial;
  right: var(--sizing-arrow-offset);
  top: initial;
}
.pds-tooltip--left .pds-tooltip__content::after {
  border-inline-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-right);
  left: initial;
  right: calc(var(--sizing-arrow-default) * -1);
  top: 50%;
  transform: translateY(-50%);
}
.pds-tooltip--left-end .pds-tooltip__content::after {
  border-inline-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-right);
  bottom: var(--sizing-arrow-offset);
  left: initial;
  right: calc(var(--sizing-arrow-default) * -1);
  top: initial;
}
.pds-tooltip--left-start .pds-tooltip__content::after {
  border-inline-start-color: var(--color-background-default);
  border-width: var(--border-width-arrow-right);
  left: initial;
  right: calc(var(--sizing-arrow-default) * -1);
  top: var(--sizing-arrow-offset);
}
.pds-tooltip--bottom .pds-tooltip__content::after {
  border-block-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-up);
  left: 50%;
  top: calc(var(--sizing-arrow-default) * -1);
  transform: translateX(-50%);
}
.pds-tooltip--bottom-end .pds-tooltip__content::after {
  border-block-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-up);
  left: initial;
  right: var(--sizing-arrow-offset);
  top: calc(var(--sizing-arrow-default) * -1);
}
.pds-tooltip--bottom-start .pds-tooltip__content::after {
  border-block-end-color: var(--color-background-default);
  border-width: var(--border-width-arrow-up);
  left: var(--sizing-arrow-offset);
  top: calc(var(--sizing-arrow-default) * -1);
}
.pds-tooltip--no-arrow .pds-tooltip__content::after {
  border-width: 0;
}