/* eslint-disable react/jsx-props-no-spreading */
import React from 'react';
import styled from 'styled-components';

import Tooltip, { TooltipProps } from '@material-ui/core/Tooltip';
import { ThemeObject } from '../Theme';

export const StyledTooltip = styled((props: TooltipProps & { $theme: ThemeObject }) => (
  <Tooltip classes={{ popper: props.className }} {...props} />
))`
  & .MuiTooltip-tooltip {
    background-color: ${(props) => props.$theme.background.inverse};
    color: ${(props) => props.$theme.text.inverse};
    opacity: 0.9 !important;
    transition: all 0.25s !important;
  }
`;
