/**
 * Tip.
 *
 * .tip.tip-[direction]
 *   .tip-inner
 *   .tip-arrow
 */

.tip {
  font-size: 11px;
}

.tip-inner {
  background-color: rgba(0,0,0,.75);
  color: #fff;
  padding: 8px 10px 7px 10px;
  text-align: center;
}

.tip-inner {
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
}

.tip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  border: 5px dashed rgba(0,0,0,.75);
}

.tip-arrow-top { border-top-color: rgba(0,0,0,.75) }
.tip-arrow-bottom { border-bottom-color: rgba(0,0,0,.75) }
.tip-arrow-left { border-left-color: rgba(0,0,0,.75) }
.tip-arrow-right { border-right-color: rgba(0,0,0,.75) }

.tip-top .tip-arrow,
.tip-top-left .tip-arrow,
.tip-top-right .tip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-top-style: solid;
  border-bottom: none;
  border-left-color: transparent;
  border-right-color: transparent
}

.tip-bottom .tip-arrow,
.tip-bottom-left .tip-arrow,
.tip-bottom-right .tip-arrow {
  top: 0px;
  left: 50%;
  margin-left: -5px;
  border-bottom-style: solid;
  border-top: none;
  border-left-color: transparent;
  border-right-color: transparent
}

.tip-left .tip-arrow {
  right: 0;
  top: 50%;
  margin-top: -5px;
  border-left-style: solid;
  border-right: none;
  border-top-color: transparent;
  border-bottom-color: transparent
}

.tip-right .tip-arrow {
  left: 0;
  top: 50%;
  margin-top: -5px;
  border-right-style: solid;
  border-left: none;
  border-top-color: transparent;
  border-bottom-color: transparent
}

.tip-top-left .tip-arrow,
.tip-bottom-left .tip-arrow {
  left: 85%;
}


.tip-top-right .tip-arrow,
.tip-bottom-right .tip-arrow {
  left: 15px;
}

.tip {
  position: absolute;
  padding: 5px;
  z-index: 1000;
  /* default offset for edge-cases: https://github.com/component/tip/pull/12 */
  top: 0;
  left: 0;
}

/* effects */

.tip.fade {
  transition: opacity 100ms;
  -moz-transition: opacity 100ms;
  -webkit-transition: opacity 100ms;
}

.tip-hide {
  opacity: 0;
}