.tooltip {
  position: absolute;
  z-index: $tooltip-z-index;
  &__container {
    border: 1px solid $brand-color;
    border-radius: 4px;
    padding: rem-calc(18px);
    max-width: 300px;
    min-width: 135px;
    background: $tooltip-background-color;
    box-shadow: 0 rem-calc(2px) rem-calc(6px) 0 $shadow-color;
  }
  &__name {
    color: $ui-5-color;
    font-size: rem-calc(13px);
    line-height: rem-calc(18px);
    margin-bottom: rem-calc(5px);
  }
  &__stat {
    font-size: rem-calc(20px);
    color: $ui-5-color;
    line-height: rem-calc(18px);
    margin-bottom: rem-calc(8px);
  }
  &__metric {
    text-transform: uppercase;
    color: $brand-color;
    font-size: rem-calc(13px);
    line-height: rem-calc(18px);
  }
}