"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const Error_1 = require("atoms/Error");
const Buttons_1 = require("presets/Buttons");
const TextBox_1 = require("inputs/TextBox");
const StyledShippingForm = styled.section `
  width: 100%;

  .form-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;

    .button-group {
      flex: 1;
      margin-top: rem(10);
    }
  }

  ${TextBox_1.StyledLabel} {
    position: relative;
    top: 0;
    text-transform: capitalize;
    color: #5F6C88;
    font-size: 13px;
  }

  ${Error_1.ErrorComponent} {
    color: red;
    font-size: 12px;
  }

  .placeholder-label {
    position: absolute;
    color: red;
  }

  .input-box-wrapper {
    flex: 0 0 100%;
    border: solid 1px #ccc;
    border-radius: 3px;
    padding: rem(3) rem(8);
    margin-bottom: rem(16);

    &.left-align {
      flex: 0 0 calc(50% - 8px);
    }

    &.right-align {
      flex: 0 0 calc(50% - 8px);
    }
    &.cardNumber{
      flex: 0 0 calc(70% - 8px);
    }
    &.CVVNumber{
      flex: 0 0 calc(30% - 8px);
    }
    &.expiryMonth{
      flex: 0 0 calc(60% - 8px);
    }
    &.expiryYear{
      flex: 0 0 calc(40% - 8px);
    }
  }
  .defaultAddress{
    margin: rem(8) 0 rem(28);
    label{
      font-size: 16px;
      color: #2C2C2C;
    }
    svg{
      width: rem(18);
      height: auto;
    }
  }

  input.input-box {
    width: 100%;
    border: 0;
    padding: 0;
    font-size: 20px;
    height: rem(34);
  }
`;
exports.StyledShippingForm = StyledShippingForm;
const StyledPrimaryButton = styled.withComponent(Buttons_1.PrimaryButton) `
  color: #fff;
  font-size: 16px;
  text-transform: capitalize;
  margin-top: 1rem;
`;
exports.StyledPrimaryButton = StyledPrimaryButton;
//# sourceMappingURL=styled.js.map