@keyframes emerge-up {
  from { transform: translateY(10px); opacity: 0; }
  to { transform: translateY(0px); opacity: 1; }
}

@-moz-keyframes emerge-up {
  from { -moz-transform: translateY(10px); opacity: 0; }
  to { -moz-transform: translateY(0px); opacity: 1; }
}

@-webkit-keyframes "emerge-up" {
  from { -webkit-transform: translateY(10px); opacity: 0; }
  to { -webkit-transform: translateY(0px); opacity: 1; }
}

@keyframes emerge-down {
  from { transform: translateY(-10px); opacity: 0; }
  to { transform: translateY(0px); opacity: 1; }
}

@-moz-keyframes emerge-down {
  from { -moz-transform: translateY(-10px); opacity: 0; }
  to { -moz-transform: translateY(0px); opacity: 1; }
}

@-webkit-keyframes "emerge-down" {
  from { -webkit-transform: translateY(-10px); opacity: 0; }
  to { -webkit-transform: translateY(0px); opacity: 1; }
}

$tool-tip--color: hsla(0, 0%, 0%, 0.5);

.tool-tip {
  color: hsl(0, 0%, 85%);
  cursor: default;
  font-family: $font-family--monospace;
  font-size: 13px;
  font-weight: 500;
  height: 100%;
  position: absolute;
  width: 100%;
}

.tool-tip--above {
  top: -40px;
}

.tool-tip--below {
  bottom: -105%;
}

.tool-tip__content {
  text-align: center;
}

.tool-tip__content--above {
  -webkit-animation: emerge-up 0.25s ease-out;
     -moz-animation: emerge-up 0.25s ease-out;
          animation: emerge-up 0.25s ease-out;
}

.tool-tip__content--below {
  -webkit-animation: emerge-down 0.25s ease-out;
     -moz-animation: emerge-down 0.25s ease-out;
          animation: emerge-down 0.25s ease-out;
}

.tool-tip__content nobr {
  background-color: $tool-tip--color;
  padding: 4px 5px;
}

.tool-tip__caret {
  border-left: solid transparent 8px;
  border-right: solid transparent 8px;
  content: " ";
  height: 0;
  margin: 4px auto;
  width: 0;
}

.tool-tip__caret--above {
  -webkit-animation: emerge-up 0.25s ease-out;
     -moz-animation: emerge-up 0.25s ease-out;
          animation: emerge-up 0.25s ease-out;
}

.tool-tip__caret--below {
  -webkit-animation: emerge-down 0.25s ease-out;
     -moz-animation: emerge-down 0.25s ease-out;
          animation: emerge-down 0.25s ease-out;
}

.tool-tip__caret--below {
  border-bottom: solid $tool-tip--color 8px;
}

.tool-tip__caret--above {
  border-top: solid $tool-tip--color 8px;
}
