/* Copyright 2022 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_hidden_style_lit.css.js
 * #import=chrome://resources/cr_elements/cr_shared_vars.css.js
 * #include=cr-hidden-style-lit
 * #css_wrapper_metadata_end */

:host {
  align-items: center;
  cursor: default;
  display: flex;
  min-height: var(--destination-item-height);
  padding-inline-end: 2px;
  padding-inline-start: 0;
}

cr-icon {
  --icon-margin: calc((var(--search-icon-size) - var(--iron-icon-width))/2);
  fill: var(--google-grey-600);
  flex: 0;
  height: var(--iron-icon-height);
  margin-inline-end: var(--icon-margin);
  margin-inline-start: var(--icon-margin);
  min-width: var(--iron-icon-width);
  transition: opacity 150ms;
}

@media (prefers-color-scheme: dark) {
  cr-icon {
    fill: var(--google-grey-500);
  }
}

.name,
.search-hint,
.extension-controlled-indicator {
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-hint,
.extension-controlled-indicator {
  color: var(--cr-secondary-text-color);
  font-size: calc(10/12 * 1em);
  margin-inline-start: 1em;
}

.name {
  color: var(--cr-primary-text-color);
  font-size: 1em;
  margin-inline-start: 0;
  /* Matches cr-input-padding-start */
  padding-inline-start: 8px;
}

.extension-controlled-indicator {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  min-width: 150px;
  padding-inline-end: 8px;
}

.extension-icon {
  height: 24px;
  margin-inline-start: 1em;
  width: 24px;
}

@media (forced-colors: active) {
  :host(:hover) span {
    color: HighlightText;
    /* The default application of forced colors does not work here. */
    forced-color-adjust: none;
  }

  :host(:hover) cr-icon {
    fill: HighlightText;
  }
}