@import '../settings/variables';
@import '../tools/mixins/transition';
@import '../tools/mixins/position';

.c-chart-tooltip {
  position: absolute;
  display: inline-block;
  padding: $gutter-medium;
  background-color: $color-background;
  box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  opacity: 0;
  visibility: hidden;
  @include transition((opacity, visibility));

  &--top {
    transform: translate(-50%, calc(-100% - 1em));
  }

  &--visible {
    visibility: visible;
    opacity: 1;
  }
}