fix audio icon with picture in picture

chrome/icons/audio-muted.svg

@@ -1,3 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <style>
+        :root &gt; #overlayStroke:not(:target) {
+            display: none;
+        }
+    </style>
+    <path id="overlayStroke" style="fill:context-stroke;fill-opacity:context-stroke-opacity; stroke-width:0" d="M8.234 1.143a1.884 1.884 0 0 0-1.517.646 1 1 0 0 0-.008.01L4.855 4H3.486A2.507 2.507 0 0 0 .992 6.508l.016 3a1 1 0 0 0 0 .004A2.529 2.529 0 0 0 3.508 12a1 1 0 0 0 .006 0h1.252l1.947 2.232a1 1 0 0 0 .008.008c.511.572 1.328.78 2.05.52a1 1 0 0 0 .024-.01A1.897 1.897 0 0 0 10 13.016 1 1 0 0 0 10 13v-1.857c.47.084.954.024 1.31-.332l.69-.69.69.69a1.516 1.516 0 0 0 2.12.002v-.002h.002a1.516 1.516 0 0 0-.001-2.122v-.002L14.12 8l.69-.688v-.001a1.515 1.515 0 0 0 0-2.122 1.5 1.5 0 0 0-2.122 0L12 5.88l-.69-.69a1.471 1.471 0 0 0-1.119-.439c-.07.003-.121.07-.191.084V3c0-.835-.51-1.49-1.225-1.752a1 1 0 0 0-.005-.002 1.833 1.833 0 0 0-.536-.103zM7 6.11v3.887l-.422-.484a1 1 0 0 0-.002 0A1.502 1.502 0 0 0 5.446 9h-1.44l-.012-2h1.559A1.5 1.5 0 0 0 6.7 6.467L7 6.11z"/>
     <path style="fill:context-fill;fill-opacity:context-fill-opacity" d="M8.186 2.139a.882.882 0 0 0-.713.304L5.32 5H3.486c-.822 0-1.498.68-1.494 1.502l.016 3A1.514 1.514 0 0 0 3.514 11h1.705l2.248 2.574a.89.89 0 0 0 .965.244A.892.892 0 0 0 9 13V3c0-.378-.259-.7-.568-.813a.83.83 0 0 0-.246-.048zM8 3.37v9.297l-2.176-2.496A.5.5 0 0 0 5.447 10H3.514a.498.498 0 0 1-.506-.502l-.016-3A.487.487 0 0 1 3.486 6h2.067a.5.5 0 0 0 .383-.178L8 3.372zm2.227 2.379a.5.5 0 0 0-.33.146.5.5 0 0 0 0 .708L11.292 8 9.896 9.396a.5.5 0 0 0 0 .708.5.5 0 0 0 .708 0L12 8.707l1.396 1.397a.5.5 0 0 0 .708 0 .5.5 0 0 0 0-.708L12.707 8l1.397-1.396a.5.5 0 0 0 0-.708.5.5 0 0 0-.377-.146.5.5 0 0 0-.33.146L12 7.293l-1.396-1.397a.5.5 0 0 0-.377-.146z"/>
 </svg>

chrome/icons/audio.svg

@@ -1,3 +1,9 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <style>
+        :root &gt; #overlayStroke:not(:target) {
+            display: none;
+        }
+    </style>
+    <path id="overlayStroke" style="fill:context-stroke;fill-opacity:context-stroke-opacity; stroke-width:0" d="M8.234 1.143a1.884 1.884 0 0 0-1.525.656L4.855 4H3.486A2.507 2.507 0 0 0 .992 6.508l.016 3v.004A2.529 2.529 0 0 0 3.514 12h1.252l1.947 2.232.008.008a1.899 1.899 0 0 0 2.074.51A1.897 1.897 0 0 0 10 13v-1.682c.135.051.239.164.607.164.37 0 .47-.137.766-.359-.43.574-.465 1.383.045 1.914.565.59 1.53.61 2.12.045l.009-.008s.52-.52.93-1.373c.404-.842.773-2.077.773-3.703 0-1.625-.367-2.858-.773-3.701-.41-.851-.93-1.371-.93-1.371a1.596 1.596 0 0 0-1.06-.42c-.389.003-.81.185-1.069.455-.508.53-.475 1.334-.049 1.908-.273-.205-.447-.372-.834-.372-.32 0-.535.194-.535.194V3a1.836 1.836 0 0 0-1.766-1.857zm4.598 2.482.014.014c.002.002-.002.005 0 .007l-.014-.021zM7 6.111v3.887l-.422-.484h-.002A1.502 1.502 0 0 0 5.446 9h-1.44l-.012-2h1.559A1.5 1.5 0 0 0 6.7 6.467zm5.846 6.24c-.002.003.002.006 0 .008l-.014.014.014-.021z"/>
     <path style="fill:context-fill;fill-opacity:context-fill-opacity" d="M8.186 2.139a.882.882 0 0 0-.713.304L5.32 5H3.486c-.822 0-1.498.68-1.494 1.502l.016 3A1.514 1.514 0 0 0 3.514 11h1.705l2.248 2.574a.89.89 0 0 0 .965.244A.892.892 0 0 0 9 13V3c0-.378-.259-.7-.568-.813a.83.83 0 0 0-.246-.048zM8 3.37v9.297l-2.176-2.496A.5.5 0 0 0 5.447 10H3.514a.498.498 0 0 1-.506-.502l-.016-3A.487.487 0 0 1 3.486 6h2.067a.5.5 0 0 0 .383-.178L8 3.372zm4.467.129a.5.5 0 0 0-.328.154.5.5 0 0 0 .015.707s.238.219.52.805c.282.586.576 1.506.576 2.834s-.294 2.248-.576 2.834c-.282.586-.52.805-.52.805a.5.5 0 0 0-.015.707.5.5 0 0 0 .707.015s.387-.38.73-1.093c.343-.713.674-1.792.674-3.268 0-1.476-.33-2.555-.674-3.268-.343-.712-.73-1.093-.73-1.093a.5.5 0 0 0-.32-.139.5.5 0 0 0-.06 0zm-1.985 2a.5.5 0 0 0-.332.143.5.5 0 0 0-.007.707s.607.623.607 1.65-.607 1.65-.607 1.65a.5.5 0 0 0 .007.707.5.5 0 0 0 .707-.007s.893-.916.893-2.35c0-1.434-.893-2.35-.893-2.35a.5.5 0 0 0-.375-.15z"/>
 </svg>

