/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --tooltip-font-family: var(--default-font-family);
  --tooltip-font-size: var(--default-font-size-small);
  --tooltip-background-color: color-mod(#000 alpha(70%));
  --tooltip-color: #fff;
  --tooltip-offset: 3px;
  --tooltip-z-index: var(--z-index-tooltip);
  --tooltip-transition-duration: 100ms;
}

/* Styles */
.wrapper {
  display: inline-block;
}

.tetherElement {
  z-index: var(--tooltip-z-index);
  pointer-events: none;
}

.tooltip {
  all: initial;
  position: relative;
  z-index: var(--tooltip-z-index);
  display: block;
  box-sizing: border-box;
  margin: var(--tooltip-offset);
  padding: 3px 12px;
  text-align: center;
  letter-spacing: -0.3px;
  pointer-events: none;
  border-radius: 3px;
  font-family: var(--tooltip-font-family);
  font-size: var(--tooltip-font-size);
  line-height: 20px;
  color: var(--tooltip-color);
  @mixin no-select;

  & strong {
    font-weight: 500;
  }
}

.default {
  background-color: var(--tooltip-background-color);
}

.primary {
  background-color: var(--color-primary);
}

.danger {
  background-color: var(--color-danger);
}

.info {
  background-color: var(--color-info);
}

.warning {
  background-color: var(--color-warning);
}

.success {
  background-color: var(--color-success);
}

/* Animations */
.appear {
  transform: translateZ(0) scale(0.3);
  transform-origin: 50% 50%;
  opacity: 0.01;
}

.appearActive {
  transition: all var(--tooltip-transition-duration) ease-out;
  transform: translateZ(0) scale(1);
  opacity: 1;
}