import styled from 'styled-components';

export const Icon = styled.span`
  color: ${props => props.theme.default.colors.white};
  border-radius: 50%;
  margin-right: 10px;
  padding: 2px;
  font-size: 14px;
  display: inline-block;
  text-align: center;

  &.icon-check {
    background-color: ${props => props.theme.default.colors.blue};
  }

  &.icon-cross {
    background-color: ${props => props.theme.default.colors.black};
  }

  &.icon-time {
    background-color: ${props => props.theme.default.colors.orange};
  }
`;

export const SuccessIcon = styled.div`
  font-size: 100px;
  color: ${props => props.theme.default.colors.white};
  margin: 0 auto 40px auto;
  padding: 20px;
  border-radius: 50%;
  width: fit-content;
  background-color: ${props => props.theme.default.colors.green};
`;