<style include="common wallpaper sea-pen">
.feedback-buttons-container {
align-items: flex-end;
background-color: var(--cros-bg-color);
/* Ensure container does not overlay the focus outline. */
border-bottom-right-radius: 12px;
border-top-left-radius: 24px;
bottom: 0;
display: flex;
gap: 16px;
height: 36px;
justify-content: right;
position: absolute;
right: 0;
width: 76px;
}
cr-icon-button {
--cr-icon-button-size: 24px;
margin-inline: 0;
}
cr-icon-button:hover {
background-color: transparent;
}
</style>
<div class="feedback-buttons-container">
<!-- TODO(b/331657978): add the real string for aria-label. -->
<cr-icon-button id="thumbsUp"
tabindex$="[[inheritTabIndex]]"
aria-label$="[[i18n('seaPenFeedbackPositive')]]"
aria-description$="[[i18n('seaPenFeedbackDescription')]]"
iron-icon="[[getThumbsUpIcon_(selectedFeedbackOption)]]"
role="button"
on-click="onClickThumbsUp_">
</cr-icon-button>
<cr-icon-button id="thumbsDown"
tabindex$="[[inheritTabIndex]]"
aria-label="[[i18n('seaPenFeedbackNegative')]]"
aria-description$="[[i18n('seaPenFeedbackDescription')]]"
iron-icon="[[getThumbsDownIcon_(selectedFeedbackOption)]]"
role="button"
on-click="onClickThumbsDown_">
</cr-icon-button>
</div>