:where(.lexxy-content){color:var(--lexxy-color-ink);h1,h2,h3,h4,h5,h6 {display: block; font-weight: bold; hyphens: auto; margin-block: 0 var(--lexxy-content-margin); overflow-wrap: break-word; text-wrap: balance;} h1 {font-size: 2rem;} h2 {font-size: 1.5rem;} h3 {font-size: 1.25rem;} h4 {font-size: 1rem;} h5 {font-size: .875rem;} h6 {font-size: .75rem;} p,ul,ol,dl,blockquote,figure,.attachment,.attachment-gallery {margin-block: 0 var(--lexxy-content-margin); position: relative; &:not(lexxy-editor &) {overflow-wrap: break-word; text-wrap: pretty;}} .lexxy-content__italic {font-style: italic;} .lexxy-content__bold {font-weight: bold;} .lexxy-content__strikethrough {text-decoration: line-through;} .lexxy-content__underline {text-decoration: underline;} mark,.lexxy-content__highlight {background-color: transparent; color: inherit;} blockquote {border-inline-start: .25em solid var(--lexxy-color-ink-lighter); font-style: italic; margin: var(--lexxy-content-margin) 0; padding: .5lh 2ch; p:last-child {margin-block-end: 0;}} p:empty {display: none;} a {color: var(--lexxy-color-link); text-decoration: underline;} img,video,embed,object {inline-size: auto; margin-inline: auto; min-block-size: 3em; max-block-size: 32rem; object-fit: contain; a:has(&) {display: inline-block;}} code,pre {background-color: var(--lexxy-color-ink-lightest); border-radius: var(--lexxy-radius); color: var(--lexxy-color-ink); font-family: var(--lexxy-font-mono); font-size: .9em; padding: .25ch .5ch; &:is(pre),&[data-language] {border-radius: var(--lexxy-radius); display: block; hyphens: none; margin-block: 0 var(--lexxy-content-margin); overflow-x: auto; padding: 1ch; tab-size: 2; text-wrap: nowrap; white-space: pre; word-break: break-word;}} ol,ul {margin-inline-start: calc(var(--lexxy-content-margin) * 1.5); padding: 0;} ul {list-style-type: disc;} ol {list-style-type: decimal;} li.lexxy-nested-listitem {list-style-type: none; ol,ul {margin-block-end: 0;}} hr {border: 0; border-block-end: 1px solid currentColor; inline-size: 20%; margin: calc(.5em + var(--lexxy-content-margin)) 0;} .horizontal-divider {margin: 0; padding: calc(.5em + var(--lexxy-content-margin)) 0; hr {margin: 0;}} *:has(+ .horizontal-divider) {margin-block-end: 0;} > :last-child {margin-block-end: 0;} .code-token__attr,.token.attr-name,.token.atrule,.token.attr,.token.keyword {color: var(--lexxy-color-code-token-att);} .code-token__property,.token.boolean,.token.constant,.token.number,.token.property,.token.symbol,.token.tag {color: var(--lexxy-color-code-token-property);} .code-token__selector,.token.attr-value,.token.builtin,.token.char,.token.inserted,.token.line,.token.selector,.token.string {color: var(--lexxy-color-code-token-selector);} .code-token__comment,.token.cdata,.token.comment,.token.doctype,.token.prolog {color: var(--lexxy-color-code-token-comment); font-style: italic;} .code-token__operator,.token.deleted,.token.entity,.token.operator,.token.url,code[data-language="diff"] .code-token__operator + .code-token__selector {color: var(--lexxy-color-code-token-operator);} .code-token__function,.token.class,.token.class-name,.token.function {color: var(--lexxy-color-code-token-function);} .code-token__variable,.token.important,.token.namespace,.token.regex,.token.variable {color: var(--lexxy-color-code-token-variable);} .code-token__punctuation,.token.punctuation {color: var(--lexxy-color-code-token-punctuation);} :where(.lexxy-content__table-wrapper) {margin: 0; margin-block: 1ch; overflow-x: auto;} table {border-collapse: collapse; border-spacing: 0; inline-size: calc(100% - .5ch); margin: .25ch; th,td {border: 1px solid var(--lexxy-color-ink-lighter); min-width: 5ch; max-width: 50ch; padding: 1ch; text-align: start; word-break: normal; *:last-child {margin-block-end: 0;} &.lexxy-content__table-cell--header {background-color: var(--lexxy-color-table-header-bg); font-weight: bold;} *:is(code,pre) {hyphens: auto; text-wrap: wrap; white-space: pre-wrap;}}} p:has(.attachment) {text-align: center;} .attachment { --lexxy-attachment-gap: .75ch; block-size: auto; box-sizing: border-box; border-radius: var(--lexxy-radius); display: table; inline-size: fit-content; margin-inline: auto; max-inline-size: 100%; min-inline-size: 10ch; padding: var(--lexxy-attachment-gap); position: relative; text-align: center; :where(progress) { inline-size: 100%; margin: auto; } } .attachment__caption {caption-side: bottom; color: var(--lexxy-color-text-subtle); display: table-caption; font-size: var(--lexxy-text-small);} .attachment__icon {aspect-ratio: 4/5; background-color: color-mix(var(--lexxy-attachment-icon-color),transparent 90%); block-size: 3lh; border: 2px solid var(--lexxy-attachment-icon-color); border-block-start-width: 1ch; border-radius: var(--lexxy-radius); box-sizing: border-box; color: var(--lexxy-attachment-icon-color); display: grid; font-size: var(--lexxy-text-small); font-weight: bold; inline-size: auto; place-content: center; text-transform: uppercase;} .attachment--preview {img,video {border-radius: var(--lexxy-radius); block-size: auto; display: block; margin-inline: auto; max-inline-size: 100%; user-select: none;} > a {display: block;}} .attachment--file { --lexxy-attachment-icon-color: var(--lexxy-color-text-subtle); align-items: center; display: flex; flex-wrap: wrap; gap: 0; inline-size: auto; .attachment__caption { display: grid; flex: 1; text-align: start; } .attachment__name { color: var(--lexxy-color-ink); font-weight: bold; } } .attachment--psd,.attachment--key,.attachment--sketch,.attachment--ai,.attachment--eps,.attachment--indd,.attachment--svg,.attachment--ppt,.attachment--pptx { --lexxy-attachment-icon-color: var(--lexxy-color-red); } .attachment--css,.attachment--php,.attachment--json,.attachment--htm,.attachment--html,.attachment--rb,.attachment--erb,.attachment--ts,.attachment--js { --lexxy-attachment-icon-color: var(--lexxy-color-purple); } .attachment--txt,.attachment--pages,.attachment--rtf,.attachment--md,.attachment--doc,.attachment--docx { --lexxy-attachment-icon-color: var(--lexxy-color-blue); } .attachment--csv,.attachment--numbers,.attachment--xls,.attachment--xlsx { --lexxy-attachment-icon-color: var(--lexxy-color-green); } .attachment-gallery {display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); .attachment {display: flex; flex-direction: column; gap: 1ch; inline-size: 100%;} &:has(> :nth-child(2):last-child),&:has(> :nth-child(4):last-child) {grid-template-columns: repeat(2,minmax(0,1fr));}} action-text-attachment[content-type^="application/vnd.actiontext"] { --lexxy-attachment-bg-color: transparent; --lexxy-attachment-image-size: 1em; --lexxy-attachment-text-color: currentColor; align-items: center; background: var(--lexxy-attachment-bg-color); border-radius: var(--lexxy-radius); box-shadow: -.25ch 0 0 var(--lexxy-attachment-bg-color), .5ch 0 0 var(--lexxy-attachment-bg-color); color: var(--lexxy-attachment-text-color); display: inline-flex; gap: .25ch; margin: 0; padding: 0; position: relative; white-space: normal; img { block-size: var(--lexxy-attachment-image-size); border-radius: 50%; inline-size: var(--lexxy-attachment-image-size); } &.node--selected { --lexxy-attachment-bg-color: var(--lexxy-color-accent-dark); --lexxy-attachment-text-color: var(--lexxy-color-ink-inverted); } } .horizontal-divider {margin: 0; margin-block-end: .5em; padding: 1.5em 0 .5em; hr {border: 0; border-block-end: 1px solid currentColor; inline-size: 20%; margin: 0;}}}:root{--lexxy-color-ink: oklch(20% 0 0);--lexxy-color-ink-medium: oklch(40% 0 0);--lexxy-color-ink-light: oklch(60% 0 0);--lexxy-color-ink-lighter: oklch(85% 0 0);--lexxy-color-ink-lightest: oklch(96% 0 0);--lexxy-color-ink-inverted: white;--lexxy-color-accent-dark: oklch(57% .19 260);--lexxy-color-accent-medium: oklch(75% .196 258);--lexxy-color-accent-light: oklch(88% .026 254);--lexxy-color-accent-lightest: oklch(92% .026 254);--lexxy-color-red: oklch(60% .15 27);--lexxy-color-green: oklch(60% .15 145);--lexxy-color-blue: oklch(66% .196 258);--lexxy-color-purple: oklch(60% .15 305);--lexxy-color-code-token-att: #d73a49;--lexxy-color-code-token-comment: #6a737d;--lexxy-color-code-token-function: #6f42c1;--lexxy-color-code-token-operator: #d73a49;--lexxy-color-code-token-property: #005cc5;--lexxy-color-code-token-punctuation: #24292e;--lexxy-color-code-token-selector: #22863a;--lexxy-color-code-token-variable: #e36209;--lexxy-color-canvas: var(--lexxy-color-ink-inverted);--lexxy-color-text: var(--lexxy-color-ink);--lexxy-color-text-subtle: var(--lexxy-color-ink-medium);--lexxy-color-link: var(--lexxy-color-accent-dark);--lexxy-color-selected: var(--lexxy-color-accent-lightest);--lexxy-color-selected-hover: var(--lexxy-color-accent-light);--lexxy-color-selected-dark: var(--lexxy-color-blue);--lexxy-color-selected-50: color-mix(in oklch, var(--lexxy-color-selected-dark) 50%, transparent);--lexxy-color-code-bg: var(--lexxy-color-ink-lightest);--highlight-1: rgb(136, 118, 38);--highlight-2: rgb(185, 94, 6);--highlight-3: rgb(207, 0, 0);--highlight-4: rgb(216, 28, 170);--highlight-5: rgb(144, 19, 254);--highlight-6: rgb(5, 98, 185);--highlight-7: rgb(17, 138, 15);--highlight-8: rgb(148, 82, 22);--highlight-9: rgb(102, 102, 102);--highlight-bg-1: rgba(229, 223, 6, .3);--highlight-bg-2: rgba(255, 185, 87, .3);--highlight-bg-3: rgba(255, 118, 118, .3);--highlight-bg-4: rgba(248, 137, 216, .3);--highlight-bg-5: rgba(190, 165, 255, .3);--highlight-bg-6: rgba(124, 192, 252, .3);--highlight-bg-7: rgba(140, 255, 129, .3);--highlight-bg-8: rgba(221, 170, 123, .3);--highlight-bg-9: rgba(200, 200, 200, .3);--lexxy-color-table-header-bg: var(--lexxy-color-ink-lightest);--lexxy-color-table-cell-border: var(--lexxy-color-ink-lighter);--lexxy-color-table-cell-selected: var(--lexxy-color-selected);--lexxy-color-table-cell-selected-border: var(--lexxy-color-selected-dark);--lexxy-color-table-cell-selected-bg: var(--lexxy-color-accent-lightest);--lexxy-color-table-cell-add: var(--lexxy-color-selected-50);--lexxy-color-table-cell-toggle: var(--lexxy-color-accent-lightest);--lexxy-color-table-cell-remove: oklch(60% .15 27 / .1);--lexxy-table-cell-add-size: 4px;--lexxy-font-base: system-ui, sans-serif;--lexxy-font-mono: ui-monospace, "Menlo", "Monaco", Consolas, monospace;--lexxy-text-small: .875rem;--lexxy-content-margin: 1rem;--lexxy-focus-ring-color: var(--lexxy-color-accent-dark);--lexxy-focus-ring-offset: -2px;--lexxy-focus-ring-size: 2px;--lexxy-toolbar-button-size: 2lh;--lexxy-radius: .5ch;--lexxy-shadow: 0 2px 8px rgba(0, 0, 0, .1);--lexxy-z-popup: 1000}:where(lexxy-editor){--lexxy-editor-padding: 1ch;--lexxy-editor-rows: 8lh;@supports (min-block-size: attr(rows lh)){--lexxy-editor-rows: attr(rows lh, 8lh)}--lexxy-toolbar-gap: 2px;--lexxy-toolbar-spacing: .5ch;border:1px solid var(--lexxy-color-ink-lighter);border-radius:calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap));background-color:var(--lexxy-color-canvas);display:block;overflow:visible;position:relative;transition:opacity .15s;p.provisional-paragraph {display: block; &.hidden {block-size: .5ch; margin: 0;}} input,button,summary {&:focus-visible {outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color); outline-offset: var(--lexxy-focus-ring-offset);}} summary {list-style: none; &::-webkit-details-marker {display: none;}} button,summary {-webkit-appearance: none; appearance: none; background: var(--lexxy-color-canvas); border: none; border-radius: var(--lexxy-radius); cursor: pointer; line-height: normal; font-size: inherit; inline-size: auto; padding: 0; @media(any-hover: hover) {&:hover:not([aria-disabled="true"]) {background: var(--lexxy-color-ink-lightest);}}} .node--selected {outline: var(--lexxy-focus-ring-size) solid var(--lexxy-focus-ring-color); outline-offset: var(--lexxy-focus-ring-offset);} table {th,td {position: relative; transition: all .1s ease-in-out; &:after {box-shadow: 0 0 0 0 transparent,0 0 0 0 transparent inset; content: ""; display: block; inset-block-start: -1px; inset-block-end: -1px; inset-inline-start: -1px; inset-inline-end: -1px; pointer-events: none; position: absolute; transition: box-shadow .1s ease-in-out; z-index: 2;} &.lexxy-content__table-cell--selected {background-color: var(--lexxy-color-table-cell-selected-bg);} &.lexxy-content__table-cell--focus {&:after {box-shadow: 0 0 0 0 transparent,0 0 0 2px var(--lexxy-color-table-cell-selected-border) inset;}} &.lexxy-content__table-cell--highlight {&[data-action="insert"] {&[data-child-type="row"] {&[data-direction="after"] {&:after {box-shadow: 0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add),0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add) inset;}} &[data-direction="before"] {&:after {box-shadow: 0 calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 var(--lexxy-color-table-cell-add),0 var(--lexxy-table-cell-add-size) 0 0 var(--lexxy-color-table-cell-add) inset;}}} &[data-child-type="column"] {&[data-direction="after"] {&:after {box-shadow: var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add),calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add) inset;}} &[data-direction="before"] {&:after {box-shadow: calc(-1 * var(--lexxy-table-cell-add-size) - 1px) 0 0 0 var(--lexxy-color-table-cell-add),var(--lexxy-table-cell-add-size) 0 0 0 var(--lexxy-color-table-cell-add) inset;}}}} &[data-action="delete"] {background-color: var(--lexxy-color-table-cell-remove); color: var(--lexxy-color-red); &:after {box-shadow: 0 0 0 0 transparent;}} &[data-action="toggle"] {background-color: var(--lexxy-color-table-cell-toggle); &:after {box-shadow: 0 0 0 0 transparent;}}}} tr.lexxy-content__table-cell--highlight[data-action="delete"] {th,td {background-color: var(--lexxy-color-table-cell-remove); color: var(--lexxy-color-red); &:after {box-shadow: 0 0 0 0 transparent;}}} &.lexxy-content__table--selection {::selection {background: transparent;}}} &:has(.lexxy-content__table-cell--selected) {lexxy-table-tools {visibility: hidden;}} [data-lexical-linebreak] {block-size: 0; display: contents; inline-size: 0;} action-text-attachment {cursor: pointer;} .attachment:hover:not(.node--selected) {outline: var(--lexxy-focus-ring-size) solid color-mix(in oklch,var(--lexxy-focus-ring-color) 30%,transparent); outline-offset: var(--lexxy-focus-ring-offset);} .attachment-gallery { --lexxy-attachment-gallery-columns: 3; --lexxy-attachment-gallery-gap: .4ch; --lexxy-focus-ring-offset: -6px; display: block; padding: 0; .attachment { box-sizing: border-box; display: inline-flex; flex-direction: column; gap: 0; inline-size: calc(100% / var(--lexxy-attachment-gallery-columns) - var(--lexxy-attachment-gallery-gap) * 2); margin: var(--lexxy-attachment-gallery-gap); padding: 0; padding-block-end: var(--lexxy-attachment-gap); vertical-align: top; .attachment__container { display: block; margin: 0; padding: 1ch; padding-block-end: 0; } img { block-size: auto; box-sizing: border-box; inline-size: auto; margin: auto; max-block-size: 50rem; max-inline-size: 100%; object-fit: contain; } } &:has(> .attachment:nth-child(2):last-of-type), &:has(> .attachment:nth-child(4):last-of-type) { --lexxy-attachment-gallery-columns: 2; } } .attachment__caption {padding: 0 1ch; textarea {background: transparent; block-size: fit-content; border: 0; border-radius: var(--lexxy-radius); box-sizing: border-box; color: inherit; display: block; font-size: inherit; font-family: inherit; inline-size: 100%; max-inline-size: 100%; resize: none; text-align: center; padding: 1ch 0; &:focus {background: var(--lexxy-color-canvas); outline: 0;} &:placeholder-shown {overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} @supports (field-sizing: content) {field-sizing: content; inline-size: 100%;}}}}:where(.lexxy-editor--empty){.lexxy-editor__content:not(:has(ul,ol))::before {content: attr(placeholder); color: currentColor; cursor: text; opacity: .66; pointer-events: none; position: absolute; white-space: pre-line;}}:where(.lexxy-editor__content){min-block-size:var(--lexxy-editor-rows);outline:0;padding:var(--lexxy-editor-padding)}:where(.lexxy-editor--drag-over){background-color:var(--lexxy-color-selected);border-radius:var(--lexxy-radius);outline:2px dashed var(--lexxy-color-selected-dark)}:where([data-lexical-cursor]){animation:blink 1s infinite;block-size:1lh;border-inline-start:1.5px solid currentColor;line-height:inherit;margin-block:0 var(--lexxy-content-margin)}@keyframes blink{0%{opacity:1}60%{opacity:1}to{opacity:0}}:where(lexxy-toolbar){--lexxy-toolbar-icon-size: 1.125em;border-block-end:1px solid var(--lexxy-color-ink-lighter);color:currentColor;display:flex;font-size:inherit;gap:var(--lexxy-toolbar-gap);max-inline-size:100%;padding:2px;position:relative;&[data-attachments=false] button[name=upload]{display:none}.lexxy-editor__toolbar-button {aspect-ratio: 1; block-size: var(--lexxy-toolbar-button-size); border: 0; border-radius: var(--lexxy-radius); color: currentColor; display: grid; line-height: inherit; place-items: center; &:is(:active):not([aria-disabled="true"]),&[aria-pressed="true"] {background-color: var(--lexxy-color-selected); &:hover {background-color: var(--lexxy-color-selected-hover);}} &[aria-disabled="true"] {cursor: default; opacity: .3;} svg {-webkit-touch-callout: none; block-size: var(--lexxy-toolbar-icon-size); fill: currentColor; grid-area: 1/1; inline-size: var(--lexxy-toolbar-icon-size); user-select: none;} &.lexxy-editor__toolbar-group-end {position: relative; margin-inline-end: calc(var(--lexxy-toolbar-spacing) + 1px); &:after {background-color: var(--lexxy-color-ink-lighter); content: ""; display: block; width: 1px; height: 60%; inset-inline-end: calc(-1 * var(--lexxy-toolbar-spacing)); inset-block-start: 20%; position: absolute; pointer-events: none;}}} .lexxy-editor__toolbar-spacer {flex: 1;}}:where(.lexxy-editor__toolbar-dropdown){user-select:none;-webkit-user-select:none;summary ~ * {background-color: var(--lexxy-color-canvas); border: 2px solid var(--lexxy-color-selected-hover); border-radius: calc(var(--lexxy-radius) + var(--lexxy-toolbar-gap)); box-sizing: border-box; box-shadow: var(--lexxy-shadow); color: var(--lexxy-color-ink); display: flex; gap: var(--lexxy-toolbar-gap); margin: 0; padding: var(--lexxy-toolbar-spacing); position: absolute; z-index: 3;} &:is([open]) > .lexxy-editor__toolbar-button {background-color: var(--lexxy-color-selected-hover); border-end-end-radius: 0; border-end-start-radius: 0; &:hover {background-color: var(--lexxy-color-selected-hover);}} [overflowing] &:not(.lexxy-editor__toolbar-overflow) summary ~ * {inset-inline-end: var(--lexxy-toolbar-spacing); inset-inline-start: var(--lexxy-toolbar-spacing);} button {color: var(--lexxy-color-text); &:hover {opacity: .8;}} &.lexxy-editor__toolbar-overflow {display: none; justify-self: flex-end; z-index: 1; summary ~ * {border-start-end-radius: 0; display: grid; grid-template-columns: repeat(4,1fr); inset-inline-end: var(--lexxy-toolbar-gap);}} lexxy-link-dropdown {font-size: var(--lexxy-text-small); inset-inline-start: var(--lexxy-toolbar-spacing); inset-inline-end: var(--lexxy-toolbar-spacing); form {display: flex; flex: 1; gap: var(--lexxy-toolbar-spacing); [overflowing] & {display: block; .lexxy-editor__toolbar-dropdown-actions {margin-block-start: var(--lexxy-toolbar-spacing);}}} .lexxy-editor__toolbar-dropdown-actions {display: flex; flex: 1; gap: var(--lexxy-toolbar-spacing);} input[type="url"] {background-color: var(--lexxy-color-canvas); border: 1px solid var(--lexxy-color-ink-lighter); border-radius: var(--lexxy-radius); color: var(--lexxy-color-text); block-size: var(--lexxy-toolbar-button-size); box-sizing: border-box; font-size: var(--lexxy-text-small); flex: 2; inline-size: 100%; line-height: normal; padding-block: 0; padding-inline: 1ch;} button {background-color: var(--lexxy-color-ink-lightest); inline-size: 100%; padding-inline: 2ch;} button[type="submit"] {background-color: var(--lexxy-color-accent-dark); color: var(--lexxy-color-ink-inverted); &:hover {background-color: var(--lexxy-color-accent-medium);}}} &:has(lexxy-highlight-dropdown) {position: relative; [overflowing] & {position: static;}} lexxy-highlight-dropdown { --max-inline-size: calc(var(--max-colors) * (var(--lexxy-toolbar-button-size) + var(--lexxy-toolbar-spacing))); border-start-start-radius: 0; display: flex; gap: var(--lexxy-toolbar-spacing); flex-direction: column; font-size: var(--lexxy-text-small); inset-inline-start: 0; max-inline-size: var(--max-inline-size); button { position: relative; } .lexxy-highlight-colors { display: grid; gap: var(--lexxy-toolbar-gap); grid-template-columns: repeat(auto-fill, minmax(var(--lexxy-toolbar-button-size), 1fr)); max-inline-size: var(--max-inline-size); button { block-size: unset; inline-size: 100%; &:after { align-self: center; content: "Aa"; display: inline-block; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; position: absolute; inset-block-start: 0; inset-block-end: 0; inset-inline-end: 0; inset-inline-start: 0; } &[aria-pressed="true"] { background-color: transparent; box-shadow: 0 0 0 2px currentColor inset; &:after { content: "\2713"; } } } } .lexxy-editor__toolbar-dropdown-reset { background-color: var(--lexxy-color-ink-lightest); &:is([disabled]) { display: none; } } }}:where(.lexxy-floating-controls){--button-size: 2.3lh;--table-tools-radius: calc(var(--lexxy-radius) * 1.5);color:var(--lexxy-color-ink-inverted);font-size:var(--lexxy-text-small);line-height:1;position:absolute;z-index:2;button,summary {align-items: center; background: transparent; block-size: var(--button-size); color: var(--lexxy-color-ink-inverted); display: flex; justify-content: center; line-height: 1; min-block-size: var(--button-size); min-inline-size: var(--button-size); user-select: none; -webkit-user-select: none; @media(any-hover: hover) {&:hover:not([aria-disabled="true"]),[open] &:is(summary) {background: var(--lexxy-color-ink-medium); svg {opacity: 1;}} &:focus-visible {outline-color: var(--lexxy-focus-ring-color);}}} button {aspect-ratio: 1 / 1; font-weight: bold; svg {block-size: 1.125em; inline-size: 1.125em; fill: currentColor; opacity: .8; padding: 1px;} span {display: none;}} summary {box-shadow: 0 0 0 1px inset rgba(128,128,128,.3); padding: 0 1.25ch;} .lexxy-floating-controls__group {background-color: var(--lexxy-color-ink); border-radius: var(--table-tools-radius); padding: .25ch;} &:is(lexxy-table-tools) {flex-direction: row; gap: .25ch; inset-inline-start: var(--lexxy-editor-padding); transform: translate(-50%,-120%); .lexxy-table-control {align-items: stretch; display: flex; flex-direction: row; gap: .25ch; white-space: nowrap; .lexxy-table-control__more-menu {gap: 0; position: relative; .lexxy-table-control__more-menu-details {background: var(--lexxy-color-ink); border-radius: var(--table-tools-radius); display: flex; flex-direction: column; gap: .25ch; inset-block-start: 110%; inset-inline-start: 50%; padding: .25ch; position: absolute; transform: translateX(-50%); button {aspect-ratio: unset; flex-direction: row; font-weight: normal; gap: 1ch; justify-content: flex-start; padding: .75ch; padding-inline-end: 1.5ch; white-space: nowrap; span {display: inline-block;} svg {block-size: 1.3lh; inline-size: 1.3lh; fill: currentColor;}}}} .lexxy-table-control__button--delete-table {align-items: center; block-size: auto; font-weight: normal; justify-content: center; svg {block-size: 1.125em; inline-size: 1.125em; min-block-size: 1.125em; min-inline-size: 1.125em;} span {align-items: center; background: var(--lexxy-color-ink); border-radius: var(--table-tools-radius); color: color-mix(in srgb,var(--lexxy-color-ink-inverted) 80%,transparent); display: flex; inset-inline-end: calc(var(--button-size) + 1ch); inset-block-start: 0; inset-block-end: 0; inset-inline-start: 0; justify-content: center; padding: .5ch 1ch; position: absolute; transition: all .2s ease-out; opacity: 0; pointer-events: none; white-space: nowrap;} &:hover {background-color: var(--lexxy-color-red); svg {color: var(--lexxy-color-ink-inverted);} span {opacity: 1;}}}}} &:is(lexxy-node-delete-button) {inset-block-start: .5ch; inset-inline-end: .5ch; opacity: 0; pointer-events: none; transition: opacity .1s ease-in-out; .node--selected & {opacity: 1; pointer-events: auto;} .lexxy-node-delete:hover {background-color: var(--lexxy-color-red);}} &:is(lexxy-code-language-picker) {inset-inline-end: var(--lexxy-editor-padding); select {-webkit-appearance: none; appearance: none; background-color: var(--lexxy-color-canvas); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23000'/%3E%3C/svg%3E"); background-position: center right 1ch; background-repeat: no-repeat; background-size: 1ch; block-size: 1.5lh; border: 1px solid var(--lexxy-color-ink-lighter); border-radius: var(--lexxy-radius); color: var(--lexxy-color-ink); font-family: var(--lexxy-font-base); font-size: var(--lexxy-text-small); font-weight: normal; margin: .5ch .5ch 0 -.5ch; padding: 0 2ch 0 1ch; text-align: start; @media (prefers-color-scheme: dark) {background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m12 19.5c-.7 0-1.3-.3-1.7-.8l-9.8-11.1c-.7-.8-.6-1.9.2-2.6.8-.6 1.9-.6 2.5.2l8.6 9.8c0 .1.2.1.4 0l8.6-9.8c.7-.8 1.8-.9 2.6-.2s.9 1.8.2 2.6l-9.8 11.1c-.4.5-1.1.8-1.7.8z' fill='%23fff'/%3E%3C/svg%3E");}}}}:where(.lexxy-prompt-menu){--lexxy-prompt-avatar-size: 24px;--lexxy-prompt-min-width: 20ch;--lexxy-prompt-padding: .5ch;background-color:var(--lexxy-color-canvas);border-radius:calc(var(--lexxy-prompt-padding) * 2);box-shadow:var(--lexxy-shadow);color:var(--lexxy-color-ink);font-family:var(--lexxy-font-base);font-size:var(--lexxy-text-small);list-style:none;margin:0;max-block-size:200px;min-inline-size:var(--lexxy-prompt-min-width);overflow:auto;padding:var(--lexxy-prompt-padding);visibility:hidden;z-index:var(--lexxy-z-popup)}:where(.lexxy-prompt-menu--visible){visibility:initial}:where(.lexxy-prompt-menu__item){align-items:center;border-radius:var(--lexxy-radius);cursor:pointer;display:flex;gap:var(--lexxy-prompt-padding);padding:var(--lexxy-prompt-padding);white-space:nowrap;&:hover{background-color:var(--lexxy-color-ink-lightest)}&[aria-selected]{background-color:var(--lexxy-color-selected)}img {block-size: var(--lexxy-prompt-avatar-size); border-radius: 50%; flex-shrink: 0; inline-size: var(--lexxy-prompt-avatar-size); margin: 0;} + & {margin-top: 2px;}}:where(.lexxy-prompt-menu__item--empty){color:var(--lexxy-color-ink-medium);padding:var(--lexxy-prompt-padding)}