.tooltip {
  display: inline-block;
  position: relative;

  &__content {
    @include font-style('body--xs');
    background: $tooltip-background;
    border-radius: $border-radius;
    bottom: 100%;
    color: $tooltip-color;
    display: block;
    left: 0;
    opacity: 0;
    padding: $spacing--xxs 10px ($baseline * 0.7);
    position: absolute;
    top: auto;
    transition: all $transition-duration;
    visibility: hidden;
    width: $tooltip-width;
    z-index: 1;

      &--primary {
        background-color: $tooltip-background-primary;
      }
    @supports (width: max-content) {
      width: max-content;
    }
    // large
    &--l {
      width: $tooltip-width--l;
    }
  }

  &__trigger {
    @include color-dark-shade-main;
    overflow: visible;
    position: relative;

    &:hover,
    &:focus {
      color: $color-brand--two;
    }

    &:hover .tooltip__content {
      bottom: 110%;
      opacity: 1;
      transition: all $transition-duration--fast;
      visibility: visible;
    }

    &:focus .tooltip__content {
      bottom: 140%;
      opacity: 1;
      transition: all $transition-duration--fast;
      visibility: visible;
    }
  }

  &__pointer {
    background: $tooltip-background;
    border-radius: $border-radius--xs;
    bottom: -($baseline * 0.3);
    content: '';
    height: $baseline;
    position: absolute;
    transform: rotate(45deg);
    width: 10px;

    &--primary {
      background: $tooltip-background-primary;
    }
  }

  &.tooltip--left {
    .tooltip__content {
      left: 0;
    }

    .tooltip__pointer {
      left: 10px;
    }
  }

  &.tooltip--center {
    .tooltip__trigger {
      display: inline-block;

      .tooltip__content {
        left: 50%;
        margin: 0;
        transform: translateX(-50%);
      }
    }

    .tooltip__pointer {
      left: 50%;
      transform: translateX(-50%) rotate(45deg);
    }
  }

  &.tooltip--right {
    .tooltip__content {
      left: inherit;
      right: -5px;
    }

    .tooltip__pointer {
      right: 10px;
    }
  }
}

// icon tooltip
.tooltip--icon {
  .icon--inline {
    top: $spacing--xxs;
  }

  .tooltip__content {
    bottom: 110%;
    margin-left: -5px;
  }

  .tooltip__trigger:hover .tooltip__content {
    bottom: 140%;
  }
}