/* 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;
  /* we want the conditional breakpoint/log point panel to be to the right of the gutter… */
  left: var(--cm-gutter-width, 0);
  /* and to stick horizontally to it so it appears "fixed" … */
  position: sticky;
  /* finally, we need to set it's width as the scroller width minus the gutter width so
           it takes the whole horizontal visual space */
  width: calc(var(--cm-editor-scroller-width, 100%) - var(--cm-gutter-width, 0) - /* borders */ 2px);
}

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

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

.conditional-breakpoint-panel .prompt {
  font-size: 1.8em;
  color: var(--theme-breakpoint-conditional-border-color);
  padding-left: 3px;
  padding-right: 3px;
  padding-bottom: 3px;
  text-align: right;
  width: 30px;
  flex-shrink: 0;
}

.conditional-breakpoint-panel .input-container {
  display: flex;
  flex-direction: row;
  align-items: center;
  position: relative;
}

.conditional-breakpoint-panel button[type="submit"] {
  background-color: var(--blue-60);
  color: white;

  &:hover {
    background-color: var(--blue-70);
    color: white;
  }
}

/* This is the panel "footer", with the "Show stacktrace" checkbox and Create/Cancel button
 */
.conditional-breakpoint-panel-controls {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  border-top: 1px solid var(--theme-splitter-color);
  gap: 8px 20px;
  /* CodeMirror sets a monospace font on its content, let's go back to the defaut set on :root in common.css */
  font: message-box;
  font-size: var(--theme-body-font-size);
}

.conditional-breakpoint-panel-buttons {
  display: flex;
  align-items: center;
  flex-grow: 1;
  justify-content: flex-end;
  gap: 4px;

  button {
    outline-offset: 2px;
  }
}

.conditional-breakpoint-panel-checkbox-label {
  display: flex;
  align-items: center;
}

.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;
  }
}