.info {
  position: relative;
  display: inline-flex;

  &__content {
    color: #fff;
    background: #000;
    font-size: small;
    font-weight: bold;
    padding: .5rem 1rem;
    white-space: nowrap;
    border-radius: 5px;
  }

  &__trigger {
    //
  }

  &__bubble {
    position: absolute;

    &--top {
      top: -2.6rem;
      left: 50%;
      transform: translateX(-50%);
    }

    &--topleft {
      top: -2.8rem;
      right: 100%;
    }

    &--left {
      top: 50%;
      right: 100%;
      transform: translateY(-50%);
    }

    &--bottom {
      bottom: -2.05rem;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  &__arrow {
    position: absolute;
    background: #000;
    width: .6rem;
    height: .6rem;

    &--top {
      bottom: -.5rem;
      left: 50%;
      transform: rotate(45deg) translateX(-50%);
    }

    &--left {
      top: 50%;
      right: -.5rem;
      transform: rotate(45deg) translateY(-50%);
    }

    &--bottom {
      top: -.4rem;
      left: 50%;
      transform: rotate(45deg);
    }
  }
}