pop1-buttons

HTML

<div class="div-arrow-def">
<svg class="svg-arrow-def">

</svg>
</div>
<div class="pop1-top-btns">
  <svg class="pop1-top-btns-svg">
     <clipPath id="leftBtn">
       <rect x="-11px" y="-11px" width="21px" height="22px"></rect>
     </clipPath>
     <clipPath id="midBtn">
       <rect x="-10px" y="-11px" width="20px" height="22px"></rect>
      </clipPath>
      <clipPath id="rightBtn">
        <rect x="-10px" y="-11px" width="21px" height="22px"></rect>
      </clipPath>
      <g class="pop1-front" clip-path=url(#leftBtn)>
        <title>Bring to front</title>
        <rect class="pop1-front-btn" x="-10px" y="-10px" rx="7px" ry="7px" width="20px" height="20px"></rect>
        <rect class="pop1-front-back-unfilled" x="-5px" y="-5px" width="7px" height="7px"></rect>
        <rect class="pop1-front-back-filled" x="-2px" y="-2px" width="7px" height="7px"></rect>
      </g>
      <g class="pop1-back" clip-path=url(#midBtn)>
        <title>Send to back</title>
        <rect class="pop1-back-btn" x="-10px" y="-10px" rx="7px" ry="7px" width="20px" height="20px"></rect>
        <rect class="pop1-front-back-filled" x="-5px" y="-5px" width="7px" height="7px"></rect>
        <rect class="pop1-front-back-unfilled" x="-3px" y="-3px" width="8px" height="8px"></rect>
      </g>
      <g class="pop1-full" clip-path=url(#rightBtn)>
        <title>Full</title>
        <rect class="pop1-full-btn" x="-10px" y="-10px" rx="7px" ry="7px" width="20px" height="20px"></rect>
        <rect class="pop1-full-rect" x="-5px" y="-4px" width="10px" height="8px"></rect>
      </g>
      <g class="pop1-close make-not-displayed" clip-path=url(#rightBtn)>
        <title>Short</title>
        <rect class="pop1-close-btn" x="-10px" y="-10px" rx="7px" ry="7px" width="20px" height="20px"></rect>
        <line class="pop1-close-x1" x1="-10px" y1="0px" x2="10px" y2="0px"></line>
        <line class="pop1-close-x2" x1="-10px" y1="0px" x2="10px" y2="0px"></line>
      </g>
   </svg>
</div>

CSS

div.div-arrow-def {
    position: absolute;
    left: 200px;
    top: 100px;
    border: 1px solid black;
}
svg.svg-arrow-def {
    position: absolute;
    left: 0px;
    top: 0px;
    -webkit-transform: translate(-13px,-13px);
    height: 24px;
    width: 24px;
    border: 1px solid green;
}

path#biblio-arrow-def {
    fill: red;
}

div.pop1-top-btns {
  position: absolute;
  top: 100px;
  left: 100px;
  width: 62px;
  height: 22px;
  margin-top: -12px;
  margin-left: -10px;
  visibility: hidden;
    border: 1px solid white;
        pointer-events: all;
}

svg.pop1-top-btns-svg {
    position: absolute;
    visibility: visible;
    pointer-events: all;
}
svg.pop1-top-btns-svg:hover {
    visibility: visible;
}
div.pop1-top-btns:hover {
    border: 1px solid red;
  visibility: visible;
}

g.pop1-front {
  -webkit-transform: translate(11px, 11px);
  transform: translate(11px, 11px);
}

g.pop1-back {
  -webkit-transform: translate(31px, 11px);
  transform: translate(31px, 11px);
}

g.pop1-full, g.pop1-close {
  -webkit-transform: translate(51px, 11px);
  transform: translate(51px, 11px);
}
g.make-not-displayed {
    display: none;
}
rect.pop1-full-btn, rect.pop1-close-btn, rect.pop1-front-btn, rect.pop1-back-btn {
  stroke: rgb(100, 125, 153);
  stroke-width: 2px;
  fill: rgb(218, 225, 253);
  pointer-events: all;                    /* catches the hover and click events; but both events are handled by the parent svg element */
}

rect.pop1-full-rect {
  fill: transparent;
  stroke: rgb(100, 125, 153);
  stroke-width: 2px;
  pointer-events: none;                   /* so click goes to circle element underneath */
}

line.pop1-close-x1 {
  stroke: rgb(100, 125, 153);
  stroke-width: 2px;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  pointer-events: none;                   /* so click goes to circle element underneath */
}

line.pop1-close-x2 {
  stroke: rgb(100, 125, 153);
  stroke-width: 2px;
  -webkit-transform: rotate(45deg);
  transform:...