@import "settings";
@import "foundation-sites/scss/components/tooltip";

/// Flag whether or not you want to include bonsai tooltip components
/// @type bool
$bonsai-include-tooltip: $bonsai-include-components !default;

/// Tooltip arrow size
/// @type number
$bonsai-tooltip-arrow-border-element-size: 0.74375rem !default;

/// Tooltip box shadow
/// @type list
$bonsai-tooltip-box-shadow: (0, 0, 15px, 0, rgba($bonsai-black, 0.5)) !default;

/// Tooltip box shadow blur
/// @type number
$bonsai-tooltip-box-shadow-blur: 15px !default;

/// Creates the tooltip triangle
/// @param {number} $triangle-size - How big should the triangle be?
/// @param {color} $triangle-color - What color should the triangle be?
/// @param {string} $triangle-direction - What direction should the triangle point to? Can be [up, down, left, right]
@mixin tooltip-triangle($triangle-size, $triangle-color, $triangle-direction) {
  display: block;
  width: 0;
  height: 0;
  border: inset $triangle-size;
  content: '';
  font-size: 12px;
  position: absolute;

  @if ($triangle-direction == down) {
    border-bottom-width: 0;
    border-top-style: solid;
    border-color: $triangle-color transparent transparent;
  }

  @if ($triangle-direction == up) {
    border-top-width: 0;
    border-bottom-style: solid;
    border-color: transparent transparent $triangle-color;
  }

  @if ($triangle-direction == right) {
    border-right-width: 0;
    border-left-style: solid;
    border-color: transparent transparent transparent $triangle-color;
  }

  @if ($triangle-direction == left) {
    border-left-width: 0;
    border-right-style: solid;
    border-color: transparent $triangle-color transparent transparent;
  }
}

/// Generalizes the styling of the tooltip
/// @param {color} $background-color - What color should the tooltip background be?
/// @param {bool} $include-border - Should this tooltip have a border?
/// @param {color} $accent-color - If we want a border, what color should the border be?
@mixin tooltip-style($background-color, $accent-color, $include-border) {
  @include tooltip;
  @include box-shadow($bonsai-tooltip-box-shadow...);

  background-color: $background-color;
  color: $accent-color;

  @if $include-border {
    border: 1px solid $accent-color;
  }
}

/// Base styling for elements that will have a tooltip, extends Foundations `has-tip` mixin
@mixin has-tip-bonsai {
  @include has-tip;

  cursor: default;
  font-weight: normal;
}

/// Styling for buttons that will have a tooltip
@mixin has-tip-button {
  cursor: pointer;
}

/// Horizontally align tooltips
@mixin tooltip-align-center-horizontal {
  left: 50%;
  transform: translateX(-50%);
}

/// Vertically align tooltips
@mixin tooltip-align-center-vertical {
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

/// Horizontally align secondary tooltips
@mixin tooltip-secondary-align-center-horizontal {
  z-index: -1;
  transform: translateX(calc(#{$bonsai-tooltip-arrow-border-element-size} - #{$tooltip-pip-width}));
  bottom: 100%;
}

/// Vertically align secondary tooltips
/// @param {string} $triangle-direction-color - What direction should the triangle go?
@mixin tooltip-secondary-triangle($triangle-direction) {
  @include tooltip-triangle($bonsai-tooltip-arrow-border-element-size, $bonsai-black, $triangle-direction);

  z-index: -1;

  @if ($triangle-direction == up or $triangle-direction == down) {
    transform: translateX(calc(#{$bonsai-tooltip-arrow-border-element-size} - #{$tooltip-pip-width}));
  }

  @if ($triangle-direction == left or $triangle-direction == right) {
    transform: translateY(calc(#{$bonsai-tooltip-arrow-border-element-size} - #{$tooltip-pip-width}));
  }

  @if ($triangle-direction == up) {
    bottom: 100%;
  }

  @if ($triangle-direction == down) {
    top: 100%;
  }

  @if ($triangle-direction == left) {
    right: 100%;
  }

  @if ($triangle-direction == right) {
    bottom: 100%;
  }
}

/// Gateway mixin for bonsai tooltips
@mixin bonsai-tooltip {
  @if $bonsai-include-tooltip {
    .has-tip {
      @include has-tip-bonsai;

      &.button {
        @include has-tip-button;
      }
    }

    .tooltip {
      @include tooltip-style($bonsai-black, $bonsai-white, false);

      &.bottom {
        &::before {
          @include tooltip-triangle($tooltip-pip-width, $bonsai-black, up);
        }

        &.align-center::after {
          @include tooltip-align-center-horizontal;
        }
      }

      &.top {
        &::before {
          @include tooltip-triangle($tooltip-pip-width, $bonsai-black, down);
        }

        &.align-center::after {
          @include tooltip-align-center-horizontal;
        }
      }

      &.left {
        &::before {
          @include tooltip-triangle($tooltip-pip-width, $bonsai-black, right);
        }

        &.align-center::after {
          @include tooltip-align-center-vertical;
        }
      }

      &.right {
        &::before {
          @include tooltip-triangle($tooltip-pip-width, $bonsai-black, left);
        }

        &.align-center::after {
          @include tooltip-align-center-vertical;
        }
      }

      &.secondary {
        @include tooltip-style($bonsai-white, $bonsai-black, true);

        &.bottom {
          &::before {
            @include tooltip-triangle($tooltip-pip-width, $bonsai-white, up);
          }

          &.align-center::after {
            @include tooltip-align-center-horizontal;
          }

          &::after {
            @include tooltip-secondary-triangle(up);
          }
        }

        &.top {
          &::before {
            @include tooltip-triangle($tooltip-pip-width, $bonsai-white, down);
          }

          &.align-center::after {
            @include tooltip-align-center-horizontal;
          }

          &::after {
            @include tooltip-secondary-triangle(down);
          }
        }

        &.left {
          &::before {
            @include tooltip-triangle($tooltip-pip-width, $bonsai-white, right);
          }

          &.align-center::after {
            @include tooltip-align-center-vertical;
          }

          &::after {
            @include tooltip-secondary-triangle(right);
          }
        }

        &.right {
          &::before {
            @include tooltip-triangle($tooltip-pip-width, $bonsai-white, left);
          }

          &.align-center::after {
            @include tooltip-align-center-vertical;
          }

          &::after {
            @include tooltip-secondary-triangle(left);
          }
        }
      }
    }
  }
}