%tooltip-bubble {
  color: $white;
  background-color: $gray-700;
}
%tooltip-tail {
  background-color: $transparent;
  border-color: $transparent;
  border-top-color: $gray-700;
  border-bottom-color: $gray-700;
}

/* borders here are used to draw a triangle in CSS */
/* they are not actual borders */

%tooltip-tail {
  border-style: solid;
  border-bottom-width: 0;
  border-top-width: 18px;
  border-left-width: 9px;
  border-right-width: 9px;
}
%tooltip-bottom::after {
  border-top-width: 0;
  border-bottom-width: 18px;
}
%tooltip-bubble {
  border-radius: $decor-radius-100;
  box-shadow: $decor-elevation-400;
}

// Ember Tooltips
.ember-tooltip {
  background-color: $gray-700;
  border-radius: $decor-radius-100;
}
.ember-tooltip[x-placement^='top'] .ember-tooltip-arrow {
  border-top-color: $gray-700;
}