@import './skin';
@import './layout';

%with-pseudo-tooltip,
%with-tooltip {
  @extend %tooltip;
}
%with-pseudo-tooltip::before,
%with-tooltip [role='tooltip'] {
  @extend %tooltip-bubble;
}
%with-pseudo-tooltip::after,
%with-tooltip [role='tooltip']::after {
  @extend %tooltip-tail;
}

%with-pseudo-tooltip::after,
%with-pseudo-tooltip::before,
%with-tooltip [role='tooltip']::after,
%with-tooltip [role='tooltip'] {
  @extend %blink-in-fade-out;
}
%with-pseudo-tooltip:hover::after,
%with-pseudo-tooltip:hover::before,
%with-pseudo-tooltip:focus::after,
%with-pseudo-tooltip:focus::before,
%with-tooltip:hover [role='tooltip']::after,
%with-tooltip:hover [role='tooltip'],
%with-tooltip:focus [role='tooltip']::after,
%with-tooltip:focus [role='tooltip'] {
  @extend %blink-in-fade-out-active;
}
