import styled from 'styled-components';
import {spacing} from '@propellerads/stylevariables';

const StyledPasswordValidator = styled.div`
  margin-bottom: ${spacing * 4}px;
`;

interface PasswordRuleProps {
    isPassed: boolean
}

const PasswordRule = styled.div`
  display: flex;
  align-items: flex-start;
  min-height: 20px;
  color: ${(props: PasswordRuleProps) => (props.isPassed ? 'black' : '#b3b3b3')};
`;

const PasswordIcon = styled.span`
  margin-right: ${spacing * 2}px;;
`;

export {StyledPasswordValidator, PasswordRule, PasswordIcon};