const rulersTemplate = document.createElement('template');

rulersTemplate.innerHTML = `
  <style>
 
  /* Rulers
——————————————————————————————————————*/

#ruler_corner {
  background: var(--ruler-color);
  grid-area: corner;
  width: 15px;
  height: 15px;
  z-index: 1;
  overflow: hidden;
}

#ruler_x {
  background: var(--ruler-color);
  grid-area: rulerX;
  height: 15px;
  border-bottom: 1px solid;
  border-left: 1px solid #777;
  z-index: 1;
  overflow: hidden;
}

#ruler_y {
  background: var(--ruler-color);
  grid-area: rulerY;
  width: 15px;
  border-right: 1px solid;
  border-top: 1px solid #777;
  z-index: 1;
  overflow: hidden;
}

#ruler_x canvas {
  float: left;
}
  </style>
    <div id="ruler_corner"></div>
    <div id="ruler_x">
      <div>
        <canvas height="15"></canvas>
      </div>
    </div>
    <div id="ruler_y">
      <div>
        <canvas width="15"></canvas>
      </div>
    </div>
`;

export default rulersTemplate;