// Tooltips
// Forked from https://github.com/picturepan2/spectre

$unit-1: .2rem !default;
$unit-2: .4rem !default;
$font-size-sm: .7rem !default;
$dark-color: #303742 !default;
$control-width-sm: 320px !default;
$light-color: #fff !default;
$border-radius: .1rem !default;
$zindex-3: 300 !default;

.tooltip {
    position: relative;
    &::after {
      background: rgba($dark-color, .95);
      border-radius: $border-radius;
      bottom: 100%;
      color: $light-color;
      content: attr(data-tooltip);
      display: block;
      font-size: $font-size-sm;
      left: 50%;
      max-width: $control-width-sm;
      opacity: 0;
      overflow: hidden;
      padding: $unit-1 $unit-2;
      pointer-events: none;
      position: absolute;
      text-overflow: ellipsis;
      transform: translate(-50%, $unit-2);
      transition: opacity .2s, transform .2s;
      white-space: pre;
      z-index: $zindex-3;
    }
    &:focus,
    &:hover {
      &::after {
        opacity: 1;
        transform: translate(-50%, -$unit-1);
      }
    }
    &[disabled],
    &.disabled {
      pointer-events: auto;
    }
  
    &.tooltip-right {
      &::after {
        bottom: 50%;
        left: 100%;
        transform: translate(-$unit-1, 50%);
      }
      &:focus,
      &:hover {
        &::after {
          transform: translate($unit-1, 50%);
        }
      }
    }
  
    &.tooltip-bottom {
      &::after {
        bottom: auto;
        top: 100%;
        transform: translate(-50%, -$unit-2);
      }
      &:focus,
      &:hover {
        &::after {
          transform: translate(-50%, $unit-1);
        }
      }
    }
    
    &.tooltip-left {
      &::after {
        bottom: 50%;
        left: auto;
        right: 100%;
        transform: translate($unit-2, 50%);
      }
      &:focus,
      &:hover {
        &::after {
          transform: translate(-$unit-1, 50%);
        }
      }
    }
  }