/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at <http://mozilla.org/MPL/2.0/>. */

.event-listeners-content {
  padding-block: 4px;
}

.event-listeners-content ul {
  padding: 0;
  list-style-type: none;
}

.event-listeners-content button:hover,
.event-listeners-content button:focus {
  background: none;
}

.event-listener-group {
  user-select: none;
}

.event-listener-header {
  display: flex;
  align-items: center;
}

.event-listener-expand {
  border: none;
  background: none;
  padding: 4px 5px;
  line-height: 12px;
  outline-offset: -2px;
}

.event-listener-expand:hover {
  background: transparent;
}

.event-listener-group input[type="checkbox"] {
  margin: 0;
  margin-inline-end: 4px;
}

.event-listener-label {
  display: flex;
  align-items: center;
  padding-inline-end: 10px;
}

.event-listener-category {
  padding: 3px 0;
  line-height: 14px;
}

.event-listeners-content .arrow {
  margin-inline-end: 0;
}

.event-listeners-content .arrow.expanded {
  transform: rotate(0deg);
}

.event-listeners-content .arrow.expanded:dir(rtl) {
  transform: rotate(90deg);
}

.event-listeners-list {
  border-block-start: 1px;
  padding-inline: 18px 20px;
}

.event-listener-event {
  display: flex;
  align-items: center;
}

.event-listeners-list .event-listener-event {
  margin-inline-start: 40px;
}

.event-search-results-list .event-listener-event {
  padding-inline: 20px;
}

.event-listener-name {
  line-height: 14px;
  padding: 3px 0;
}

.event-listener-event input {
  margin-inline: 0 4px;
  margin-block: 0;
}

.event-search-container {
  display: flex;
  border: 1px solid transparent;
  border-block-end: 1px solid var(--theme-splitter-color);
}

.event-search-form {
  display: flex;
  flex-grow: 1;
}

.event-search-input {
  flex-grow: 1;
  margin: 0;
  font-size: inherit;
  background-color: var(--theme-sidebar-background);
  border: 0;
  height: 24px;
  color: var(--theme-body-color);
  background-image: url("chrome://devtools/skin/images/filter-small.svg");
  background-position-x: 4px;
  background-position-y: 50%;
  background-repeat: no-repeat;
  background-size: 12px;
  -moz-context-properties: fill;
  fill: var(--theme-icon-dimmed-color);
  text-align: match-parent;
  outline-offset: -1px;
}

:root:dir(ltr) .event-search-input {
  /* Be explicit about left/right direction to prevent the text/placeholder
   * from overlapping the background image when the user changes the text
   * direction manually (e.g. via Ctrl+Shift). */
  padding-left: 19px;
  padding-right: 12px;
}

:root:dir(rtl) .event-search-input {
  background-position-x: right 4px;
  padding-right: 19px;
  padding-left: 12px;
}

.category-label {
  color: var(--theme-comment);
}

.event-search-input::placeholder {
  color: var(--theme-text-color-alt);
  opacity: 1;
}

.event-search-container:focus-within {
  border: 1px solid var(--theme-highlight-blue);
}

.devtools-searchinput-clear {
  margin-inline-end: 8px;
}