@import "tokens";
@import "mixins";

$tooltip-vertical-padding: $spacing-xxs;
$tooltip-horizontal-padding: $spacing-s;
$tooltip-vertical-padding-sm: $spacing-xxxs;
$tooltip-horizontal-padding-sm: $spacing-xxs;
$tooltip-min-width: 250px;
$tooltip-spacing: $spacing-xs;
$tooltip-background: $color-controlbase;
$tooltip-border-radius: $radius-card;
$tooltip-text-color: $color-primary-text;
$tooltip-arrow-width: 4px;
$tooltip-arrow-margin: $spacing-xxs;

.cdk-overlay-tooltip {
  pointer-events: none!important;
}

.tooltip {
  display: block;
  position: relative;
  max-width: $tooltip-min-width;
  background: $tooltip-background;
  border-radius: $tooltip-border-radius;
  color: $tooltip-text-color;
  font-size: 12px;
  pointer-events: auto;
  &:after {
    content: '';
    position: absolute;
    border-left: $tooltip-arrow-width solid transparent;
    border-right: $tooltip-arrow-width solid transparent;
  }
  &.tooltip--size-md {
    padding: $tooltip-vertical-padding $tooltip-horizontal-padding;
  }
  &.tooltip--size-sm {
    padding: $tooltip-vertical-padding-sm $tooltip-horizontal-padding-sm;
  }
  &.tooltip--position-top {
    margin-bottom: $tooltip-spacing;
    &:after {
      bottom: -$tooltip-arrow-width;
      border-top: $tooltip-arrow-width solid $tooltip-background;
    }
  }
  &.tooltip--position-bottom {
    margin-top: $tooltip-spacing;
    &:after {
      top: -$tooltip-arrow-width;
      border-bottom: $tooltip-arrow-width solid $tooltip-background;
    }
  }
  &.tooltip--position-start {
    &:after {
      left: $tooltip-arrow-margin;
    }
  }
  &.tooltip--position-center {
    &:after {
      left: 50%;
      transform: translateX(-50%);
    }
  }
  &.tooltip--position-end {
    &:after {
      right: $tooltip-arrow-margin;
    }
  }
}