@vscode/markdown-editor 0.0.2-7 → 0.0.2-71

package/src/view/editor.css

@@ -1,3 +1,6 @@
+@import '@vscode/codicons/dist/codicon.css';
+@import '../contrib/find/find.css';
+
 /*
  * Base editor styles — ABSOLUTE MINIMUM.
  *
@@ -12,14 +15,34 @@
  * theme files (`themes/default.css`, `themes/github.css`) applied via the
  * `classNames` editor option; those selectors only ever match inside their
  * own theme class and never style the global scope.
+ *
+ * NO `--vscode-*` variables may be referenced here. This base file must stay
+ * theme-agnostic and know nothing about VS Code. Where a value needs to vary
+ * per theme, expose a local `--md-*` custom property WITH a sensible literal
+ * fallback (e.g. `var(--md-cursor-background, #000)`) and let a theme file set
+ * it. Only the `themes/vscode-*.css` themes are permitted to read `--vscode-*`
+ * variables and map them onto these `--md-*` properties.
  */
 
 .md-editor {
+	display: flow-root;
 	outline: none;
 	/* The editor paints its own cursor (`.md-cursor`); hide the native caret. */
 	caret-color: transparent;
 }
 
+.md-editor-a11y-status {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}
+
 /*
  * The transient empty paragraph — the blank line conjured by pressing Enter at
  * the end of a paragraph (see `PendingParagraph` in the model). It is not part
@@ -35,18 +58,58 @@
  * overlays, which position themselves relative to this box, so it is the
  * positioning context. In limited-width mode the editor sets an inline
  * `max-width` here and the auto inline margins center it within the full-width
- * `.md-editor`.
+ * `.md-editor`. The block-start padding keeps every document clear of the top
+ * edge, independent of the first block's theme margins.
  */
 .md-editor-content {
+	--md-editor-content-inline-start-padding: 48px;
+	--md-readonly-toggle-width: 58px;
+	--md-readonly-toggle-height: 32px;
+	/* Leaves 16px of optical separation beyond the active block's 8px outset glow. */
+	--md-readonly-toggle-gap: 24px;
+	--md-readonly-toggle-inset: 4px;
+	--md-editor-content-inline-end-padding: var(--md-editor-content-inline-start-padding);
 	position: relative;
 	margin-inline: auto;
-	padding: 48px;
+	padding-block: 24px 0;
+	padding-inline: var(--md-editor-content-inline-start-padding) var(--md-editor-content-inline-end-padding);
+}
+
+.md-editor-content-with-readonly-toggle {
+	--md-editor-content-inline-end-padding: calc(var(--md-readonly-toggle-width) + var(--md-readonly-toggle-gap) + var(--md-readonly-toggle-inset));
+}
+
+.md-editor-content-with-readonly-toggle>.md-document :is(.md-heading, .md-paragraph) {
+	overflow-wrap: anywhere;
 }
 
 .md-block-active {
-	background: #f8f8f8;
+	background: var(--md-block-active-background, #f8f8f8);
 	border-radius: 4px;
-	box-shadow: 0 0 0 8px #f8f8f8;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
+}
+
+/*
+ * The whole-empty-document case. Markdown has no empty-paragraph node, so a
+ * document with no content parses to a single empty paragraph (see
+ * `_ensureBlocks` in the parser) which renders as a childless `<p>` of zero
+ * height. Give it one line's height so the editor presents an intentional,
+ * clickable empty editing surface — and so typing the first character causes no
+ * layout shift (a filled line is also one `lh` tall).
+ */
+.md-paragraph:empty {
+	min-height: 1lh;
+}
+
+/*
+ * ...and never paint the active-block card over that zero-content line: with no
+ * text to size it, the card's background + 8px box-shadow glow would show up as
+ * a stray gray bar. The two extra classes outrank the base `.md-block-active`
+ * rule above in every theme (themes only remap `--md-block-active-background`).
+ */
+.md-paragraph:empty.md-block-active {
+	background: transparent;
+	box-shadow: none;
 }
 
 /*
@@ -60,6 +123,7 @@
 .md-block-active a {
 	cursor: inherit;
 }
+
 .md-editor.md-mod-down .md-block-active a[href] {
 	cursor: pointer;
 }
@@ -74,6 +138,7 @@
 .md-editor a[href]:hover {
 	text-decoration: underline;
 }
+
 .md-editor:not(.md-mod-down) .md-block-active a[href]:hover {
 	text-decoration: none;
 }
@@ -87,7 +152,13 @@
 .md-marker {
 	color: #999;
 	font-family: 'Cascadia Code', 'Fira Code', monospace;
-	font-size: 0.85em;
+	/*
+	 * Revealed source is painted a step smaller than body text. Published as a
+	 * custom property because a gutter marker has to undo it to size its box
+	 * against the body line box — see `.md-list-item-active>.md-marker-listItemMarker`.
+	 */
+	--md-marker-font-scale: 0.85;
+	font-size: calc(1em * var(--md-marker-font-scale));
 	display: inline;
 	overflow: hidden;
 	max-width: 100px;
@@ -113,6 +184,69 @@
 	white-space: pre-wrap;
 }
 
