@import '../../common.scss';

$zIndex: 2000;
$font-size: 14px;
$line-height: 1.29;
$padding: 18px;
$border-radius: 8px;
$shadow-color: rgba(0, 0, 0, 0.2);
$shadow-color-arrow: rgba(0, 0, 0, .1);
$shadow: 0 0 11px 0 $shadow-color;
$arrow-bottom-shadow: 3px 3px 6px $shadow-color-arrow;
$arrow-up-shadow: -3px -3px 6px $shadow-color-arrow;
$arrow-left-shadow: -3px 3px 6px $shadow-color-arrow;
$arrow-right-shadow: 3px -3px 6px $shadow-color-arrow;

.root {
  display: inline-block;
}

.tooltip {
  visibility: hidden;
}

.targetWrapper {
}

.tooltipInner {
  @include FontRoman;
  position: relative;
  display: inline-block;
  border-radius: $border-radius;
  padding: $padding;
  font-size: $font-size;
  line-height: $line-height;
  box-shadow: $shadow;
  word-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  visibility: hidden;

   &.bottom {
     top: 10px !important;
   }

   &.top {
     top: -10px !important;
   }

   &.right {
     left: 10px !important;
   }

   &.left {
     left: -10px !important;
   }

   &.light {
     color: $D10;
     background: $D80;
   }
   &.dark {
     color: $D80;
     background: $D10;
   }
   &.error {
     color: white;
     background: $R00;
   }
   &.normal {
     font-size: 14px;
     line-height: 18px;
     text-align: center;
   }
   &.large {
     font-size: 16px;
     line-height: 24px;
     text-align: center;
   }

   &.active {
     visibility: visible;
     animation: fadeIn .3s cubic-bezier(0.23, 1, 0.32, 1) both; 
   }
}

.arrow {
  $arrow-size: 10px;
  position: absolute;
  height: $arrow-size;
  width: $arrow-size;
  transform: rotateZ(45deg);
  background: inherit;
  &.bottom, &.top {
    left: 50%;
    margin-left: -$arrow-size/2;
  }
  &.bottom {
    bottom: -4px;
    box-shadow: $arrow-bottom-shadow;
  }
  &.top {
    top: -4px;
    box-shadow: $arrow-up-shadow;
  }
  &.left, &.right {
    top: 50%;
    margin-top: -5px;
  }
  &.right {
    right: -5px;
    box-shadow: $arrow-right-shadow;
  }
  &.left {
    left: -5px;
    box-shadow: $arrow-left-shadow;
  }
}

.fadeIn { animation: fadeIn .3s cubic-bezier(0.23, 1, 0.32, 1) both; }

.bounce-top, .bounce-bottom { animation: bounceVertically   1s ease infinite; }
.bounce-left, .bounce-right { animation: bounceHorizontally 1s ease infinite; }

.bounce-top,
.bounce-bottom,
.bounce-left,
.bounce-right {
  &:hover {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    -o-animation-play-state: paused;
  }
}

@keyframes fadeIn {
  from {
    opacity: .85;
    transform: scale(.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bounceVertically {
    0% { transform: translateY(0); }
   50% { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

@keyframes bounceHorizontally {
    0% { transform: translateX(0); }
   50% { transform: translateX(-10px); }
  100% { transform: translateX(0); }
}