| <style> | 
 |   #icon { | 
 |     height: 32px; | 
 |     margin-inline-end: 10px; | 
 |     width: 32px; | 
 |   } | 
 |  | 
 |   #icon-and-name-wrapper { | 
 |     align-items: center; | 
 |     display: flex; | 
 |   } | 
 |  | 
 |   ExtensionOptions { | 
 |     display: block; | 
 |     height: 100%; | 
 |     overflow: hidden; | 
 |   } | 
 |  | 
 |   cr-dialog::part(dialog) { | 
 |     /* CSS variables are set by the JS. */ | 
 |     height: var(--dialog-height); | 
 |     opacity: var(--dialog-opacity, 0); | 
 |     /* When loading, it's possible for an size update to follow after the | 
 |        initial size update. The debounce time on size updates is 50ms. | 
 |        A 100ms delay for the opacity transition will allow two updates to | 
 |        occur without showing the dialog resizing to the user. */ | 
 |     transition: opacity 100ms ease 100ms; | 
 |     width: var(--dialog-width); | 
 |   } | 
 |  | 
 |   cr-dialog::part(wrapper) { | 
 |     height: 100%; | 
 |     max-height: initial; | 
 |     overflow: hidden; | 
 |   } | 
 |  | 
 |   cr-dialog #body { | 
 |     height: 100%; | 
 |     padding: 0; | 
 |   } | 
 |  | 
 |   cr-dialog { | 
 |     --cr-dialog-body-border-bottom: none; | 
 |     --cr-dialog-body-border-top: none; | 
 |     --scroll-border: none; | 
 |   } | 
 |  | 
 |   cr-dialog::part(body-container) { | 
 |     height: 100%; | 
 |     min-height: initial; | 
 |   } | 
 | </style> | 
 |  | 
 | <cr-dialog id="dialog" close-text="$i18n{close}" | 
 |     on-close="onClose_" show-close-button> | 
 |   <div slot="title"> | 
 |     <div id="icon-and-name-wrapper"> | 
 |       <img id="icon" src="[[data_.iconUrl]]" alt=""> | 
 |       <span>[[data_.name]]</span> | 
 |     </div> | 
 |   </div> | 
 |   <div slot="body" id="body"> | 
 |   </div> | 
 | </cr-dialog> |