.ask-tooltip {
  background-color: var(--color-background-alpha-bolder-default);
  color: var(--color-texticon-inverse-default);
  padding: 4px;
  border-radius: 8px;
  position: relative;

  > div {
    text-align: center !important;
  }

  &::after {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    background-color: inherit;
  }

  @mixin tooltipAfterPosition($margin, $position1, $position2, $translate) {
    #{$margin}: 4px;

    &::after {
      #{$position1}: -5px;
      #{$position2}: 50%;
      transform: #{$translate}(-50%) rotate(45deg);
    }
  }

  &.-above {
    @include tooltipAfterPosition(margin-bottom, bottom, left, translateX);
  }

  &.-below {
    @include tooltipAfterPosition(margin-top, top, left, translateX);
  }

  &.-after, &.-right {
    @include tooltipAfterPosition(margin-left, left, top, translateY);
  }

  &.-before, &.-left {
    @include tooltipAfterPosition(margin-right, right, top, translateY);
  }
}

::ng-deep mat-tooltip-component .mat-mdc-tooltip .mdc-tooltip__surface {
  background-color: transparent !important;
  color: var(--color-texticon-inverse-default) !important;
}