@import '../../styles/common';

$offset-from-activator: rem(4px);
$content-max-height: rem(100px);
$content-max-width: rem(200px);

.Tooltip {
  margin: $offset-from-activator spacing() spacing();
  opacity: 1;
  box-shadow: shadow(deep);
  border-radius: border-radius();
  pointer-events: none;
  will-change: opacity, left, top;
  transition: opacity duration() easing(in) duration(fast);

  @media screen and (-ms-high-contrast: active) {
    border: border-width(thick) solid ms-high-contrast-color('text');
  }
}

.measuring {
  opacity: 0;
}

.positionedAbove {
  margin: spacing() spacing() $offset-from-activator;
}

.light {
  .Wrapper {
    background: color('white');
    color: color('ink');
  }
}

.Wrapper {
  position: relative;
  display: flex;
  background-color: color('ink');
  border-radius: border-radius();
  color: color('white');
  max-height: $content-max-height;
}

.Content {
  position: relative;
  border-radius: border-radius();
  max-width: $content-max-width;
  max-height: $content-max-height;
}

.Label {
  padding: spacing(extra-tight) spacing(tight);
  word-break: break-word;
}
