import { styled } from 'styleh-components'
import {
  Toggle,
  IconWrapper,
  StyledLabel,
  StyledCheckboxIcon,
} from 'molecules/Toggle'
import {
  CommentBox,
  StyledSubmitButton,
  StyledCancelButton,
} from 'src/forms/views/CommentBox'

const StyledToggleItem = styled.withComponent(Toggle) `
  ${IconWrapper} {
    margin-right: rem(18);
    ${StyledCheckboxIcon} {
      width: rem(20);
      height: rem(20);
      border-radius: rem(2);
      .checkbox-tickfill {
        transform: translate(30px, 50px) scale(1.4);
      }
    }
  }
  ${StyledLabel} {
    font-weight: 500;
    font-size: rem(18);
    color: #2c2c2c;
    text-transform: capitalize;
    @phone-or-smaller() {
      font-size: rem(16);
    }
  }
`

const StyledCommentBox = styled.withComponent(CommentBox) `
  margin: rem(24) 0 0 rem(38);
  width: rem(510);
  @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;
    &::placeholder {
      color: #a9b2c1;
    }
    @phone-or-smaller() {
      font-size: rem(16);
    }
  }
  .button-group {
    margin: rem(16) rem(-5) 0;
    @phone-or-smaller() {
      flex-direction: column;
      margin: rem(8) 0 0;
    }
  }
  ${StyledSubmitButton} {
    background-color: #169fd5;
    font-weight: 500;
    margin: 0 rem(5) 0;
    @phone-or-smaller() {
      margin: 0 0 rem(8);
      font-size: rem(16);
    }
  }
  ${StyledCancelButton} {
    background-color: #a6aec1;
    border: none;
    color: #ffffff;
    font-weight: 500;
    margin: 0 rem(5) 0;
    @phone-or-smaller() {
      margin: 0;
      font-size: rem(16);
    }
  }

`

export { StyledToggleItem, StyledCommentBox }