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

.c-tooltip {
  display: inline-block;
  position: relative;
  &__content {
    opacity: 0;
    background-color: $color-paragraph;
    color: white;
    padding: 0.5em 1rem;
    border-radius: 0.25em;
    white-space: nowrap;
    z-index: 4;
    @include transition((opacity, visibility));

    &::after {
      content: " ";
      @include absolute(100%, auto, auto, 50%);
      margin-left: -6px;
      border-width: 6px;
      border-style: solid;
      border-color: $color-paragraph transparent transparent transparent;
    }

    &--show {
      opacity: 1;
    }

    &--top {
      @include absolute(0, auto, auto, 50%);
      transform: translate(-50%, calc(-100% - 1em));

      &::after {
        @include absolute(100%, auto, auto, 50%);
      }
    }

    &--bottom {
      @include absolute(auto, auto, 0, 50%);
      transform: translate(-50%, calc(100% + 1em));

      &::after {
        @include absolute(-12px, auto, auto, 50%);
        border-color: transparent transparent $color-paragraph transparent;
      }
    }

    &--left {
      @include absolute(50%, auto, auto, 0);
      transform: translate(calc(-100% - 1em), -50%);

      &::after {
        @include absolute(50%, 0, auto, auto);
        transform: translate(100%,-50%);
        border-color: transparent transparent transparent $color-paragraph;
      }
    }

    &--right {
      @include absolute(50%, 0, auto, auto);
      transform: translate(calc(100% + 1em), -50%);

      &::after {
        @include absolute(50%, auto, auto, 0);
        transform: translate(-50%,-50%);
        border-color: transparent $color-paragraph transparent transparent;
      }
    }
  }

}