/* Copyright 2025 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file. */

/* #css_wrapper_metadata_start
 * #type=style-lit
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #scheme=relative
 * #css_wrapper_metadata_end */

:host {
  align-items: center;
  background-color: var(--toolbar-background-color);
  border-radius: 20px;
  cursor: pointer;
  display: flex;
}

:host([hidden]) {
  display: none !important;
}

:host(:hover) {
  background-color: rgba(var(--cr-hover-background-color), 0.7);
}

.favicon-item {
  align-items: center;
  background-color: var(--toolbar-background-color);
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--toolbar-favicon-border-color);
  border-radius: 4px;
  box-sizing: content-box;
  color: var(--toolbar-button-icon-color);
  font-size: 11px;
  display: flex;
  line-height: 16px;
  font-weight: 500;
  height: 18px;
  justify-content: center;
  overflow: hidden;
  width: 18px;
}

.favicon-item:not(:first-child) {
  margin-inline-start: -4px; /* Negative margin for overlap */
}

.file-icon {
  color: #b3261e;
}

#more-items {
  background-color: var(--toolbar-favicon-border-color);
}