import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { Button } from '@skava/packages/ui';
import { EasyForm } from '@skava/packages/features/Forms';
export const StyledForm = styled(EasyForm) `
  width: 18.375rem;
  margin: auto;
  margin-top: 2rem;
  margin-bottom: 3.75rem;
  label {
    flex-basis: 100%;
  }
`;
export const ButtonGroup = styled.section `
  margin-top: var(--spacing-medium);
`;
export const RegisterButton = styled(Button).attrs({
    children: 'Create My Account',
}) `
  font-weight: 900;
  margin: 0;
  cursor: pointer;
  background-color: var(--color-blue);
  color: var(--color-pure-white);
  width: 100%;
  text-align: center;
  border-radius: var(--spacing-extra-small);
  margin: 0px;
  height: 2.75rem;
  padding: 0px;
  span {
    width: 100%;
    align-items: center;
  }
`;
export const Title = styled.h1.attrs({
    'data-qa': 'qa-createaccount-title',
    'children': 'CREATE YOUR ACCOUNT',
}) `
  @font (28,condensed);
  color: var(--color-black);
  letter-spacing: -1px;
  text-align: center;
`;
export const RegisterFormWrapper = styled.div.attrs({
    'data-qa': 'qa-create-account-container',
    'className': 'register-form-wrapper',
}) `
  .form-wrapper {
    width: rem(294);
    margin: auto;
    ${media.phoneOrSmaller `
      width: 100%;
    `}
    margin-top: 2rem;
    margin-bottom: 3.75rem;

    ${media.phoneOrSmaller `
      margin-left: 0.5rem;
      margin-right: 0.5rem;
      width: calc(100% - 16px);
    `}
    .submit-button {
      width: 100%;
      text-align: center;
      border-radius: var(--spacing-extra-small);
      margin: 0px;
      height: rem(44);
      padding: 0px;
      span.button-text {
        width: 100%;
        @font (18, medium);
        letter-spacing: 0;
        text-align: center;
        text-transform: capitalize;
      }
    }
    .select-dropdown + .input-error-message {
      margin-top: var(--spacing-small);
      color: var(--color-red);
      @font (12, medium);
    }
    .input-box,
    .dropdown-parent span,
    .select-dropdown-list span {
      @font (16,regular);
    }
  }
  .password-rules-label {
    @font (12, regular)
    color: var(--color-dark-grey);
    letter-spacing: 0;
    padding-bottom: var(--spacing-small);
  }
  .security-question-label {
    @font (16, regular);
    color: var(--color-black);
    letter-spacing: 0;
    line-height: 1.5rem;
    padding-bottom: var(--spacing-extra-small);
  }
  .arrow-wrapper {
    padding-right: var(--spacing-small);
  }
  .select-dropdown-list {
    position: relative;
    box-shadow: 0px 6px 5px #00000057;
  }
  .dropdown-parent {
    height: rem(44);
    padding: 0;
    span.text {
      margin: 0;
      color: var(--color-black);
      line-height: rem(26);
      padding-left: rem(8);
    }
  }

  .input-box {
    height: rem(44);
    margin-top: var(--spacing-extra-small);
    background: var(--color-pure-white);
    border-radius: var(--spacing-extra-small);
  }
  .input-box-wrapper {
    margin-bottom: var(--spacing-small);
    margin-top: 0;
  }
  .button-group {
    margin-top: var(--spacing-medium);
    height: 44px;
  }
  .register-password-container {
    margin-bottom: var(--spacing-medium);
  }
  .input-box-wrapper.security-question-1-answer-wrapper,
  .register-confirm-password-container {
    margin-bottom: var(--spacing-medium);
    margin-top: var(--spacing-small);
  }
  .register-security-question .security-question-1 {
    margin-top: rem(6);
  }
  .password-icon-svg {
    margin-top: var(--spacing-medium);
  }
  .select-dropdown {
    margin-bottom: var(--spacing-small);
    border: rem(1) solid var(--color-light-grey);
    border-radius: var(--spacing-extra-small);
    height: rem(44);
  }
  .input-box-label {
    text-transform: capitalize;
    @font (16,regular);
    color: var(--color-black);
    letter-spacing: 0;
    line-height: 1.5rem;
    height: auto;
    top: 0;
  }
`;
//# sourceMappingURL=styled.js.map