.tooltip {
  display: inline-block;
}

.tooltip__trigger {
  appearance: none;
  border: none;
  padding: 0;
  font: inherit;
  display: inline-block;
  text-align: center;
  font-weight: 600;
  color: var(--hs-tooltip-text);
  background-color: var(--hs-tooltip-background);
  border-radius: 100%;
  width: calc(var(--hs-spacing-large) * 1.5);
  height: calc(var(--hs-spacing-large) * 1.5);
  line-height: calc(var(--hs-spacing-large) * 1.5);
  font-size: var(--hs-typography-base-size);
  flex-shrink: 0;
  cursor: help;
}

@position-try --tooltip-snap-left {
  justify-self: normal;
  left: var(--hs-spacing-base);
}

@position-try --tooltip-snap-right {
  justify-self: normal;
  left: unset;
  right: var(--hs-spacing-base);
}

@position-try --tooltip-above {
  top: unset;
  bottom: calc(anchor(top) + var(--hs-spacing-base) * 0.5);
}

@position-try --tooltip-above-snap-left {
  top: unset;
  bottom: calc(anchor(top) + var(--hs-spacing-base) * 0.5);
  justify-self: normal;
  left: var(--hs-spacing-base);
}

@position-try --tooltip-above-snap-right {
  top: unset;
  bottom: calc(anchor(top) + var(--hs-spacing-base) * 0.5);
  justify-self: normal;
  left: unset;
  right: var(--hs-spacing-base);
}

.tooltip__content {
  position: fixed;
  inset: unset;
  top: calc(anchor(bottom) + var(--hs-spacing-base) * 0.5);
  justify-self: anchor-center;
  position-try-fallbacks:
    --tooltip-snap-left,
    --tooltip-snap-right,
    --tooltip-above,
    --tooltip-above-snap-left,
    --tooltip-above-snap-right;
  width: max-content;
  margin: 0;
  border: none;
  border-radius: var(--hs-radius-boxes);
  padding: var(--hs-spacing-base);
  color: var(--hs-tooltip-text);
  font-size: var(--hs-typography-extrasmall-size);
  background-color: var(--hs-tooltip-background);
  box-shadow: var(--hs-shadow-dark);
  opacity: 0;
  transition-property: opacity, display;
  transition-duration: var(--hs-transitions-duration-base);
  transition-timing-function: var(--hs-transitions-easing);
  transition-behavior: allow-discrete;
}

.tooltip__content:popover-open {
  opacity: 1;
}

@starting-style {
  .tooltip__content:popover-open {
    opacity: 0;
  }
}

.tooltip--color-default {
  --hs-tooltip-background: var(--hs-palette-highlight-default-main);
  --hs-tooltip-text: var(--hs-palette-highlight-default-contrast);
}

.tooltip--color-error {
  --hs-tooltip-background: var(--hs-palette-highlight-error-main);
  --hs-tooltip-text: var(--hs-palette-highlight-error-contrast);
}

.tooltip--color-success {
  --hs-tooltip-background: var(--hs-palette-highlight-success-main);
  --hs-tooltip-text: var(--hs-palette-highlight-success-contrast);
}

.tooltip--color-info {
  --hs-tooltip-background: var(--hs-palette-highlight-info-main);
  --hs-tooltip-text: var(--hs-palette-highlight-info-contrast);
}

.tooltip--color-warning {
  --hs-tooltip-background: var(--hs-palette-highlight-warning-main);
  --hs-tooltip-text: var(--hs-palette-highlight-warning-contrast);
}

.tooltip--color-disabled {
  --hs-tooltip-background: var(--hs-palette-button-disabled-main);
  --hs-tooltip-text: var(--hs-palette-button-disabled-contrast);
}