import { styled } from 'styleh-components'
import {
  ToggleList,
  ToggleContentWrapper,
  ToggleItemWrapper,
  Header,
} from 'molecules/ToggleList'

const StyledInput = styled.input `
  width: rem(130);
  height: rem(42);
  margin-left: rem(16);
  border-radius: rem(4);
  border: rem(1) solid #cccccc;
`
const StyledToggleList = styled.withComponent(ToggleList) `
  ${ToggleContentWrapper} {
    flex-direction: column;
  }
  ${ToggleItemWrapper} {
    margin-bottom: rem(28);
    &:last-child {
      margin-bottom: 0;
    }
  }
  ${Header} {
    font-size: rem(20);
    color: #2c2c2c;
    text-transform: capitalize;
  }
`
export { StyledInput, StyledToggleList }