/* TOOLTIP */
%tooltip {
  padding: 5px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  %tooltipContent {
    padding: 0;
    color: hsla(0, 0%, 100%, 0.9);
  }
  &%tooltipPrimary,
  &%tooltipNested {
    background: rgba(0, 0, 0, 0.9);
    %tooltipPointer {
      border-top-color: rgba(0, 0, 0, 0.9);
    }
  }
  &%tooltipBrand {
    background: $main-color;
    %tooltipPointer {
      border-top-color: $main-color;
    }
  }
  &%tooltipRed {
    background: cv('colors.danger');
    %tooltipPointer {
      border-top-color: cv('colors.danger');
    }
  }
  &%tooltipGreen {
    background: cv('colors.success');
    %tooltipPointer {
      border-top-color: cv('colors.success');
    }
  }
  &%tooltipTop {
    animation: cv-menu-fold-y 0.15s cubic-bezier(0.2, 0.6, 0.5, 1.1);
    transform-origin: 50% 100%;
  }
  &%tooltipBottom {
    animation: cv-menu-fold-y 0.15s cubic-bezier(0.2, 0.6, 0.5, 1.1);
    transform-origin: 50% 0;
  }
  &%tooltipRight {
    animation: cv-menu-fold-x 0.15s cubic-bezier(0.2, 0.6, 0.5, 1.1);
    transform-origin: 0 50%;
  }
  &%tooltipLeft {
    animation: cv-menu-fold-x 0.15s cubic-bezier(0.2, 0.6, 0.5, 1.1);
    transform-origin: 100% 50%;
  }
  %tooltipHub > %tooltipHubIcon > circle {
    fill: $main-color;
  }
}
%commandTooltip {
  background: rgba(0, 0, 0, 0.9);
  > %commandTooltipPointer {
    border-top-color: rgba(0, 0, 0, 0.9);
  }
}

// UPSELL
%upsellTooltip {
  background-color: hsla(0, 0%, 0%, 0.8);
  &%upsellTooltipCaretTopCenter:after {
    border-bottom-color: hsla(0, 0%, 0%, 0.8);
  }
  &%upsellTooltipCaretRightCenter:after {
    border-left-color: hsla(0, 0%, 0%, 0.8);
  }
}

// REACTION
%reactionTooltip {
  background: rgba(0, 0, 0, 0.9);
  padding: 5px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 13px;
}

// NEW GUILD TOOLTIP
%newGuildTooltip {
  background: rgba(0, 0, 0, 0.9);
}
%newGuildTooltipPointer {
  border-right-color: rgba(0, 0, 0, 0.9);
}
%newGuildTooltipCard {
  background-color: hsla(0, 0%, 100%, 0.1);
}
