.tooltip__trigger {
  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;
}

.tooltip__content {
  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);
  z-index: 1;
  margin-top: calc(var(--hs-spacing-base) * 0.5);
}

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

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

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

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

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

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

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