import styled from 'styled-components';

import { color } from '../../constants/style';

export const Wrapper = styled.div`
  display: inline-flex;
  flex-direction: column;
  width: 100%;
`;

export const Label = styled.span`
  padding: 8px;
`;

export const ContentWrapper = styled('div')<{isCollapse: boolean}>`
  display: inline-block;
  transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  max-height: ${props => props.isCollapse ? '0px' : '800px'};
  background-color: ${color['hyper-light-gray']};
  overflow: hidden;
`;

export const Content = styled.div`
  padding: 10px;
`;
