Source code
Revision control
Copy as Markdown
Other Tools
.trending-searches-pill-wrapper {
.trending-searches-title-wrapper {
display: flex;
align-items: center;
gap: var(--space-small);
margin-block-start: var(--space-medium);
.trending-searches-title {
margin: 0;
font-size: var(--font-size-root);
}
.close-open-trending-searches {
margin-inline-start: auto;
}
}
.trending-searches-list {
list-style: none;
margin: 0;
margin-block-start: var(--space-small);
padding: 0;
display: flex;
flex-wrap: wrap;
height: 45px;
overflow: hidden;
}
.trending-search-item {
background-color: var(--background-color-canvas);
outline: var(--border-width) solid var(--table-row-background-color-alternate);
border-radius: var(--border-radius-circle);
color: var(--newtab-contextual-text-primary-color);
padding: var(--space-small) var(--space-medium);
white-space: nowrap;
height: min-content;
margin: var(--space-xsmall);
a {
text-decoration: none;
font-size: var(--font-size-root);
color: var(--newtab-contextual-text-primary-color);
// Focus removed in favor of parent element focus decoration
&:focus {
outline: none;
}
}
&:hover {
background-color: var(--newtab-button-static-hover-background);
cursor: pointer;
}
&:hover:active {
background-color: var(--newtab-button-static-active-background);
}
&:focus-within {
outline: var(--focus-outline);
}
}
}