import { styled } from 'styleh-components'

const MeterBarWrap = styled.div `
  position: relative;
  display: flex;
`

// @todo need some atoms/Count to extend?
const MeterCount = styled.span `
  position: relative;
  margin: 0 0.5rem;

  ${props =>
    props.orderArrange === 'none' &&
    styled.css `
      display: none;
    `};
  ${props =>
    props.orderArrange !== 'none' &&
    styled.css `
      order: ${props.orderArrange};
    `};
`

export { MeterBarWrap, MeterCount }