// Lightning Design System 2.29.1
// Copyright (c) 2015-present, salesforce.com, inc. All rights reserved
// Licensed under BSD 3-Clause - see LICENSE.txt or git.io/sfdc-license

@import 'deprecate';

/**
 * The tooltip should be positioned with JavaScript.
 *
 * You can include inline help tooltips for form elements and any focusable items, such as anchor links, buttons, etc. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must  have an `aria-describedby` attribute that points to the tooltip `ID` of the tooltip.
 *
 * @summary Initializes a tooltip
 *
 * @variant
 * @name base
 * @selector .slds-popover_tooltip
 * @restrict [role="tooltip"]
 * @support dev-ready
 */
.slds-popover_tooltip,
.slds-popover--tooltip {
  width: auto;
  max-width: var(--slds-c-tooltip-sizing-max-width, var(--slds-c-tooltip-sizing-width-max, var(--sds-c-tooltip-sizing-max-width, $size-medium)));
  background-color: var(--slds-c-tooltip-color-background, var(--sds-c-tooltip-color-background, var(--slds-g-color-brand-base-20, #{$color-background-alt-inverse})));
  border: 0;

  .slds-popover__body {
    font-size: var(--slds-c-tooltip-font-size, var(--sds-c-tooltip-font-size, $font-size-2));
    color: var(--slds-c-tooltip-text-color, var(--sds-c-tooltip-text-color, var(--slds-g-color-neutral-base-100, #{$color-text-inverse})));
  }

  @media (max-width: map-get($breakpoints, 'small')) {
    max-width: 160px;
  }
}

a:has(+ .slds-popover.slds-popover_tooltip):focus {
  box-shadow: var(--slds-g-shadow-outset-focus-1);
  outline: 0;
}

/**
 * @name rise
 * @summary Toggles on tooltip
 * @selector .slds-rise-from-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
.slds-rise-from-ground {
  visibility: visible;
  opacity: 1;
  transform: translate(0%, 0%);
  transition:
    opacity $duration-quickly linear,
    visibility $duration-quickly linear,
    transform $duration-quickly linear;
  will-change: transform;
}

/**
 * @name fall
 * @summary Toggles off tooltip
 * @selector .slds-fall-into-ground
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group toggle
 */
.slds-fall-into-ground {
  visibility: hidden;
  opacity: 0;
  transform: translate(0%, 0%);
  transition:
    opacity $duration-quickly linear,
    visibility $duration-quickly linear,
    transform $duration-quickly linear;
  will-change: transform;
}

/**
 * @name bottom-to-top
 * @summary Slides tooltip from bottom to top
 * @selector .slds-slide-from-bottom-to-top
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-bottom-to-top {
  transform: translateY(10%);
  will-change: transform;
}

/**
 * @name top-to-bottom
 * @summary Slides tooltip from top to bottom
 * @selector .slds-slide-from-top-to-bottom
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-top-to-bottom {
  transform: translateY(-10%);
  will-change: transform;
}

/**
 * @name right-to-left
 * @summary Slides tooltip from right to left
 * @selector .slds-slide-from-right-to-left
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-right-to-left {
  transform: translateX(5%);
  will-change: transform;
}

/**
 * @name left-to-right
 * @summary Slides tooltip from left to right
 * @selector .slds-slide-from-left-to-right
 * @restrict .slds-popover_tooltip
 * @modifier
 * @group motion
 */
.slds-slide-from-left-to-right {
  transform: translateX(-5%);
  will-change: transform;
}