import styled from 'styled-components';
import { Colors, Sizes } from '../index';

export default styled.div`
  padding: ${Sizes.s5}px;
  border: 1px solid ${Colors.line};
  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  height: 100%;

  @media screen and (max-width: 600px) {
    padding: ${Sizes.s4}px;
  }

  ${({ interactive }: { interactive?: boolean }) => interactive && `
    &:hover {
      transform: scale(1.01, 1.01);
      box-shadow: 0 0px 16px 6px rgba(0,0,0,0.1);
    }
  `}
`;