$grow-directions: (
  (top, bottom, y),
  (left, right, x),
  (right, left, x),
);

.tooltip {
  & .popover-content__content {
    border-radius: var(--wds-tooltip-border-radius, var(--wds-border-radius-300));
  }

  &.popover--skin-dark#{&}--size-small .popover-content__content {
    padding: var(--wds-tooltip-padding-vertical-small, var(--wds-space-150)) var(--wds-tooltip-padding-horizontal-small, var(--wds-space-200)) var(--wds-tooltip-padding-vertical-small, var(--wds-space-150));
  }

  &.popover--skin-dark#{&}--size-medium .popover-content__content {
    padding: var(--wds-tooltip-padding-vertical-medium, var(--wds-space-150)) var(--wds-tooltip-padding-horizontal-medium, var(--wds-space-200));
  }

  &.popover#{&}--size-small .popover-content__content &__text {
    line-height: var(--wds-tooltip-label-font-line-height-small, var(--wds-font-line-height-body-extra-tiny));
  }

  &.popover#{&}--size-medium .popover-content__content &__text {
    font-weight: var(--wds-tooltip-label-font-weight-medium, var(--wds-font-weight-medium));
    font-size: var(--wds-tooltip-label-font-size-medium, var(--wds-font-size-body-tiny));
    line-height: var(--wds-tooltip-label-font-line-height-medium, var(--wds-font-line-height-body-small));
  }

  @container style(--wds-internal-theme: odeditor) {
    @keyframes tooltip-panel-grow-y {
      from {
        transform: scaleY(0.9);
      }

      to {
        transform: none;
      }
    }

    @keyframes tooltip-panel-shrink-y {
      from {
        transform: none;
      }

      to {
        transform: scaleY(0.9);
      }
    }

    @keyframes tooltip-panel-grow-x {
      from {
        transform: scaleX(0.9);
      }

      to {
        transform: none;
      }
    }

    @keyframes tooltip-panel-shrink-x {
      from {
        transform: none;
      }

      to {
        transform: scaleX(0.9);
      }
    }

    @keyframes tooltip-content-in {
      from {
        opacity: 0;
      }

      to {
        opacity: 1;
      }
    }

    & .popover-content--status-open,
    & .popover-content--status-close {
      transform: none;
    }

    & :is(.popover-content--status-open .popover-content__content, .popover-content--status-open.popover-content__content) {
      transform-origin: top;
      animation: tooltip-panel-grow-y 240ms cubic-bezier(0, 0, 0.25, 1);
    }

    & :is(.popover-content--status-open .popover-content__content, .popover-content--status-open.popover-content__content) > div {
      animation: tooltip-content-in 200ms cubic-bezier(0, 0, 0.2, 1) 50ms backwards;
    }

    & :is(.popover-content--status-close .popover-content__content, .popover-content--status-close.popover-content__content) {
      transform-origin: top;
      animation: tooltip-panel-shrink-y 120ms cubic-bezier(0.4, 0, 1, 1) both;
    }

    @each $side, $origin, $axis in $grow-directions {
      & :is(
        .popover-content--status-open:is(.popover-content--placement-#{$side}, .popover-content--placement-#{$side}-start, .popover-content--placement-#{$side}-end) .popover-content__content,
        .popover-content--status-open:is(.popover-content--placement-#{$side}, .popover-content--placement-#{$side}-start, .popover-content--placement-#{$side}-end).popover-content__content
      ) {
        transform-origin: $origin;
        animation: tooltip-panel-grow-#{$axis} 240ms cubic-bezier(0, 0, 0.25, 1);
      }

      & :is(
        .popover-content--status-close:is(.popover-content--placement-#{$side}, .popover-content--placement-#{$side}-start, .popover-content--placement-#{$side}-end) .popover-content__content,
        .popover-content--status-close:is(.popover-content--placement-#{$side}, .popover-content--placement-#{$side}-start, .popover-content--placement-#{$side}-end).popover-content__content
      ) {
        transform-origin: $origin;
        animation: tooltip-panel-shrink-#{$axis} 120ms cubic-bezier(0.4, 0, 1, 1) both;
      }
    }

    @media (prefers-reduced-motion) {
      &#{&} :is(.popover-content--status-open .popover-content__content, .popover-content--status-open.popover-content__content),
      &#{&} :is(.popover-content--status-close .popover-content__content, .popover-content--status-close.popover-content__content) {
        animation: none;
      }
    }
  }
}