import { styled } from 'styleh-components'
import { Toggle, IconWrapper, StyledLabel } from '@skava/ui/dist/components/molecules/Toggle'
import { CommentBox } from '@skava/ui/dist/forms/views/CommentBox'

const StyledToggleItem = styled.withComponent(Toggle) `
  ${IconWrapper} {
    margin-right: rem(16);
  }
  ${StyledLabel} {
    font-weight: 500;
    font-size: rem(16);
    color: var(--color-black);
    text-transform: capitalize;
    @phone-or-smaller() {
      font-size: rem(16);
    }
  }
`

const StyledCommentBox = styled.withComponent(CommentBox) `
  @phone-or-smaller() {
    width: 100%;
    margin: rem(16) 0 0;
  }
  .comment-box {
    height: rem(150);
    border-radius: rem(4);
    padding: rem(12);
    border: 1px solid #a6aec1;
    width: 45%;
    &::placeholder {
      font-size: rem(16);
      color: #a9b2c1;
    }
    @phone-or-smaller() {
      font-size: rem(16);
      width: 100%;
    }
  }
`

export { StyledToggleItem, StyledCommentBox }