@import '~@kaizen/design-tokens/sass/shadow';
@import '~@kaizen/design-tokens/sass/border';
@import '~@kaizen/design-tokens/sass/color';
@import '~@kaizen/design-tokens/sass/animation';
@import '~@kaizen/design-tokens/sass/typography';
@import '../../styles/utils/layers';
@import './variables';

@layer kz-components {
  .tooltip {
    position: relative; // Make this a positioned element so z-index works. (Note: Popper overrides this to absolute.)
    pointer-events: none;
    z-index: $ca-z-index-tooltip;
  }

  .tooltipContent {
    max-width: 400px;
    padding: var(--spacing-8) calc(9rem / 16); // 8px 9px
    color: $color-purple-800;
    text-align: center;
    font-family: $typography-paragraph-body-font-family;
    font-size: $typography-heading-6-font-size;
    font-weight: $typography-paragraph-body-font-weight;
    letter-spacing: $typography-paragraph-body-letter-spacing;
    line-height: $typography-paragraph-small-line-height;
    border: var(--border-width-1) var(--border-solid-border-style);
    border-radius: $border-solid-border-radius;
    transition:
      opacity $animation-duration-fast,
      transform $animation-duration-fast;
    box-shadow: $shadow-small-box-shadow;

    &.default {
      background-color: $color-white;
      border-color: var(--color-gray-500);
    }

    &.informative {
      background-color: $color-blue-100;
      border-color: var(--color-blue-400);
    }

    &.positive {
      background-color: $color-green-100;
      border-color: var(--color-green-500);
    }

    &.cautionary {
      background-color: $color-yellow-100;
      border-color: var(--color-yellow-700);
    }

    &.highlight {
      background-color: $color-purple-100;
      border-color: var(--color-purple-400);
    }
  }

  .arrow {
    // Ensure the arrow always sits on top of the tooltipContent
    z-index: 1;

    // This is required by popper, otherwise positioning issues will exist.
    // https://github.com/popperjs/react-popper/issues/354#issuecomment-616540651
    position: absolute;

    [data-popper-placement^='top'] & {
      bottom: 0;
    }

    [data-popper-placement^='bottom'] & {
      top: 0;

      // There is a conflict with the popper arrow styling, which also
      // adds a transform to the arrow. Hence, we need this additional
      // wrapper, just to rotate it.
      .arrowInner {
        transform: rotate(180deg);
      }
    }

    [data-popper-placement^='left'] & {
      right: 0;

      .arrowInner {
        transform: rotate(270deg);
      }
    }

    [data-popper-placement^='right'] & {
      left: 0;

      .arrowInner {
        transform: rotate(90deg);
      }
    }
  }

  .arrowMain::before,
  .arrowMain::after {
    content: '';
    position: absolute;
    left: 50%;
    border-left: calc(#{$arrow-width} / 2) solid transparent;
    border-right: calc(#{$arrow-width} / 2) solid transparent;
    margin-left: calc(#{$arrow-width} / -2);
  }

  .arrowMain {
    // before styles
    &.default::before {
      border-top: $arrow-height solid var(--color-gray-500);
    }

    &.informative::before {
      border-top: $arrow-height solid var(--color-blue-400);
    }

    &.positive::before {
      border-top: $arrow-height solid var(--color-green-500);
    }

    &.highlight::before {
      border-top: $arrow-height solid var(--color-purple-400);
    }

    &.cautionary::before {
      border-top: $arrow-height solid var(--color-yellow-700);
    }
    // after styles
    &::after {
      margin-top: -1.5px;
    }

    &.default::after {
      border-top: $arrow-height solid white;
    }

    &.informative::after {
      border-top: $arrow-height solid $color-blue-100;
    }

    &.positive::after {
      border-top: $arrow-height solid $color-green-100;
    }

    &.highlight::after {
      border-top: $arrow-height solid $color-purple-100;
    }

    &.cautionary::after {
      border-top: $arrow-height solid $color-yellow-100;
    }
  }

  .arrowShadow::before {
    border-top: 0 solid $color-gray-300;
  }

  // Triangle portion is a little darker to bring out shadow
  .arrowShadow::after {
    border-top: $arrow-height solid rgba($color-purple-800-rgb, 0.09);
    margin-top: 1px;
    filter: blur(4px);
  }

  .displayInline {
    display: inline;
  }

  .displayBlock {
    display: block;
  }

  .displayInlineBlock {
    display: inline-block;
  }

  .displayFlex {
    display: flex;
  }

  .displayInlineFlex {
    display: inline-flex;
  }
}