import styled from 'styled-components';
import {
  rem,
} from '../style/function.style';

import { ColLayoutType } from './type'

export const Container = styled.div<{
  conStyle: {
    width: number;
    marginTop: number;
    marginBottom: number;
  }
}>`
  min-height: ${rem(80)};
  overflow: hidden;
  background: #FFFFFF;
  padding-top: ${rem(36)};
  margin: ${props => `${props.conStyle.marginTop}rem auto ${props.conStyle.marginBottom}rem`};
  width: ${props => `${props.conStyle.width}rem`};
  border-radius: ${props => props.conStyle.width === 10 ? 0 : rem(32)};

`

export const ListContainer = styled.div<{
  type: ColLayoutType
}>`
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    ${props => `${
      props.type === 'vertical' 
        ? `
        .col-item:nth-child(2n+1) {
          margin-right: ${rem(24)};
        }
        &::after {
          content: '';
          flex: 0 1 ${rem(307)};
        }`
        : `
        .col-item:nth-child(n+2) {
          margin-top: ${rem(56)};
        }
        .col-item:last-child {
          margin-bottom: ${rem(32)}
        }
        `
    }`}
`

export const EditorTip = styled.p`
  text-align: center;
`

export const Title = styled.div`
  font-weight: 500;
  font-size: ${rem(28)};
  line-height: ${rem(40)};
  color: #2E2E2E;
  padding: 0 0 ${rem(36)} ${rem(24)};
`