Adding upstream version 124.0.1.upstream/124.0.1

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>

26 files changed, 1183 insertions, 0 deletions

diff --git a/toolkit/themes/shared/media/audio-muted.svg b/toolkit/themes/shared/media/audio-muted.svg
new file mode 100644
index 0000000000..bf26fc3877
--- /dev/null
+++ b/toolkit/themes/shared/media/audio-muted.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m11 4.149 0 4.181 1.775 1.775c.3-.641.475-1.35.475-2.105a4.981 4.981 0 0 0-1.818-3.851l-.432 0z"/>
+  <path d="M2.067 1.183a.626.626 0 0 0-.885.885L4.115 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14l0-4.116 3.317 3.317c-.273.232-.56.45-.873.636a.624.624 0 0 0-.218.856.621.621 0 0 0 .856.219 7.58 7.58 0 0 0 1.122-.823l.729.729a.626.626 0 0 0 .884-.886L2.067 1.183z"/>
+  <path d="M9 2c0-.926-1.152-1.352-1.755-.649L5.757 3.087 9 6.33 9 2z"/>
+  <path d="M11.341 2.169a6.767 6.767 0 0 1 3.409 5.864 6.732 6.732 0 0 1-.83 3.217l.912.912A7.992 7.992 0 0 0 16 8.033a8.018 8.018 0 0 0-4.04-6.95.625.625 0 0 0-.619 1.086z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/audio.svg b/toolkit/themes/shared/media/audio.svg
new file mode 100644
index 0000000000..0736786ba6
--- /dev/null
+++ b/toolkit/themes/shared/media/audio.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M7.245 1.35 4.117 5 2 5a2 2 0 0 0-2 2l0 2a2 2 0 0 0 2 2l2.117 0 3.128 3.65C7.848 15.353 9 14.927 9 14L9 2c0-.927-1.152-1.353-1.755-.65z"/>
+  <path d="M11.764 15a.623.623 0 0 1-.32-1.162 6.783 6.783 0 0 0 3.306-5.805 6.767 6.767 0 0 0-3.409-5.864.624.624 0 1 1 .619-1.085A8.015 8.015 0 0 1 16 8.033a8.038 8.038 0 0 1-3.918 6.879c-.1.06-.21.088-.318.088z"/>
+  <path d="M11.434 11.85A4.982 4.982 0 0 0 13.25 8a4.982 4.982 0 0 0-1.819-3.852l-.431 0 0 7.702.434 0z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/audioNoAudioButton.svg b/toolkit/themes/shared/media/audioNoAudioButton.svg
new file mode 100644
index 0000000000..7d5c60a09c
--- /dev/null
+++ b/toolkit/themes/shared/media/audioNoAudioButton.svg
@@ -0,0 +1,11 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M14.901,3.571l-4.412,3.422V1.919L6.286,5.46H4.869c-1.298,0-2.36,1.062-2.36,2.36v2.36
+           c0,1.062,0.708,1.888,1.652,2.242l-2.242,1.77l1.18,1.416L16.081,4.987L14.901,3.571z M10.489,16.081V11.36l-2.669,2.36
+           L10.489,16.081z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/castingButton-active.svg b/toolkit/themes/shared/media/castingButton-active.svg
new file mode 100644
index 0000000000..f57d30b2c1
--- /dev/null
+++ b/toolkit/themes/shared/media/castingButton-active.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M0 13.91v2.454h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.274v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zM14.727 4.91H3.273v1.334a10.664 10.664 0 0 1 6.848 6.848h4.606zM0 7.364V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9zm16.364-5.728H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637z"
+        fill-rule="evenodd"/>
+</svg>
diff --git a/toolkit/themes/shared/media/castingButton-ready.svg b/toolkit/themes/shared/media/castingButton-ready.svg
new file mode 100644
index 0000000000..7622e7349d
--- /dev/null
+++ b/toolkit/themes/shared/media/castingButton-ready.svg
@@ -0,0 +1,9 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M16.364 1.636H1.636C.736 1.636 0 2.373 0 3.273v2.454h1.636V3.273h14.728v11.454h-5.728v1.637h5.728c.9 0 1.636-.737 1.636-1.637V3.273c0-.9-.736-1.637-1.636-1.637zM0 13.91v2.455h2.455A2.451 2.451 0 0 0 0 13.909zm0-3.273v1.637a4.092 4.092 0 0 1 4.09 4.09h1.637A5.723 5.723 0 0 0 0 10.637zm0-3.272V9a7.364 7.364 0 0 1 7.364 7.364H9a9 9 0 0 0-9-9z"
+        fill-rule="evenodd" />
+</svg>
diff --git a/toolkit/themes/shared/media/closed-caption-settings-button.svg b/toolkit/themes/shared/media/closed-caption-settings-button.svg
new file mode 100644
index 0000000000..1ef12e7902
--- /dev/null
+++ b/toolkit/themes/shared/media/closed-caption-settings-button.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+  - License, v. 2.0. If a copy of the MPL was not distributed with this
+  - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="m13.15 2.25.6.6v7.3l-.6.6h-1.9c-.28 0-.5.22-.5.5v2.15l-3.04-2.43c-.18-.14-.4-.22-.62-.22H2.85l-.6-.6v-7.3l.6-.6h10.3ZM13 1H3c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h4l3.75 3H12v-3h1c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2ZM6.27 7.73H4.86a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62v-.01a.62.62 0 0 0-.62-.62Zm2.24 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H8.51a.62.62 0 0 1-.62-.62v-.01a.62.62 0 0 1 .62-.62Zm2.63-2.75H9.73a.62.62 0 0 0-.62.62v.01c0 .342.278.62.62.62h1.41a.62.62 0 0 0 .62-.62V5.6a.62.62 0 0 0-.62-.62Zm-6.28 0h2.63a.62.62 0 0 1 .62.62v.01a.62.62 0 0 1-.62.62H4.86a.62.62 0 0 1-.62-.62V5.6a.62.62 0 0 1 .62-.62Z" fill="context-fill" fill-opacity="context-fill-opacity"/>
+</svg>
diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg
new file mode 100644
index 0000000000..481c5c9cab
--- /dev/null
+++ b/toolkit/themes/shared/media/closedCaptionButton-cc-off.svg
@@ -0,0 +1,16 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill" fill-rule="evenodd"
+        d="M16.531,16.107H5.267l1.982-2H15c0.6,0,1-0.4,1-1V5.274
+           l1.946-1.964C17.963,3.399,18,3.483,18,3.576v11.031C18,15.407,17.331,16.107,16.531,16.107z M14.016,8.506h-1.218l1.005-1.014
+           C13.913,7.789,13.984,8.128,14.016,8.506z M11.786,12.361c-0.828,0-1.476-0.326-1.913-0.902l1.09-1.101
+           c0.136,0.323,0.374,0.541,0.796,0.541c0.514,0,0.695-0.44,0.756-1.014h1.535C13.908,11.43,13.071,12.361,11.786,12.361z
+           M1.496,16.106C0.697,16.104,0,15.406,0,14.607V3.576c0-0.8,0.7-1.5,1.5-1.5h12.846L16.299,0l1.316,1.283L2.615,17.13L1.496,16.106
+           z M3,4.107c-0.6,0-1,0.4-1,1v8c0,0.6,0.4,1,1,1h0.029l2.031-2.16c-0.757-0.503-1.191-1.457-1.191-2.744
+           c0-1.936,1.069-3.14,2.428-3.14c1.357,0,2.136,0.76,2.361,2.059l3.777-4.016H3z M8.298,8.506H7.355
+           c-0.047-0.623-0.49-1.23-0.99-1.23c-0.561,0-1.337,0.84-1.337,1.995c0,0.674,0.381,1.427,0.95,1.702L8.298,8.506z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg
new file mode 100644
index 0000000000..7f62144b93
--- /dev/null
+++ b/toolkit/themes/shared/media/closedCaptionButton-cc-on.svg
@@ -0,0 +1,17 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M16.531,1.984H1.5c-0.8,0-1.5,0.7-1.5,1.5v11.031c0,0.8,0.7,1.5,1.5,1.5h15.031
+           c0.8,0,1.469-0.7,1.469-1.5V3.484C18,2.684,17.331,1.984,16.531,1.984z
+           M16,13.016c0,0.6-0.4,1-1,1H3c-0.6,0-1-0.4-1-1v-8c0-0.6,0.4-1,1-1h12c0.6,0,1,0.4,1,1V13.016z
+           M6.426,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.818,0.357,0.866,0.98
+           h1.484C8.585,6.877,7.785,5.972,6.297,5.972c-1.359,0-2.428,1.205-2.428,3.14c0,1.944,0.974,3.157,2.583,3.157
+           c1.285,0,2.153-0.93,2.295-2.476H7.244C7.183,10.367,6.94,10.807,6.426,10.807z
+           M11.759,10.807c-0.811,0-0.96-0.789-0.96-1.628c0-1.155,0.338-1.745,0.899-1.745c0.5,0,0.756,0.357,0.803,0.98h1.515
+           c-0.129-1.537-0.898-2.443-2.385-2.443c-1.359,0-2.396,1.205-2.396,3.14c0,1.944,0.943,3.157,2.552,3.157
+           c1.285,0,2.122-0.93,2.264-2.476h-1.535C12.454,10.367,12.273,10.807,11.759,10.807z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/error.png b/toolkit/themes/shared/media/error.png
new file mode 100644
index 0000000000..51a73696c8
--- /dev/null
+++ b/toolkit/themes/shared/media/error.png
diff --git a/toolkit/themes/shared/media/fullscreenEnterButton.svg b/toolkit/themes/shared/media/fullscreenEnterButton.svg
new file mode 100644
index 0000000000..5ed0edb640
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenEnterButton.svg
@@ -0,0 +1,13 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M6.728,10.188l-3.235,3.094l0.017-2.267l-1.513-0.016l0,5l4.987-0.008l0.011-1.537l-2.281-0.022
+           l3.097-3.158L6.728,10.188z M14.453,11.004l-0.022,2.281l-3.158-3.097l-1.086,1.083l3.094,3.235l-2.267-0.017l-0.016,1.514l5,0
+           l-0.008-4.988L14.453,11.004z M11.015,2.01l-0.011,1.537l2.281,0.022l-3.097,3.158l1.083,1.086l3.235-3.094L14.49,6.986
+           l1.513,0.016v-5L11.015,2.01z M6.986,3.511l0.016-1.514l-5,0L2.01,6.985l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083
+           L4.718,3.494L6.986,3.511z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/fullscreenExitButton.svg b/toolkit/themes/shared/media/fullscreenExitButton.svg
new file mode 100644
index 0000000000..1a770da285
--- /dev/null
+++ b/toolkit/themes/shared/media/fullscreenExitButton.svg
@@ -0,0 +1,12 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg"
+     width="18px" height="18px" viewBox="0 0 18 18">
+  <path fill="context-fill"
+        d="M2.047,11.135l-0.011,1.537l2.281,0.022L1.22,15.851l1.083,1.086l3.235-3.094l-0.017,2.268l1.513,0.016
+           l0-5L2.047,11.135z M13.781,12.587l2.267,0.017l0.016-1.514l-5,0l0.008,4.988l1.537,0.011l0.022-2.281l3.158,3.097l1.086-1.083
+           L13.781,12.587z M16.058,5.578l-2.281-0.021l3.097-3.158l-1.083-1.086l-3.235,3.094l0.017-2.267L11.06,2.123v5l4.988-0.008
+           L16.058,5.578z M5.516,2.098L5.494,4.379L2.336,1.283L1.25,2.365L4.344,5.6L2.077,5.583L2.06,7.097l5,0L7.053,2.109L5.516,2.098z"/>
+</svg>
+
diff --git a/toolkit/themes/shared/media/imagedoc-darknoise.png b/toolkit/themes/shared/media/imagedoc-darknoise.png
new file mode 100644
index 0000000000..5c33e24d4c
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-darknoise.png
diff --git a/toolkit/themes/shared/media/imagedoc-lightnoise.png b/toolkit/themes/shared/media/imagedoc-lightnoise.png
new file mode 100644
index 0000000000..1fe5b3a586
--- /dev/null
+++ b/toolkit/themes/shared/media/imagedoc-lightnoise.png
diff --git a/toolkit/themes/shared/media/pause-fill.svg b/toolkit/themes/shared/media/pause-fill.svg
new file mode 100644
index 0000000000..8dc2dea140
--- /dev/null
+++ b/toolkit/themes/shared/media/pause-fill.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m4.5 14-1 0A1.5 1.5 0 0 1 2 12.5l0-9A1.5 1.5 0 0 1 3.5 2l1 0A1.5 1.5 0 0 1 6 3.5l0 9A1.5 1.5 0 0 1 4.5 14z"/>
+  <path d="m11.5 14-1 0A1.5 1.5 0 0 1 9 12.5l0-9A1.5 1.5 0 0 1 10.5 2l1 0A1.5 1.5 0 0 1 13 3.5l0 9a1.5 1.5 0 0 1-1.5 1.5z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-closed.svg b/toolkit/themes/shared/media/picture-in-picture-closed.svg
new file mode 100644
index 0000000000..efa4028c00
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-closed.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="M8.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/>
+  <path d="m11.286 12.17-.75.75a.314.314 0 0 1-.536-.223l0-2.509.189-.188 2.509 0c.28 0 .42.338.222.536l-.75.75 2.652 2.652a.618.618 0 0 1 .11.718.496.496 0 0 1-.276.276.618.618 0 0 1-.718-.11l-2.652-2.652z"/>
+  <path d="M8 5 4 5a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg
new file mode 100644
index 0000000000..3f7908a578
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-enter-fullscreen-button.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->

