.fizz-tooltip-container {
  position: relative;
  width: min-content;
}

.fizz-tooltip-trigger {
  appearance: none;
  border: 0;
  background-color: transparent;
  padding: 0;
  font-weight: $font-weight-semibold;
  white-space: nowrap;
}

.fizz-tooltip {
  display: none;
  position: absolute;
  background-color: $color-background-inverse;
  color: $color-text-inverse;
  padding: $spacing-8 $spacing-16;
  border-radius: $border-radius-large;
  font-size: $text-medium-font-size;
  line-height: $text-medium-line-height;
  font-weight: $font-weight-regular;
  box-shadow: $box-shadow-tooltip;
  top: calc(100% + #{$spacing-4});
  width: max-content;
  max-width: var(--min-width, 180px);
  text-align: left;
  z-index: $elevation-popover;
}

@media (min-width: $breakpoint-m) {
  .fizz-tooltip {
    max-width: var(--max-width, 320px);
  }
}

.fizz-tooltip-trigger:hover + .fizz-tooltip,
.fizz-tooltip-container.fizz-is-active .fizz-tooltip {
  display: block;
}

.fizz-tooltip-right {
  right: 0; 
}

.fizz-tooltip-center {
  left: 50%;
  transform: translateX(-50%);
}

.fizz-tooltip-top {
  top: auto;
  bottom: calc(100% + #{$spacing-4});
}