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

.filtered-list-widget {
  display: flex;
  flex-direction: column;
  flex: auto;
  border: 1px solid transparent;
}

.hbox {
  flex: 0 0 var(--sys-size-14);
  padding: 0 var(--sys-size-8);
  gap: var(--sys-size-3);
  align-items: center;
}

.filtered-list-widget-hint {
  color: var(--sys-color-on-surface-subtle);
  font-size: var(--sys-typescale-body4-size);
  line-height: 18px;
}

devtools-text-prompt {
  flex-grow: 1;
  font-size: var(--sys-typescale-body3-size);
  gap: var(--sys-size-3);
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
  line-height: var(--sys-typescale-body3-line-height);
}

.filtered-list-widget-progress {
  flex: none;
  background: var(--sys-color-divider);
  height: var(--sys-size-1);
}

.filtered-list-widget-progress-bar {
  background-color: var(--sys-color-primary-bright);
  height: var(--sys-size-2);
  width: 100%;
  transform: scaleX(0);
  transform-origin: top left;
  opacity: 100%;
  transition: none;
}

.filtered-widget-progress-fade {
  opacity: 0%;
  transition: opacity 500ms;
}

.filtered-list-widget .vbox > div.container {
  flex: auto;
  overflow: hidden auto;
}

.filtered-list-widget-item-wrapper {
  color: var(--sys-color-on-surface);
  display: flex;
  font-family: ".SFNSDisplay-Regular", "Helvetica Neue", "Lucida Grande", sans-serif;
  padding: 0 var(--sys-size-7);
  gap: var(--sys-size-7);
  height: var(--sys-size-14);
}

.filtered-list-widget-item-wrapper devtools-icon {
  align-self: center;
  flex: none;
  width: 18px;
  height: 18px;

  &.snippet {
    color: var(--sys-color-orange-bright);
  }
}

.filtered-list-widget-item-wrapper.selected {
  background-color: var(--sys-color-state-hover-on-subtle);
}

.filtered-list-widget-item {
  white-space: break-spaces;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  font-size: var(--sys-typescale-body4-size);
  flex: auto;
}

.filtered-list-widget-item.is-ignore-listed * {
  color: var(--sys-color-state-disabled);
}

.filtered-list-widget-item span.highlight {
  font-weight: var(--ref-typeface-weight-bold);
}

.filtered-list-widget-item .filtered-list-widget-title {
  white-space: nowrap;
  flex: initial;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filtered-list-widget-item .filtered-list-widget-subtitle {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sys-color-on-surface-subtle);
  padding-left: var(--sys-size-3);
  display: flex;
  white-space: pre;
}

.filtered-list-widget-item .filtered-list-widget-subtitle .first-part {
  flex-shrink: 1000;
  overflow: hidden;
  text-overflow: ellipsis;
}

.filtered-list-widget-item-wrapper .tag {
  font-size: var(--sys-typescale-body5-size);
  line-height: var(--sys-typescale-headline5-line-height);
  align-self: center;
  flex-shrink: 0;
}

.filtered-list-widget-item-wrapper .deprecated-tag {
  font-size: 11px;
  color: var(--sys-color-token-subtle);
}

.filtered-list-widget-item.one-row {
  line-height: var(--sys-typescale-body3-line-height);
  align-items: center;
  align-content: center;
  display: flex;
  gap: var(--sys-size-4);
}

.filtered-list-widget-item.one-row .filtered-list-widget-title {
  display: inline;
}

.filtered-list-widget-item.two-rows {
  display: grid;
  align-content: center;
  gap: var(--sys-size-2);
}

.filtered-list-widget-item-wrapper:not(.search-mode) .filtered-list-widget-item.two-rows .filtered-list-widget-title {
  font-weight: var(--ref-typeface-weight-bold);
}

.not-found-text {
  height: 34px;
  line-height: 34px;
  padding-left: 8px;
  font-style: italic;
  color: var(--sys-color-state-disabled);
  background: var(--sys-color-state-disabled-container);
}

.quickpick-description {
  flex: none;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--sys-color-state-disabled);
  padding-left: 15px;
}

@media (forced-colors: active) {
  .filtered-list-widget {
    forced-color-adjust: none;
    border-color: ButtonText;
  }

  .filtered-list-widget-item-wrapper .filtered-list-widget-title,
  .filtered-list-widget-item-wrapper .filtered-list-widget-subtitle,
  .quickpick-description {
    color: ButtonText;
  }

  .filtered-list-widget-item-wrapper.selected {
    background-color: Highlight;
  }

  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-title,
  .filtered-list-widget-item-wrapper.selected .filtered-list-widget-item .filtered-list-widget-subtitle {
    color: HighlightText;
  }

  devtools-text-prompt {
    border-color: ButtonText;
  }
}