+<svg width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path d="M20.7 7h-3.993a.5.5 0 0 0-.354.854l1.454 1.454-7.5 7.5-1.454-1.454a.5.5 0 0 0-.853.353V19.7l.3.3h3.993a.5.5 0 0 0 .354-.854l-1.454-1.454 7.5-7.5 1.454 1.454a.5.5 0 0 0 .853-.353V7.3l-.3-.3Z"/>

+</svg>

diff --git a/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg
new file mode 100644
index 0000000000..2d95224454
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-exit-fullscreen-button.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public

+   - License, v. 2.0. If a copy of the MPL was not distributed with this

+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->

+<svg width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">

+  <path fill-rule="evenodd" clip-rule="evenodd" d="M21.374 6a.626.626 0 0 1 .444 1.067l-3.625 3.625 1.454 1.454a.5.5 0 0 1-.354.854H15.3l-.3-.3V8.707a.5.5 0 0 1 .853-.353l1.173 1.173.28.281 3.626-3.625A.626.626 0 0 1 21.374 6ZM9.43 14.084A.5.5 0 0 1 9.707 14H13.7l.3.3v3.993a.5.5 0 0 1-.854.353l-1.173-1.173-.281-.28-3.625 3.624a.63.63 0 0 1-.885.001.628.628 0 0 1 0-.885l3.625-3.625-1.454-1.454a.5.5 0 0 1 .076-.77Z"/>

