.uni-tooltip {
  @include tooltip();

  &__text {
    width: 200px;
  }

  &:not(.uni-tooltip--alternative) {
    @include breakpoint("x-medium") {
      min-width: 60%;
      max-width: 80%;
      width: auto;

      .uni-tooltip__text {
        position: fixed;
        width: auto;
        top: 8px;
        left: 50vw;
        transform: translateX(-50%);
        z-index: 2;
      }
    }
  }

  &--alternative {
    position: absolute;
    left: calc(100% + 12px);
    top: 0;

    &:not(.uni-tooltip--active):hover,
    &:not(.uni-tooltip--active):hover .uni-tooltip__text {
      visibility: hidden !important;
    }

    .uni-tooltip__text {
      @include breakpoint("x-medium") {
        position: relative;
        left: 0;
      }
    }
  }
}