@mixin private-pgh-tooltip-arrow($dir) {
  &[style*='#{$dir}'] {
    &::before {
      $transparent-border-width: 4px;
      $colored-border-width: 5px;
      @if $dir == 'bottom' or $dir == 'top' {
        $is-dir-bottom: $dir == 'bottom';
        $opposite-dir: if($is-dir-bottom, 'top', 'bottom');

        #{$dir}: 0;
        left: 50%;
        transform: translate(-50%, $transparent-border-width * if($is-dir-bottom, +1, -1));
        border-#{$opposite-dir}: $colored-border-width solid currentcolor;
        border-inline-start: $transparent-border-width solid transparent;
        border-inline-end: $transparent-border-width solid transparent;
      }

      @if $dir == 'right' or $dir == 'left' {
        $is-dir-right: $dir == 'right';
        $opposite-dir: if($is-dir-right, 'left', 'right');

        top: 50%;
        #{$dir}: 0;
        transform: translate($transparent-border-width * if($is-dir-right, +1, -1), -50%);
        border-#{$opposite-dir}: $colored-border-width solid currentcolor;
        border-top: $transparent-border-width solid transparent;
        border-bottom: $transparent-border-width solid transparent;
      }
    }
  }
}

.pgh-mat {
  .mat-mdc-tooltip {
    $bg-color: var(--000);
    background: $bg-color;
    color: var(--fff);
    position: relative;
    overflow: visible !important;
    font-size: 0.75rem;

    &::before {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      color: $bg-color;
      z-index: 2;
    }

    @each $dir in ('right', 'left', 'top', 'bottom') {
      @include private-pgh-tooltip-arrow($dir);
    }
  }
}