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

import Colors from '../Colors';
import Sizes from '../Sizes';

const onAnimation = (from:string|number, to: string|number) => keyframes`
  from { transform: translateY(${from}); }
  to { transform: translateY(${to}); }
`;

export const ModalStyle = styled.div<{translate: string}>`
  overflow-y: scroll;
  background-color: ${Colors.white};
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  padding-left: ${Sizes.s7}px;
  padding-right: ${Sizes.s5}px;
  z-index: 9999;
  will-change: transfrom;
  ${({ translate }) => translate === 'enter' ?
    css`animation: ${onAnimation('-1000px', 0)} 0.6s ease-in;` :
    css`animation: ${onAnimation(0, '-1000px')} 0.6s ease-in;`
  }
`;

export const Close = styled.button`
  appearance: none;
  background-color: ${Colors.white};
  border: 0 none;
  cursor: pointer;
  outline: none;
  float: right;
  clear: both;
  margin-top: ${Sizes.s5}px;
`;