jobiqo-cl/lib/es/src/components/04-organisms/06-wizard/styles/index.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

const WizardActions = styled.div `
  display: flex;
  flex-direction: row-reverse;

  button {
    margin-left: 1rem;
  }

  button:last-child {
    margin-left: 0;
  }
`;
const WizardSteps = styled.div `
  display: flex;
  align-items: center;
  justify-content: center;
`;
const WizardStep = styled.div `
  padding: 1rem;
  line-height: 2rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  ${props => props.theme.mediaQueries.small} {
    padding: 1rem 2rem;
  }
`;
const WizardStepNumber = styled.span `
  border-radius: 100%;
  background: ${props => props.active ? props.theme.colors.primary : props.theme.colors.gray1};
  color: ${props => (props.active ? '#fff' : props.theme.colors.gray7)};
  width: 30px;
  height: 30px;
  display: inline-block;
  text-align: center;
  line-height: 30px;
  ${props => props.theme.mediaQueries.small} {
    margin-right: 1rem;
  }
`;
const WizardConnector = styled.div `
  display: none;
  display: block;
  flex: 1 1 auto;
  span {
    display: block;
    border-color: ${props => props.theme.colors.gray1};
    border-top-style: solid;
    border-top-width: 1px;
    width: 1rem;
    ${props => props.theme.mediaQueries.small} {
      width: auto;
    }
  }
`;

export { WizardActions, WizardConnector, WizardStep, WizardStepNumber, WizardSteps };