+/*
+ * An unhandled block: a construct the parser does not model (setext heading,
+ * an extension token). Its raw source is shown verbatim,
+ * styled like a code block but visibly flagged as "not understood" by a dashed
+ * warning border, so the content is preserved and editable rather than silently
+ * dropped.
+ *
+ * The wrapper is the non-scrolling box (border + block spacing); the inner
+ * `.md-unhandled-scroll` <pre> is the horizontal scroller.
+ */
+.md-unhandled-block {
+	margin: 0.5em 0;
+	border: 1px dashed #d0a000;
+	border-radius: 4px;
+}
+
+/*
+ * Inner scroller. Beats the per-theme `.md-theme-* .md-code-block` box rules
+ * (same class count) via the extra `pre` type selector: no margin/border of its
+ * own (those live on the wrapper).
+ */
+pre.md-unhandled-scroll.md-code-block {
+	margin: 0;
+	border: 0;
+	border-radius: 4px;
+}
+
+/*
+ * Complete block HTML comments are authoring metadata, not unsupported-syntax
+ * warnings. Keep them source-identifiable but quiet while reading, and reveal
+ * their exact whitespace when the block becomes active.
+ */
+.md-html-comment {
+	margin: 0.125em 0 0.25em;
+	padding: 0.125em 0;
+	overflow: hidden;
+	color: var(--md-html-comment-foreground, #6e7378);
+	font-family: var(--md-html-comment-font-family, 'Cascadia Code', 'Fira Code', monospace);
+	font-size: 0.85em;
+	line-height: 1.5;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	transition: color 80ms ease-out;
+}
+
+.md-html-comment:not(.md-html-comment-source):hover {
+	color: var(--md-html-comment-hover-foreground, #45494e);
+}
+
+.md-html-comment-source {
+	overflow: visible;
+	text-overflow: clip;
+	white-space: pre-wrap;
+}
+
+.md-html-comment-syntax {
+	opacity: 0.6;
+}
+
+.md-html-comment-source .md-html-comment-syntax {
+	opacity: 1;
+}
+
 /*
  * Visible whitespace indicators, shown only in the active/source view. The real
  * whitespace character stays in the DOM (so source ↔ DOM mapping and selection
@@ -212,15 +346,61 @@
 }
 
 /*
- * Glue (table cell pipes, the task `[x] ` source, source padding) keeps its
- * inline footprint when hidden so column widths and the checkbox gutter stay
- * identical between active and inactive states.
+ * Glue normally keeps its inline footprint when hidden so source padding and
+ * widget gutters stay identical between active and inactive states. Hidden
+ * table-cell glue is the exception below: leaving it in inline flow lets its
+ * invisible spaces wrap around long cell content.
  */
 .md-glue-hidden {
 	display: inline;
 	visibility: hidden;
 }
 
+/*
+ * Inactive table pipes stay in the DOM/source tree, but leave layout and
+ * hit-testing entirely. Keeping an invisible rect either in the content flow or
+ * over the cell padding can create phantom lines or steal clicks from visible
+ * text. Hidden source offsets therefore collapse to the neighboring semantic
+ * seam, matching other display-none markers. Visible pipes retain the per-theme
+ * active/source layout.
+ */
+.md-table td>.md-glue-tableCellGlue.md-glue-hidden {
+	display: none;
+}
+
+/*
+ * Active table: take each cell's TRAILING structural glue (the source space
+ * after the cell text, and — via the per-theme `right: 0` rule — the last
+ * column's closing `|`) out of the cell's inline flow. Left in flow, that glue
+ * wraps below long cell content (the same wrapping the hidden-glue note above
+ * describes), which makes the cell two lines tall: the browser's default
+ * `vertical-align: middle` then re-centres the other cells' single-line content
+ * in Y, their runs merge into one oversized VisualLine, and the caret — sized
+ * directly from that line box — grows far past the line height while the
+ * visible pipes drift apart row-to-row. Positioning the trailing glue
+ * absolutely removes it from wrapping flow while keeping its real client rects
+ * at the static (content-line) position, so caret placement, hit-testing,
+ * source mapping and injectivity are unchanged. `top`/`bottom: auto` keep it on
+ * that content line rather than the cell's top edge. This mirrors the inactive
+ * `display: none` above; the leading `| ` glue deliberately stays in flow (a
+ * relative glyph shift, per theme) so first-text X is preserved.
+ *
+ * `:not(:first-child)` restricts this to a genuine trailing glue: a non-empty
+ * cell emits leading + trailing glue, but an EMPTY cell parses to a single glue
+ * node that is simultaneously first and last child. That lone node is the
+ * cell's leading pipe, so it must stay in flow like every other leading pipe;
+ * excluding it keeps empty cells identical to their previous (base) behaviour.
+ */
+.md-table.md-block-active td {
+	position: relative;
+}
+
+.md-table.md-block-active td>.md-glue-tableCellGlue:last-child:not(:first-child) {
+	position: absolute;
+	top: auto;
+	bottom: auto;
+}
+
 /*
  * Inter-block glue: the run of blank lines between two top-level blocks. It is
  * mounted as the last inline child of the block that precedes it, so it sits at
@@ -257,15 +437,6 @@
 	visibility: hidden;
 }
 
-/*
- * Table cell-glue pipes (`| `) keep their inline footprint when hidden so the
- * column widths stay identical active and inactive.
- */
-.md-marker-tableCellGlue.md-marker-hidden {
-	display: inline;
-	visibility: hidden;
-}
-
 /*
  * The code-block fences (```lang / ```) each sit on their own source line. When
  * hidden they keep their vertical footprint (visibility hidden, not display
@@ -300,6 +471,48 @@
 	height: 16px;
 }
 
+/*
+ * A wide table scrolls horizontally inside its wrapper (the block box) instead
+ * of overflowing the page and scrolling the editor's fixed left gutter away.
+ * The wrapper is the scroll viewport the selection/caret clipping measures (see
+ * `BlockViewNode.scrollElement` / `blockViewportClip`); the inner `<table>`
+ * keeps `width: auto` (theme-defined) so it sizes to its content and overflows.
+ *
+ * `width: fit-content` keeps the wrapper hugging the table's intrinsic width, so
+ * a narrow table — and the active-block glow redirected onto the wrapper below —
+ * stays as wide as the table (unchanged from before this wrapper existed).
+ * `max-width: 100%` caps it at the content column, past which the table
+ * overflows and scrolls locally. This is the standard responsive-table pattern
+ * (cf. GitHub's own `width: max-content; max-width: 100%`).
+ */
+.md-table-wrapper {
+	overflow-x: auto;
+	width: fit-content;
+	max-width: 100%;
+}
+
+/*
+ * The active-block highlight is an *outset* glow (`box-shadow: 0 0 0 8px`).
+ * Making the wrapper a scroll box (`overflow-x: auto`, which also forces
+ * `overflow-y: auto`) clips descendant paint to its padding box, so the glow on
+ * the inner active `<table>` would be cut off (the table has no horizontal
+ * margin to give the shadow room). Render the generic active chrome on the
+ * wrapper instead — a scroll box's own shadow is never clipped by its own
+ * overflow, exactly like a code block carries the glow on its own scroller —
+ * and drop it from the table, which keeps `md-block-active` purely for the
+ * per-theme source-pipe styling.
+ */
+.md-table-wrapper:has(> .md-table.md-block-active) {
+	background: var(--md-block-active-background, #f8f8f8);
+	border-radius: 4px;
+	box-shadow: 0 0 0 8px var(--md-block-active-background, #f8f8f8);
+}
+
+.md-table.md-block-active {
+	background: none;
+	box-shadow: none;
+}
+
 .md-selection-layer {
 	position: absolute;
 	top: 0;
@@ -415,9 +628,26 @@
 
 .md-blockquote>.md-marker-blockQuoteMarker {
 	position: absolute;
-	right: calc(100% - var(--md-blockquote-pad, 0px));
+	right: calc(100% - var(--md-blockquote-pad, 0px) - 1ch);
 	top: auto;
+	/*
+	 * Reserve the optional-space column so adding it cannot move the `>` glyph,
+	 * then shift and scale every active quote marker consistently to leave a
+	 * virtual gap before body text without consuming source width. These tuned
+	 * properties are shared by ordinary and marker-only quote lines.
+	 */
+	--md-blockquote-marker-shift: -0.18ch;
+	--md-blockquote-marker-scale: 0.9;
+	display: inline-flex;
+	min-width: 2ch;
+	font-size: inherit;
+	line-height: inherit;
+	height: 1lh;
+	align-items: center;
+	text-align: left;
 	white-space: pre;
+	transform: translateX(var(--md-blockquote-marker-shift)) scale(var(--md-blockquote-marker-scale));
+	transform-origin: left center;
 }
 
 /* Inactive: gone entirely (the gutter is empty, the text stays put). */
@@ -425,6 +655,16 @@
 	display: none;
 }
 
+/* Collapsed block-gap newlines still need one flow box per marker-only line. */
+.md-blockquote-line-anchor {
+	display: block;
+}
+
+/* A trailing marker-only source line follows the preceding quoted line directly. */
+.md-blockquote-marker-only-line>.md-paragraph:last-of-type {
+	margin-bottom: 0;
+}
+
 /* Code/math blocks scroll horizontally; their look is theme-defined. */
 .md-code-block {
 	overflow-x: auto;
@@ -457,19 +697,50 @@
  * before the marker. Gutter-positioning keeps the marker out of the inline
  * flow so toggling it never shifts the item's text horizontally.
  *
- * `line-height: inherit` makes the marker share the item's line box (its own
- * `.md-marker` rule shrinks it to `line-height: 1`, which floats the glyph to
- * the top of the taller text line); matching the line box vertically centres
- * the `-` with the rendered text.
+ * Vertical centring makes the marker box exactly the item's first line box and
+ * centres the glyph in it. Getting that box right is the whole trick: an
+ * inherited UNITLESS line-height is re-resolved against the element's own
+ * font-size, so a marker shrunk by `--md-marker-font-scale` also gets a
+ * proportionally shorter line box which, pinned at `top: 0`, floats the glyph
+ * above the text. Dividing `1lh` by that same scale cancels the shrink exactly,
+ * without touching the painted size and without a `transform` (which would
+ * shrink the box the caret geometry is measured from).
  */
 .md-list-item-active>.md-marker-listItemMarker {
 	position: absolute;
 	right: 100%;
 	top: 0;
 	line-height: inherit;
+	height: calc(1lh / var(--md-marker-font-scale));
+	display: inline-flex;
+	align-items: center;
+	justify-content: flex-end;
 	white-space: pre;
 }
 
+/*
+ * `display: inline-flex` above outranks the plain `.md-marker-hidden`
+ * (`display: none`), so — exactly as for headings — re-hide the marker here for
+ * the states that ask for it, otherwise the bullet could never be hidden.
+ */
+.md-list-item-active>.md-marker-listItemMarker.md-marker-hidden {
+	display: none;
+}
+
+/*
+ * An inactive ordered item uses the browser's native `::marker`. Match its
+ * typography when revealing the source marker so switching the active item
+ * does not change the number's width or horizontal position: an ordered marker
+ * opts out of the muted size step entirely, which also makes the `1lh`
+ * compensation above a no-op for it. Keep unordered source markers in the
+ * standard muted monospace source style.
+ */
+ol.md-list>.md-list-item-active>.md-marker-listItemMarker,
+ol.md-list>.md-list-item-active>.md-list-gutter>.md-marker-listItemMarker {
+	font-family: inherit;
+	--md-marker-font-scale: 1;
+}
+
 /*
  * A nested item's source indentation precedes its bullet (`␣␣- text`). The
  * indent glue and the bullet are mounted together in this gutter span, which is
@@ -502,6 +773,25 @@
 	flex: 0 0 auto;
 }
 
+/*
+ * A NESTED item's bullet is a flex child of the gutter, so the direct-child
+ * rule above cannot reach it and it would otherwise stretch to the gutter's
+ * full height with its glyph parked at the top. Centring is therefore done by
+ * the gutter itself: it is statically positioned (hence aligned to the item's
+ * first line), so making it one line box tall and centring its children puts
+ * the bullet and the indentation dots on that line.
+ *
+ * The gutter carries body typography, so its `1lh` needs no compensation — and
+ * the bullet inside keeps its own muted `font-size`, which is exactly what the
+ * shrink-to-fit gutter reserves. Shrinking the bullet visually instead would
+ * make the gutter reserve more width than the bullet paints and slide the whole
+ * indentation column left.
+ */
+.md-list-item-active>.md-list-gutter {
+	height: 1lh;
+	align-items: center;
+}
+
 
 /*
  * Re-attributed source indentation (the spaces after a line break that precede
@@ -514,6 +804,16 @@
 	white-space: pre;
 }
 
+/*
+ * A continuation-line indent inside a paragraph is source-only padding. When
+ * inactive, the preceding soft-break newline already collapses to the single
+ * rendered space Markdown requires; retaining the hidden indent would add the
+ * tab/space run's width on top of it.
+ */
+.md-paragraph>.md-glue-indent.md-glue-hidden {
+	display: none;
+}
+
 /*
  * A loose list item's later block (its second paragraph etc.) owns the source
  * continuation indent that precedes it as its `leadingTrivia`. Like a nested
@@ -579,6 +879,7 @@
 	position: absolute;
 	left: 0;
 	top: 0.25em;
+	z-index: 1;
 	cursor: pointer;
 	transition: background-color 0.15s ease, border-color 0.15s ease;
 }
@@ -591,8 +892,8 @@
 .md-checkbox:checked::after {
 	content: '';
 	position: absolute;
-	left: 3px;
-	top: 0px;
+	left: 2.5px;
+	top: -1px;
 	width: 5px;
 	height: 9px;
 	border: solid white;
@@ -617,11 +918,43 @@
 .md-cursor {
 	position: absolute;
 	width: 2px;
-	background: #000;
+	background: var(--md-cursor-background, #000);
 	pointer-events: none;
+}
+
+/*
+ * The painted caret is only shown while the editor is genuinely focused — focus
+ * rests inside it and its window is focused, mirrored onto the root as
+ * `.md-focused`. When unfocused, hide the caret element but keep its layout box
+ * (so caret geometry, selection and comment anchoring are unchanged) and stop
+ * the blink. Adding the animation on focus restarts it from 0% (a solid caret).
+ */
+.md-editor:not(.md-focused) .md-cursor {
+	visibility: hidden;
+}
+
+.md-editor.md-focused .md-cursor {
 	animation: md-cursor-blink 1s step-end infinite;
 }
 
+/*
+ * Read-only mode retains the logical caret for selection and comment anchoring.
+ * Hide only its painted element so unlocking can restore it in place.
+ */
+.md-editor.md-readonly .md-cursor {
+	visibility: hidden;
+}
+
+.md-editor.md-readonly-editing-attempt {
+	animation: md-readonly-editing-attempt 300ms ease-out;
+}
+
+@keyframes md-readonly-editing-attempt {
+	50% {
+		box-shadow: inset 0 0 0 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	}
+}
+
 @keyframes md-cursor-blink {
 
 	0%,
@@ -632,4 +965,201 @@
 	50% {
 		opacity: 0;
 	}
+}
+
+/*
+ * Edit / read-only lock toggle.
+ *
+ * The asymmetric content padding reserves a real rail for the control:
+ * button width + gap + edge inset. The zero-height sticky host spans the
+ * document column and that rail, keeping the button beside (never over) the
+ * rendered document as it scrolls. Colors use local `--md-readonly-*` custom
+ * properties with literal fallbacks so this base file stays theme-agnostic
+ * (themes may override them).
+ */
+.md-readonly-toggle-host {
+	position: sticky;
+	top: 0;
+	width: calc(100% + var(--md-editor-content-inline-end-padding));
+	height: 0;
+	z-index: 10;
+	pointer-events: none;
+}
+
+.md-readonly-toggle {
+	position: absolute;
+	top: 4px;
+	right: var(--md-readonly-toggle-inset);
+	pointer-events: auto;
+	display: inline-grid;
+	grid-template-columns: repeat(2, 24px);
+	align-items: center;
+	justify-items: center;
+	gap: 2px;
+	box-sizing: border-box;
+	width: var(--md-readonly-toggle-width);
+	height: var(--md-readonly-toggle-height);
+	padding: 3px;
+	overflow: hidden;
+	direction: ltr;
+	appearance: none;
+	border-radius: 999px;
+	border: 1px solid var(--md-readonly-border, #b8b8b8);
+	background: var(--md-readonly-background, #f3f3f3);
+	color: var(--md-readonly-foreground, #444444);
+	font-size: 16px;
+	line-height: 1;
+	cursor: pointer;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.08);
+	transition: background-color 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
+}
+
+/*
+ * Below this width there is not enough document column for the side rail to be
+ * useful. Give the host its own row and stop it from sticking, so neither long
+ * unbreakable content nor later content scrolled through the viewport can ever
+ * pass underneath the button.
+ */
+.md-editor-narrow .md-readonly-toggle-host {
+	position: relative;
+	height: calc(var(--md-readonly-toggle-height) + var(--md-readonly-toggle-inset) + var(--md-readonly-toggle-inset));
+}
+
+.md-readonly-toggle::after {
+	content: '';
+	position: absolute;
+	z-index: 2;
+	top: -8px;
+	bottom: -8px;
+	left: -30px;
+	width: 24px;
+	background: linear-gradient(90deg,
+			transparent,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 24%,
+			var(--md-readonly-shine, #ffffff) 50%,
+			var(--md-readonly-shine-edge, rgba(255, 255, 255, 0.16)) 76%,
+			transparent);
+	box-shadow: 0 0 8px 2px var(--md-readonly-shine-glow, rgba(255, 255, 255, 0.58));
+	opacity: 0;
+	pointer-events: none;
+	transform: skewX(-20deg);
+}
+
+.md-readonly-toggle.md-readonly-toggle-shine::after {
+	animation: md-readonly-toggle-shine 2s linear;
+	will-change: transform, opacity;
+}
+
+@keyframes md-readonly-toggle-shine {
+	0% {
+		opacity: 0;
+		transform: translateX(0) skewX(-20deg);
+	}
+
+	12%,
+	88% {
+		opacity: 1;
+	}
+
+	100% {
+		opacity: 0;
+		transform: translateX(122px) skewX(-20deg);
+	}
+}
+
+.md-readonly-toggle:hover {
+	border-color: var(--md-readonly-border-hover, #8d8d8d);
+	background: var(--md-readonly-background-hover, #e9e9e9);
+	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.1);
+}
+
+.md-readonly-toggle:focus-visible {
+	outline: 2px solid var(--md-readonly-accent, #4c8bf5);
+	outline-offset: 1px;
+}
+
+.md-readonly-toggle .md-readonly-toggle-indicator {
+	position: absolute;
+	top: 50%;
+	left: 3px;
+	width: 24px;
+	height: 24px;
+	border-radius: 50%;
+	background: var(--md-readonly-accent, #4c8bf5);
+	box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
+	transform: translate(26px, -50%);
+	transition: background-color 0.12s ease, transform 0.16s ease;
+}
+
+.md-readonly-toggle .md-readonly-toggle-icon {
+	position: relative;
+	z-index: 1;
+	display: block;
+	width: 16px;
+	height: 16px;
+	color: var(--md-readonly-foreground, #444444);
+	opacity: 0.62;
+	pointer-events: none;
+	transition: color 0.12s ease, opacity 0.12s ease;
+}
+
+.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+	color: var(--md-readonly-accent-foreground, #ffffff);
+	opacity: 1;
+}
+
+.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-indicator {
+	transform: translate(0, -50%);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+	.md-editor.md-readonly-editing-attempt,
+	.md-readonly-toggle,
+	.md-readonly-toggle .md-readonly-toggle-indicator,
+	.md-readonly-toggle .md-readonly-toggle-icon,
+	.md-readonly-toggle.md-readonly-toggle-shine::after {
+		animation: none;
+		transition: none;
+	}
+}
+
+@media (forced-colors: active) {
+	.md-readonly-toggle {
+		forced-color-adjust: none;
+		border-color: ButtonText;
+		background: ButtonFace;
+		color: ButtonText;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle::after {
+		display: none;
+	}
+
+	.md-readonly-toggle:hover {
+		border-color: Highlight;
+		background: ButtonFace;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle:focus-visible {
+		outline-color: Highlight;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-indicator {
+		background: Highlight;
+		box-shadow: none;
+	}
+
+	.md-readonly-toggle .md-readonly-toggle-icon {
+		color: ButtonText;
+		opacity: 1;
+	}
+
+	.md-readonly-toggle:not(.md-readonly-toggle-locked) .md-readonly-toggle-icon-editing,
+	.md-readonly-toggle.md-readonly-toggle-locked .md-readonly-toggle-icon-locked {
+		color: HighlightText;
+	}
 }