@use '../../helpers';
@use '../../mixins';
@use '../popover/popover';

@mixin Tooltip() {
  @include popover.Popover();

  @if not mixins.includes('Tooltip') {
    @include _Tooltip();
  }
}

@mixin _Tooltip() {
  .ods-tooltip {
    @include helpers.font('200-regular');

    --popover-gap: #{helpers.space(1)};

    background-color: helpers.color('background-inverse-surface');
    border-radius: helpers.border-radius('medium');
    color: helpers.color('content-inverse-main');
    cursor: default;
    height: fit-content;
    line-height: helpers.space(2.25);
    max-width: helpers.space(40);
    opacity: 0;
    overflow: auto;
    padding: helpers.space(1) helpers.space(1.5);
    transition: opacity helpers.time(2) ease helpers.time(3),
      visibility helpers.time(5);
    visibility: hidden;
    width: max-content;

    &.-show {
      @include _visible();
    }

    &.-on-hover:hover {
      @include _visible();
    }
  }

  :focus,
  :hover {
    + .ods-tooltip.-on-hover {
      @include _visible();
    }
  }
}

@mixin _visible() {
  opacity: 1;
  transition: opacity helpers.time(2) ease;
  visibility: visible;
}