<style include="shared-style cr-icons">
:host {
--iron-icon-fill-color: var(--google-grey-700);
align-items: center;
color: inherit;
display: flex;
flex-direction: row;
height: 40px;
padding-inline-start: 20px;
position: relative;
text-decoration: none;
user-select: none;
}
:host([is-selected-item_]) {
--iron-icon-fill-color: var(--google-blue-600);
background-color: var(--highlight-color);
}
@media (prefers-color-scheme: dark) {
:host([is-selected-item_]),
:host([is-selected-item_]) .folder-icon {
--cr-icon-button-focus-outline-color: white;
--iron-icon-fill-color: var(--google-grey-500);
color: var(--google-grey-700);
}
:host([is-selected-item_]) {
--iron-icon-fill-color: black;
}
}
<if expr="is_macosx">
.folder-icon {
margin: 2px;
}
</if>
#website-text {
display: flex;
flex: 1;
overflow: hidden;
}
#website-title {
color: var(--cr-primary-text-color);
flex: 1;
margin-inline-start: 20px;
text-decoration: none;
}
:host([is-selected-item_]) #website-title {
flex: 0 auto;
}
@media (prefers-color-scheme: dark) {
:host([is-selected-item_]) #website-title {
color: var(--google-grey-900);
}
}
#website-url {
/* Transparent version of --cr-secondary-text-color */
color: rgba(0, 0, 0, 0.54);
display: none;
flex: 1;
margin-inline-start: 20px;
min-width: 100px;
}
@media (prefers-color-scheme: dark) {
#website-url {
color: var(--google-grey-800);
}
}
:host([is-selected-item_]) #website-url {
display: block;
}
#icon {
flex: none;
}
cr-icon-button {
margin-inline-end: 12px;
}
@media (prefers-color-scheme: dark) {
:host([is-selected-item_]) cr-icon-button {
--cr-icon-button-fill-color: var(--google-grey-700);
}
}
:host(:focus) {
z-index: 1;
}
.elided-text {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<div id="icon"></div>
<div id="website-text" role="gridcell">
<div id="website-title" class="elided-text" title="[[item_.title]]">
[[item_.title]]
</div>
<div id="website-url" class="elided-text" title="[[getItemUrl_(item_)]]">
[[getItemUrl_(item_)]]
</div>
</div>
<div role="gridcell">
<cr-icon-button class="icon-more-vert"
id="menuButton"
tabindex="[[ironListTabIndex]]"
title="$i18n{moreActionsButtonTitle}"
aria-label$="[[getButtonAriaLabel_(item_, isSelectedItem_,
isMultiSelect_)]]"
on-click="onMenuButtonClick_"
aria-haspopup="menu"></cr-icon-button>
</div>