/**
 * Buffee Editor - Required Styles
 * @version 12.6.0-alpha.1
 *
 * This stylesheet contains the essential structural CSS for Buffee.
 * Colors are intentionally omitted - define them at point of usage.
 *
 * Required color properties to define:
 *   .buffee { background-color, color }
 *   .buffee .buffee-layer-selection > div { background-color }
 *   .buffee .buffee-cursor { background-color }
 *   .buffee .buffee-status { background-color, color } (optional)
 */

/* Main container */
.buffee {
  position: relative;
  font-family: monospace;
  display: flex;
  flex-direction: column;
  --buffee-cell: 24px;
  --buffee-padding: 4px;
  --buffee-gutter-digits-padding: 1ch;
  --buffee-gutter-digits-initial: 2ch;
  --buffee-z-selection: 100;
  --buffee-z-text: 200;
  --buffee-z-cursor: 300;
  --buffee-z-elements: 400;
  --buffee-z-status: 600;
}

/* Content area (gutter + lines) */
.buffee > .buffee-elements {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
  margin: 0;
}

/* Prevent text selection on editor chrome */
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Hidden clipboard bridge - must be selectable but invisible */
.buffee-clipboard-bridge {
  position: fixed;
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}

/* Lines container */
.buffee .buffee-lines {
  flex: 1;
  overflow: hidden;
  position: relative;
  margin: var(--buffee-padding);
  outline: none;
}

/* Line elements */
.buffee .buffee-lines pre::before {
  content: "\200B";
}
.buffee .buffee-lines pre {
  margin: 0;
  overflow: visible;
  white-space: pre;
}

/* Selection overlay */
.buffee .buffee-layer-selection > div {
  position: relative;
  display: block;
}

/* Cursor overlay */
.buffee .buffee-cursor {
  mix-blend-mode: exclusion;
  width: 1ch;
  position: absolute;
  z-index: var(--buffee-z-cursor);
}

/* Optional: Status bar */
.buffee .buffee-status {
  display: flex;
  justify-content: space-between;
  padding: var(--buffee-padding) var(--buffee-padding); /** refactor to css variable*/
  z-index: var(--buffee-z-status);
  white-space: nowrap;
  overflow: hidden;
  font-size: var(--buffee-cell);
}

.buffee .buffee-gutter {
  text-align: right; /* config */
  padding: var(--buffee-padding); 
  width: calc(var(--buffee-gutter-digits-initial) + var(--buffee-gutter-digits-padding));
}

.buffee .buffee-layer-text {
  position: relative;
  display: inline-block;
  min-width: 100%;
  padding-right: 2ch; /** config: right scroll buffer */
  z-index: var(--buffee-z-text);
}

.buffee .buffee-layer-selection {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through to elements below*/
  padding-right: 2ch; /** config: right scroll buffer */
  z-index: var(--buffee-z-selection);
}

.buffee .buffee-layer-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none; /* Allow clicks to pass through to elements below*/
  z-index: var(--buffee-z-elements);
}

.buffee .buffee-cursor, .buffee .buffee-layer-selection > div { height: var(--buffee-cell); }
.buffee .buffee-cursor, .buffee .buffee-gutter, .buffee .buffee-lines, .buffee .buffee-layer-selection > div {
  font-size: var(--buffee-cell); line-height: var(--buffee-cell);
}