// Variables $triangle-size: 5px;

/* Tooltips */ .usa-tooltip {

display: inline-block;
position: relative;

}

.usa-tooltip__trigger {

cursor: pointer;

> svg {
  display: block;
  pointer-events: none;
}

}

.usa-tooltip__body {

transition: opacity 0.08s ease-in-out;
background-color: color($theme-tooltip-background-color);
border-radius: radius($theme-button-border-radius);
bottom: 0;
color: color($theme-tooltip-font-color);
display: none;
font-size: size("ui", $theme-tooltip-font-size);
padding: units(1);
position: absolute;
pointer-events: none;
left: 0;
opacity: 0;
transform: translateX(-50%);
width: auto;
white-space: pre;
z-index: 100000;

&:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: $triangle-size solid transparent;
  border-right: $triangle-size solid transparent;
  border-top: $triangle-size solid color($theme-tooltip-background-color);
  position: absolute;
  bottom: -$triangle-size;
  left: 50%;
  margin-left: -$triangle-size;
}

}

.usa-tooltip__body–wrap {

width: 100%;
white-space: normal;

}

.usa-tooltip__body.is-set {

display: block;

}

.usa-tooltip__body.is-visible {

opacity: 1;

}

.usa-tooltip__body–bottom {

bottom: auto;
top: 0;

&:after {
  border-left: $triangle-size solid transparent;
  border-right: $triangle-size solid transparent;
  border-bottom: $triangle-size solid color($theme-tooltip-background-color);
  border-top: 0;
  bottom: auto;
  top: -$triangle-size;
}

}

.usa-tooltip__body–right {

top: auto;
transform: translateX(0);

&:after {
  border-top: $triangle-size solid transparent;
  border-bottom: $triangle-size solid transparent;
  border-right: $triangle-size solid color($theme-tooltip-background-color);
  border-left: 0;
  right: auto;
  top: 50%;
  bottom: 0;
  left: -$triangle-size;
  margin: -$triangle-size 0 0 0;
}

}

.usa-tooltip__body–left {

top: auto;
left: 0;
right: auto;
transform: translateX(0);

&:after {
  border-top: $triangle-size solid transparent;
  border-bottom: $triangle-size solid transparent;
  border-left: $triangle-size solid color($theme-tooltip-background-color);
  border-right: 0;
  right: -$triangle-size;
  top: 50%;
  bottom: 0;
  left: auto;
  margin: -$triangle-size 0 0 0;
}

}