.has-tooltip {
  position: relative;
  display: inline-grid;

  @mixin orientation($direction, $opposite) {
    #{$direction}: unset;
    #{$opposite}: calc(100% + #{$tooltip-arrow-size});

    &::before,
    &::after {
      border: solid $tooltip-arrow-size transparent;
      border-#{$opposite}: none;
      border-#{$direction}-color: $border-color;
      #{$opposite}: unset;
      #{$direction}: 100%;
    }

    &::after {
      border-#{$direction}-color: full-color(primary);
      border-width: calc($tooltip-arrow-size - $border-width);
    }
  }

  [role="tooltip"] {
    display: none;
    font-family: var(--font-family);
    text-align: left;
    z-index: z-index(tooltip);
    @include bg-color(primary);
    padding: spacer(3);
    border: $border;
    border-radius: border-radius(1);
    width: size(10);
    max-width: max-content;
    @include orientation(bottom, top);

    &,
    &::before,
    &::after {
      position: absolute;
      left: 50%;
      transform: translate(-50%, 0);
    }

    &::before,
    &::after {
      content: "";
    }
  }

  &.top [role="tooltip"] {
    @include orientation(top, bottom);
  }

  &.right [role="tooltip"] {
    @include orientation(right, left);

    &,
    &::before,
    &::after {
      transform: translate(0, -50%);
      top: 50%;
    }
  }

  &.left [role="tooltip"] {
    @include orientation(left, right);

    &,
    &::before,
    &::after {
      transform: translate(0, -50%);
      top: 50%;
    }
  }

  &:hover,
  &:focus-within {
    [role="tooltip"] {
      display: block;
    }
  }
}
