@property st-global(--wsr-color-B10);
@property st-global(--wsr-color-B40);
@property st-global(--wsr-color-Y10);
@property st-global(--wsr-color-D80);

:global(td):has(> .root) {
  position: relative;
  overflow: visible;
  min-height: 24px;
}

.root {
  -st-states: editing, focused, selected, invalid, typeToEdit, showEditWhenFocused,
    growable,
    selectionTop, selectionBottom, selectionLeft, selectionRight,
    copiedTop, copiedBottom, copiedLeft, copiedRight;
  display: flex;
  align-items: center;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
  box-sizing: border-box;
  outline: none;
  cursor: default;
  user-select: none;
  background: var(--wsr-color-D80);
  border: 1px solid var(--wsr-color-B40);
}

.root:selected {
  background: rgba(56, 153, 236, 0.08);
}

.root:focused:not(:selected) {
  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
  z-index: 2;
}

.root:editing {
  background: var(--wsr-color-D80);
  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
  z-index: 3;
  user-select: auto;
  overflow: visible;
}

/* showEditWhenFocused cells (e.g. image) stay within their row bounds when
   editing — the EditComponent is always visible so no height expansion is needed. */
.root:editing:not(:showEditWhenFocused) {
  bottom: auto;
  min-height: 100%;
}

/* :growable showEditWhenFocused cells (e.g. multi-document) can wrap content
   past row height. Release the bottom anchor and lay an opaque D80 base under
   the :selected blue tint so the overflow area doesn't reveal adjacent rows.
   z-index lifts the overflow above neighboring cells. */
.root:focused:growable {
  background-color: var(--wsr-color-D80);
  background-image: linear-gradient(rgba(56, 153, 236, 0.08), rgba(56, 153, 236, 0.08));
  bottom: auto;
  min-height: 100%;
  z-index: 3;
}

/* showEditWhenFocused cells: when a button inside has focus (inner focus),
   show the editing ring and allow button focus rings to render unclipped.
   isEditing is false here, so we use data-inner-focused set by the EditComponent. */
.root:has([data-inner-focused]) {
  overflow: visible;
  z-index: 3;
  box-shadow: inset 0 0 0 2px var(--wsr-color-B10);
}

.root:selectionTop:not(:editing) { border-top: 2px solid var(--wsr-color-B10); }
.root:selectionBottom:not(:editing) { border-bottom: 2px solid var(--wsr-color-B10); }
.root:selectionLeft:not(:editing) { border-left: 2px solid var(--wsr-color-B10); }
.root:selectionRight:not(:editing) { border-right: 2px solid var(--wsr-color-B10); }

/* Type-to-edit cells (text, number, url, email): the keystroke lands directly in
   the input, so keeping the selection border alongside the editing shadow is
   intentional — it communicates "this cell is selected and being typed into". */
.root:selectionTop:editing:typeToEdit { border-top: 2px solid var(--wsr-color-B10); }
.root:selectionBottom:editing:typeToEdit { border-bottom: 2px solid var(--wsr-color-B10); }
.root:selectionLeft:editing:typeToEdit { border-left: 2px solid var(--wsr-color-B10); }
.root:selectionRight:editing:typeToEdit { border-right: 2px solid var(--wsr-color-B10); }

.root:invalid:not(:editing) {
  background: rgba(229, 0, 77, 0.06);
}

.root:copiedTop:not(:selectionTop) { border-top: 2px dashed var(--wsr-color-B10); }
.root:copiedBottom:not(:selectionBottom) { border-bottom: 2px dashed var(--wsr-color-B10); }
.root:copiedLeft:not(:selectionLeft) { border-left: 2px dashed var(--wsr-color-B10); }
.root:copiedRight:not(:selectionRight) { border-right: 2px dashed var(--wsr-color-B10); }

.validationIndicator {
  flex-shrink: 0;
  margin-left: 12px;
  margin-right: 6px;
  color: var(--wsr-color-Y10);
}