import { styled } from '../styled' ; import { theme } from '../utils/theme' ; import { breakpoint } from '../utils/breakpoint' ; import { getAlignmentStyles } from '../utils/getCSSFromStyleObject' ; export const StyledLevel = styled . View `
  justify-content: space-between;

  ${ getOrientationAttributes }
  ${ getResponsiveAttributes }

  ${ theme ( 'native.Level' , 'styles.base' ) };
` ; function getOrientationAttributes ( { orientation } ) { if ( orientation === 'horizontal' ) { return `
      flex-direction: row;
    ` ; } if ( orientation === 'vertical' ) { return `
      flex-direction: column;
    ` ; } return '' ; } function getResponsiveAttributes ( { orientation , verticalBelow , ... props } ) { if ( orientation === 'horizontal' && verticalBelow ) { return breakpoint ( 'width' , { [ `max-${ verticalBelow }` ] : `
        justify-content: flex-start;
        flex-direction: column;

        ${ props . alignY ? getAlignmentStyles ( { attribute : 'alignY' , value : props . alignY , props } ) : '' }
        ${ props . alignX ? getAlignmentStyles ( { attribute : 'alignX' , value : props . alignX , props } ) : '' }
      ` , } ) ( props ) ; } return '' ; }