import React from 'react' ; import styled from 'styled-components' ; import { space } from 'design/system' ; import { Close as CloseIcon } from 'design/Icon' ; export default function ButtonClose ( props ) { return ( < StyledCloseButton title = "Close" { ... props } > < CloseIcon /> < /StyledCloseButton>); } const StyledCloseButton = styled . button `
  background: #0000;
  border-radius: 2px;
  border: none;
  color: #fff;
  cursor: pointer;
  height: 20px;
  opacity: 0.56;
  outline: none;
  padding: 0;
  position: absolute;
  right: 8px;
  top: 8px;
  transition: all 0.3s;
  width: 20px;
  &:hover {
    opacity: 1;
  }

  &:hover {
    background: ${ props => props . theme . colors . error };
  }
  font-size: ${ props => props . theme . fontSizes [ 4 ] }px;

  ${ space }
` ;