import { Box, Paper, Popper, styled } from "@mui/material";


export const TooltipPanel = styled(Popper)(() => ({
    zIndex: 2000,
}))

export const TopTooltipArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    bottom: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 1px 1px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const BottomTooltipArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    top: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '1px 0px 0px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const LeftTooltipArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    right: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 1px 0px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))


export const RightTooltipArrow = styled('div')(({ theme }) => ({
    width: '8px',
    height: '8px',
    left: '-4px',
    color: theme.palette.background.paper,
    "&::before": {
        content: '""',
        width: '8px',
        height: '8px',
        zIndex: '-1',
        transform: 'rotate(45deg)',
        backgroundColor: theme.palette.background.paper,
        position: 'absolute',
        backgroundImage: 'linear-gradient(rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.05))',
        borderWidth: '0px 0px 1px 0px',
        borderColor: 'rgba(0, 0, 0, 0.25)',
        borderStyle: 'solid'
    }
}))

export const PopoverRoot = styled(Paper)(({ theme }) => ({
    backgroundColor: theme.palette.background.paper,
    maxWidth: 1000,
}))

export const PopoverContent = styled(Box)(({ theme }) => ({
    padding: theme.spacing(2)
}))