@import 'tao/ui/globals';

$arrowSize: 0.75rem;

.tao-tooltip {

display: none;
position: absolute;
left: -9999px;
top: -9999px;
z-index: $z-index-popover;
opacity: 0;
transition: opacity 200ms;

&[active] {
  opacity: 1;
  display: block;
}

.tao-popover-content {
  padding: 0.5rem 0.75rem;
  background: $grey-color;
  color: $white-color;
  border-radius: $border-radius;
  white-space: nowrap;
  font-size: 0.875rem;
}

.tao-popover-arrow {
  display: none;
  position: absolute;
  width: $arrowSize;
  height: $arrowSize;

  .arrow {
    font-size: 0;
    height: 0;
    width: 0;
    border-style: solid;
    border-width: $arrowSize / 2;
    border-color: $grey-color;
    position: absolute;
    left: 0;
    top: 0;
  }

  .arrow-border,
  .arrow-shadow {
    display: none;
  }
}

&[with-arrow] .tao-popover-arrow {
  display: block;
}

&[direction='right-top'],
&[direction='right-bottom'],
&[direction='right-middle'] {
  .tao-popover-arrow {
    left: -$arrowSize;
  }

  .arrow-basic {
    border-color: transparent $grey-color transparent transparent;
  }
}

&[direction='left-top'],
&[direction='left-bottom'],
&[direction='left-middle'] {
  .tao-popover-arrow {
    right: -$arrowSize;
  }

  .arrow-basic {
    border-color: transparent transparent transparent $grey-color;
  }
}

&[direction='left-top'],
&[direction='right-top'] {
  .tao-popover-arrow {
    bottom: $arrowSize;
  }
}

&[direction='left-bottom'],
&[direction='right-bottom'] {
  .tao-popover-arrow {
    top: $arrowSize;
  }
}

&[direction='left-middle'],
&[direction='right-middle'] {
  .tao-popover-arrow {
    top: 50%;
    margin-top: -$arrowSize / 2;
  }
}

&[direction='top-left'],
&[direction='top-right'],
&[direction='top-center'] {
  .tao-popover-arrow {
    bottom: -$arrowSize;
  }

  .arrow-basic {
    border-color: $grey-color transparent transparent transparent;
  }
}

&[direction='bottom-left'],
&[direction='bottom-right'],
&[direction='bottom-center'] {
  .tao-popover-arrow {
    top: -$arrowSize;
  }

  .arrow-basic {
    border-color: transparent transparent $grey-color transparent;
  }
}

&[direction='top-left'],
&[direction='bottom-left'] {
  .tao-popover-arrow {
    right: $arrowSize;
  }
}

&[direction='top-right'],
&[direction='bottom-right'] {
  .tao-popover-arrow {
    left: $arrowSize;
  }
}

&[direction='top-center'],
&[direction='bottom-center'] {
  .tao-popover-arrow {
    left: 50%;
    margin-left: -$arrowSize / 2;
  }
}

}