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

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

export const Container = styled('div')<{ showBottomBorder: boolean }>`
  display: inline-flex;
  flex-direction: column;
  width: 100%;

  ${props =>
    props.showBottomBorder
      ? css`
          border-bottom: 1px solid ${color.black12};
        `
      : ''}
`;

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;
`;