@import '../config/import';

.crayons-tooltip {
  &__content {
    position: absolute;
    left: 50%;
    top: 100%;
    transform: translate(-50%, calc(-1 * var(--su-1)));
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    font-size: var(--fs-s);
    font-family: var(--ff-sans-serif);
    font-weight: var(--fw-normal);
    line-height: var(--lh-tight);
    padding: var(--su-2) var(--su-3);
    transition: all var(--transition-props);
    transition-delay: 250ms;
    z-index: var(--z-popover);
    border-radius: var(--radius);
    width: auto;
    opacity: var(--opacity-0);
    pointer-events: none;
    @media (min-width: $breakpoint-m) and (max-width: $breakpoint-l) {
      font-size: var(--fs-xs);
      padding: var(--su-1) var(--su-2);
    }
  }

  .js-focus-visible &__activator.focus-visible:focus,
  &__activator:hover {
    .crayons-tooltip__content:not(.crayons-tooltip__suppressed) {
      opacity: 1;
      transition-delay: 0;
      transform: translate(-50%, var(--su-1));
    }
  }
}

// Minimal version for hover tooltips not triggered by keyboard
.crayons-hover-tooltip[data-tooltip] {
  position: relative;

  &:after {
    @extend .crayons-tooltip__content;
    content: attr(data-tooltip);
    left: 0;
    bottom: 100%;
    top: unset;
    transform: translateY(var(--su-1));
    pointer-events: none;
    width: max-content;
  }

  &:hover {
    &:after {
      opacity: 1;
      transform: translateY(calc(-1 * var(--su-1)));
      transition-delay: 0s;
    }
  }

  // Variant allowing placement in line with right edge instead of left
  &.crayons-hover-tooltip--right:after {
    left: revert;
    right: 0;
  }
}

// Custom tooltip for subforems menu that appears to the right
.subforems-menu-tooltip[data-tooltip] {
  &:after {
    @extend .crayons-tooltip__content;
    content: attr(data-tooltip);
    left: 100%;
    top: 50%;
    bottom: unset;
    transform: translateY(-50%);
    margin-left: var(--su-2);
    pointer-events: none;
    width: max-content;
    white-space: nowrap;
  }

  &:hover {
    &:after {
      opacity: 1;
      transform: translateY(-50%);
      transition-delay: 0s;
    }
  }
}
