import React from 'react'
import { MaterialIcon } from 'atoms/MaterialIcon'
import { Button } from 'atoms/Button'
import { styled } from 'styleh-components'

export const StyledCloseButton = styled.withComponent(Button).attrs({
  className: 'close-button-wrapper',
  children: (
    <div>
      <MaterialIcon type="close" />
    </div>
  ),
  'aria-label': 'Close Modal',
})`
  z-index: 70;
  cursor: pointer;
  position: absolute;
  font-size: 1.8em;
  top: -2rem;
  right: 0;

  @phone-or-smaller() {
    right: 0.5rem;
  }
  will-change: transform;

  /* hide (most) initial offset */
  transform: translateY(110%);
  animation-name: closin;
  animation-delay: 1s;
  animation-duration: 1s;
  animation-fill-mode: forwards;
`