/* 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/>. */

 /* CodeMirror 6 block widgets can't have margin, so we put a padding on a container element */
.conditional-breakpoint-panel-container {
  padding-block: 1em;
}

.conditional-breakpoint-panel {
  cursor: initial;
  position: relative;
  display: flex;
  align-items: center;
  background: var(--theme-toolbar-background);
  border-top: 1px solid var(--theme-splitter-color);
  border-bottom: 1px solid var(--theme-splitter-color);
}

.conditional-breakpoint-panel:focus-within {
  outline: var(--theme-focus-outline);
  outline-offset: -2px;
  box-shadow: var(--theme-outline-box-shadow);
}

.conditional-breakpoint-panel .prompt {
  font-size: 1.8em;
  color: var(--theme-graphs-orange);
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  text-align: right;
  width: 30px;
  align-self: baseline;
  margin-top: 3px;
}

.conditional-breakpoint-panel.log-point .prompt {
  color: var(--purple-60);
}

.conditional-breakpoint-panel .CodeMirror {
  margin: 6px 10px;
}

.conditional-breakpoint-panel .CodeMirror pre.CodeMirror-placeholder {
  /* Match the color of the placeholder text to existing inputs in the Debugger */
  color: var(--theme-text-color-alt);
}

/* cm6 style */
.conditional-breakpoint-panel .inline-codemirror-container {
  flex: 1 1 100%;

  /* We already set an outline on the conditional panel, so hide the default codemirror one */
  .cm-editor.cm-focused {
    outline: none;
  }
}
