/**
 * Code Editor Base Styling
 *
 * Provides Bootstrap 5 integration styling for the Prism Code Editor component.
 * This CSS handles the "chrome" around the editor (borders, focus states, etc.)
 * while theme CSS files handle syntax highlighting colors.
 */

/* Outer container just handles sizing and spacing */
bslib-code-editor {
  width: 100%;
}

/* Label styling - outside the border */
bslib-code-editor > label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

/* Inner container holds the actual editor with border/focus styling */
bslib-code-editor .code-editor {
  /* Required by Prism Code Editor */
  display: grid !important;

  /* Match Bootstrap form control styling */
  border: 1px solid var(--bs-border-color, #dee2e6);
  border-radius: var(--bs-border-radius, 0.375rem);
  background-color: var(--bs-body-bg, #fff);
  color: var(--bs-body-color, #212529);

  /* Position and overflow for editor content */
  position: relative;
  overflow: hidden;

  /* Smooth transitions */
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Focus state - matches Bootstrap input focus */
bslib-code-editor .code-editor:focus-within {
  border-color: var(--bs-primary, #0d6efd);
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
}

/* Copy button appears above code but below modals */
bslib-code-editor .code-editor .pce-copy-button {
  z-index: 10;
}

/* Ensure textarea fills container properly */
bslib-code-editor .code-editor textarea {
  min-height: 100%;
}

/* Ensure proper font rendering */
bslib-code-editor .code-editor,
bslib-code-editor .code-editor .prism-code-editor,
bslib-code-editor .code-editor textarea,
bslib-code-editor .code-editor pre,
bslib-code-editor .code-editor code {
  font-family: var(--bs-font-monospace, ui-monospace, "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", monospace);
  font-size: 0.875rem;
}

/* Read-only state styling */
bslib-code-editor.is-invalid .code-editor,
bslib-code-editor.is-invalid[data-bs-theme="dark"] .code-editor,
[data-bs-theme="dark"] bslib-code-editor.is-invalid .code-editor {
  border-color: var(--bs-danger, #c10000);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-danger-rgb, 193,0,0), 0.25);
}

/* Read-only editor tooltip styling */
.code-editor-readonly-tooltip {
  position: sticky;
  left: 0.5em;
  right: 0.5em;
  padding: 0.4em;
  /* background: var(--widget__bg);
  border: 1px solid var(--widget__border);
  border-radius: 0.3em; */
  font-family: Arial, Helvetica, sans-serif;
  white-space: normal;
  word-break: normal;
}

/* Submit flash animation (Ctrl/Cmd+Enter feedback) */
.code-editor-submit-flash {
  animation: code-editor-flash 400ms ease-out;
}

@keyframes code-editor-flash {
  0% {
    border-color: var(--bs-success, #198754);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-success-rgb, 25, 135, 84), 0.25);
  }
  100% {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb, 13, 110, 253), 0.25);
  }
}