import * as React from 'react';
import { styled } from 'styleh-components';
import { media } from '@skava/styleh-toolset';
import { B2BPreset } from '@skava/packages/ui';
import { wording } from './fixture';
const { SignInForm, CreateAccountButton, CreateAccountLabel, SignInHeading } = B2BPreset;
const SignInFormWrapper = styled(SignInForm) `
  ${SignInHeading} {
    @font (28,condensed);
    color: var(--color-black);
    letter-spacing: rem(-1);
    text-align: center;
    text-transform: uppercase;
  }
  ${CreateAccountButton} {
    margin-top: 0.75rem;
    font-weight: 500;
    ${(props) => props.isB2BSignIn &&
    styled.css `
        display: none;
      `}
    ${media.tabletOrSmaller `
      margin-top: rem(14);
    `}
  }
  ${CreateAccountLabel} {
    ${(props) => props.isB2BSignIn &&
    styled.css `
        display: none;
      `}
  }
  input.input-box {
    margin-top: 0;
  }
  .input-show-password-icon {
    top: rem(14);
  }
`;
const SignInWrapper = styled.div `
  width: 19rem;
  margin: rem(40) auto rem(60);

  ${media.phoneOrSmaller `
    width: 100%;
    padding: var(--spacing-small);
    margin-top: var(--spacing-medium);
    margin-bottom: 0.75rem;
  `}

  .form-wrapper {
    margin-top: 2rem;
    margin-bottom: 1.25rem;

    .input-error-message {
      div {
        position: relative;
      }
    }

    .input-box-wrapper {
      margin: 0px;
      margin-bottom: var(--spacing-small);

      .input-box-label {
        text-transform: capitalize;
        @font (16, regular);
        color: var(--color-black);
        letter-spacing: 0;
        line-height: 1.5rem;
        top: 0;
        height: auto;
      }
      .input-box {
        @font (16, regular);
        color: var(--color-black);
      }
    }
  }

  .form-wrapper .button {
    width: 100%;
    margin: unset;
    border-radius: 4px;
    @font (18,medium);
    letter-spacing: 0;
    height: 2.75rem;
    text-align: center;
    text-transform: capitalize;
    padding: 0;
  }
  .signin-reset-password {
    display: none;
  }
  .signin-forgot-password {
    margin-bottom: var(--spacing-medium);
    margin-top: var(--spacing-medium);
    padding: 0px;
    color: var(--color-blue);
    letter-spacing: 0;
    line-height: 1.5rem;
    * {
      margin-left: 0px;
      text-transform: capitalize;
      @font (14,regular);
    }
  }

  .input-box {
    border-radius: 4px;
    height: 2.75rem;
    margin-top: var(--spacing-extra-small);
  }
  .signin-password-input {
    margin-bottom: var(--spacing-small);
  }
`;
const Title = styled.h3 `
  @font (28,condensed);
  color: var(--color-black);
  letter-spacing: rem(-1);
  text-align: center;
  margin-bottom: 2rem;
`;
const FreezeText = styled.h3 `
  color: var(--color-red);
  ${(props) => props.isFreezed &&
    styled.css `
      border: 1px solid var(--color-red);
    `};
  text-align: center;
`;
const leftRightStyles = styled.css `
  width: rem(65);
  height: 1px;
  background-color: var(--color-dark-grey);
`;
const FancyDividingWrapper = styled.div.attrs({
    role: 'presentation',
}) `
  margin-top: var(--spacing2x);
  height: var(--spacing-medium);
  line-height: 0px;
  position: relative;
  text-align: center;
  padding: 0 10%;

  width: 100%;
  text-align: center;
  margin: 1.5rem 0rem var(--spacing-medium) 0rem;
  @font (16,medium);
  color: var(--color-black);
  letter-spacing: 0;
`;
const FancyDividingText = styled.span `
  display: block;
  float: left;
  position: absolute;
  left: 0;
  right: 0;
  color: var(--color-dark-grey);
`;
// could use props
const LeftLine = styled.div `
  ${leftRightStyles}
  float: left;
`;
const RightLine = styled.div `
  ${leftRightStyles}
  float: right;
`;
const FancyOrDivider = () => (React.createElement(FancyDividingWrapper, null,
    React.createElement(LeftLine, null),
    React.createElement(FancyDividingText, null, wording.or),
    React.createElement(RightLine, null)));
export { FancyOrDivider, SignInWrapper, Title, SignInFormWrapper, FreezeText };
//# sourceMappingURL=styled.js.map