[data-words] { --_words-gap: var(--words-gap-md); --_words-radius: var(--words-radius-md); --_words-content-px: var(--words-content-px-md); --_words-content-py: var(--words-content-py-md); --_words-content-min-block-size: var(--words-content-min-block-size-md); --_words-toolbar-px: var(--words-toolbar-px-md); --_words-toolbar-py: var(--words-toolbar-py-md); --_words-button-size: var(--words-button-size-md); --_words-font-size: var(--words-font-size-md); --_words-accent-solid: var(--words-color-primary-solid); --_words-accent-solid-hover: var(--words-color-primary-solid-hover); --_words-accent-track: var(--words-color-primary-track); --_words-accent-border: var(--words-color-primary-border); --_words-accent-text: var(--words-color-primary-text); position: relative; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: var(--words-max-inline-size); overflow: hidden; border: var(--words-border-width) solid var(--words-border); border-radius: var(--_words-radius); background: var(--words-bg); box-shadow: var(--words-shadow); color: var(--words-color); font-family: var(--words-font-family); font-size: var(--_words-font-size); line-height: var(--words-line-height); transition: border-color var(--words-transition-duration) var(--words-transition-ease), box-shadow var(--words-transition-duration) var(--words-transition-ease), background var(--words-transition-duration) var(--words-transition-ease); } [data-words][data-size='sm'] { --_words-gap: var(--words-gap-sm); --_words-radius: var(--words-radius-sm); --_words-content-px: var(--words-content-px-sm); --_words-content-py: var(--words-content-py-sm); --_words-content-min-block-size: var(--words-content-min-block-size-sm); --_words-toolbar-px: var(--words-toolbar-px-sm); --_words-toolbar-py: var(--words-toolbar-py-sm); --_words-button-size: var(--words-button-size-sm); --_words-font-size: var(--words-font-size-sm); } [data-words][data-size='lg'] { --_words-gap: var(--words-gap-lg); --_words-radius: var(--words-radius-lg); --_words-content-px: var(--words-content-px-lg); --_words-content-py: var(--words-content-py-lg); --_words-content-min-block-size: var(--words-content-min-block-size-lg); --_words-toolbar-px: var(--words-toolbar-px-lg); --_words-toolbar-py: var(--words-toolbar-py-lg); --_words-button-size: var(--words-button-size-lg); --_words-font-size: var(--words-font-size-lg); } [data-words][data-color='secondary'] { --_words-accent-solid: var(--words-color-secondary-solid); --_words-accent-solid-hover: var(--words-color-secondary-solid-hover); --_words-accent-track: var(--words-color-secondary-track); --_words-accent-border: var(--words-color-secondary-border); --_words-accent-text: var(--words-color-secondary-text); } [data-words][data-color='neutral'] { --_words-accent-solid: var(--words-color-neutral-solid); --_words-accent-solid-hover: var(--words-color-neutral-solid-hover); --_words-accent-track: var(--words-color-neutral-track); --_words-accent-border: var(--words-color-neutral-border); --_words-accent-text: var(--words-color-neutral-text); } [data-words][data-color='affirm'] { --_words-accent-solid: var(--words-color-affirm-solid); --_words-accent-solid-hover: var(--words-color-affirm-solid-hover); --_words-accent-track: var(--words-color-affirm-track); --_words-accent-border: var(--words-color-affirm-border); --_words-accent-text: var(--words-color-affirm-text); } [data-words][data-color='fulfill'] { --_words-accent-solid: var(--words-color-fulfill-solid); --_words-accent-solid-hover: var(--words-color-fulfill-solid-hover); --_words-accent-track: var(--words-color-fulfill-track); --_words-accent-border: var(--words-color-fulfill-border); --_words-accent-text: var(--words-color-fulfill-text); } [data-words][data-color='risk'] { --_words-accent-solid: var(--words-color-risk-solid); --_words-accent-solid-hover: var(--words-color-risk-solid-hover); --_words-accent-track: var(--words-color-risk-track); --_words-accent-border: var(--words-color-risk-border); --_words-accent-text: var(--words-color-risk-text); } [data-words][data-color='threat'] { --_words-accent-solid: var(--words-color-threat-solid); --_words-accent-solid-hover: var(--words-color-threat-solid-hover); --_words-accent-track: var(--words-color-threat-track); --_words-accent-border: var(--words-color-threat-border); --_words-accent-text: var(--words-color-threat-text); } [data-words][data-color='loss'] { --_words-accent-solid: var(--words-color-loss-solid); --_words-accent-solid-hover: var(--words-color-loss-solid-hover); --_words-accent-track: var(--words-color-loss-track); --_words-accent-border: var(--words-color-loss-border); --_words-accent-text: var(--words-color-loss-text); } [data-words][data-variant='outline'] { background: transparent; box-shadow: none; } [data-words][data-variant='ghost'] { border-color: transparent; background: transparent; box-shadow: none; } [data-words]:hover:not([data-disabled]):not([data-readonly]) { border-color: var(--words-border-hover); } [data-words][data-focused] { border-color: var(--_words-accent-border); box-shadow: var(--words-focus-shadow); } [data-words][data-invalid] { border-color: var(--words-invalid-border); } [data-words][data-disabled] { cursor: not-allowed; opacity: var(--words-disabled-opacity); } [data-words-toolbar] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--words-toolbar-gap); padding-block: var(--_words-toolbar-py); padding-inline: var(--_words-toolbar-px); border-block-end: var(--words-border-width) solid var(--words-toolbar-border); background: var(--words-toolbar-bg); } [data-words-toolbar][data-orientation='vertical'] { flex-direction: column; align-items: stretch; inline-size: max-content; border-block-end: 0; border-inline-end: var(--words-border-width) solid var(--words-toolbar-border); } [data-words-toolbar-group] { display: inline-flex; align-items: center; gap: var(--words-command-gap); } [data-words-toolbar-group][data-orientation='vertical'] { flex-direction: column; align-items: stretch; } [data-words-command-button] { display: inline-flex; align-items: center; justify-content: center; gap: var(--words-command-gap); min-inline-size: var(--_words-button-size); block-size: var(--_words-button-size); padding-inline: var(--words-command-px); border: var(--words-border-width) solid transparent; border-radius: var(--words-command-radius); background: transparent; color: var(--words-command-color); font: inherit; cursor: pointer; outline: none; transition: background var(--words-transition-duration) var(--words-transition-ease), border-color var(--words-transition-duration) var(--words-transition-ease), color var(--words-transition-duration) var(--words-transition-ease), box-shadow var(--words-transition-duration) var(--words-transition-ease); } [data-words-command-button]:hover:not(:disabled):not([data-disabled]) { border-color: var(--words-command-border-hover); background: var(--words-command-bg-hover); color: var(--words-command-color-hover); } [data-words-command-button]:focus-visible { box-shadow: var(--words-focus-shadow); } [data-words-command-button][data-active], [data-words-command-button][data-state='on'] { border-color: var(--_words-accent-border); background: var(--_words-accent-track); color: var(--_words-accent-text); } [data-words-command-button][data-command='commit'] { border-color: var(--_words-accent-solid); background: var(--_words-accent-solid); color: var(--words-command-solid-color); } [data-words-command-button][data-command='commit']:hover:not(:disabled):not([data-disabled]) { border-color: var(--_words-accent-solid-hover); background: var(--_words-accent-solid-hover); color: var(--words-command-solid-color); } [data-words-command-button]:disabled, [data-words-command-button][data-disabled] { cursor: not-allowed; opacity: var(--words-disabled-opacity); } [data-words-placeholder] { display: block; padding-block-start: var(--_words-content-py); padding-inline: var(--_words-content-px); color: var(--words-placeholder-color); pointer-events: none; } [data-words-placeholder][hidden], [data-words-hidden-input][hidden] { display: none; } [data-words-content] { min-block-size: var(--_words-content-min-block-size); padding-block: var(--_words-content-py); padding-inline: var(--_words-content-px); color: var(--words-content-color); outline: none; overflow-wrap: anywhere; caret-color: var(--_words-accent-solid); } [data-words-placeholder]:not([hidden]) + [data-words-content] { padding-block-start: var(--words-content-py-after-placeholder); } [data-words-content]::selection, [data-words-content] ::selection { background: var(--_words-accent-track); color: var(--words-selection-color); } [data-words-content]:focus-visible { outline: none; } [data-words-content] :where(p, h1, h2, h3, blockquote, ul, ol) { margin-block: 0 var(--words-block-gap); } [data-words-content] :where(p, h1, h2, h3, blockquote, ul, ol):last-child { margin-block-end: 0; } [data-words-content] :where(h1, h2, h3) { color: var(--words-heading-color); font-size: var(--words-heading-font-size); font-weight: var(--words-heading-font-weight); line-height: var(--words-heading-line-height); } [data-words-content] :where(strong) { font-weight: var(--words-strong-font-weight); } [data-words-content] [data-words-marks~='bold'] { font-weight: var(--words-strong-font-weight); } [data-words-content] [data-words-marks~='italic'] { font-style: italic; } [data-words-content] [data-words-marks~='underline'] { text-decoration-line: underline; } [data-words-content] [data-words-marks~='strike'] { text-decoration-line: line-through; } [data-words-content] [data-words-marks~='underline'][data-words-marks~='strike'] { text-decoration-line: underline line-through; } [data-words-content] :where(code) { border-radius: var(--words-code-radius); background: var(--words-code-bg); color: var(--words-code-color); font-family: var(--words-code-font-family); padding-block: var(--words-code-py); padding-inline: var(--words-code-px); } [data-words-content] [data-words-marks~='code'] { border-radius: var(--words-code-radius); background: var(--words-code-bg); color: var(--words-code-color); font-family: var(--words-code-font-family); padding-block: var(--words-code-py); padding-inline: var(--words-code-px); } [data-words-content] :where(blockquote) { padding-inline-start: var(--words-quote-px); border-inline-start: var(--words-quote-border-width) solid var(--_words-accent-border); color: var(--words-quote-color); } [data-words-content] :where(ul, ol) { padding-inline-start: var(--words-list-padding-inline-start); } [data-words-content] :where(a) { color: var(--_words-accent-text); text-decoration-color: var(--_words-accent-border); } [data-words-status] { padding-block: var(--words-status-py); padding-inline: var(--_words-content-px); border-block-start: var(--words-border-width) solid var(--words-toolbar-border); color: var(--words-status-color); font-size: var(--words-status-font-size); } [data-words-status][data-status='error'] { color: var(--words-status-error-color); } @media (prefers-reduced-motion: reduce) { [data-words], [data-words-command-button] { transition: none; } }