@import "_variables";

.mk-tt {
  cursor: pointer;
}

.mk-tt-modal {
  background: @mk-tt-bg;
  border-radius: 2px;
  box-shadow: @mk-tt-boxshadow;
  color: @mk-tt-color;
  display: none;
  opacity: 0;
  padding: @mk-tt-padding;
  position: absolute;
  margin: @mk-tt-margin;
  z-index: 9999;
  border-collapse: separate;
}

.mk-tt-modal.transitions {
  transition: opacity @mk-tt-transition-speed;
 -webkit-transition: opacity @mk-tt-transition-speed;
}

.mk-tt-modal.transition {
  display: block;
}

.mk-tt-modal.out {
  opacity: 0;
}

.mk-tt-modal[aria-hidden="false"] {
  display: block;
  opacity: 1;
}

.mk-tt-modal:before,
.mk-tt-modal:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
}

.mk-tt-modal.top-left:before,
.mk-tt-modal.top-center:before,
.mk-tt-modal.top-right:before,
.mk-tt-modal.top-left:after,
.mk-tt-modal.top-center:after,
.mk-tt-modal.top-right:after {
  border-left: @mk-tt-arrow-size solid transparent;
  border-right: @mk-tt-arrow-size solid transparent;
  border-top: @mk-tt-arrow-size solid @mk-tt-bg;
  top: 100%;
}

.mk-tt-modal.bottom-left:before,
.mk-tt-modal.bottom-center:before,
.mk-tt-modal.bottom-right:before,
.mk-tt-modal.bottom-left:after,
.mk-tt-modal.bottom-center:after,
.mk-tt-modal.bottom-right:after {
  border-left: @mk-tt-arrow-size solid transparent;
  border-right: @mk-tt-arrow-size solid transparent;
  border-bottom: @mk-tt-arrow-size solid @mk-tt-bg;
  bottom: 100%;
}

.mk-tt-modal.left-top:before,
.mk-tt-modal.left-center:before,
.mk-tt-modal.left-bottom:before,
.mk-tt-modal.left-top:after,
.mk-tt-modal.left-center:after,
.mk-tt-modal.left-bottom:after {
  border-top: @mk-tt-arrow-size solid transparent;
  border-bottom: @mk-tt-arrow-size solid transparent;
  border-left: @mk-tt-arrow-size solid @mk-tt-bg;
  left: 100%;
}

.mk-tt-modal.right-top:before,
.mk-tt-modal.right-center:before,
.mk-tt-modal.right-bottom:before,
.mk-tt-modal.right-top:after,
.mk-tt-modal.right-center:after,
.mk-tt-modal.right-bottom:after {
  border-top: @mk-tt-arrow-size solid transparent;
  border-bottom: @mk-tt-arrow-size solid transparent;
  border-right: @mk-tt-arrow-size solid @mk-tt-bg;
  right: 100%;
}

.mk-tt-modal.top-left:before,
.mk-tt-modal.bottom-left:before,
.mk-tt-modal.top-left:after,
.mk-tt-modal.bottom-left:after {
  left: @mk-tt-arrow-offset;
}

.mk-tt-modal.top-right:before,
.mk-tt-modal.bottom-right:before,
.mk-tt-modal.top-right:after,
.mk-tt-modal.bottom-right:after {
  right: @mk-tt-arrow-offset;
}

.mk-tt-modal.top-center:before,
.mk-tt-modal.bottom-center:before,
.mk-tt-modal.top-center:after,
.mk-tt-modal.bottom-center:after {
  left: 50%;
  margin-left: (@mk-tt-arrow-offset * -1);
}

.mk-tt-modal.left-top:before,
.mk-tt-modal.right-top:before,
.mk-tt-modal.left-top:after,
.mk-tt-modal.right-top:after {
  top: @mk-tt-arrow-offset;
}

.mk-tt-modal.left-bottom:before,
.mk-tt-modal.right-bottom:before,
.mk-tt-modal.left-bottom:after,
.mk-tt-modal.right-bottom:after {
  bottom: @mk-tt-arrow-offset;
}

.mk-tt-modal.left-center:before,
.mk-tt-modal.right-center:before,
.mk-tt-modal.left-center:after,
.mk-tt-modal.right-center:after {
  top: 50%;
  margin-top: (@mk-tt-arrow-offset * -1);
}

.mk-tt-kill {
  position: absolute;
  left: -9999px;
}