$tooltip-fontsize-lg: rem(1);
$tooltip-fontsize-sm: rem(1.4);
$tooltip-height-lg: rem(2.2);
$tooltip-height-sm: rem(3.2);
$tooltip-top-margin-lg: rem(1.4);
$tooltip-top-margin-sm: rem(2.4);
$tooltip-lr-padding-lg: rem(0.8);
$tooltip-lr-padding-sm: rem(1.6);
$tooltip-max-width: rem(3.20);

md-tooltip {
  position: absolute;
  z-index: $z-index-tooltip;
  overflow: hidden;
  pointer-events: none;
  border-radius: 4px;

  font-weight: 500;
  font-size: $tooltip-fontsize-sm;
  @media screen and (min-width: $layout-breakpoint-sm) {
    font-size: $tooltip-fontsize-lg;
  }

  .md-content {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: center top;
    transform: scale(0);
    opacity: 0;
    height: $tooltip-height-sm;
    line-height: $tooltip-height-sm;
    padding-left: $tooltip-lr-padding-sm;
    padding-right: $tooltip-lr-padding-sm;
    @media screen and (min-width: $layout-breakpoint-sm) {
      height: $tooltip-height-lg;
      line-height: $tooltip-height-lg;
      padding-left: $tooltip-lr-padding-lg;
      padding-right: $tooltip-lr-padding-lg;
    }
    &.md-show-add {
      transition: $swift-ease-out;
      transition-duration: .2s;
      transform: scale(0);
      opacity: 0;
    }
    &.md-show, &.md-show-add-active {
      transform: scale(1);
      opacity: 1;
      transform-origin: center top;
    }
    &.md-show-remove {
      transition: $swift-ease-out;
      transition-duration: .2s;
      &.md-show-remove-active {
        transform: scale(0);
        opacity: 0;
      }
    }
  }

  &.md-hide {
    transition: $swift-ease-in;
  }

  &.md-show {
    transition: $swift-ease-out;
    pointer-events: auto;
  }
}