// Simple CSS (only) tooltips

// can be attached to almost any element
// basic usage: <em data-tooltip="em em em em em">em</em>
// used pixels here, so no mess when changing CSS vars.
// :after   the tooltip content itself


[data-tooltip] {

  position: relative;
  &:after {
    content:     attr(data-tooltip);
    z-index: 20000;
    border-radius: var(--space-px);
    //left:         50%;
    //top:        -100%;
    transform:   translateX(-50%) translateY(-4px);
    font-weight: normal;
    font-size:   11px;
    background:  var(--color-main-7);
    color:       var(--color-main-1);
    padding:     2px var(--space-xs);
    // max-width:   500px;
    // overflow: hidden;
    white-space: nowrap;
    font-family: var(--font-standard); // reset
    transition: opacity .3s;
    transition-delay: 250ms;
    opacity: 0;
    position: absolute;
    visibility: hidden;
  }

  &:hover, &:focus {
    &:after {
      visibility: visible;
      opacity: 1;
    }
  }
}

// top is standard

[data-tooltip].tooltip-l:after {
  left:         0;
  top:          0;  
  transform: translateX(calc(-100% - var(--space-xs))) translateY(1px);
}

[data-tooltip].tooltip-r:after {
  right:        0;
  top:          0;
  transform: translateX(calc(100% + var(--space-xs))) translateY(1px);
}

[data-tooltip].tooltip-b:after {
  left:       50%;
  top:       100%;
  transform: translateX(-50%) translateY(4px);
}