/* JSON readonly control — carries the readonly-textarea classes (tc-input-textarea tc-readonly …),
 * so it inherits that control's box. This class only adds code presentation: preserve indentation,
 * force LTR (JSON is code), monospace. */
.tc-input-json {
	white-space: pre-wrap;
	word-break: break-word;
	direction: ltr;
	text-align: left;
	font-family: monospace;
}


/* Expandable readonly textarea / JSON — cap the height and scroll; an expand/collapse toggle
 * (TCExpandableReadonlyControlView, themis-control-text.js) is revealed only when the content
 * overflows the cap. The 300px cap is the single source of truth — JS measures live geometry
 * (scrollHeight > clientHeight), not this number. The leading .tc-control raises specificity to
 * out-rank div.tc-input.tc-input-text { overflow: hidden } (themis-base.css). */
.tc-control.tc-control-textarea-readonly .tc-control-value,
.tc-control.tc-control-json-readonly .tc-control-value {
	max-height: 300px;
	overflow-y: auto;
}

.tc-control.tc-control-readonly-expanded .tc-control-value {
	max-height: none;
}

/* Toggle buttons — floated over the box (the .tc-control wrapper is already position:relative),
 * revealed only when the content overflows (mirrors the mobile table row). App is RTL; the cluster
 * sits on the inline-start edge via .tc-root-rtl / .tc-root-ltr. The light background keeps the icon
 * legible over the content it floats above. */
.tc-control .tc-control-readonly-expand,
.tc-control .tc-control-readonly-collapse {
	display: none;
	position: absolute;
	top: 0;
	background: rgba(255, 255, 255, 0.85);
	border-radius: 4px;
}

.tc-root-rtl .tc-control .tc-control-readonly-expand,
.tc-root-rtl .tc-control .tc-control-readonly-collapse {
	right: 20px;
}

.tc-root-ltr .tc-control .tc-control-readonly-expand,
.tc-root-ltr .tc-control .tc-control-readonly-collapse {
	left: 20px;
}

/* a second collapse pinned to the bottom edge, so a long expanded value can be collapsed
 * without scrolling back to the top */
.tc-control .tc-control-readonly-collapse-bottom {
	top: auto;
	bottom: 0;
}

.tc-control.tc-control-readonly-overflowing .tc-control-readonly-expand {
	display: inline-block;
}

.tc-control.tc-control-readonly-overflowing.tc-control-readonly-expanded .tc-control-readonly-expand {
	display: none;
}

.tc-control.tc-control-readonly-overflowing.tc-control-readonly-expanded .tc-control-readonly-collapse {
	display: inline-block;
}

/* While the pointer is over the value box, fade the floated buttons so the content behind them
 * stays readable. The buttons sit on top (later siblings), so the pointer over a button does not
 * hover the value div — keeping that button solid and easy to click. */
.tc-control.tc-control-textarea-readonly .tc-control-value:hover ~ .tc-control-readonly-expand,
.tc-control.tc-control-textarea-readonly .tc-control-value:hover ~ .tc-control-readonly-collapse,
.tc-control.tc-control-json-readonly .tc-control-value:hover ~ .tc-control-readonly-expand,
.tc-control.tc-control-json-readonly .tc-control-value:hover ~ .tc-control-readonly-collapse {
	opacity: 0.2;
	background: transparent;
}