import _Group from 'reakit/Group' ; import { theme } from 'styled-tools' ; import styled , { css } from '../styled' ; import { GroupProps } from './Group' ; export const Group = styled ( _Group ) < GroupProps > `
  & > * {
    border-radius: 4px;
  }

  & input:focus,
  & select:focus {
    z-index: 1;
    position: relative;
  }

  & > *:first-child {
    & input,
    & select {
      ${ props => props . vertical ? css `
              border-bottom-right-radius: 0;
              border-bottom-left-radius: 0;
            ` : css `
              border-bottom-right-radius: 0;
              border-top-right-radius: 0;
            ` };
    }
  }

  & > *:last-child {
    & input,
    & select {
      ${ props => props . vertical ? css `
              border-top-left-radius: 0;
              border-top-right-radius: 0;
            ` : css `
              border-top-left-radius: 0;
              border-bottom-left-radius: 0;
            ` };
    }
  }

  & > *:not(:first-child):not(:last-child) > input,
  & > *:not(:first-child):not(:last-child) > select {
    border-radius: 0;
  }

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