pdf-reader-web/components/ExpansionPanel/styled.ts

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