<style include="settings-shared">
:host {
display: block;
}
.zoom-label {
color: var(--cr-secondary-text-color);
margin-inline-end: 16px;
}
#empty {
margin-top: 15px;
}
.list-item site-favicon {
flex-shrink: 0;
}
.list-item .middle {
overflow-x: hidden;
text-overflow: ellipsis;
}
</style>
<div class="list-frame vertical-list" id="listContainer">
<iron-list id="list" preserve-focus items="[[sites_]]"
class="cr-separators" risk-selection>
<template>
<div class="list-item" first$="[[!index]]">
<site-favicon url="[[item.originForFavicon]]"></site-favicon>
<div class="middle">
<span class="url-directionality">[[item.displayName]]</span>
</div>
<div class="zoom-label">[[item.zoom]]</div>
<cr-icon-button class="icon-clear" on-click="removeZoomLevel_"
title="$i18n{siteSettingsRemoveZoomLevel}"
tabindex$="[[tabIndex]]"></cr-icon-button>
</div>
</template>
</iron-list>
<div id="empty" hidden$="[[!showNoSites_]]">
$i18n{siteSettingsNoZoomedSites}
</div>
</div>