import { styled } from 'styleh-components'
import { Button, ButtonLabel } from 'atoms/Button'
import { ErrorComponent } from 'atoms/Error'
import { StyledLabel } from 'src/inputs/TextBox'

const StyledPrimaryButton = styled.withComponent(Button) `
  width: rem(250);
  height: rem(44);
  font-size: rem(16);
  color: #fff;
  background-color: #1a75bc;
  text-transform: capitalize;
  border-radius: rem(4);
  border: 0;
  margin-top: rem(12);

  @phone-or-smaller() {
    width: 100%;
  }
`

const SignUpFormWrapper = styled.section `
  .input-form-wrapper {
    padding: 0 rem(4);
    margin-bottom: rem(32);

    .input-error-message {
      position: relative;
      margin-top: 0;
      ${ErrorComponent} {
        margin-top: rem(4);
        color: red;
        font-size: rem(14);
        font-weight: 400;
        position: absolute;
        top: 0;
      }
    }

    ${StyledLabel} {
      position: relative;
      top: 0;
      text-transform: capitalize;
      font-size: rem(16);
      overflow: visible;
      font-weight: 400;
    }

    &.country-wrapper {
      flex: 0 0 50%;

      @tablet-or-smaller() {
        flex: 0 0 30%;
      }

      @phone-or-smaller() {
        flex: 0 0 50%;
      }
    }

    &.zipcode-wrapper {
      flex: 0 0 20%;

      @phone-or-smaller() {
        flex: 0 0 50%;
      }
    }

    &.phone-number-wrapper {
      flex: 0 0 30%;
      @tablet-or-smaller() {
        flex: 0 0 50%;
      }

      @phone-or-smaller() {
        flex: 0 0 100%;
      }
    }
  }

  .input-group-wrapper {
    display: flex;
    flex-wrap: wrap;
    margin-left: rem(-4);
    margin-right: rem(-4);
    .first-name-wrapper,
    .last-name-wrapper,
    .email-address-wrapper,
    .organization-name-wrapper,
    .address-line-one-wrapper,
    .address-line-two-wrapper,
    .city-wrapper,
    .state-wrapper,
    .tax-identifier-wrapper,
    .duns-wrapper {
      flex: 0 0 50%;
      @phone-or-smaller() {
        flex: 0 0 100%;
      }
    }
  }

  input.input-box {
    height: rem(44);
    font-size: rem(16);
    margin-top: rem(8);
  }

  .duns-wrapper {
    ${StyledLabel} {
      text-transform: uppercase;
    }
  }

  .button-group {
    display: flex;
    justify-content: flex-end;
  }
`

export { StyledPrimaryButton, SignUpFormWrapper }