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

export const Wrapper = styled.div<{isHidden?: boolean}>`
  transition: 0.3s linear;  
  padding: 0 5px;
  color: white;
  margin-bottom: 15px;
  
  ${({ isHidden }) => (isHidden ? css`
      height: 0;
      opacity: 0;
      margin-bottom: 0;
    ` : '')}
`

export const WrapperTop = styled.div`
  display: flex;
  justify-content: space-between;
`