chrome/icons/icons.css

@@ -347,13 +347,42 @@ richlistitem[originaltype="loginsFooter"] .ac-site-icon,
 	padding-left: 16px !important;
 }
 
-.tab-icon-pending[pinned], .tab-icon-image:not([src], [pinned], [crashed], [pictureinpicture])[selected], .tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), .tab-icon-image[busy], .tab-throbber:not([busy]), .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-icon-sound[pinned], .tab-sharing-icon-overlay, .tab-icon-overlay,
+.tab-icon-pending[pinned], .tab-icon-image:not([src], [pinned], [crashed], [pictureinpicture])[selected], .tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]), .tab-icon-image[busy], .tab-throbber:not([busy]), .tab-icon-sound:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]), .tab-icon-sound[pinned], .tab-sharing-icon-overlay,
-.tab-icon-overlay[soundplaying],
 .tab-icon-sound
 {
     list-style-image: url(audio.svg) !important;
 }
 
+.tab-icon-sound[muted]
+{
+    list-style-image: url(audio-muted.svg) !important;
+}
+
+.tab-icon-sound[pictureinpicture] {
+	list-style-image: url(picture-in-picture.svg) !important;
+	width: 16px !important;
+	height: 16px !important;
+}
+
+.tab-icon-overlay {
+	border-radius: 2px !important;
+	margin-inline: -10px -6px !important;
+}
+
+.tab-icon-overlay[soundplaying] {
+	list-style-image: url(audio.svg#overlayStroke) !important;
+	-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
+	fill: var(--toolbar-color) !important;
+	stroke: var(--toolbar-bgcolor) !important;
+}
+
+.tab-icon-overlay[muted] {
+	list-style-image: url(audio-muted.svg#overlayStroke) !important;
+	-moz-context-properties: fill, fill-opacity, stroke, stroke-opacity !important;
+	fill: var(--toolbar-color) !important;
+	stroke: var(--toolbar-bgcolor) !important;
+}
+
 #pageAction-panel-pinTab, #pageAction-urlbar-pinTab {
 	list-style-image: url(pin.svg) !important;
 }
@@ -362,12 +391,6 @@ richlistitem[originaltype="loginsFooter"] .ac-site-icon,
 	list-style-image: url(share.svg) !important;
 }
 
-.tab-icon-overlay[muted],
-.tab-icon-sound[muted]
-{
-    list-style-image: url(audio-muted.svg) !important;
-}
-
 .tab-icon-overlay[activemedia-blocked],
 .tab-icon-sound[activemedia-blocked]
 {

chrome/icons/picture-in-picture.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path style="fill:context-fill;fill-opacity:context-fill-opacity" d="M4 3c-1.099 0-2 .901-2 2v6c0 1.099.901 2 2 2h8c1.099 0 2-.901 2-2V5c0-1.099-.901-2-2-2H4zm0 1h8c.558 0 1 .442 1 1v6c0 .558-.442 1-1 1H4c-.558 0-1-.442-1-1V5c0-.558.442-1 1-1zm2.5 2a.5.5 0 0 0-.5.5v4a.5.5 0 0 0 .5.5h5a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 0-.5-.5h-5zM7 7h4v3h-.793L8.604 8.396a.5.5 0 0 0-.708 0L7 9.293V7zm2.988.5A.5.5 0 0 0 9.5 8a.5.5 0 0 0 .5.5.5.5 0 0 0 .5-.5.5.5 0 0 0-.5-.5.5.5 0 0 0-.012 0zM8.25 9.457l.543.543H7.707l.543-.543z"/>
+</svg>