:host {
  --background-color: var(--supreme-waffle-color-neutral-charcoal-400);
  --box-shadow: var(--supreme-waffle-box-shadow-md);
  --color: var(--supreme-waffle-color-base-white);
  --width: 320px;
  --arrow-size: 6px;
  --arrow-offset: 14px;
  --overlay-border-radius: var(--supreme-waffle-border-radius-md);
  --overlay-font-size: var(--supreme-waffle-font-size-body-sm);
  --overlay-line-height: var(--supreme-waffle-line-height-sm);
  --overlay-padding: var(--supreme-waffle-spacing-xs) calc(var(--supreme-waffle-spacing-md) / 2);
  --arrow-pointing-down: var(--arrow-size) var(--arrow-size) 0;
  --arrow-pointing-to-the-right: var(--arrow-size) 0 var(--arrow-size) var(--arrow-size);
  --arrow-pointing-to-the-left: var(--arrow-size) var(--arrow-size) var(--arrow-size) 0;
  --arrow-pointing-up: 0 var(--arrow-size) var(--arrow-size);
  display: inline-block;
  position: relative;
}
:host ::slotted([slot=content]) {
  white-space: normal;
  width: var(--width);
}

.pds-tooltip__content {
  background-color: var(--background-color);
  border-radius: var(--overlay-border-radius);
  box-shadow: var(--box-shadow);
  color: var(--color);
  font-size: var(--overlay-font-size);
  line-height: var(--overlay-line-height);
  opacity: 0;
  padding: var(--overlay-padding);
  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(--arrow-pointing-to-the-left);
  content: "";
  height: 0;
  position: absolute;
  width: 0;
}
.pds-tooltip--right .pds-tooltip__content::after {
  border-inline-end-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-left);
  left: calc(var(--arrow-size) * -1);
  top: 50%;
  transform: translateY(-50%);
}
.pds-tooltip--right-end .pds-tooltip__content::after {
  border-inline-end-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-left);
  bottom: var(--arrow-offset);
  left: calc(var(--arrow-size) * -1);
  top: initial;
}
.pds-tooltip--right-start .pds-tooltip__content::after {
  border-inline-end-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-left);
  left: calc(var(--arrow-size) * -1);
  top: var(--arrow-offset);
}
.pds-tooltip--top .pds-tooltip__content::after {
  border-block-start-color: var(--background-color);
  border-width: var(--arrow-pointing-down);
  bottom: calc(var(--arrow-size) * -1);
  left: 50%;
  top: initial;
  transform: translateX(-50%);
}
.pds-tooltip--top-start .pds-tooltip__content::after {
  border-block-start-color: var(--background-color);
  border-width: var(--arrow-pointing-down);
  bottom: calc(var(--arrow-size) * -1);
  left: var(--arrow-offset);
  top: initial;
}
.pds-tooltip--top-end .pds-tooltip__content::after {
  border-block-start-color: var(--background-color);
  border-width: var(--arrow-pointing-down);
  bottom: calc(var(--arrow-size) * -1);
  left: initial;
  right: var(--arrow-offset);
  top: initial;
}
.pds-tooltip--left .pds-tooltip__content::after {
  border-inline-start-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-right);
  left: initial;
  right: calc(var(--arrow-size) * -1);
  top: 50%;
  transform: translateY(-50%);
}
.pds-tooltip--left-end .pds-tooltip__content::after {
  border-inline-start-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-right);
  bottom: var(--arrow-offset);
  left: initial;
  right: calc(var(--arrow-size) * -1);
  top: initial;
}
.pds-tooltip--left-start .pds-tooltip__content::after {
  border-inline-start-color: var(--background-color);
  border-width: var(--arrow-pointing-to-the-right);
  left: initial;
  right: calc(var(--arrow-size) * -1);
  top: var(--arrow-offset);
}
.pds-tooltip--bottom .pds-tooltip__content::after {
  border-block-end-color: var(--background-color);
  border-width: var(--arrow-pointing-up);
  left: 50%;
  top: calc(var(--arrow-size) * -1);
  transform: translateX(-50%);
}
.pds-tooltip--bottom-end .pds-tooltip__content::after {
  border-block-end-color: var(--background-color);
  border-width: var(--arrow-pointing-up);
  left: initial;
  right: var(--arrow-offset);
  top: calc(var(--arrow-size) * -1);
}
.pds-tooltip--bottom-start .pds-tooltip__content::after {
  border-block-end-color: var(--background-color);
  border-width: var(--arrow-pointing-up);
  left: var(--arrow-offset);
  top: calc(var(--arrow-size) * -1);
}
.pds-tooltip--no-arrow .pds-tooltip__content::after {
  border-width: 0;
}