import _List from 'reakit/List' ; import { theme } from 'styled-tools' ; import { Box } from '../primitives' ; import styled , { css , space } from '../styled' ; import { ListItemProps } from './ListItem' ; import { ListProps } from './List' ; export const orderedProperties = css `
  list-style-type: decimal;

  & & {
    list-style-type: lower-alpha;
  }

  & & & {
    list-style-type: lower-roman;
  }

  & {
    ${ theme ( 'fannypack.List.ordered' ) };
  }
` ; export const horizontalProperties = css `
  & li {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: unset;
  }

  & {
    ${ theme ( 'fannypack.List.horizontal' ) };
  }
` ; export const ListItem = styled ( Box ) < ListItemProps > `
  margin-bottom: 0.2rem;

  & {
    ${ theme ( 'fannypack.List.item.base' ) };
  }
` ; export const List = styled ( _List ) < ListProps > `
  list-style: unset;
  list-style-type: none;

  &:not(:last-child) {
    margin-bottom: ${ space ( 4 ) }rem;
  }

  & & {
    margin-left: ${ space ( 4 ) }rem;
  }

  & {
    ${ props => props . isOrdered && orderedProperties };
  }

  & {
    ${ props => props . isHorizontal && horizontalProperties };
  }

  & {
    ${ theme ( 'fannypack.List.base' ) };
  }
` ; export default List ;