import { styled } from '../../../styled';
import { Typography } from '../../../Typography';
import { STEPPER_ORDER_COUNTER_NAME } from '../../constants';
export const MobileLabelGroup = styled.div `
  display: none;

  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: flex;
    align-items: center;
  }
`;
export const MobileCompactLabel = styled(Typography) `
  display: inline-block;

  &::before {
    content: counter(${STEPPER_ORDER_COUNTER_NAME});
  }
`;
export const DesktopLabel = styled(Typography) `
  ${({ theme }) => theme.breakpoints.down('sm')} {
    display: none;
  }
`;
