import { styled } from 'styleh-components'
import { StyledLabel } from 'src/inputs/TextBox'
import { ErrorComponent } from 'atoms/Error'
import { PrimaryButton } from 'presets/Buttons'

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(16);
    }
  }

  ${StyledLabel} {
    position: relative;
    top: 0;
    text-transform: capitalize;
    color: #2c2c2c;
    font-size: rem(16);
    font-weight: 400;
    display: flex;
    margin-bottom: rem(8);
  }

  .input-error-message {
    position: relative;
    margin-top: 0;
    ${ErrorComponent} {
      margin-top: rem(4);
      color: red;
      font-size: rem(14);
      font-weight: 400;
      position: absolute;
      top: 0;
    }
  }

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

  .input-box-wrapper {
    flex: 0 0 100%;
    user-select: none;

    &.register-password-container {
      margin-bottom: rem(35);
    }
    &.confirm-password-container {
      margin-top: rem(42);
    }
  }

  input.input-box {
    width: 100%;
    height: rem(44);
    border-radius: rem(4);
  }
  .label-wrapper {
    width: 100%;
    color: #5f6c88;
    font-size: rem(14);
    font-weight: 400;
    padding-bottom: rem(8);
  }
  .password-rules-label {
    font-size: rem(12);
    color: #5f6c88;
  }
  .input-show-password-icon {
    display: flex;
    align-items: center;
  }
`

const StyledPrimaryButton = styled.withComponent(PrimaryButton) `
  color: #fff;
  font-size: rem(18);
  font-weight: 500;
  text-transform: capitalize;
  background: #3a75bd;
  border-radius: rem(4);
  user-select: none;
`

export { StyledShippingForm, StyledPrimaryButton }