"use strict";

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

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

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

const Text_1 = require("../../../../components/atoms/Text");

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 {
      display: none;
    }

    .billing-address-wrapper {
      width: 100%;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;

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

        input::placeholder {
          font-style: italic;          
        }
  
        @phone-or-smaller() {
          flex: 0 0 100%;
        }

        &.billing-address-heading {
          margin-bottom: rem(16);
          flex: 0 0 100%;
          font-size: rem(24);
          font-weight: 700;
          text-transform: capitalize;
        }
      
        &.state {
          flex: 0 0 25%;

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

        &.zip-code {
          flex: 0 0 25%;

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

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

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

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

      &.checkbox-label  {
        ${Text_1.LabelElement} {
          font-weight: 600;
        }
      }

      .input-show-password-icon {
        display: none;
      }
      
      &.card-number {
        flex: 0 0 26%;

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

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

      &.month {
        flex: 0 0 7%;

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

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

      &.year {
        flex: 0 0 7%;

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

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

      &.security {
        flex: 0 0 10%;

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

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

      &.default-address {
        flex: 0 0 100%;
        width: 100%;
        margin: rem(8) 0 rem(18);
        align-items: baseline;
    
        label {
          font-size: rem(16);
          color: #2c2c2c;
          user-select: none;
          align-self: flex-start;
        }
        svg {
          width: rem(18);
          height: auto;
          border-radius: rem(2);

          .checkbox-tickfill {
            transform: scale(1.4, 1.4) translate(rem(20), rem(30));
          }
        }
      }

      ${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