import styled, { css } from 'styled-components/macro'
import { isMobileDevice } from 'config/userAgent'

export const ProgressBarList = styled.div<{isIOS?: boolean}>`
  flex-grow: 1;
  height: 4px;
  position: relative;

  ${isMobileDevice
    ? css`
      height: 1px;
    `
    : ''}
  
  ${({ isIOS }) => (isIOS && isMobileDevice
    && css`
        height: 3px;
        margin: 0 24px;
    `)}
`
