#pageActionActivatedActionPanel[actionID="pocket"] > .panel-arrowcontainer > .panel-arrowcontent {
  padding-top: 0;
  padding-bottom: 0;
}

#pageActionActivatedActionPanel[actionID="pocket"] > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow {
  fill: #fbfbfb;
}

#pocket-button {
  list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
}

#pocket-button-box[animate="true"] > #pocket-button,
#pocket-button[open="true"][animationsenabled] > .toolbarbutton-icon {
  fill: transparent;
}

#pocket-button-box[open="true"] > #pocket-button,
#pocket-button-box[pocketed="true"] > #pocket-button {
  fill: #ef4056;
  fill-opacity: 1;
}

@keyframes pocket-animation {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-240px);
  }
}

@keyframes pocket-animation-rtl {
  from {
    transform: scaleX(-1) translateX(0);
  }
  to {
    transform: scaleX(-1) translateX(-240px);
  }
}

#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);
  width: 20px; /* Width of each frame within the SVG sprite */
  height: 16px; /* Height of each frame within the SVG sprite */
}

#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;
}

:root[uidensity=compact] #pocket-button-box[animate="true"] > #pocket-animatable-box {
  /* .urlbar-icon has width 24px in this case */
  margin-inline-start: 2px;
}

:root[uidensity=touch] #pocket-button-box[animate="true"] > #pocket-animatable-box {
  /* .urlbar-icon has width 30px in this case */
  margin-inline-start: 5px;
}

#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;
}

#pocket-button-box:not([animate="true"]):not(:hover) > #pocket-animatable-box {
  display: none;
}

/* Preload pocket-animation.svg and library-pocket-animation.svg to prevent
   a flicker at the start of either animation. The preloading of the library
   animation is triggered off of hovering the pocket button since the pocket
   button always animates before the library button. */
#pocket-button-box:not([animate="true"]):hover > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):not([open="true"]):hover > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  background-image: url("chrome://pocket-shared/skin/pocket-animation.svg"),
                    url("chrome://pocket-shared/skin/library-pocket-animation.svg");
  background-size: 0, 0;
}

#pocket-button-box[animate="true"] > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: pocket-animation;
  animation-timing-function: steps(12);
  animation-duration: 200ms;
  background-image: url("chrome://pocket-shared/skin/pocket-animation.svg");
  fill: #ef4056;
  -moz-context-properties: fill;
  width: 260px;
}

#pocket-button-box[animate="true"]:-moz-locale-dir(rtl) > #pocket-animatable-box > #pocket-animatable-image,
#pocket-button[open="true"][animationsenabled][cui-areatype="toolbar"]:not([overflowedItem="true"]):-moz-locale-dir(rtl) > .toolbarbutton-animatable-box > .toolbarbutton-animatable-image {
  animation-name: pocket-animation-rtl;
}

@keyframes library-pocket-animation {
  from {
    transform: translateX(0);
    fill: inherit;
  }
  25% {
    fill: inherit;
  }
  50% {
    fill: #ef4056;
  }
  to {
    transform: translateX(-1056px);
    fill: #ef4056;
  }
}

@keyframes library-pocket-animation-rtl {
  from {
    transform: translateX(1056px);
    fill: inherit;
  }
  25% {
    fill: inherit;
  }
  50% {
    fill: #ef4056;
  }
  to {
    transform: translateX(0);
    fill: #ef4056;
  }
}

/* We need to use an animation here instead of a transition
   to guarantee that the animation succeeds. With transitions
   if the starting value is already equal to the end value
   then no transition will occur and thus no transitionend event. */
@keyframes library-pocket-fade {
  from {
    fill: #ef4056;
  }
  to {
    fill: inherit;
  }
}

.toolbarbutton-animatable-box[animate="pocket"] > .toolbarbutton-animatable-image {
  background-image: url("chrome://pocket-shared/skin/library-pocket-animation.svg");
  width: 1078px;
  animation-name: library-pocket-animation;
  animation-duration: 800ms;
  animation-timing-function: steps(48);
}

.toolbarbutton-animatable-box[animate="pocket"]:-moz-locale-dir(rtl) > .toolbarbutton-animatable-image {
  animation-name: library-pocket-animation-rtl;
}

.toolbarbutton-animatable-box[animate="pocket"][fade] > .toolbarbutton-animatable-image {
  animation-name: library-pocket-fade;
  animation-duration: 2s;
  animation-timing-function: ease-out;
}

#pocket-button[cui-areatype="toolbar"][open] {
  fill: #ef4056;
}

@media not all and (min-resolution: 1.1dppx) {
  #pocket-button[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > #pocket-button {
    list-style-image: url(chrome://pocket/skin/menuPanel.png);
    -moz-image-region: rect(0, 32px, 32px, 0);
  }

  #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
    -moz-image-region: rect(32px, 32px, 64px, 0);
  }
}

@media (min-resolution: 1.1dppx) {
  #pocket-button[cui-areatype="menu-panel"],
  toolbarpaletteitem[place="palette"] > #pocket-button {
    list-style-image: url(chrome://pocket/skin/menuPanel@2x.png);
    -moz-image-region: rect(0px, 64px, 64px, 0);
  }

  #pocket-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
    -moz-image-region: rect(64px, 64px, 128px, 0);
  }
}

#appMenu-library-pocket-button {
  list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
}

#panelMenu_pocket {
  list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16.png");
}

@media (min-resolution: 2dppx) {
  #panelMenu_pocket {
    list-style-image: url("chrome://pocket/content/panels/img/pocketmenuitem16@2x.png");
  }

  #panelMenu_pocket > .toolbarbutton-icon {
    width: 16px;
  }
}

#pageAction-panel-pocket,
#pocket-button {
  list-style-image: url("chrome://pocket-shared/skin/pocket.svg");
}