/* TOOLTIP */
%themeDark %tooltip {
  padding: 5px 10px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 3px;
  font-size: 13px;
  font-weight: 600;
  %layerContainer & {
    color: #fff;
  }
  %tooltipContent {
    padding: 0;
  }
  &%tooltipPrimary {
    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);
  }
}

%subscribeTooltipWrapper {
  background-color: $main-color;
  &:after {
    border-bottom-color: $main-color;
  }
}

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