import { theme } from 'styled-tools' ; import styled , { css } from '../styled' ; import Set from '../Set' ; import { LayoutSetProps } from './LayoutSet' ; export const LayoutSet = styled ( Set ) < LayoutSetProps > `
  ${ props => props . isHorizontal ? css `
          display: flex;

          & > * {
            flex: 1;
          }

          @media screen and (max-width: ${ theme ( 'fannypack.layout.tabletBreakpoint' ) }px) {
            display: block;
            margin-top: 0rem;
          }

          & {
            ${ theme ( 'fannypack.LayoutSet.horizontal' ) };
          }
        ` : css `
          display: block;

          & {
            ${ theme ( 'fannypack.LayoutSet.vertical' ) };
          }
        ` };

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