<style>
:host {
font: var(--cros-body-2-font);
}
.permission-action {
background: transparent;
border: none;
color: var(--cros-color-selection);
cursor: pointer;
font: var(--cros-body-2-font);
margin: 2px 8px 2px 8px;
outline: none;
}
.permission-action:focus {
box-shadow: inset 0 0 0 2px var(--cr-focus-outline-color);
}
#permission {
color: var(--cros-color-secondary);
margin: 0 8px 0 8px;
}
#details {
color: var(--cros-color-secondary);
margin: 0 8px 0 8px;
outline: none;
white-space: pre;
}
</style>
<div id="permission">[[permission]]</div>
<template is="dom-if" if="[[detail]]">
<div id="details" tabindex="0" hidden>[[detail]]</div>
<button class="permission-action"
id="show-details"
on-click="showDetails"
tabindex="0">
$i18n{extensionApprovalsShowDetailsButton}
</button>
<button class="permission-action"
id="hide-details"
on-click="hideDetails"
tabindex="0" hidden>
$i18n{extensionApprovalsHideDetailsButton}
</button>
</template>