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

export const StyledCloseButton = styled.withComponent(Button).attrs({
  'className': 'close-button-wrapper',
  'children': <CloseIcon />,
  '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;

  .close-icon-svg {
    width: rem(18);
    height: rem(18);
  }
  .close-svg-parts {
    fill: #fff;
    stroke: $colors-fancy-gray;
    stroke-linecap: round;
    stroke-miterlimit: 10;
    stroke-width: 2px;
  }
`