import * as React from "react"
import styled from "styled-components"
const BOOK_THUMBNAIL_RATIO = 300 / 200 * 100 + "%"

export const CoverBaseElement: React.ComponentClass<React.StyleHTMLAttributes<{}>> = styled.div.attrs({className: "BookCoverImage"})`
  background-position: center center;
  background-size: cover;
  position: relative;
  width: 100%;
  z-index: 1;
  background-clip: padding-box;
  border-radius: 5px;

  &:before {
    display: block;
    content: ' ';
    padding-top: ${BOOK_THUMBNAIL_RATIO};
  }
  &:after {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    bottom: 0;
    content: ' ';
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2;
  }
  &.no-border {
    &:after {
      border: none;
      content: '';
    }
  }
`