import { styled } from '../styled';
import { descriptionClassnames } from './constants';
export const Wrapper = styled.div `
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: start;

  margin: 0;

  &.${descriptionClassnames.directionColumn} {
    flex-direction: column;
  }
    
  &.${descriptionClassnames.justifyContentSpaceBetween} {
    justify-content: space-between;
  }

  ${({ theme }) => theme.breakpoints.down('sm')} {
    flex-direction: column;

    & .${descriptionClassnames.leader} {
      display: none;
    }

    &.${descriptionClassnames.directionRow} {
      flex-direction: row;

      & .${descriptionClassnames.leader} {
        display: block;
      }
    }

    .MuiTypography-root {
      font-size: ${({ theme }) => theme.typography.fontSize}px;
    }
  }
`;
