.root {
    :global(.uui-tooltip-body) {
        padding: 3px 12px;
        line-height: 24px;
        font-size: 14px;
        font-family: var(--uui-tooltip-font);
        font-weight: var(--uui-tooltip-font-weight, normal);
        box-shadow: var(--uui-tooltip-shadow);
        word-wrap: break-word;
        border-radius: var(--uui-tooltip-border-radius);
    }

    :global(.uui-popover-arrow) {
        position: absolute;
        width: 12px;
        height: 12px;
        overflow: hidden;
    }

    :global(.uui-popover-arrow)::after {
        content: '';
        position: absolute;
        width: 8px;
        height: 8px;
        box-shadow: var(--uui-tooltip-arrow-shadow);
    }

    //Colors
    :global(.uui-tooltip-body) {
        background-color: var(--uui-tooltip-bg);
        color: var(--uui-tooltip-text);
    }

    &:global(.uui-tooltip-container) {
        :global(.uui-popover-arrow[data-placement^='right'])::after,
        :global(.uui-popover-arrow[data-placement^='left'])::after,
        :global(.uui-popover-arrow[data-placement^='top'])::after,
        :global(.uui-popover-arrow[data-placement^='bottom'])::after {
            background: var(--uui-tooltip-bg);
        }
    }
}
