import styled, { keyframes, css } from 'styled-components';

const fadeIn = keyframes `
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
`;
const spin = keyframes `
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
`;
styled.div `
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  align-self: center;
  min-width: 560px;
  flex-direction: ${(props) => (props.column ? 'column' : 'row')};
  box-sizing: border-box;
  margin-left: ${(props) => (props.leftMargin ? '400px' : 0)};

  ${(props) => props.width &&
    css `
      width: ${props.width}px;
    `}

  @media (min-width: 600px) {
    height: 100%;
  }
  @media (max-width: 600px) {
    height: auto;
    min-width: 300px;
  }
`;

export { fadeIn, spin };
