@import '~@angular/cdk/overlay-prebuilt.css';

$tooltip-font-size: 14px !default;
$tooltip-font-color: #fff !default;
$tooltip-bg: $dark !default;

.tooltip {
  background-color: $tooltip-bg;
  color: $tooltip-font-color;
  font-size: $tooltip-font-size;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius;
  width: 100%;
  max-width: 400px;
  box-shadow: $box-shadow-sm;
  position: relative;

  .tooltip__caret {
    position: absolute;
    background: $tooltip-bg;
    left: 0;
    top: -0.25rem;
    right: 0;
    transform: rotate(-135deg);
    width: 0.6rem;
    height: 0.6rem;
    margin: 0 auto;
    content: '';
  }

  &.tooltip-right .tooltip__caret {
    left: -0.25rem;
    top: 50%;
    right: auto;
    transform: rotate(135deg) translate(-50%, 50%);
  }

  &.tooltip-left .tooltip__caret {
    right: -0.25rem;
    top: 50%;
    left: auto;
    transform: rotate(135deg) translate(-50%, 50%);
  }

  &.tooltip-top .tooltip__caret {
    bottom: -0.25rem;
    top: auto;
  }
}