import Form from "react-jsonschema-form";
import styled from "styled-components";
import colors from "@theme/colors";

const FormStyleWrapper = styled(Form)`
  legend {
    display: none;
  }

  fieldset {
    border: none;
    padding: 0;
    margin: 1rem 0;
  }

  .form-group {
    padding-bottom: 0.5rem;

    & > label {
      margin: 0.5rem 0;
      font-weight: 600;
      display: block;
    }
  }

  & > div:last-child {
    text-align: center;

    button[type="submit"] {
      background-color: ${colors.blue1};
      color: ${colors.white};
      padding: 0.5rem 1rem;
      border: none;
      outline: none;
      cursor: pointer;
    }
  }

  input,
  option,
  select {
    font-size: 1.5rem;
    padding: 0.3rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"] {
    height: 3rem;
  }

  input[type="text"],
  input[type="email"],
  input[type="number"],
  textarea,
  select {
    display: block;
    width: 100%;
  }

  option {
    cursor: pointer;
  }
`;

export default FormStyleWrapper;