import { theme } from 'styled-tools';

import styled, { css } from '../styled';
import Set from '../Set';
import { FieldSetProps } from './FieldSet';

export const FieldSet = styled(Set)<FieldSetProps>`
  ${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.FieldSet.horizontal')};
          }
        `
      : css`
          display: block;

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

  & {
    ${theme('fannypack.FieldSet.base')};
  }
`;

export default FieldSet;