/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
::slotted(*) {
  font-size: inherit;
  font-family: inherit;
  color: inherit;
  margin: 0;
}

::slotted(strong) {
  font-weight: bold;
}

::slotted(small) {
  font-size: var(--joy-font-size-primary-100);
}

@keyframes showTooltip {
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes hideTooltip {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.6);
  }
}
:host {
  --tooltip-animation-timing: var(--joy-transition-duration-default);
  position: absolute;
  z-index: var(--joy-core-z-index-tooltip);
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-200);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  width: auto;
  transform: scale(0.6);
  opacity: 0;
  animation: showTooltip var(--tooltip-animation-timing) forwards;
}

:host(.joy-tooltip--hiding) {
  animation: hideTooltip var(--tooltip-animation-timing) forwards;
}

:host([variant=primary]) {
  /**
   * @prop --tooltip-bg-color: Tooltip background color
   * @prop --tooltip-content-color: Tooltip text color
   */
  --tooltip-bg-color: var(--joy-color-information-90);
  --tooltip-content-color: white;
}

:host([variant=secondary]) {
  --tooltip-bg-color: var(--joy-color-neutral-10);
  --tooltip-content-color: var(--joy-color-neutral-60);
}

.joy-tooltip {
  font-weight: normal;
  box-sizing: border-box;
  border-radius: var(--joy-core-radius-3);
  padding: var(--joy-core-spacing-4);
  box-shadow: var(--joy-core-elevation-3);
  color: var(--tooltip-content-color);
  background-color: var(--tooltip-bg-color);
}

.joy-tooltip__arrow {
  position: absolute;
  background: var(--tooltip-bg-color);
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
}