:root {
    --icon-add: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xMSAzaDJ2OGg4djJoLTh2OGgtMnYtOEgzdi0yaDh6Ii8+PC9zdmc+');
    --icon-leaderboard: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0zIDIwaDE4djJIMVYzaDJ6bTItOGg0djZINXptNi01aDR2MTFoLTR6bTYtNGg0djE1aC00eiIvPjwvc3ZnPg==');
    --icon-add-circle: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xMiAyYTEwIDEwIDAgMSAwIDAgMjAgMTAgMTAgMCAwIDAgMC0yMHptLTEgNWgydjRoNHYyaC00djRoLTJ2LTRIN3YtMmg0eiIvPjwvc3ZnPg==');
    --icon-undo: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj4gPHBhdGggZD0iTTE2MCA1MTJDMTQyLjMgNTEyIDEyOCA1MjYuMyAxMjggNTQ0QzEyOCA1NjEuNyAxNDIuMyA1NzYgMTYwIDU3NkwyNTYgNTc2QzMwOSA1NzYgMzUyIDUzMyAzNTIgNDgwTDM1MiAxNzMuM0w0MjUuNCAyNDYuN0M0MzcuOSAyNTkuMiA0NTguMiAyNTkuMiA0NzAuNyAyNDYuN0M0ODMuMiAyMzQuMiA0ODMuMiAyMTMuOSA0NzAuNyAyMDEuNEwzNDIuNyA3My40QzMzMC4yIDYwLjkgMzA5LjkgNjAuOSAyOTcuNCA3My40TDE2OS40IDIwMS40QzE1Ni45IDIxMy45IDE1Ni45IDIzNC4yIDE2OS40IDI0Ni43QzE4MS45IDI1OS4yIDIwMi4yIDI1OS4yIDIxNC43IDI0Ni43TDI4OCAxNzMuM0wyODggNDgwQzI4OCA0OTcuNyAyNzMuNyA1MTIgMjU2IDUxMkwxNjAgNTEyeiIvPiA8L3N2Zz4=');
    --icon-redo: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIiA+IDxwYXRoIGQ9Ik0xNjAgMTI4QzE0Mi4zIDEyOCAxMjggMTEzLjcgMTI4IDk2QzEyOCA3OC4zIDE0Mi4zIDY0IDE2MCA2NEwyNTYgNjRDMzA5IDY0IDM1MiAxMDcgMzUyIDE2MEwzNTIgNDY2LjdMNDI1LjQgMzkzLjNDNDM3LjkgMzgwLjggNDU4LjIgMzgwLjggNDcwLjcgMzkzLjNDNDgzLjIgNDA1LjggNDgzLjIgNDI2LjEgNDcwLjcgNDM4LjZMMzQyLjcgNTY2LjZDMzMwLjIgNTc5LjEgMzA5LjkgNTc5LjEgMjk3LjQgNTY2LjZMMTY5LjQgNDM4LjZDMTU2LjkgNDI2LjEgMTU2LjkgNDA1LjggMTY5LjQgMzkzLjNDMTgxLjkgMzgwLjggMjAyLjIgMzgwLjggMjE0LjcgMzkzLjNMMjg4IDQ2Ni43TDI4OCAxNjBDMjg4IDE0Mi4zIDI3My43IDEyOCAyNTYgMTI4TDE2MCAxMjh6Ii8+IDwvc3ZnPg==');
    --icon-brush: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+IDxwYXRoIGQ9Ik0wIDBoMjR2MjRIMHoiIGZpbGw9Im5vbmUiLz4gPHBhdGggZD0iTTcgMTRjLTEuNjYgMC0zIDEuMzQtMyAzIDAgMS4zMS0xLjE2IDItMiAyIC45MiAxLjIyIDIuNDkgMiA0IDIgMi4yMSAwIDQtMS43OSA0LTQgMC0xLjY2LTEuMzQtMy0zLTN6bTEzLjcxLTkuMzdsLTEuMzQtMS4zNGMtLjM5LS4zOS0xLjAyLS4zOS0xLjQxIDBMOSAxMi4yNSAxMS43NSAxNWw4Ljk2LTguOTZjLjM5LS4zOS4zOS0xLjAyIDAtMS40MXoiLz4gPC9zdmc+');
    --icon-fill: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NDAgNjQwIj4gPHBhdGggZD0iTTM0MS43IDEzNS42TDI3Ny4zIDIwMEwzMTAuNyAyMzMuNEMzMjMuMiAyNDUuOSAzMjMuMiAyNjYuMiAzMTAuNyAyNzguN0MyOTguMiAyOTEuMiAyNzcuOSAyOTEuMiAyNjUuNCAyNzguN0wyMzIgMjQ1LjNMMTM1LjYgMzQxLjdDMTMyLjcgMzQ0LjYgMTMwLjUgMzQ4LjIgMTI5LjMgMzUyTDQ1MC44IDM1Mkw1MDQuNSAyOTguM0M1MDkuNCAyOTMuNCA1MTIuMSAyODYuOCA1MTIuMSAyODBDNTEyLjEgMjczLjIgNTA5LjQgMjY2LjUgNTA0LjUgMjYxLjdMMzc4LjMgMTM1LjZDMzczLjUgMTMwLjcgMzY2LjkgMTI4IDM2MCAxMjhDMzUzLjEgMTI4IDM0Ni41IDEzMC43IDM0MS43IDEzNS42ek05MC4zIDI5Ni40TDE4Ni43IDIwMEwxMzcuMyAxNTAuNkMxMjQuOCAxMzguMSAxMjQuOCAxMTcuOCAxMzcuMyAxMDUuM0MxNDkuOCA5Mi44IDE3MC4xIDkyLjggMTgyLjYgMTA1LjNMMjMyIDE1NC43TDI5Ni40IDkwLjNDMzEzLjMgNzMuNSAzMzYuMSA2NCAzNjAgNjRDMzgzLjkgNjQgNDA2LjcgNzMuNSA0MjMuNiA5MC4zTDU0OS43IDIxNi40QzU2Ni41IDIzMy4zIDU3NiAyNTYuMSA1NzYgMjgwQzU3NiAzMDMuOSA1NjYuNSAzMjYuNyA1NDkuNyAzNDMuNkwzNDMuNiA1NDkuN0MzMjYuNyA1NjYuNSAzMDMuOSA1NzYgMjgwIDU3NkMyNTYuMSA1NzYgMjMzLjMgNTY2LjUgMjE2LjQgNTQ5LjdMOTAuMyA0MjMuNkM3My41IDQwNi43IDY0IDM4My45IDY0IDM2MEM2NCAzMzYuMSA3My41IDMxMy4zIDkwLjMgMjk2LjR6TTU0NCA2MDhDNTA4LjcgNjA4IDQ4MCA1NzkuMyA0ODAgNTQ0QzQ4MCA1MTguOCA1MTIuNiA0NjQuNCA1MzEuMiA0MzUuM0M1MzcuMiA0MjUuOSA1NTAuNyA0MjUuOSA1NTYuNyA0MzUuM0M1NzUuNCA0NjQuNCA2MDcuOSA1MTguOCA2MDcuOSA1NDRDNjA3LjkgNTc5LjMgNTc5LjIgNjA4IDU0My45IDYwOHoiLz4gPC9zdmc+');
    --icon-highlighter: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0OTAuMDgyIDQ5MC4wODIiPiA8cGF0aCBkPSJtMzE3LjkwNCwxNzIuMTc4YzUuODU4LDUuODU3IDUuODU4LDE1LjM1NSAwLDIxLjIxM2wtOTcuNDMzLDk3LjQzMWMtMi45MjksMi45MjktNi43NjgsNC4zOTQtMTAuNjA2LDQuMzk0LTMuODM5LDAtNy42NzctMS40NjQtMTAuNjA2LTQuMzk0LTUuODU4LTUuODU3LTUuODU4LTE1LjM1NSAwLTIxLjIxM2w5Ny40MzMtOTcuNDMxYzUuODU2LTUuODU4IDE1LjM1NC01Ljg1OCAyMS4yMTIsMHptMTU5LjU5OC0zMy4wMDhsLTIxOS4yMTcsMjg0LjE4Yy0yLjYzNSwzLjQxNS02LjYxMSw1LjUzLTEwLjkxNSw1LjgwNy00LjI5OCwwLjI4Mi04LjUxOS0xLjMxMi0xMS41NjgtNC4zNjJsLTMuNDQ0LTMuNDQ0LTUwLjExOCwyOS4wNDljLTEzLjY3Nyw3LjkzLTI3LjQ2Myw3LjA0My0zNi44NzUtMi4zNzJsLTguNTY5LTguNTY4LTQ2LjIyOCw0Ni4yMjljLTIuODEzLDIuODEzLTYuNjI4LDQuMzk0LTEwLjYwNyw0LjM5NC0zLjk3OCwwLTcuNzkzLTEuNTgtMTAuNjA2LTQuMzk0bC02NC45NjEtNjQuOTZjLTIuODEzLTIuODEzLTQuMzk0LTYuNjI4LTQuMzk0LTEwLjYwNnMxLjU4MS03Ljc5NCA0LjM5NC0xMC42MDZsNDYuMjMtNDYuMjI5LTguNTY5LTguNTY5Yy05LjQxNi05LjQxNC0xMC4zMDEtMjMuMjAxLTIuMzctMzYuODc5bDI5LjA0Ny01MC4xMTMtMy40NDUtMy40NDVjLTMuMDUtMy4wNS00LjYzOS03LjI2NS00LjM2My0xMS41NjggMC4yNzctNC4zMDQgMi4zOTMtOC4yOCA1LjgwOC0xMC45MTVsMjg0LjE4MS0yMTkuMjE5YzIyLjMzOS0xNy4yMzQgNTAuNTAxLTE2LjcxMiA2OC40ODQsMS4yN2w1Ni44MzQsNTYuODM2YzE3Ljk4MiwxNy45ODEgMTguNTA1LDQ2LjE0MyAxLjI3MSw2OC40ODR6bS0zNjEuOTIxLDI3OS4wNzVsLTQzLjc0NC00My43NDMtMzUuNjIzLDM1LjYyMSA0My43NDUsNDMuNzQ1IDM1LjYyMi0zNS42MjN6bTk0LjgyNC0xOC44NDZsLTExOS43MjEtMTE5LjcyMi0yNS4wNDUsNDMuMjFjLTAuNDcsMC44MS0wLjc4LDEuNDg3LTAuOTgsMi4wMDlsODIuNzQyLDgyLjc0MiAxNy43ODcsMTcuNzg2YzAuNTIxLTAuMiAxLjE5Ny0wLjUxMSAyLjAwNi0wLjk3OWw0My4yMTEtMjUuMDQ2em0yNDQuNjEzLTMwNy41MDFsLTU2LjgzNC01Ni44MzVjLTguMjE0LTguMjExLTIwLjQ1Ny01LjI3Ny0yOC45NDcsMS4yN2wtMjcwLjY2OSwyMDguNzk2YzAuMDIzLDAuMDI0IDAuMDQ2LDAuMDUxIDAuMDY5LDAuMDc1bDE0Ni4yNCwxNDYuMjRjMC4wMjYsMC4wMjMgMC4wNTEsMC4wNDcgMC4wNzcsMC4wN2wyMDguNzkzLTI3MC42NjljNi41NS04LjQ5IDkuNDg0LTIwLjczNCAxLjI3MS0yOC45NDd6Ii8+IDwvc3ZnPg==');
    --icon-eraser: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj4gPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNNDk3Ljk0MSAyNzMuOTQxYzE4Ljc0NS0xOC43NDUgMTguNzQ1LTQ5LjEzNyAwLTY3Ljg4MmwtMTYwLTE2MGMtMTguNzQ1LTE4Ljc0NS00OS4xMzYtMTguNzQ2LTY3Ljg4MyAwbC0yNTYgMjU2Yy0xOC43NDUgMTguNzQ1LTE4Ljc0NSA0OS4xMzcgMCA2Ny44ODJsOTYgOTZBNDguMDA0IDQ4LjAwNCAwIDAgMCAxNDQgNDgwaDM1NmM2LjYyNyAwIDEyLTUuMzczIDEyLTEydi00MGMwLTYuNjI3LTUuMzczLTEyLTEyLTEySDM1NS44ODNsMTQyLjA1OC0xNDIuMDU5em0tMzAyLjYyNy02Mi42MjdsMTM3LjM3MyAxMzcuMzczTDI2NS4zNzMgNDE2SDE1MC42MjhsLTgwLTgwIDEyNC42ODYtMTI0LjY4NnoiPiA8L3BhdGg+IDwvc3ZnPg==');
    --icon-delete: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA0NDggNTEyIj4gPHBhdGggZmlsbD0iY3VycmVudENvbG9yIiBkPSJNMjY4IDQxNmgyNGExMiAxMiAwIDAgMCAxMi0xMlYxODhhMTIgMTIgMCAwIDAtMTItMTJoLTI0YTEyIDEyIDAgMCAwLTEyIDEydjIxNmExMiAxMiAwIDAgMCAxMiAxMnpNNDMyIDgwaC04Mi40MWwtMzQtNTYuN0E0OCA0OCAwIDAgMCAyNzQuNDEgMEgxNzMuNTlhNDggNDggMCAwIDAtNDEuMTYgMjMuM0w5OC40MSA4MEgxNkExNiAxNiAwIDAgMCAwIDk2djE2YTE2IDE2IDAgMCAwIDE2IDE2aDE2djMzNmE0OCA0OCAwIDAgMCA0OCA0OGgyODhhNDggNDggMCAwIDAgNDgtNDhWMTI4aDE2YTE2IDE2IDAgMCAwIDE2LTE2Vjk2YTE2IDE2IDAgMCAwLTE2LTE2ek0xNzEuODQgNTAuOTFBNiA2IDAgMCAxIDE3NyA0OGg5NGE2IDYgMCAwIDEgNS4xNSAyLjkxTDI5My42MSA4MEgxNTQuMzl6TTM2OCA0NjRIODBWMTI4aDI4OHptLTIxMi00OGgyNGExMiAxMiAwIDAgMCAxMi0xMlYxODhhMTIgMTIgMCAwIDAtMTItMTJoLTI0YTEyIDEyIDAgMCAwLTEyIDEydjIxNmExMiAxMiAwIDAgMCAxMiAxMnoiIGNsYXNzPSIiPjwvcGF0aD4gPC9zdmc+');
    --icon-eye: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJsZWFkZXJib2FyZC1zaG93LWljb24iIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xMiA0LjVDNi41IDQuNSAyLjMgOC40IDEgMTJjMS4zIDMuNiA1LjUgNy41IDExIDcuNXM5LjctMy45IDExLTcuNWMtMS4zLTMuNi01LjUtNy41LTExLTcuNXptMCAxMmE0LjUgNC41IDAgMSAxIDAtOSA0LjUgNC41IDAgMCAxIDAgOXptMC0yYTIuNSAyLjUgMCAxIDAgMC01IDIuNSAyLjUgMCAwIDAgMCA1eiIvPjwvc3ZnPg==');
    --icon-eye-off: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJsZWFkZXJib2FyZC1oaWRlLWljb24iIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Im0zLjMgMiAxOC43IDE4LjctMS40IDEuNC0zLjMtMy4zYTEyLjggMTIuOCAwIDAgMS01LjMgMS4yQzYuNSAyMCAyLjMgMTYgMSAxMmExMi45IDEyLjkgMCAwIDEgNC40LTUuOUwxLjkgMy40IDMuMyAyem00LjUgNi41YTQuNSA0LjUgMCAwIDAgNi4xIDYuMWwtMS41LTEuNWEyLjUgMi41IDAgMCAxLTMuMS0zLjFMNy44IDguNXpNMTIgNGM1LjUgMCA5LjcgNCAxMSA4YTEyLjQgMTIuNCAwIDAgMS0zLjEgNC43bC0zLjUtMy41QTQuNSA0LjUgMCAwIDAgMTAuOCA3TDguNiA0LjhBMTIuNSAxMi41IDAgMCAxIDEyIDR6Ii8+PC9zdmc+');
    --icon-dice: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0xNiAyIDI5IDl2MTRsLTEzIDdMMyAyM1Y5em0wIDMuMkw3IDEwbDkgNC44IDktNC44em0tMTAgN3Y5bDguNSA0LjZ2LTl6bTExLjUgNC42djlsOC41LTQuNnYtOXoiLz48Y2lyY2xlIGN4PSIxNiIgY3k9IjEwIiByPSIxLjQiLz48Y2lyY2xlIGN4PSI5IiBjeT0iMTYiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjEyIiBjeT0iMjEiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIxIiBjeT0iMTgiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI0IiBjeT0iMTUiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjIxIiBjeT0iMjMiIHI9IjEuMyIvPjwvc3ZnPg==');
    --icon-pencil: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik0zIDE3LjI1VjIxaDMuNzVMMTguOCA4Ljk1bC0zLjc1LTMuNzVMMyAxNy4yNXpNMjEuNyA2LjA1YTEgMSAwIDAgMCAwLTEuNGwtMi4zNS0yLjM1YTEgMSAwIDAgMC0xLjQgMEwxNi4xIDQuMTVsMy43NSAzLjc1eiIvPjwvc3ZnPg==');
    --icon-play: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiPjxwYXRoIGQ9Ik04IDV2MTRsMTEtN3oiLz48L3N2Zz4=');
}

