import { styled } from 'styleh-components'
import { StyledLabel } from 'src/inputs/TextBox'
import { media } from '@skava/styleh-toolset'

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);

      ${media.tabletOrSmaller`
        flex: 0 0 100%;
        justify-content: flex-start;
      `};
    }

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

      input::placeholder {
        font-style: italic;
        font-size: 16px;
      }

      ${media.tabletOrSmaller`
        flex: 0 0 50%;
      `} ${media.phoneOrSmaller`
        flex: 0 0 100%;
      `} &.required-label {
        flex: 0 0 50%;

        ${media.tabletOrSmaller`
          flex: 0 0 100%;
          margin-bottom: rem(16);
          order: -1;
        `} display: flex;
        align-items: center;
        text-transform: capitalize;
        font-size: rem(16);
        font-weight: 500;
      }

      &.first-name {
        ${media.phoneOrSmaller`
          flex: 0 0 75%;
        `};
      }

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

        ${media.tabletOrSmaller`
          flex: 0 0 10%;
        `} ${media.phoneOrSmaller`
          flex: 0 0 25%;
        `};
      }

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

        ${media.tabletOrSmaller`
          flex: 0 0 40%;
        `} ${media.phoneOrSmaller`
          flex: 0 0 100%;
        `};
      }

      &.address {
        margin-right: 60%;

        ${media.tabletOrSmaller`
          margin-right: auto;
        `} ${media.phoneOrSmaller`
          flex: 0 0 100%;
        `};
      }

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

        ${media.phoneOrSmaller`
          margin-right: auto;
          flex: 0 0 100%;
        `};
      }

      &.state {
        flex: 0 0 25%;

        ${media.tabletOrSmaller`
          flex: 0 0 40%;
        `} ${media.phoneOrSmaller`
          flex: 0 0 75%;
        `};
      }

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

        ${media.tabletOrSmaller`
          flex: 0 0 10%;
        `} ${media.phoneOrSmaller`
          flex: 0 0 25%;
        `};
      }

      ${StyledLabel} {
        display: flex;
        position: relative;
        margin-bottom: rem(8);
        top: 0;
        text-transform: capitalize;
        font-size: rem(16);
        font-weight: 500;
        color: var(--color-black);
        overflow: visible;
      }
    }
  }
`

export { Wrapper }