@import '../scss/init.scss';

.tooltip {
  position: fixed !important;
  visibility: hidden;

  &.is_active {
    visibility: visible;
  }

  &_front {
    @include roundCorner;
    background-color: rgba($grey-700, 0.9);
    line-height: normal;
    padding-top: $s_gutter / 4;
    padding-bottom: $s_gutter / 4;
    padding-left: $s_gutter / 2;
    padding-right: $s_gutter / 2;
    color: white;
    transition: 200ms;
    opacity: 0;
    transform: translateY(0);
  }

  &.is_active &_front {
    opacity: 1;
    transform: translateY(14px);
  }
}