.x-tooltip {
  position: relative;
  display: inline-block;

  &::before {
    --tw-content: attr(aria-label);

    background-color: var(--x-tooltip-background-color);
    color: var(--x-tooltip-color);
    border-radius: var(--x-tooltip-border-radius);
    font-size: var(--x-tooltip-font-size);
    padding: var(--x-tooltip-padding-block) var(--x-tooltip-padding-inline);
    z-index: var(--x-tooltip-z-index, var(--z-index-20));
    transition-property: var(--default-transition-property);
    transition-timing-function: var(--ease-in-out);
    transition-duration: var(--default-transition-duration);
    content: var(--tw-content);
    opacity: var(--tw-opacity);
    visibility: var(--tw-visibility);
    transform:
      translate(var(--tw-translate-x, 0), var(--tw-translate-y, 0))
      scaleX(var(--tw-scale-x, 1)) scaleY(var(--tw-scale-y, 1));
    will-change: transform;
    inline-size: max-content;
    position: absolute;
    pointer-events: none;
  }

  &:where(.top),
  &:where(.bottom) {
    &::before {
      --tw-translate-x: -50%;

      margin-block: var(--x-tooltip-margin-block);
      inset-inline-start: 50%;
    }
  }

  &:where(.left),
  &:where(.right) {
    &::before {
      --tw-translate-y: -50%;

      margin-inline: var(--x-tooltip-margin-inline);
      inset-block-start: 50%;
    }
  }

  &:where(.bottom) {
    &::before {
      inset-block-start: 100%;
      transform-origin: top;
    }
  }

  &:where(.top) {
    &::before {
      inset-block-end: 100%;
      transform-origin: bottom;
    }
  }

  &:where(.left) {
    &::before {
      inset-inline-end: 100%;
      transform-origin: right;
    }
  }

  &:where(.right) {
    &::before {
      inset-inline-start: 100%;
      transform-origin: left;
    }
  }

  &:not(:hover, :focus)::before {
    --tw-scale-x: var(--x-tooltip-scale-x);
    --tw-scale-y: var(--x-tooltip-scale-y);
    --tw-opacity: 0;
    --tw-visibility: hidden;
  }
}