Tooltip: Top

/*------------------------------------*\
    #TOOLTIP
\*------------------------------------*/

.trigger-tooltip {
  position: relative;
  float: left;
}

.tooltip {
  display: none;
  background-color: $background-default;
  border: 1px solid $border-tooltip;
  font-size: 12px;
  color: $color-tooltip;
  padding: 5px;
  position: absolute;
  z-index: 2;
  border-radius: 2px;
  text-align: left;
}

.tooltip--large {
  width: 160px;
}

.trigger-tooltip:hover .tooltip,
.contextual-menu--active .tooltip {
  display: block;
}

.trigger-tooltip:hover .tooltip--top,
.contextual-menu--active .tooltip--top {
  bottom: 20px;
  left: 0;
}

.trigger-tooltip:hover .tooltip--contextual.tooltip--top,
.trigger-tooltip:hover .tooltip--contextual.tooltip--top-left,
.trigger-tooltip:hover .tooltip--contextual.tooltip--top-right,
.contextual-menu--active .tooltip--contextual.tooltip--top,
.contextual-menu--active .tooltip--contextual.tooltip--top-left,
.contextual-menu--active .tooltip--contextual.tooltip--top-right {
  bottom: 25px;
}

.trigger-tooltip:hover .tooltip--right,
.contextual-menu--active .tooltip--right {
  top: -25%;
  left: calc(100% + 5px);
}

.trigger-tooltip:hover .tooltip--contextual.tooltip--right,
.contextual-menu--active .tooltip--contextual.tooltip--right {
  left: calc(100% + 10px);
}

.trigger-tooltip:hover .tooltip--bottom,
.contextual-menu--active .tooltip--bottom {
  top: 20px;
  left: 0;
}

.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom,
.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-left,
.trigger-tooltip:hover .tooltip--contextual.tooltip--bottom-right,
.contextual-menu--active .tooltip--contextual.tooltip--bottom,
.contextual-menu--active .tooltip--contextual.tooltip--bottom-left,
.contextual-menu--active .tooltip--contextual.tooltip--bottom-right {
  top: 25px;
}

.trigger-tooltip:hover .tooltip--left,
.contextual-menu--active .tooltip--left {
  top: -25%;
  right: calc(100% + 5px);
}

.trigger-tooltip:hover .tooltip--contextual.tooltip--left,
.contextual-menu--active .tooltip--contextual.tooltip--left {
  right: calc(100% + 10px);
}

.input-box--error:focus ~ .tooltip--error,
.input-box--error[checked] ~ .tooltip--error {
  display: block;
  position: absolute;
  bottom: 75%;
  left: 80%;
}

.input-box--error:focus ~ .contextual-menu .tooltip,
.input-box--error[checked] ~ .contextual-menu .tooltip {
  bottom: inherit;
  top: 25px;
}

.input-box--error:focus ~ .contextual-menu .tooltip:before,
.input-box--error[checked] ~ .contextual-menu .tooltip:before {
  border-width: 0 6px 8px 6px;
  border-color: transparent transparent $border-tooltip;
  bottom: inherit;
  top: -8px;
}

.input-box--error:focus ~ .contextual-menu .tooltip:after,
.input-box--error[checked] ~ .contextual-menu .tooltip:after {
  border-width: 0 5px 7px 5px;
  border-color: transparent transparent $border-tooltip-inner;
  bottom: inherit;
  top: -7px;
}

.form__hint {
  position: absolute;
  color: inherit;
  margin: -10px 5px 0;
}