"use strict";

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

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

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

const Wrapper = styleh_components_1.styled.section`
  .form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    margin-left: -rem(4);
    margin-right: -rem(4);

    .button-group {
      flex: 0 0 50%;

      display: flex;
      justify-content: flex-end;
      padding: 0 rem(4);

      @tablet-or-smaller() {
        flex: 0 0 100%;
        justify-content: flex-start;
      }
    }

    .form-item-wrapper {
      flex: 0 0 43%;
      padding: 0 rem(4);

      input::placeholder {
        font-style: italic;
      }

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

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

      &.required-label {
        flex: 0 0 50%;

        @tablet-or-smaller() {
          flex: 0 0 100%;
          margin-bottom: rem(16);
          order: -1;
        }

        display: flex;
        align-items: center;
        text-transform: capitalize;
        font-size: rem(16);
        font-weight: 600;
      }

      &.first-name {
        @phone-or-smaller() {
          flex: 0 0 75%;
        }
      }

      &.middle-name {
        flex: 0 0 12%;

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

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

      &.last-name {
        flex: 0 0 45%;

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

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

      &.address {
        margin-right: 60%;

        @tablet-or-smaller() {
          margin-right: auto;
        }

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

      &.country,
      &.phone,
      &.email {
        margin-right: 60%;

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

      &.state {
        flex: 0 0 25%;

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

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

      &.postal-code {
        flex: 0 0 20%;

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

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

      ${TextBox_1.StyledLabel} {
        display: flex;
        position: relative;
        margin-bottom: rem(8);
        top: 0;
        text-transform: capitalize;
        font-size: rem(16);
        font-weight: 400;
        color: #2c2c2c;
        overflow: visible;
      }
    }
  }
`;
exports.Wrapper = Wrapper; //# sourceMappingURL=styled.js.map