import { styled } from '@mui/material/styles';
import type { Theme } from '../@styles';

export const BenefitsItemRoot = styled('div')(({ theme }: { theme: Theme }) => ({
  display: 'flex',
  alignItems: 'flex-start',
  flex: 1,
  flexDirection: 'column',
  maxWidth: theme.spacing(47.5),
  '&:not(:nth-of-type(1))': {
    marginLeft: theme.spacing(4)
  },
  '& > *:not(:nth-of-type(1))': {
    paddingTop: theme.spacing(1.5)
  },
  '& > .icon, & > .subtitle': {
    color: theme.palette.primary[400]
  },
  '& > .title': {
    color: theme.palette.primary[500]
  },
  '& > .link': {
    marginTop: 'auto'
  }
}));