@import './theme';

.tippy-arrow {
  display: none;
}

.tippy-content {
  position: relative;
  padding: rem(1) rem(2);
  z-index: 1;
  text-align: left;
}

.tippy-box {
  position: relative;
  background: $tip;
  color: $text;
  border-radius: rem(64);
  font-size: rem(14);
  opacity: .99;
  outline: 0;
  transition-property: transform, visibility, opacity;
  position: relative;
  padding: rem(5) rem(8);
  z-index: 1;
  text-align: left;

  * {
    line-height: 1.3;
  }
}

.tippy-box[data-animation=scale-subtle][data-placement^=top] {
  transform-origin: bottom;
}

.tippy-box[data-animation=scale-subtle][data-placement^=bottom] {
  transform-origin: top;
}

.tippy-box[data-animation=scale-subtle][data-placement^=left] {
  transform-origin: right;
}

.tippy-box[data-animation=scale-subtle][data-placement^=right] {
  transform-origin: left;
}

.tippy-box[data-animation=scale-subtle][data-state=hidden] {
  transform: scale(.8);
  opacity: 0;
}

.tippy-box[data-animation=shift-away][data-state=hidden] {
  opacity: 0;
}

.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=top] {
  transform: translateY(rem(10));
}

.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=bottom] {
  transform: translateY(rem(-10));
}

.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=left] {
  transform: translateX(rem(10));
}

.tippy-box[data-animation=shift-away][data-state=hidden][data-placement^=right] {
  transform: translateX(rem(-10));
}

.tippy-box[data-theme=dropdownMenu] {
  background: $menu;
  border-radius: rem(16);
  box-shadow: $shadowBottom;
}
