import { styled } from 'styleh-components'

const sharedButtonStyles = styled.css `
  font-size: 1rem;
  padding: 1rem;
  margin-top: 1rem;
  border: none;
`
export const SubmitMultipleFormsButton = styled.button `
  background-color: purple;
  color: yellow;
  ${sharedButtonStyles};
`

export const RemoveFormButton = styled.button `
  background-color: red;
  color: white;
  ${sharedButtonStyles};
`

export const AddFormButton = styled.button `
  background-color: blue;
  color: white;
  ${sharedButtonStyles};
`

export const ValidateFormButton = styled.button `
  background-color: yellow;
  color: black;
  ${sharedButtonStyles};
`

export const PersistButton = styled.button `
  background-color: green;
  color: black;
  ${sharedButtonStyles};
`
export const RehydrateButton = styled.button `
  background-color: green;
  color: white;
  ${sharedButtonStyles};
`

export const StyledMultipleFormSection = styled.section `
  border: 1px solid grey;
  padding: 1rem;

  form {
    border: 1px dashed yellow;
    margin: 0.5rem;
  }
`