@import '../base/helpers';

.tooltip-wrapper {
  display: none;
  visibility: hidden;
  opacity: 0;
  position: absolute;
  padding: 1rem;
  width: fit-content;
  max-width: 12rem;
  background: $gray-70;
  color: $white;
  box-shadow: 0 2px 2px 0 rgba($black, 0.15);
  border-radius: 2px;
  font-size: $font-size-sm;
  z-index: $tooltip-index;
  transition: all 0.15s 0.15s;

  @include media-breakpoint-up(sm) {
    max-width: 20rem;
  }

  p {
    font-size: $font-size-sm;
    margin-bottom: 0;
  }

  &.caret {
    &-top-right:before {
      content: '';
      position: absolute;
      display: block;
      width: 0px;
      right: .5rem;
      bottom: 0;
      border: .5rem solid transparent;
      border-bottom: 0;
      border-top: .5rem solid $gray-70;
      transform: translateY(0.5rem);
    }

    &-top-left:before {
      content: '';
      position: absolute;
      display: block;
      width: 0px;
      bottom: 0;
      left: .75rem;
      border: .5rem solid transparent;
      border-bottom: 0;
      border-top: .5rem solid $gray-70;
      transform: translateY(0.5rem);
    }

    &-bottom-right:before {
      content: '';
      position: absolute;
      display: block;
      width: 0px;
      top: 0;
      right: .75rem;
      border: .5rem solid transparent;
      border-top: 0;
      border-bottom: .5rem solid $gray-70;
      transform: translateY(-0.5rem);
    }

    &-bottom-left:before {
      content: '';
      position: absolute;
      display: block;
      width: 0px;
      top: 0;
      left: .75rem;
      border: .5rem solid transparent;
      border-top: 0;
      border-bottom: .5rem solid $gray-70;
      transform: translateY(-0.5rem);
    }
  }
}

.tooltip-button {
  button {
    height: 1.5rem;
    width: 1.5rem;
  }
}