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

import { devices } from 'config'
import { isMobileDevice } from 'config/userAgent'

export const List = styled.ul`
  margin: 0.9rem auto 0px auto;
  width: 100%;

  @media ${devices.mobile} {
    margin: 12px auto;
    padding: 0 12px;
  }
`

export const Item = styled.li`
  margin-bottom: 0.71rem;
  width: 100%;
  height: 2.36rem;

  ${isMobileDevice
    ? css`
      height: 48px;
      margin-bottom: 12px;
    `
    : ''};
`
