import { styled } from 'styleh-components'
import {
  SquarePlaceholder,
  TextPlaceholder,
  RectanglePlaceholder,
} from 'atoms/Placeholder'

const ToggleItemWrapper = styled.div `
  display: flex;
  align-items: center;
`

const StyledCheckBox = styled.withComponent(SquarePlaceholder) `
  margin-right: rem(18);
  border-radius: rem(2);
`
const StyledTextBox = styled.withComponent(TextPlaceholder) ``

const StyledCommentBox = styled.section `
  display: flex;
  flex-direction: column;
  width: rem(510);
  margin: rem(24) 0 0 rem(38);
  @phone-or-smaller() {
    width: 100%;
    margin: rem(16) 0 0;
  }
`

const StyledTextArea = styled.withComponent(RectanglePlaceholder) `
  border-radius: rem(4);
`

const ButtonGroup = styled.div `
  display: flex;
  margin: rem(16) rem(-8) 0;
  @phone-or-smaller() {
    flex-direction: column;
    margin: 0;
  }
`

const StyledButton = styled.withComponent(RectanglePlaceholder) `
  margin: 0 rem(8);
  border-radius: rem(4);
  @phone-or-smaller() {
    margin: rem(8) 0 0;
  }
`

export {
  ToggleItemWrapper,
  StyledCheckBox,
  StyledTextBox,
  StyledCommentBox,
  ButtonGroup,
  StyledTextArea,
  StyledButton,
}