/* Custom permalink icon - hide default and show custom SVG */
a.headerlink {
  text-decoration: none;
  margin-left: 0.2em;
  opacity: 0;
  transition: opacity 0.2s;
  font-size: 0;  /* Hide the ¶ text content */
}

h1:hover .headerlink,
h2:hover .headerlink,
h3:hover .headerlink,
h4:hover .headerlink,
h5:hover .headerlink,
h6:hover .headerlink {
  opacity: 1;
}

/* Insert the custom Pageview SVG icon */
a.headerlink::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.2em;  /* Negative value moves icon up */
  font-size: 1rem;  /* Reset font size for the icon */

  /* Use the SVG as a mask so it inherits the text color */
  -webkit-mask-image: url("../images/permalink/pageview_24dp_E3E3E3.svg");
  mask-image: url("../images/permalink/pageview_24dp_E3E3E3.svg");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;

  background-color: currentColor;
}