%tooltip {
  box-shadow: $shadow-100;
  padding: 0.2em;
  color: palette(grey, dark);
  background: palette(white);
  font-family: $ff;
  @include font-size(13px);
  border: 1px solid palette(grey, light);
  position: absolute;
  top: -35px;
  right: 50%;
  margin: auto;
  left: auto;
  transform: translateX(50%);
  max-width: 266px;
  overflow-wrap: break-word;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
}
%tooltip-colored {
  padding: 0.2em 0.5em;
  color: palette(white);
  background: palette(orange, light);
  font-family: $ff;
  @include font-size(13px);
  position: absolute;
  top: -35px;
  right: 50%;
  margin: auto;
  left: auto;
  transform: translateX(50%);
  max-width: 266px;
  overflow-wrap: break-word;
  pointer-events: none;
  z-index: 2;
  white-space: nowrap;
  border-radius: 2px;
}
%hastooltip {
  &:after {
    content: attr(data-title);
    @extend %tooltip;
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  &:hover:after {
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s ease 1s;
    z-index: 2;
  }
}
%hastooltip-colored {
  &:after {
    content: attr(data-title);
    @extend %tooltip-colored;
    opacity: 0;
    z-index: -1;
    width: 0;
    height: 0;
    overflow: hidden;
  }
  &:hover:after {
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s ease 0.2s;
    z-index: 2;
  }
}

.tooltip {
  @extend %tooltip;
  opacity: 0;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
  &--visible {
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s ease 1s;
    z-index: 2;
  }
}
.tooltip-colored {
  @extend %tooltip-colored;
  opacity: 0;
  z-index: -1;
  width: 0;
  height: 0;
  overflow: hidden;
  &--visible {
    width: auto;
    height: auto;
    opacity: 1;
    transition: opacity 0.2s ease 0.2s;
    z-index: 2;
  }
}
.--hasTooltip {
  @extend %hastooltip;
}
.--hasTooltip-colored {
  @extend %hastooltip-colored;
}
