import { styled } from 'styleh-components'
import { StyledLabel } from 'src/inputs/TextBox'

const Wrapper = 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%;
        }
      }

      ${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;
      }
    }
  }
`

export {
  StyledPrimaryButton,
  Wrapper,
}