/* eslint-disable import/prefer-default-export */

import { Content as HoverCardContent } from '@radix-ui/react-hover-card';
import { styled, theme } from './theme';

export const FlexRow = styled('div', {
  display: 'flex',
  flexDirection: 'row',
  alignItems: 'center',
  justifyContent: 'center',
  variants: {
    border: {
      form: {
        border: '1px solid $gray6',
        borderRadius: theme.borderRadius.form,
      },
    },
    spacing: {
      '1': {
        gap: '0.5rem',
      },
    },
    align: {
      left: {
        justifyContent: 'flex-start',
      },
    },
  },
});

export const TooltipContent = styled(HoverCardContent, {
  borderRadius: 6,
  display: 'flex',
  padding: '0.5rem',
  gap: '0.5rem',
  flexDirection: 'column',
  border: '2px solid $gray6',
  backgroundColor: '$gray2',
  alignItems: 'flex-start',
  boxShadow: '0px 5px 20px rgba(0,0,0,0.4)',
});