import styled from 'styled-components';

const Arrow = styled.div`
  height: ${({ theme }) => theme.sizes.tooltip.arrow};
  width: ${({ theme }) => theme.sizes.tooltip.arrow};
  margin: 0;
  padding: 0;

  &::before {
    position: absolute;
    transform: rotate(45deg);
    height: ${({ theme }) => theme.sizes.tooltip.arrow};
    width: ${({ theme }) => theme.sizes.tooltip.arrow};
    background: ${({ theme }) => theme.colors.tooltip.background};
    content: '';
  }
`;

const TooltipWrapper = styled.div`
  z-index: 99;
  color: white;
  background: ${({ theme }) => theme.colors.tooltip.background};
  margin: 0;
  padding: ${({ theme }) => theme.space.tooltip.wrapperPadding};
  font-size: ${({ theme }) => theme.fontSizes.tooltip.default};
  font-weight: ${({ theme }) => theme.fontWeights.tooltip.default};
  line-height: ${({ theme }) => theme.lineHeights.tooltip.default};
  border-radius: ${({ theme }) => theme.radii.tooltip.default};
  text-align: left;

  &[data-popper-placement^='top'] > ${Arrow} {
    bottom: calc(${({ theme }) => theme.sizes.tooltip.arrow} / -2);
  }
  &[data-popper-placement^='bottom'] > ${Arrow} {
    top: calc(${({ theme }) => theme.sizes.tooltip.arrow} / -2);
  }
  &[data-popper-placement^='right'] > ${Arrow} {
    left: calc(${({ theme }) => theme.sizes.tooltip.arrow} / -2);
  }
  &[data-popper-placement^='left'] > ${Arrow} {
    right: calc(${({ theme }) => theme.sizes.tooltip.arrow} / -2);
  }
`;

const TooltipContainer = styled.div`
  display: inline-block;
  margin: 0;
  padding: 0;
`;

export { TooltipContainer, TooltipWrapper, Arrow };