"use strict";

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

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

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

const SelectBoxInput_1 = require("../../../../../../forms/input/plugins/Special/SelectBoxInput");

const SelectDropDown_1 = require("../../../../../molecules/SelectDropDown");

const StyledFormWrapper = styleh_components_1.styled.section`
  position: relative;
  @phone-or-smaller() {
    padding-top: rem(24);
  }
  .form-wrapper {
    display: flex;

    .invite-form-container {
      display: flex;
      flex: 1;
      margin: 0 rem(-4);

      .email-icon {
        top: rem(20);
      }

      .form-item-wrapper {
        flex: 1 1 100%;
        padding: 0 rem(4);
        margin-bottom: rem(32);

        @tablet-or-smaller() {
          margin-bottom: rem(16);
        }

        @phone-or-smaller() {
          margin-bottom: rem(14);
        }

        ${TextBox_1.StyledLabel}, ${SelectBoxInput_1.StyledLabel} {
          margin-bottom: rem(8);
          text-transform: capitalize;
          font-size: 16px;
          font-weight: 400;
        }

        ${SelectDropDown_1.StyledClickBoundary}, ${TextBox_1.StyledInput} {
          height: rem(44);
          margin-top: rem(8);
          text-transform: capitalize;
        }

        ${TextBox_1.StyledInput} {
          font-size: 16px;
          text-transform: none;
          padding-left: rem(40);

          &:focus {
            ~ .email-icon {
              svg {
                fill: #1b75bc;
              }
            }
          }
        }

        ${SelectDropDown_1.StyledSelect} {
          padding-right: rem(8);
        }
      }
    }

    /** Note:
      * Since SelectDropDown doesn't have error message support,
      * while including it in future, it should have className
      * input-error-message, or else error message styling issue
      * will occur
    */
    .input-error-message {
      position: absolute;
      width: 100%;
      bottom: -rem(18);
      @phone-or-smaller() {
        bottom: -rem(15);
      }
    }

    .button-group {
      display: flex;
      flex: 0 0 rem(20);
      margin-left: rem(8);
      height: rem(95);
      @tablet-or-smaller() {
        height: rem(78);
        align-self: flex-end;
      }
    }

    @tablet-or-smaller() {
      .invite-form-container {
        flex-wrap: wrap;
        .drop-down-container {
          flex: 1 1 50%;
        }
      }
    }

    @tablet-or-larger() {
      .button-group {
        align-items: center;
      }
    }

    @phone-or-smaller() {
      flex-direction: column;
      .invite-form-container {
        flex-direction: column;
        .form-item-wrapper {
          flex: auto;
        }
      }
      .button-group {
        width: 100%;
        height: auto;
        flex: auto;
        align-self: auto;
        justify-content: center;
        margin: rem(4) 0 0;
      }
    }
  }
`;
exports.StyledFormWrapper = StyledFormWrapper; //# sourceMappingURL=styled.js.map