@import "bootstrap-sass/assets/stylesheets/bootstrap/tooltip";

/* ==========================================================================
   Tooltip
   ========================================================================== */

.tooltip {
  position: fixed;
}

.tooltip-inner {
  background: $white;
  border-radius: $border-radius-base;
  box-shadow: 0 2px 8px rgba($black, .1);
  color: rgba($primary, .8);
  font-family: $font-primary;
  font-size: 12px;
  font-weight: 700;
  max-width: 220px;
  padding: 12px;
  text-align: center;
  width: 100%;
}

.text-left .tooltip-inner {
  text-align: left;
}

.tooltip-arrow {
  display: none;
}

.tooltip.text-left .tooltip-inner {
  text-align: left;
}

/* New Version
   ========================================================================== */

.tooltip.tooltip-dark,
.tooltip.tooltip-light {
  margin: 0;
  opacity: 0;
  padding: 0;
  position: fixed;
  transform: translateY(-6px);

  /* Animations
     ======================================================================== */
  transition: opacity .333s, transform .333s, visibility .333s;
  visibility: hidden;

  &.showing {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    will-change: opacity;
  }
}

.tooltip.tooltip-dark .tooltip-inner,
.tooltip.tooltip-light .tooltip-inner {
  background: $white;
  border-radius: $border-radius-large;
  box-shadow: $shadow-tooltip;
  color: rgba($primary, .8);
  display: inline-block;
  font-family: $font-primary;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  margin: 12px;
  max-width: 300px;
  padding: 12px;
  text-align: center;
  width: auto;

  .tooltip-title {
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    position: relative;
    text-align: inherit;
    z-index: 2;
  }

  .tooltip-description {
    color: inherit;
    font-family: $font-secondary;
    font-size: 10px;
    font-weight: 400;
    line-height: inherit;
    position: relative;
    text-align: inherit;
    z-index: 2;
  }

  a {
    border-bottom: 1px dashed rgba($primary, .8);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    text-align: inherit;

    @include anim(all);

    &:hover {
      border-bottom: 1px dashed $accent;
      color: $accent;
    }
  }
}

/* Skin Dark
   ========================================================================== */

.tooltip.tooltip-dark .tooltip-inner {
  background: $primary;
  color: $white;

  a {
    border-bottom: 1px dashed $white;

    &:hover {
      border-bottom: 1px dashed $accent;
    }
  }
}