#new-game::before,
#stats::before,
#open-vote::before,
.chat-vote__remove::before,
#undo::before,
#redo::before,
#pen::before,
#fill::before,
#highlighter::before,
#eraser::before,
#clear::before,
#show-leaderboard::before,
#winner-new-game::before,
#mode-generated::before,
#mode-custom::before,
#start-game::before {
    background-color: currentColor;
    content: '';
    display: inline-block;
    flex: 0 0 20px;
    height: 20px;
    mask: var(--button-icon) center / contain no-repeat;
    width: 20px;
}

#new-game::before { --button-icon: var(--icon-add); }
#stats::before { --button-icon: var(--icon-leaderboard); }
#open-vote::before { --button-icon: var(--icon-add-circle); }
.chat-vote__remove::before { --button-icon: var(--icon-add-circle); }
#undo::before { --button-icon: var(--icon-undo); }
#redo::before { --button-icon: var(--icon-redo); }
#pen::before { --button-icon: var(--icon-brush); }
#fill::before { --button-icon: var(--icon-fill); }
#highlighter::before { --button-icon: var(--icon-highlighter); }
#eraser::before { --button-icon: var(--icon-eraser); }
#clear::before { --button-icon: var(--icon-delete); }
#show-leaderboard::before { --button-icon: var(--icon-eye); }
#show-leaderboard.button--leaderboard-hide::before { --button-icon: var(--icon-eye-off); }
#winner-new-game::before { --button-icon: var(--icon-add); }
#mode-generated::before { --button-icon: var(--icon-dice); }
#mode-custom::before { --button-icon: var(--icon-pencil); }
#start-game::before { --button-icon: var(--icon-play); }

#undo::before,
#redo::before { transform: rotate(-90deg); }
#pen::before,
#fill::before,
#highlighter::before,
#eraser::before { flex-basis: 24px; height: 24px; width: 24px; }
#open-vote::before { flex-basis: 14px; height: 14px; width: 14px; }
#open-vote.is-voting::before,
.chat-vote__remove::before { transform: rotate(45deg); }
#mode-generated::before,
#mode-custom::before { flex-basis: 26px; height: 26px; width: 26px; }
#mode-generated.is-selected::before,
#mode-custom.is-selected::before { background-color: var(--primary); }