text: import {css} from 'styled-components'
  import {easyColor} from "./utils";
  
  export function hexagonShape(p){
    const factor = 1.732013704;
    const size = p.size || p.height;
    const color = easyColor(p, p.bkgEmotion, 'primaryColor');
  
    if(p.hexagon){
      return css`
        position: relative;
        width: ${size}; 
        height: calc(${size} / ${factor});
        background-color: ${color};
        margin: calc(${size} / ${factor} / 2) 0;
  
        &:before,
        &:after {
          content: "";
          position: absolute;
          width: 0;
          border-left: calc(${size} / 2) solid transparent;
          border-right: calc(${size} / 2) solid transparent;
        }
  
        &:before {
          bottom: 100%;
          border-bottom: calc(${size} / ${factor} / 2) solid ${color};
        }
        
        &:after {
          top: 100%;
          width: 0;
          border-top: calc(${size} / ${factor} / 2) solid ${color};
        }
      `;
    }
  }
  