@import '../style/functions.scss';
@import '../style/theme.scss';
@import '../style/mixins.scss';

$tooltip-prefix: 'dk-tooltip';

.#{$tooltip-prefix} {
  @include reset-component();
  position: absolute;
  max-width: $tooltip-max-width;
  z-index: $zindex-tooltip;

  &-enter {
    opacity: 0;
  }

  &-enter-active {
    opacity: 1;
    transition: opacity 150ms ease-in;
  }

  &-exit {
    opacity: 1;
  }

  &-exit-active {
    opacity: 0;
    transition: opacity 150ms ease-out;
  }

  &-reference {
    display: inline-block;
  }

  &-inner {
    padding: $tooltip-padding-x $tooltip-padding-y;
    border-radius: $tooltip-border-radius;
    background: $tooltip-bg;
    color: $tooltip-color;
  }

  &-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
  }

  &-top,
  &-top-start,
  &-top-end {
    padding-bottom: $tooltip-distance;
  }

  &-right,
  &-right-start,
  &-right-end {
    padding-left: $tooltip-distance;
  }

  &-bottom,
  &-bottom-start,
  &-bottom-end {
    padding-top: $tooltip-distance;
  }

  &-left,
  &-left-start,
  &-left-end {
    padding-right: $tooltip-distance;
  }

  &-top &-arrow,
  &-top-start &-arrow,
  &-top-end &-arrow {
    bottom: $tooltip-distance - $tooltip-arrow-size;
    border-width: $tooltip-arrow-size $tooltip-arrow-size 0;
    border-top-color: $tooltip-arrow-color;
  }

  &-top &-arrow {
    left: 50%;
    margin-left: -$tooltip-arrow-size;
  }

  &-top-start &-arrow {
    left: 16px;
  }

  &-top-end &-arrow {
    right: 16px;
  }

  &-right &-arrow,
  &-right-start &-arrow,
  &-right-end &-arrow {
    left: $tooltip-distance - $tooltip-arrow-size;
    border-width: $tooltip-arrow-size $tooltip-arrow-size $tooltip-arrow-size 0;
    border-right-color: $tooltip-arrow-color;
  }

  &-right &-arrow {
    top: 50%;
    margin-top: -$tooltip-arrow-size;
  }

  &-right-start &-arrow {
    top: 8px;
  }

  &-right-end &-arrow {
    bottom: 8px;
  }

  &-left &-arrow,
  &-left-start &-arrow,
  &-left-end &-arrow {
    right: $tooltip-distance - $tooltip-arrow-size;
    border-width: $tooltip-arrow-size 0 $tooltip-arrow-size $tooltip-arrow-size;
    border-left-color: $tooltip-arrow-color;
  }

  &-left &-arrow {
    top: 50%;
    margin-top: -$tooltip-arrow-size;
  }

  &-left-start &-arrow {
    top: 8px;
  }

  &-left-end &-arrow {
    bottom: 8px;
  }

  &-bottom &-arrow,
  &-bottom-start &-arrow,
  &-bottom-end &-arrow {
    top: $tooltip-distance - $tooltip-arrow-size;
    border-width: 0 $tooltip-arrow-size $tooltip-arrow-size;
    border-bottom-color: $tooltip-arrow-color;
  }

  &-bottom &-arrow {
    left: 50%;
    margin-left: -$tooltip-arrow-size;
  }

  &-bottom-start &-arrow {
    left: 16px;
  }

  &-bottom-end &-arrow {
    right: 16px;
  }
}