import styled, { css } from 'styled-components'

import { IFlexSC } from './Flex.interface'

export const StyledFlex = styled.div<IFlexSC>`
  display: flex;
  flex-direction: ${props => (props.$direction ? props.$direction : 'row')};
  align-items: ${props => (props.$align ? props.$align : 'center')};
  justify-content: ${props => (props.$justify ? props.$justify : 'start')};
  flex-wrap: ${props => (props.$wrap ? props.$wrap : 'wrap')};
  gap: ${props => props.$gap};
`