import { descriptionClassnames } from '../Description/constants';
import { styled } from '../styled';
import { typographyClassnames } from '../Typography/constants';
import { descriptionCellClassnames } from './constants';
export const Wrapper = styled.div `
  display: flex;
  align-items: center;

  &.${descriptionCellClassnames.hasIcon} {
    gap: ${({ theme }) => theme.spacing(2)};
  }

  &.${descriptionCellClassnames.iconRight} {
    flex-direction: row-reverse;
  }
`;
export const IconWrapper = styled.div `
  & > svg {
    display: block;

    width: 24px;
    height: 24px;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
export const ItemWrapper = styled.div `
  display: flex;
  flex-direction: column;

  & .${descriptionClassnames.root} {
    & .${typographyClassnames.root} {
      font-size: unset;
      color: unset;
    }
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    gap: ${({ theme }) => theme.spacing(1)};
  }
`;
