--- a/browser/extensions/pocket/skin/shared/pocket.css
+++ b/browser/extensions/pocket/skin/shared/pocket.css
@@ -40,17 +40,17 @@ panelmultiview[mainViewId=PanelUI-pocket
   from {
     transform: scaleX(-1) translateX(0);
   }
   to {
     transform: scaleX(-1) translateX(-240px);
   }
 }
 
-#pocket-button-box > #pocket-animatable-box,
+#pocket-button-box[animate="true"] > #pocket-animatable-box,
 #pocket-button > .toolbarbutton-animatable-box {
   position: absolute;
   overflow: hidden;
   top: calc(50% - 8px); /* 8px is half the height of the sprite */
   /* Since .toolbarbutton-icon uses a different width than the animatable box,
      we need to set a padding relative to the difference in widths. */
   margin-inline-start: calc((16px + 2 * var(--toolbarbutton-inner-padding) - 20px) / 2);
   /* Set the min- and max- width and height of the box equal to that
@@ -58,23 +58,23 @@ panelmultiview[mainViewId=PanelUI-pocket
      the `width` and `height` CSS properties causes an assertion for
      `inline-size less than zero: 'aContainingBlockISize >= 0'` (bug 1379332). */
   min-width: 20px;
   max-width: 20px;
   min-height: 16px;
   max-height: 16px;
 }
 
-#pocket-button-box > #pocket-animatable-box {
+#pocket-button-box[animate="true"] > #pocket-animatable-box {
   /* .urlbar-icon has width 28px. Each frame is 20px wide. Set margin-inline-start
      to be half the difference, 4px. */
   margin-inline-start: 4px;
 }
 
-#pocket-button-box > #pocket-animatable-box > #pocket-animatable-image,
+#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
 #pocket-button > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
   height: var(--toolbarbutton-height); /* Height must be equal to height of toolbarbutton padding-box */
 }
 
 #pocket-button-box[animate="true"],
 #pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) {
   position: relative;
 }