@use "../base";
@use "../functions" as *;

$color: hsl(0, 0%, 100%) !default;
$background-color: hsl(0, 0%, 0%) !default;
$border-radius: base.$border-radius !default;

.Tooltip {
  z-index: 2;
  padding: 0.5em 0.75em;
  pointer-events: none;
  text-align: left;
  transition: opacity 150ms ease-out;
  background-color: $background-color;
  color: $color;
  box-shadow: 0.1em 0.1em 1.25em -0.1em rgba(0, 0, 0, 0.5);
  border-radius: $border-radius;
  max-width: base.em(250px);
}