import { createGlobalStyle } from "styled-components";

export const customClsName = "ty-tooltip";

export const TooltipInjectStyle = createGlobalStyle`body, html {
  ${`.${customClsName}`} {
    &.ant-tooltip {
      font-size: 15px;
      line-height: 24px;
      font-weight: normal;
    }
    &.ant-tooltip .ant-tooltip-arrow:before {
      background: var(--Text_Brand_Light) !important;
    }

    &.ant-tooltip .ant-tooltip-inner {
      color: var(--Text_White);
      background-color: var(--Text_Brand_Light);
      letter-spacing: 0.2px;
      box-shadow: 0px 6px 10px 0px rgba(44, 44, 54, 0.08);
      border-radius: 12px;
      padding: 16px 20px;
      word-break: break-all;
      white-space: pre-wrap;
    }
  }}
`;
