// Foundation for Sites by ZURB // foundation.zurb.com // Licensed under MIT Open Source

//// /// @group tooltip ////

/// Default cursor of the defined term. /// @type Keyword $has-tip-cursor: help !default;

/// Default font weight of the defined term. /// @type Keyword | Number $has-tip-font-weight: $global-weight-bold !default;

/// Default border bottom of the defined term. /// @type List $has-tip-border-bottom: dotted 1px $dark-gray !default;

/// Default color of the tooltip background. /// @type Color $tooltip-background-color: $black !default;

/// Default color of the tooltip font. /// @type Color $tooltip-color: $white !default;

/// Default padding of the tooltip background. /// @type Number $tooltip-padding: 0.75rem !default;

/// Default max width for tooltips. /// @type Number $tooltip-max-width: 10rem !default;

/// Default font size of the tooltip text. By default, we recommend a smaller font size than the body copy. /// @type Number $tooltip-font-size: $small-font-size !default;

/// Default pip width for tooltips. /// @type Number $tooltip-pip-width: 0.75rem !default;

/// Default pip height for tooltips. This is helpful for calculating the distance of the tooltip from the tooltip word. /// @type Number $tooltip-pip-height: $tooltip-pip-width * 0.866 !default;

/// Default radius for tooltips. /// @type Number $tooltip-radius: $global-radius !default;

@mixin has-tip {

position: relative;
display: inline-block;

border-bottom: $has-tip-border-bottom;
font-weight: $has-tip-font-weight;
cursor: $has-tip-cursor;

}

@mixin tooltip {

position: absolute;
top: calc(100% + #{$tooltip-pip-height});
z-index: 1200;

max-width: $tooltip-max-width;
padding: $tooltip-padding;

border-radius: $tooltip-radius;
background-color: $tooltip-background-color;
font-size: $tooltip-font-size;
color: $tooltip-color;

&::before {
  position: absolute;
}

&.bottom {
  &::before {
    @include css-triangle($tooltip-pip-width, $tooltip-background-color, up);
    bottom: 100%;
  }

  &.align-center::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

&.top {
  &::before {
    @include css-triangle($tooltip-pip-width, $tooltip-background-color, down);
    top: 100%;
    bottom: auto;
  }

  &.align-center::before {
    left: 50%;
    transform: translateX(-50%);
  }
}

&.left {
  &::before {
    @include css-triangle($tooltip-pip-width, $tooltip-background-color, right);
    left: 100%;
  }

  &.align-center::before {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

&.right {
  &::before {
    @include css-triangle($tooltip-pip-width, $tooltip-background-color, left);
    right: 100%;
    left: auto;
  }

  &.align-center::before {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
  }
}

&.align-top::before {
  bottom: auto;
  top: 10%;
}

&.align-bottom::before {
  bottom: 10%;
  top: auto;
}

&.align-left::before {
  left: 10%;
  right: auto;
}

&.align-right::before {
  left: auto;
  right: 10%;
}

}

@mixin foundation-tooltip {

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

.tooltip {
  @include tooltip;
}

}