<div class="status-toolbar"> <button aria-label="Reply" type="button"> <svg> <use xlink:href="#fa-reply" /> </svg> </button> <button aria-label="Boost" aria-pressed="{{status.reblogged}}" class="{{status.reblogged ? 'selected' : ''}}" type="button"> <svg> {{#if status.visibility === 'private'}} <use xlink:href="#fa-lock" /> {{elseif status.visibility === 'direct'}} <use xlink:href="#fa-envelope" /> {{else}} <use xlink:href="#fa-retweet" /> {{/if}} </svg> </button> <button aria-label="Favorite" aria-pressed="{{status.favourited}}" class="{{status.favourited ? 'selected' : ''}}" type="button"> <svg> <use xlink:href="#fa-star" /> </svg> </button> <button aria-label="Show more actions" type="button"> <svg> <use xlink:href="#fa-ellipsis-h" /> </svg> </button> </div> <style> .status-toolbar { grid-area: status-toolbar; display: flex; justify-content: space-between; } .status-toolbar button { padding: 6px 10px; background: none; border: none; } .status-toolbar button svg { width: 24px; height: 24px; fill: var(--action-button-fill-color); } .status-toolbar button:hover svg { fill: var(--action-button-fill-color-hover); } .status-toolbar button:active svg { fill: var(--action-button-fill-color-active); } .status-toolbar button.selected svg { fill: var(--action-button-fill-color-pressed) } .status-toolbar button.selected:hover svg { fill: var(--action-button-fill-color-pressed-hover); } .status-toolbar button.selected:active svg { fill: var(--action-button-fill-color-pressed-active); } </style> <script> export default { } </script>