import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { wording } from './fixture';
const resetByPhoneLabels = wording.resetByPhone;
const resetPasswordCommon = styled.css `
  width: rem(304);
  margin: auto;
  padding-top: rem(22);
`;
const ResetPasswordFormWrapper = styled.div `
  ${resetPasswordCommon}

  ${media.phoneOrSmaller `
    width: 100%;
    padding: 0 0.5rem;
  `}
  .input-box-wrapper {
    margin-bottom: rem(40);
    .input-box {
      padding: 0 var(--spacing-medium);
    }
  }
  .svg-icon-arrow-left {
    margin-right: var(--spacing-small);
  }
  .button {
    &.reset-cancel-button,
    &.reset-continue-button {
      text-align: center;
      justify-content: center;
      border: none;
      cursor: pointer;
      align-items: center;
      border-radius: 4px;
      height: rem(40);
      width: 100%;
      @font (18, semi);
      color: var(--color-pure-white);
      margin: var(--spacing-medium) auto;
      padding: rem(13);
    }
    &.reset-cancel-button {
      background-color: var(--color-light-grey);
      margin-top: 0;
    }
    &.reset-continue-button {
      background-color: var(--color-blue);
    }
  }

  .reset-password-email-address {
    background: var(--color-pure-white);
    border: $border-thin;
    border-radius: 4px;
    height: 2.75rem;
    width: rem(304);
    ${media.phoneOrSmaller `
      width: 100%;
      padding: 0.5rem;
    `}
  }
  .input-box {
    @font (16,regular);
    color: var(--color-black);
    margin-top: var(--spacing-extra-small);
  }
  .input-error-message {
    color: var(--color-red);
  }
  button.button.reset-continue-button {
    background: var(--color-blue);
    border-radius: 4px;
    height: 2.75rem;
    width: rem(304);
    margin: 0px;
    padding: 0px;
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }
  .input-box-label {
    position: unset;
    text-transform: capitalize;
    @font (16,regular);
    color: var(--color-black);
    letter-spacing: 0;
    line-height: 1.5rem;
    height: auto;
    top: 0;
  }
  button span {
    @font (18, medium)
    color: var(--color-pure-white);
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
  }
  .input-error {
    border-color: var(--color-red);
  }
`;
/**
 * @todo @name @class @invalid @ram
 */
const CreateNewPasswordFormWrapper = styled.article `
  ${resetPasswordCommon}

  ${media.phoneOrSmaller `
    width: 100%;
    padding: 0.5rem;
  `}
  .reset-password-email-address-wrapper {
    margin-bottom: 2.5rem;
    margin-top: 0rem;
  }

  button,
  .button span {
    @font (18, medium);
    color: var(--color-pure-white);
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
    height: 2.75rem;
    padding: 0px;
    border-radius: 4px;
  }
  .input-box-label {
    @font (16,regular);
    text-transform: capitalize;
    color: var(--color-black);
  }
  .reset-password-email-address {
    margin-top: var(--spacing-extra-small);
    border-radius: 4px;
  }
  .security-question-1-answer-wrapper div {
    width: 100%;
  }
  .security-question-button-group button {
    height: 2.75rem;
  }
  .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);
    color: var(--color-black);
  }
  .input-box {
    border-radius: 4px;
    margin-top: var(--spacing-extra-small);
    height: 2.75rem;
  }
  .input-error {
    border-color: var(--color-red);
  }
`;
/**
 * @todo @name @invalid @ram
 */
