Custom Titlebar Buttons

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#window-controls {
  margin-right: 2px;
}

#window-controls toolbarbutton {
  -moz-appearance: none;
  list-style-image: url(data:image/png;base64,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);
  --tbhover: 0px;
  --tbhover2: 16px;
  width: 16px;
  height: 16px;
  margin: 5px 2px;
  padding: 0;
}

#window-controls toolbarbutton:hover {
  --tbhover: 16px;
  --tbhover2: 32px;
}

#window-controls toolbarbutton:active {
  --tbhover: 32px;
  --tbhover2: 48px;
}

#window-controls #minimize-button {
  -moz-image-region: rect( var(--tbhover) 16px calc( var(--tbhover) + 16px) 0px);
}

#window-controls #restore-button {
  -moz-image-region: rect(var(--tbhover) 32px var(--tbhover2) 16px);
}

#window-controls #close-button {
  -moz-image-region: rect(var(--tbhover) 48px var(--tbhover2) 32px);
}