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

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  font-size: inherit;
}

:host {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.target-selector {
  max-width: var(--sys-size-21);
}

.warning-icon {
  margin-left: -18px;
  margin-right: 4px;
}

.row {
  flex-wrap: wrap;
}

.row,
.row-icons {
  display: flex;
  flex-direction: row;
  color: var(--sys-color-token-property-special);
  font-family: var(--monospace-font-family);
  font-size: var(--monospace-font-size);
  align-items: center;
  line-height: 18px;
  margin-top: 3px;
}

.separator {
  margin-right: 0.5em;
  color: var(--sys-color-on-surface);
}

ul {
  padding-left: 2em;
}

.optional-parameter {
  color: var(--sys-color-token-attribute-value);

  --override-color-recorder-input: var(--sys-color-on-surface);
}

.undefined-parameter {
  color: var(--sys-color-state-disabled);
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.editor-wrapper {
  padding-left: 1em;
  overflow-x: hidden;
  flex-grow: 1;
  padding-bottom: 50px;
  padding-top: 0.5em;
}

.clear-button,
.add-button,
.delete-button {
  opacity: 0%;
  transition: opacity 0.3s ease-in-out;
}

.clear-button,
.delete-button {
  margin-left: 5px;
}

.row:focus-within .delete-button,
.row:focus-within .add-button,
.row:focus-within .clear-button,
.row:hover .delete-button,
.row:hover .add-button,
.row:hover .clear-button {
  opacity: 100%;
}

.protocol-monitor-sidebar-toolbar {
  border-top: 1px solid var(--sys-color-divider);
}