.ebs-tooltip {
  $self: &;

  &--inline {
    display: inline-block;
    #{$self}__trigger {
      display: inline-block;
    }
  }

  &--nowrap,
  &__wrapper--nowrap {
    #{$self}__body,
    #{$self}__body-title {
      white-space: nowrap;
    }
  }

  &__trigger {
    margin: calc(#{rem(-$gutter-size)} / 2);
    padding: calc(#{rem($gutter-size)} / 2);
  }

  &__wrapper.ebs-tooltip--overtop {
    z-index: 9999;
  }

  &__wrapper {
    @include elevation-2;
    background-color: $white;
    border-radius: rem($border-radius);
    z-index: 9997;
    color: $text-color;
    background-color: $white;
  }

  &__body {
    padding: rem($gutter-size);
    font-size: rem($gutter-size);
    @include fadeAnimation;

    &-title {
      color: $heading-color;
      font-size: rem($font-size-base);
      margin-bottom: rem($border-radius);
      @include fontMedium;
    }
  }

  &__arrow {
    font-size: rem($gutter-size);
    display: inline-block;
    height: 1em;
    width: 1em;
  }

  &__arrow path {
    fill: $white;
  }

  &__wrapper[data-popper-placement*='top'],
  &__wrapper[data-popper-placement*='bottom'] {
    margin: calc(#{rem(-$gutter-size)} / 4 - 1px) 0;
  }

  &__wrapper[data-popper-placement*='left'],
  &__wrapper[data-popper-placement*='right'] {
    margin: 0 calc(#{rem(-$gutter-size)} / 4 - 1px);
  }

  &__wrapper[data-popper-placement*='top'] &__arrow {
    bottom: calc(-1em / 2);
    svg {
      transform: translateY(-1px) rotate(180deg);
    }
  }

  &__wrapper[data-popper-placement*='bottom'] &__arrow {
    top: rem(-1em);
    svg {
      transform: translateY(-1px) rotate(0deg);
    }
  }

  &__wrapper[data-popper-placement*='right'] &__arrow {
    left: calc(-1em / 2 - 5px);
    svg {
      transform: translateX(1px) rotate(-90deg);
    }
  }

  &__wrapper[data-popper-placement*='left'] &__arrow {
    right: calc(-1em / 2 + 5px);
    svg {
      transform: translateX(1px) rotate(90deg);
    }
  }
}