const ResetPasswordFinalWrapper = styled.article.attrs({
    className: 'reset-pwd-form-wrapper',
}) `
  width: rem(304);
  margin: auto;
  ${media.phoneOrSmaller `
    width: 100%;
    padding: 0 0.5rem;
  `}
  .input-box {
    margin-bottom: 2.5rem;
    @font (16,regular);
    margin-top: var(--spacing-extra-small);
    color: var(--color-black);
  }
  .register-password-container {
    margin-bottom: 0;
    margin-top: 0px;
    .input-box {
      margin-bottom: 0px;
    }
  }
  .register-confirm-password-container {
    margin-bottom: 2.5rem;
    margin-top: 1rem;
  }
  .password-icon-svg {
    margin-top: 1.25rem;
  }
  .password-rules-label {
    @font (12, regular)
    color: var(--color-dark-grey);
    letter-spacing: 0;
    padding-bottom: var(--spacing-small);
  }
  .input-box-label {
    text-transform: capitalize;
    @font (16,regular);
    color: var(--color-black);
    letter-spacing: 0;
    line-height: 1.5rem;
    height: auto;
    top: 0rem;
  }
  .input-box-wrapper {
    .input-box {
      background: var(--color-pure-white);
      border: $border-thin;
      border-radius: 4px;
      height: 2.75rem;
      width: rem(304);
      ${media.phoneOrSmaller `
        width: 100%;
      `}
    }
  }
  button span {
    @font (18, medium)
    color: var(--color-pure-white);
    letter-spacing: 0;
    text-transform: capitalize;
    text-align: center;
    width: 100%;
  }
  .recieve-code-label {
    color: var(--color-blue);
    @font (14, regular)
    margin-top: 1rem;
    margin-bottom: 3.5rem;
  }
  .reset-code-wrapper {
    margin-bottom: 0px;
  }
  .reset-code-wrapper.input-box {
    margin-bottom: 0rem;
  }
  button.button.reset-continue-button {
    background: var(--color-blue);
    border-radius: 4px;
    height: 2.75rem;
    width: rem(304);
    margin: 0px;
    padding: 0px;
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }
  .register-confirm-password.input-box {
    margin-bottom: 0;
  }
  input.input-box.input-error {
    border-color: var(--color-red);
  }
`;
const PasswordTitle = styled.h2.attrs({
    /**
     * @todo @name password-title @invalid
     */
    className: 'passwordtitle',
    children: (props) => props.text
}) `
  margin-bottom: 2rem;
  @font (28, condensed);
  color: var(--color-black);
  text-align: center;
`;
const SecurityQuestionWrapper = styled.article.attrs({
    'className': 'security-question-wrapper',
    'data-qa': 'qa-security-question-container',
}) `
  width: rem(304);
  ${media.phoneOrSmaller `
    width: 100%;
  `}
  .separator-label {
    margin: 2rem 0;
    width: rem(304);
    @font (28, condensed)
    color: var(--color-black);
    letter-spacing: rem(-1);
    text-align: center;
    text-transform: lowercase;
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }
  .select-dropdown-wrap {
    background: var(--color-pure-white);
    border: $border-thin;
    border-radius: 4px;
    height: 2.75rem;
    width: rem(304);
    margin-top: var(--spacing-extra-small);
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }

  .label-container,
  .security-question-label {
    @font (16, regular)
    color: var(--color-black);
    letter-spacing: 0;
    text-transform: capitalize;
    line-height: 1.5rem;
  }

  .security-question-1-answer-wrapper,
  .security-question-button-group button {
    display: flex;
    flex-wrap: wrap;
    width: rem(304);
    margin-top: rem(40);
    margin-bottom: rem(40);
    text-transform: capitalize;
    border-radius: 4px;
    ${media.phoneOrSmaller `
      width: 100%;
    `}
  }
  .security-question-button-group button {
    margin: 0;
    padding: 0;
    font-weight: 500;
  }
  button span {
    @font (18, medium)
    color: var(--color-pure-white);
    letter-spacing: 0;
    text-align: center;
    width: 100%;
  }
  .dropdown-parent {
    height: 2.75rem;
  }

  .arrow-wrapper {
    margin-right: 0.5rem;
  }

  .dropdown-parent span {
    padding: 0;
    color: var(--color-black);
  }

  input.input-box.security-question-1-answer {
    background: var(--color-pure-white);
    border: $border-thin;
    border-radius: 4px;
    height: 2.75rem;
    margin-top: var(--spacing-extra-small);
  }

  label.input-box-label {
    text-transform: capitalize;
    @font (16, regular)
    color: var(--color-black);
  }
  .update-security-question-button {
    background: var(--color-blue);
    border-radius: 4px;
    width: 100%;
    margin: 0;
    height: 2.75rem;
  }
  .input-box {
    @font (16,regular);
    color: var(--color-black);
  }
  input.input-box.input-error {
    border-color: var(--color-red);
  }
`;
export { ResetPasswordFormWrapper, CreateNewPasswordFormWrapper, PasswordTitle, SecurityQuestionWrapper, ResetPasswordFinalWrapper, };
export default ResetPasswordFormWrapper;
export const StyledSecurityLabel = styled.h1.attrs({
    children: wording.securityQuestionTitle,
}) `
  margin-top: var(--spacing2x);
  text-transform: uppercase;
  padding: 0;
  border: 0;
  @font (26, bold);
  color: var(--color-black);
  text-align: center;
  margin-bottom: var(--spacing2x);
  margin-top: var(--spacing2x);
  padding: 0;
  border: none;
  margin-top: 0;
`;
export const StyledIdentityLabel = styled.h4.attrs({
    children: wording.identityTitle
}) `
  margin-top: var(--spacing2x);
  text-transform: uppercase;
  padding: 0;
  border: 0;
  @font (26, bold);
  color: var(--color-black);
  text-align: center;
  margin-bottom: var(--spacing2x);
  margin-top: var(--spacing2x);
  padding: 0;
  border: none;
  margin-top: 0;
`;
export const StyledTitle = styled.h1.attrs({
    children: wording.choosePasswordTitle,
}) `
  margin-top: var(--spacing2x);
  text-transform: uppercase;
  padding: 0;
  border: 0;
  @font (26, bold);
  color: var(--color-black);
  text-align: center;
  margin-bottom: var(--spacing2x);
  margin-top: var(--spacing2x);
  padding: 0;
  border: none;
  margin-top: 0;
`;
export const ResetFormWrap = styled.div ``;
import { ModalTitle } from '@skava/packages/ui';
export const StyledModalTitle = styled(ModalTitle).attrs({
    children: resetByPhoneLabels.choosePasswordTitle,
}) ``;
export const CreateNewPasswordFormWrap = styled.div ``;
//# sourceMappingURL=styled.js.map