+</svg>

diff --git a/toolkit/themes/shared/media/picture-in-picture-open.svg b/toolkit/themes/shared/media/picture-in-picture-open.svg
new file mode 100644
index 0000000000..afc8910a2c
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-open.svg
@@ -0,0 +1,8 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m15 10-4 0a1 1 0 0 0-1 1l0 3a1 1 0 0 0 1 1l4 0a1 1 0 0 0 1-1l0-3a1 1 0 0 0-1-1z"/>
+  <path d="M8.125 15a.625.625 0 0 0 0-1.25l-6.275 0-.6-.6 0-9.3.6-.6 10.3 0 .6.6 0 4.275a.625.625 0 0 0 1.25 0L14 4a2 2 0 0 0-2-2L2 2a2 2 0 0 0-2 2l0 9a2 2 0 0 0 2 2l6.125 0z"/>
+  <path d="m6.714 7.83.75-.75A.314.314 0 0 1 8 7.303l0 2.509-.189.188-2.509 0a.314.314 0 0 1-.222-.536l.75-.75-2.652-2.652a.618.618 0 0 1-.11-.718.496.496 0 0 1 .276-.276.618.618 0 0 1 .718.11L6.714 7.83z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg
new file mode 100644
index 0000000000..07428daa52
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-seekBackward-button.svg
@@ -0,0 +1,7 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->
+<svg width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+  <path d="M9.196 19.097A7.455 7.455 0 0 1 7 13.793a.625.625 0 1 1 1.25 0c0 1.669.65 3.239 1.831 4.419a6.207 6.207 0 0 0 4.419 1.83 6.257 6.257 0 0 0 6.25-6.25 6.257 6.257 0 0 0-6.25-6.25 6.211 6.211 0 0 0-2.978.773l1.125 1.125a.5.5 0 0 1-.354.853h-3.52L8.5 10.02V6.5a.5.5 0 0 1 .854-.353l1.251 1.25A7.451 7.451 0 0 1 14.5 6.294c4.136 0 7.5 3.364 7.5 7.5 0 4.136-3.364 7.5-7.5 7.5a7.456 7.456 0 0 1-5.304-2.196v-.001Z"/>
+  <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg
new file mode 100644
index 0000000000..0968164dd4
--- /dev/null
+++ b/toolkit/themes/shared/media/picture-in-picture-seekForward-button.svg
@@ -0,0 +1,14 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/.-->
+<svg width="28" height="28" viewBox="0 0 28 28" fill="context-fill" xmlns="http://www.w3.org/2000/svg">
+  <g clip-path="url(#a)">
+    <path d="M19.804 19.097A7.455 7.455 0 0 0 22 13.793a.624.624 0 1 0-1.25 0c0 1.669-.65 3.239-1.831 4.419a6.206 6.206 0 0 1-4.419 1.83 6.257 6.257 0 0 1-6.25-6.25 6.257 6.257 0 0 1 6.25-6.25c1.051 0 2.066.276 2.978.773L16.353 9.44a.5.5 0 0 0 .354.853h3.52l.273-.273V6.5a.5.5 0 0 0-.854-.353l-1.251 1.25A7.451 7.451 0 0 0 14.5 6.294C10.364 6.293 7 9.657 7 13.793c0 4.136 3.364 7.5 7.5 7.5 2.003 0 3.887-.78 5.304-2.196Z"/>
+    <path d="M14.518 17.08c1.296 0 2.177-.844 2.174-2.02.003-1.114-.776-1.915-1.824-1.915-.51 0-.952.213-1.156.5h-.034l.15-1.457h2.543V11.18h-3.557l-.276 3.069 1.094.196c.18-.241.526-.392.87-.392.585.003 1.005.426 1.005 1.037 0 .605-.412 1.023-.989 1.023-.488 0-.883-.307-.91-.76h-1.195c.023 1.007.9 1.725 2.105 1.725Z"/>
+  </g>
+  <defs>
+    <clipPath id="a">
+      <path transform="translate(6 6)" d="M0 0h16v16H0z"/>
+    </clipPath>
+  </defs>
+</svg>
diff --git a/toolkit/themes/shared/media/pipToggle.css b/toolkit/themes/shared/media/pipToggle.css
new file mode 100644
index 0000000000..2a2ddeac58
--- /dev/null
+++ b/toolkit/themes/shared/media/pipToggle.css
@@ -0,0 +1,393 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+/* This CSS file is for the Picture-in-Picture toggle.
+ *
+ * The "experiment" class is used to enable styling for the VARIANT version
+ * of the toggle for upcoming PiP Nimbus experiments.
+ * @see Bug 1811314.
+ *
+ * To see each section of style changes, search "PIP STYLING" in this file.
+ */
+
+/* SHARED PIP STYLING */
+
+.controlsOverlay[hidetoggle="true"].hovering > .pip-wrapper:not(.hovering) {
+  /* If this isn't !important, it will fail to override the other opacity
+   * rules, which are currently defined below this point in this file. */
+  opacity: 0 !important;
+}
+
+.pip-wrapper {
+  position: absolute;
+  cursor: pointer;
+  -moz-appearance: none;
+  background: none;
+  color: inherit;
+  border: none;
+  text-align: unset;
+  top: calc(70% - 40px);
+  opacity: 0;
+  padding-inline: 0;
+  transition: opacity 200ms;
+  --pip-icon-size: 24px;
+  --pip-icon-width-with-margins: calc(2 * var(--pip-toggle-margin) + var(--pip-icon-size));
+  --pip-highlight-style: solid rgba(0, 254, 255, 1);
+  --pip-highlight-width: 2px;
+  --pip-toggle-distanceFromVideoEdge: 18px;
+  --pip-toggle-focus-outline-offset: 1px;
+  --pip-toggle-margin: 8px;
+  --pip-border-radius-toggle: 4px;
+  --pip-box-shadow-default: 0 0 4px rgba(255, 255, 255, 0.9);
+  --pip-box-shadow-hover: 0 0 10px rgba(255, 255, 255, 0.7);
+  --pip-expanded-height: 40px;
+  --pip-expanded-min-width: 200px;
+  --pip-expanded-max-width: max-content;
+}
+
+/* Adjust sizing of the regular toggle wrapper to correctly show the
+ * focus outline when navigating via keyboard. */
+.pip-wrapper[has-used],
+.pip-wrapper[small-video] {
+  height: var(--pip-icon-width-with-margins);
+  width: var(--pip-icon-width-with-margins);
+  border-radius: var(--pip-border-radius-toggle);
+  margin-right: calc(var(--pip-icon-width-with-margins) * -1);
+}
+
+.pip-wrapper[policy="hidden"] {
+  display: none;
+}
+
+.pip-wrapper[policy="top"] {
+  top: 0%;
+  translate: var(--pip-toggle-translate-x);
+}
+
+.pip-wrapper[policy="one-quarter"] {
+  top: 25%;
+}
+
+.pip-wrapper[policy="middle"] {
+  top: 50%;
+}
+
+.pip-wrapper[policy="three-quarters"] {
+  top: 75%;
+}
+
+.pip-wrapper[policy="bottom"] {
+  top: 100%;
+  translate: var(--pip-toggle-translate-x) -100%;
+}
+
+.pip-wrapper[medium-video] > .pip-expanded > .pip-icon-label > .pip-label {
+  font-size: 13px;
+}
+
+.pip-wrapper[medium-video] > .pip-expanded {
+  font-size: 11px;
+}
+
+.pip-wrapper[position="right"] {
+  /* move from the right by total width of pip toggle so that it is at least visible in the video element */
+  right: calc(var(--pip-icon-width-with-margins) + var(--pip-toggle-distanceFromVideoEdge));
+}
+
+/* Re-position the first-time toggle such that it will always be the same distance away from the right edge
+ * of the video, even if the label and/or message string(s) are long. */
+.pip-wrapper[position="right"] > .pip-expanded {
+  translate: calc(-100% + var(--pip-icon-width-with-margins));
+  transform-origin: right;
+}
+
+.pip-wrapper[position="left"] {
+  left: var(--pip-toggle-distanceFromVideoEdge);
+}
+
+.pip-expanded,
+.pip-small,
+.pip-icon,
+.pip-explainer {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.pip-wrapper > .pip-expanded {
+  display: flex;
+  opacity: 0;
+  align-items: center;
+  scale: 0.33 1;
+  font-size: 14px;
+}
+
+.pip-wrapper:not([small-video], [has-used]) > .pip-small {
+  opacity: 0;
+  transition: opacity 200ms;
+}
+
+.pip-wrapper:not([small-video], [has-used]) > .pip-expanded {
+  opacity: 1;
+  scale: 1;
+  pointer-events: none;
+}
+
+.pip-wrapper:not([small-video], [has-used]).hovering > .pip-expanded {
+  pointer-events: auto;
+}
+
+.pip-icon {
+  top: 8px;
+  left: 8px;
+  pointer-events: none;
+  background-image: url("chrome://global/skin/media/picture-in-picture-open.svg");
+  background-position: center, center;
+  background-repeat: no-repeat;
+  background-size: var(--pip-icon-size) var(--pip-icon-size);
+  -moz-context-properties: fill;
+  fill: currentColor;
+  height: var(--pip-icon-size);
+  width: var(--pip-icon-size);
+}
+
+.videocontrols[localedir="rtl"] .pip-icon {
+  transform: scaleX(-1);
+}
+
+.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-left: var(--pip-icon-width-with-margins);
+  margin-right: var(--pip-toggle-margin);
+}
+
+.pip-small {
+  width: 40px;
+  height: 40px;
+}
+
+.pip-wrapper[position="left"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  display: none;
+}
+
+.pip-wrapper:is([small-video], [has-used]) > .pip-expanded,
+.pip-wrapper[position="right"]:not([small-video], [has-used]) > .pip-icon {
+  display: none;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  position: relative;
+  top: 0;
+  left: 0;
+  display: inline-block;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label {
+  display: flex;
+  flex-direction: row;
+  align-content: center;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon,
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-block: auto;
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-icon {
+  margin-inline: var(--pip-toggle-margin);
+}
+
+.pip-wrapper[position="right"] > .pip-expanded > .pip-icon-label > .pip-label {
+  margin-right: var(--pip-toggle-margin);
+}
+
+@media (prefers-reduced-motion) {
+  .pip-wrapper,
+  .pip-expanded,
+  .pip-small,
+  .pip-explainer {
+    /* Transition changes in other rules may override this one if reduced motion is preferred.
+     * Make sure this one always takes priority. */
+    transition: none !important;
+  }
+}
+
+
+/* NO EXPERIMENT - PIP STYLING */
+
+.controlsOverlay:not(.experiment).hovering > .pip-wrapper:not(:focus-visible) {
+  opacity: 0.8;
+}
+
+.controlsOverlay:not(.experiment).hovering > .pip-wrapper.hovering {
+  opacity: 1;
+}
+
+/* If the PiP toggle is keyboard focused, always show it at 100% opacity */
+.pip-wrapper:not([policy="hidden"], .experiment):focus-visible {
+  opacity: 1;
+}
+
+/* If showing the expanded PiP toggle, don't outline the
+ * parent wrapper element - the expanded toggle handles its
+ * own outline. This also affects the regular toggle for small-videos. */
+.pip-wrapper:not([policy="hidden"], [has-used], .experiment):focus-visible {
+  outline: none;
+}
+
+/* Override outline set by ua.css for the regular toggle. */
+.pip-wrapper[has-used]:not([policy="hidden"], .experiment):focus-visible {
+  outline: var(--control-focus-outline);
+}
+
+.pip-wrapper:not(.experiment) > .pip-small {
+  background-color: rgba(12, 12, 13, 0.65);
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  border-radius: var(--pip-border-radius-toggle);
+}
+
+.pip-wrapper:not(.experiment) > .pip-expanded,
+.pip-wrapper:not(.experiment) > .pip-small {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-sizing: border-box;
+}
+
+/* If first-time toggle is visible and then switched to the regular toggle for smaller videos,
+ * maintain the border shown on the first-time toggle. */
+.pip-wrapper:not([has-used], .experiment) > .pip-small {
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+}
+
+.pip-wrapper:not(.experiment) > .pip-expanded {
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  transition: opacity 250ms, scale 200ms;
+  height: var(--pip-expanded-height);
+  background-color: rgba(12, 12, 13, 0.9);
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  width: var(--pip-expanded-max-width);
+  min-width: var(--pip-expanded-min-width);
+  border-radius: 8px;
+}
+
+.pip-wrapper:not(.experiment).hovering > .pip-expanded {
+  box-shadow: none;
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  /* Remove bottom border but keep text centred with padding. */
+  border-bottom: none;
+  padding-bottom: var(--pip-highlight-width);
+}
+
+.pip-wrapper:not([small-video], [has-used], .experiment).hovering > .pip-expanded {
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+/* Toggle message only appears for CONTROL variant. */
+.pip-wrapper:not(.experiment) > .pip-expanded > .pip-explainer {
+  padding: 6px 16px 8px 8px;
+  translate: 0;
+  transition: opacity 250ms, translate 190ms;
+  transition-timing-function: cubic-bezier(.07, .95, 0, 1);
+  background: rgba(12, 12, 13, 0.65);
+  border-bottom-right-radius: 8px;
+  border-bottom-left-radius: 8px;
+  border: var(--pip-highlight-width) var(--pip-highlight-style);
+  border-top: 0;
+  box-shadow: 0 4px 4px rgba(12, 12, 13, 0.25);
+  opacity: 0;
+  margin-inline: calc(-1 * var(--pip-highlight-width));
+  width: calc(100% - 24px);
+  word-break: break-word;
+  pointer-events: none;
+  user-select: none;
+}
+
+.videocontrols[localedir="rtl"] .pip-wrapper:not(.experiment) > .pip-explainer {
+  text-align: right;
+  direction: rtl;
+}
+
+.pip-wrapper:not(.experiment).hovering > .pip-expanded > .pip-explainer {
+  pointer-events: auto;
+  opacity: 1;
+  translate: 0 calc(40px - var(--pip-highlight-width));
+}
+
+
+/* EXPERIMENT ONLY - PIP STYLING */
+
+/* Since we change the outline for the first-time PiP toggle VARIANT,
+ * override the focus outline in videocontrols.css as well so that
+ * there is design consistency. */
+.controlsContainer.experiment {
+  --control-focus-outline: 2px solid #0060DF;
+}
+
+.pip-wrapper.experiment > .pip-expanded > .pip-icon-label > .pip-label {
+  font-size: min(16px, 1.4em);
+}
+
+/* Only the background will be set at 70% opacity. The icons and labels will remain at 100%. */
+.controlsOverlay.experiment.hovering > .pip-wrapper {
+  opacity: 1;
+}
+
+/* If the PiP toggle is keyboard focused, always show it and override outline set by ua.css.
+ * Opacity only affects the toggle icon and label, not the background, which is handled separately. */
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible {
+  opacity: 1;
+  /* Wrapper size won't always match pip-small or pip-expanded, so don't apply outline on wrapper. */
+  outline: none;
+}
+
+/* For the regular PiP toggle, take into consideration small videos and has-used=true. */
+.pip-wrapper.experiment:is([has-used], [small-video]):not([policy="hidden"]):focus-visible > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], [has-used]):focus-visible > .pip-expanded {
+  outline: var(--control-focus-outline);
+  outline-offset: var(--pip-toggle-focus-outline-offset);
+}
+
+.pip-wrapper.experiment > .pip-expanded > .pip-explainer {
+  display: none;
+}
+
+.pip-wrapper.experiment > .pip-small {
+  border-radius: var(--pip-border-radius-toggle);
+  transition: background-color 200ms;
+}
+
+.pip-wrapper.experiment > .pip-expanded {
+  transition: opacity 250ms, scale 200ms, translate 190ms, background-color 200ms;
+  height: var(--pip-expanded-height);
+  width: var(--pip-expanded-max-width);
+  min-width: var(--pip-expanded-min-width);
+  border-radius: var(--pip-border-radius-toggle);
+}
+
+.pip-wrapper.experiment > .pip-small,
+.pip-wrapper.experiment > .pip-expanded {
+  background-color: rgba(0, 0, 0, 0.7);
+  box-sizing: border-box;
+}
+
+.pip-wrapper.experiment.hovering > .pip-small,
+.pip-wrapper.experiment.hovering > .pip-expanded {
+  background-color: rgba(0, 0, 0, 1);
+}
+
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible) > .pip-expanded {
+  box-shadow: var(--pip-box-shadow-default);
+}
+
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"], :focus-visible).hovering > .pip-expanded {
+  box-shadow: var(--pip-box-shadow-hover);
+}
+
+/* Remove white box shadow if there is keyboard focus on the toggle and
+ * replace it with blue box shadow instead. */
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-small,
+.pip-wrapper.experiment:not([policy="hidden"]):focus-visible > .pip-expanded {
+  box-shadow: 0 0 10px rgba(0, 96, 223, 0.9);
+}
diff --git a/toolkit/themes/shared/media/play-fill.svg b/toolkit/themes/shared/media/play-fill.svg
new file mode 100644
index 0000000000..1558868ecb
--- /dev/null
+++ b/toolkit/themes/shared/media/play-fill.svg
@@ -0,0 +1,6 @@
+<!-- This Source Code Form is subject to the terms of the Mozilla Public
+   - License, v. 2.0. If a copy of the MPL was not distributed with this
+   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16" fill="context-fill" fill-opacity="context-fill-opacity">
+  <path d="m2.992 13.498 0-10.996a1.5 1.5 0 0 1 2.245-1.303l9.621 5.498a1.5 1.5 0 0 1 0 2.605L5.237 14.8a1.5 1.5 0 0 1-2.245-1.302z"/>
+</svg>
diff --git a/toolkit/themes/shared/media/stalled.png b/toolkit/themes/shared/media/stalled.png
new file mode 100644
index 0000000000..525375889b
--- /dev/null
+++ b/toolkit/themes/shared/media/stalled.png
diff --git a/toolkit/themes/shared/media/textrecognition.css b/toolkit/themes/shared/media/textrecognition.css
new file mode 100644
index 0000000000..b10bc21329
--- /dev/null
+++ b/toolkit/themes/shared/media/textrecognition.css
@@ -0,0 +1,27 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.w3.org/1999/xhtml");
+
+.textrecognition {
+  position: absolute;
+  overflow: clip;
+
+  /* Prevent unwanted style inheritance. */
+  font: normal normal normal 100%/normal sans-serif;
+  text-align: left;
+  white-space: normal;
+}
+
+canvas {
+  position: absolute;
+  user-select: none;
+  inset: 0;
+}
+
+span {
+  position: absolute;
+  transform-origin: 0 0;
+  color: transparent;
+}
diff --git a/toolkit/themes/shared/media/throbber.png b/toolkit/themes/shared/media/throbber.png
new file mode 100644
index 0000000000..8e49fe5b2a
--- /dev/null
+++ b/toolkit/themes/shared/media/throbber.png
diff --git a/toolkit/themes/shared/media/videocontrols.css b/toolkit/themes/shared/media/videocontrols.css
new file mode 100644
index 0000000000..c50ccda9a3
--- /dev/null
+++ b/toolkit/themes/shared/media/videocontrols.css
@@ -0,0 +1,591 @@
+/* This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
+
+@namespace url("http://www.w3.org/1999/xhtml");
+
+.videocontrols {
+  writing-mode: horizontal-tb;
+  width: 100%;
+  height: 100%;
+  display: inline-block;
+  overflow: hidden;
+
+  direction: ltr;
+  /* Prevent selection from interacting weirdly with the page,
+   * see bug 1766093. Our text selection story with shadow dom should be
+   * better, see bug 1590379 */
+  user-select: none;
+  /* Prevent unwanted style inheritance. See bug 554717. */
+  text-align: left;
+  list-style-image: none !important;
+  font: normal normal normal 100%/normal sans-serif !important;
+  text-decoration: none !important;
+  white-space: normal !important;
+}
+
+.videocontrols[flipped="true"] {
+  transform: scaleX(-1);
+}
+
+.controlsContainer {
+  --clickToPlay-size: 48px;
+  --button-size: 30px;
+  --timer-size: 40px;
+  --timer-long-size: 60px;
+  --track-size: 5px;
+  --thumb-size: 13px;
+  --label-font-size: 13px;
+  --pip-toggle-padding: 5px;
+  --control-focus-outline: 2px solid #00DDFF;
+  --control-focus-outline-offset: -2px;
+  --pip-toggle-icon-width-height: 16px;
+  --pip-toggle-translate-x: calc(100% - var(--pip-toggle-icon-width-height) - 2 * var(--pip-toggle-padding));
+
+  color: #fff;
+}
+.controlsContainer.touch {
+  --clickToPlay-size: 64px;
+  --button-size: 40px;
+  --timer-size: 52px;
+  --timer-long-size: 78px;
+  --track-size: 7px;
+  --thumb-size: 16px;
+  --label-font-size: 16px;
+}
+
+/* Some CSS custom properties defined here are referenced by videocontrols.js */
+.controlBar {
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.js and search for |-width|. */
+  --clickToPlay-width: var(--clickToPlay-size);
+  --playButton-width: var(--button-size);
+  --scrubberStack-width: 64px;
+  --muteButton-width: var(--button-size);
+  --volumeStack-width: 48px;
+  --castingButton-width: var(--button-size);
+  --closedCaptionButton-width: var(--button-size);
+  --fullscreenButton-width: var(--button-size);
+  --positionDurationBox-width: var(--timer-size);
+  --durationSpan-width: var(--timer-size);
+  --positionDurationBox-width-long: var(--timer-long-size);
+  --durationSpan-width-long: var(--timer-long-size);
+}
+
+.touch .controlBar {
+  /* Do not delete: these variables are accessed by JavaScript directly.
+     see videocontrols.js and search for |-width|. */
+  --scrubberStack-width: 84px;
+  --volumeStack-width: 64px;
+}
+
+.controlsContainer [hidden],
+.controlBar[hidden] .progressBar,
+.controlBar[hidden] .bufferBar,
+.videocontrols[inDOMFullscreen] > .controlsContainer > .controlsOverlay > #pictureInPictureToggle {
+  display: none;
+}
+
+/* We hide the controlBar visually so it doesn't obscure the video. However,
+ * we still want to expose it to a11y so users who don't use a mouse can access
+ * it.
+ */
+.controlBar[hidden] {
+  display: flex;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.controlBar[size="hidden"] {
+  display: none;
+}
+
+.controlsSpacer[hideCursor] {
+  cursor: none;
+}
+
+.controlsContainer,
+.progressContainer {
+  position: relative;
+  height: 100%;
+}
+
+.stackItem {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.statusOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgb(80,80,80, .85);
+}
+
+.controlsOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  position: relative;
+}
+
+.controlsSpacerStack {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  justify-content: center;
+  align-items: center;
+}
+
+.controlBar {
+  display: flex;
+  box-sizing: border-box;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  height: 40px;
+  padding: 0 9px;
+  background-color: rgba(26,26,26,.8);
+}
+
+.touch .controlBar {
+  height: 52px;
+}
+
+.controlBar > .button {
+  /* Prevent #textTrackListContainer from blocking clicks on controls */
+  z-index: 1;
+  height: 100%;
+  min-width: var(--button-size);
+  min-height: var(--button-size);
+  padding: 6px;
+  border: 0;
+  margin: 0;
+  background-color: transparent;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-origin: content-box;
+  background-clip: content-box;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: inherit;
+  /* We don't suppress ::-moz-focus-inner, so that does for a focus indicator */
+  outline: none;
+}
+
+/* Keyboard focus styling for interactive control elements (includes control
+   bar, click to play and track list) */
+.controlBar > .button:focus-visible,
+.volumeControl:focus-visible,
+.scrubber:focus-visible,
+.clickToPlay:focus-visible,
+.textTrackList > .textTrackItem:focus-visible {
+  outline: var(--control-focus-outline);
+  outline-offset: var(--control-focus-outline-offset);
+}
+
+.touch .controlBar > .button {
+  background-size: 24px 24px;
+}
+
+.controlBar > .button:enabled:hover {
+  fill: #48a0f7;
+}
+
+.controlBar > .button:enabled:hover:active {
+  fill: #2d89e6;
+}
+
+.playButton {
+  background-image: url(chrome://global/skin/media/pause-fill.svg);
+}
+.playButton[paused] {
+  background-image: url(chrome://global/skin/media/play-fill.svg);
+}
+
+.muteButton {
+  background-image: url(chrome://global/skin/media/audio.svg);
+}
+.muteButton[muted] {
+  background-image: url(chrome://global/skin/media/audio-muted.svg);
+}
+.muteButton[noAudio] {
+  background-image: url(chrome://global/skin/media/audioNoAudioButton.svg);
+}
+.muteButton[noAudio] + .volumeStack {
+  display: none;
+}
+
+.castingButton {
+  background-image: url(chrome://global/skin/media/castingButton-ready.svg);
+}
+
+.castingButton[enabled] {
+  background-image: url(chrome://global/skin/media/castingButton-active.svg);
+}
+
+.closedCaptionButton {
+  background-image: url(chrome://global/skin/media/closedCaptionButton-cc-off.svg);
+}
+.closedCaptionButton[enabled] {
+  background-image: url(chrome://global/skin/media/closedCaptionButton-cc-on.svg);
+}
+
+.fullscreenButton {
+  background-image: url(chrome://global/skin/media/fullscreenEnterButton.svg);
+}
+.fullscreenButton[fullscreened] {
+  background-image: url(chrome://global/skin/media/fullscreenExitButton.svg);
+}
+
+.controlBarSpacer {
+  flex-grow: 1;
+}
+
+.volumeControl::-moz-range-thumb,
+.scrubber::-moz-range-thumb {
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  border: none;
+  border-radius: 50%;
+  /* this is a foreground element even though it is implemented as a background */
+  background-color: currentColor;
+  filter: drop-shadow(0px 0px 2px rgba(0,0,0,0.65));
+}
+
+.volumeControl,
+.scrubber {
+  outline: none;
+}
+
+.progressBackgroundBar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+.progressStack {
+  position: relative;
+  width: 100%;
+  height: var(--track-size);
+}
+
+.scrubberStack {
+  /* minus margin to get basis of required width */
+  min-width: calc(var(--scrubberStack-width) - 18px);
+  flex-basis: calc(var(--scrubberStack-width) - 18px);
+  flex-grow: 2;
+  flex-shrink: 0;
+  margin: 0 9px;
+}
+
+.volumeStack {
+  max-width: 60px;
+  min-width: var(--volumeStack-width);
+  flex-grow: 1;
+  flex-shrink: 0;
+  margin-right: 6px;
+  margin-left: 4px;
+}
+
+.bufferBar,
+.progressBar,
+.scrubber,
+.volumeControl {
+  bottom: 0;
+  color: inherit;
+  left: 0;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  border-radius: calc(var(--track-size) / 2);
+  margin: 0;
+  background: none;
+  outline: none;
+}
+
+.bufferBar {
+  background-color: rgba(0,0,0,0.7);
+}
+
+.bufferBar::-moz-progress-bar,
+.progressBar::-moz-progress-bar {
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: 0;
+  border-radius: calc(var(--track-size) / 2);
+  background: none;
+}
+
+.bufferBar::-moz-progress-bar {
+  background-color: rgba(255,255,255,0.3);
+  border-radius: calc(var(--track-size) / 2);
+}
+
+.progressBar::-moz-progress-bar {
+  background-color: #00b6f0;
+}
+
+.scrubber:hover::-moz-range-thumb,
+.volumeControl:hover::-moz-range-thumb {
+  background-color: #48a0f7;
+}
+
+.scrubber:active::-moz-range-thumb,
+.volumeControl:active::-moz-range-thumb {
+  background-color: #2d89e6;
+}
+
+.scrubber::-moz-range-track,
+.scrubber::-moz-range-progress {
+  background-color: transparent;
+}
+
+.volumeControl::-moz-range-progress,
+.volumeControl::-moz-range-track {
+  height: var(--track-size);
+  border-radius: calc(var(--track-size) / 2);
+}
+
+.volumeControl::-moz-range-progress {
+  /* this is a foreground element even though it is implemented as a background */
+  background-color: currentColor;
+}
+
+.volumeControl::-moz-range-track {
+  background-color: rgba(0,0,0,0.7);
+}
+
+@media (prefers-contrast) {
+  /* Show a border in high contrast mode since background-colors
+     are not shown. */
+  .scrubber::-moz-range-track,
+  .volumeControl::-moz-range-track {
+    border: 1px solid;
+  }
+
+  .scrubber::-moz-range-progress,
+  .volumeControl::-moz-range-progress {
+    border: 2px solid;
+  }
+}
+
+.textTrackListContainer {
+  position: absolute;
+  right: 5px;
+  bottom: 45px;
+  top: 5px;
+  max-width: 80%;
+  display: flex;
+  flex-direction: column;
+  justify-content: end;
+}
+
+.textTrackList {
+  flex: 0 1 auto;
+  border: 1px solid #000;
+  border-radius: 2.5px;
+  padding: 5px 0;
+  vertical-align: middle;
+  background-color: #000;
+  opacity: 0.7;
+  overflow-y: auto;
+}
+
+.touch .textTrackList {
+  bottom: 58px;
+}
+
+.textTrackList > .textTrackItem {
+  display: block;
+  width: 100%;
+  height: var(--button-size);
+  font-size: var(--label-font-size);
+  padding: 2px 10px;
+  border: none;
+  margin: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-align: left;
+  text-overflow: ellipsis;
+  background-color: transparent;
+  color: inherit;
+}
+
+.textTrackList > .textTrackItem:hover {
+  background-color: #444;
+}
+
+.textTrackList > .textTrackItem[aria-checked="true"] {
+  color: #48a0f7;
+}
+
+.positionLabel,
+.durationLabel {
+  display: none;
+}
+
+.positionDurationBox {
+  text-align: center;
+  padding-inline-start: 1px;
+  padding-inline-end: 9px;
+  white-space: nowrap;
+  font: message-box;
+  font-size: var(--label-font-size);
+  font-size-adjust: 0.55;
+  font-variant-numeric: tabular-nums;
+}
+
+@media (-moz-platform: macos) {
+  .positionDurationBox {
+    font-size-adjust: unset;
+    font-family: "Helvetica Neue", "Helvetica", sans-serif;
+  }
+}
+
+.duration {
+  display: inline-block;
+  white-space: pre;
+  color: #929292;
+}
+
+.statusIcon {
+  width: 36px;
+  height: 36px;
+  margin-bottom: 20px;
+}
+
+/* Not showing the throbber on mobile because of conflict with m.youtube.com (see bug 1289412) */
+.controlsContainer:not(.mobile) .statusIcon[type="throbber"] {
+  background: url(chrome://global/skin/media/throbber.png) no-repeat center;
+}
+
+.controlsContainer:not(.mobile) .statusIcon[type="throbber"][stalled] {
+  background: url(chrome://global/skin/media/stalled.png) no-repeat center;
+}
+
+.statusIcon[type="error"],
+.statusIcon[type="pictureInPicture"] {
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+.statusIcon[type="error"] {
+  min-width: 70px;
+  min-height: 60px;
+  background-image: url(chrome://global/skin/media/error.png);
+}
+
+.statusIcon[type="pictureInPicture"] {
+  min-width: 84px;
+  min-height: 84px;
+  background-image: url(chrome://global/skin/media/picture-in-picture-open.svg);
+  -moz-context-properties: fill;
+  fill: currentColor;
+}
+
+.videocontrols[localedir="rtl"] .statusIcon[type="pictureInPicture"] {
+  transform: scaleX(-1);
+}
+
+.pictureInPictureToggleLabel {
+  margin-inline-start: var(--pip-toggle-padding);
+}
+
+/* Overlay Play button */
+.clickToPlay {
+  appearance: none;
+  border: none;
+  min-width: var(--clickToPlay-size);
+  min-height: var(--clickToPlay-size);
+  border-radius: 50%;
+  background-image: url(chrome://global/skin/media/play-fill.svg);
+  background-repeat: no-repeat;
+  background-position: 54% 50%;
+  background-size: 40% 40%;
+  background-color: #1a1a1a;
+  -moz-context-properties: fill;
+  fill: currentColor;
+  color: inherit;
+  opacity: 0.8;
+  position: relative;
+  top: 20px;
+}
+
+.controlsSpacerStack:hover > .clickToPlay,
+.clickToPlay:hover {
+  opacity: 0.55;
+}
+
+.controlsSpacerStack:hover > .clickToPlay[fadeout] {
+  opacity: 0;
+}
+
+.controlBar[fullscreen-unavailable] .fullscreenButton {
+  display: none;
+}
+
+.statusOverlay[fadeout],
+.statusOverlay[error] + .controlsOverlay > .controlsSpacerStack {
+  opacity: 0;
+}
+
+.pictureInPictureOverlay {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  opacity: 1;
+  background-color: rgb(12, 12, 13);
+}
+
+/* Status description formatting */
+.statusLabel {
+  display: none;
+  padding: 0 10px;
+  text-align: center;
+  font: message-box;
+  font-size: 14px;
+}
+
+.videocontrols[localedir="rtl"] .statusLabel {
+  direction: rtl;
+}
+
+[status="errorAborted"]         > #errorAborted,
+[status="errorNetwork"]         > #errorNetwork,
+[status="errorDecode"]          > #errorDecode,
+[status="errorSrcNotSupported"] > #errorSrcNotSupported,
+[status="errorNoSource"]        > #errorNoSource,
+[status="errorGeneric"]         > #errorGeneric,
+[status="pictureInPicture"]     > #pictureInPicture {
+  display: inline;
+}
+
+@media (-moz-platform: windows) and (prefers-contrast) {
+  .controlsSpacer,
+  .clickToPlay {
+    background-color: transparent;
+  }
+}
+
+.a11y-only {
+  position: absolute;
+  left: -10000px;
+  width: 100px;
+  height: 100px;
+}
+
+:host::cue {
+  font-size: var(--cue-font-size);
+  writing-mode: var(--cue-writing-mode, inherit);
+}