import styled from 'styled-components';

const css = styled.div as any;

export default css`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   position: relative;
   display: block;

   &:before {
      display: block;
      content: '';
      width: 2px;
      height: ${(props) => props.size}px;
      background: #888;
      transform: rotate(45deg);
      position: absolute;
      left: ${(props) => props.size / 2}px;
      background: ${(props) => props.color || '#888'};
   }

   &:after {
      display: block;
      content: '';
      width: 2px;
      height: ${(props) => props.size}px;
      background: #888;
      transform: rotate(-45deg);
      position: absolute;
      left: ${(props) => props.size / 2}px;
      background: ${(props) => props.color || '#888'};
   }
`;
