"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});

const styleh_components_1 = require("styleh-components");

const Button_1 = require("../../../../atoms/Button");

const Error_1 = require("../../../../atoms/Error");

const TextBox_1 = require("../../../../../inputs/TextBox");

const StyledPrimaryButton = styleh_components_1.styled.withComponent(Button_1.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%;
  }
`;
exports.StyledPrimaryButton = StyledPrimaryButton;
const SignUpFormWrapper = styleh_components_1.styled.section`
  .input-form-wrapper {
    padding: 0 rem(4);
    margin-bottom: rem(32);

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

    ${TextBox_1.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 {
    ${TextBox_1.StyledLabel} {
      text-transform: uppercase;
    }
  }

  .button-group {
    display: flex;
    justify-content: flex-end;
  }
`;
exports.SignUpFormWrapper = SignUpFormWrapper; //# sourceMappingURL=styled.js.map