/**
* Lens Docs - LDS Theme Mapping
*
* Maps Material for MkDocs CSS variables to LDS tokens,
* plus targeted overrides for elements Material doesn't expose as variables.
*
* Layer 1: --md-* → var(--lds-*) variable mapping
* Layer 2: Targeted CSS for header, sidebar, cards, admonitions
*/
/* ============================================================
LAYER 1: VARIABLE-TO-VARIABLE MAPPING
============================================================ */
:root {
/* --- Docs-local overrides (no matching LDS token) --- */
--docs-font-size-content: 15px;
/* --- Fonts --- */
--md-text-font: var(--lds-font-family);
--md-code-font: var(--lds-font-family-mono);
/* --- Brand --- */
--md-primary-fg-color: var(--lds-color-primary);
--md-primary-fg-color--light: var(--lds-color-primary-hover);
--md-primary-fg-color--dark: var(--lds-color-primary-pressed);
--md-primary-bg-color: var(--lds-color-bg-primary);
--md-accent-fg-color: var(--lds-color-primary);
/* --- Default colors --- */
--md-default-fg-color: var(--lds-color-text-accent);
--md-default-fg-color--light: var(--lds-color-text-primary);
--md-default-fg-color--lighter: var(--lds-color-text-muted);
--md-default-fg-color--lightest: var(--lds-color-text-disabled);
--md-default-bg-color: var(--lds-color-bg-primary);
--md-default-bg-color--light: var(--lds-color-bg-secondary);
--md-default-bg-color--lighter: var(--lds-color-bg-tertiary);
/* --- Typography --- */
--md-typeset-color: var(--lds-color-text-primary);
--md-typeset-a-color: var(--lds-prose-color-link);
--md-typeset-table-color: var(--lds-prose-color-table-border);
--md-typeset-table-color--light: var(--lds-prose-color-table-row-alt-bg);
--md-typeset-kbd-color: var(--lds-prose-color-table-header-bg);
--md-typeset-kbd-accent-color: var(--lds-color-border);
--md-typeset-kbd-border-color: var(--lds-color-border);
--md-typeset-mark-color: var(--lds-prose-color-mark-bg);
--md-typeset-del-color: var(--lds-color-critical-muted);
--md-typeset-ins-color: var(--lds-color-success-muted);
/* --- Code --- */
--md-code-fg-color: var(--lds-prose-color-code-text);
--md-code-bg-color: var(--lds-prose-color-code-bg);
--md-code-bg-color--light: var(--lds-color-bg-secondary);
--md-code-bg-color--lighter: var(--lds-color-bg-tertiary);
/* Code syntax highlighting (LDS palette-derived) */
--md-code-hl-color: var(--lds-color-selection);
--md-code-hl-color--light: rgba(61, 144, 206, 0.1);
--md-code-hl-keyword-color: #c792ea;
--md-code-hl-string-color: #c3e88d;
--md-code-hl-number-color: #f78c6c;
--md-code-hl-function-color: #82aaff;
--md-code-hl-constant-color: #89ddff;
--md-code-hl-special-color: #f07178;
--md-code-hl-name-color: var(--lds-color-text-accent);
--md-code-hl-operator-color: #89ddff;
--md-code-hl-punctuation-color: #89ddff;
--md-code-hl-comment-color: #616365;
--md-code-hl-generic-color: var(--lds-color-text-primary);
--md-code-hl-variable-color: #f07178;
/* --- Admonitions --- */
--md-admonition-fg-color: var(--lds-color-text-primary);
--md-admonition-bg-color: var(--lds-color-bg-secondary);
/* --- Shadows (LDS uses borders, not elevation) --- */
--md-shadow-z1: none;
--md-shadow-z2: none;
--md-shadow-z3: none;
/* --- Other --- */
--md-accent-fg-color--transparent: var(--lds-color-bg-tertiary);
--md-accent-fg-color: var(--lds-color-text-accent);
}
/* ============================================================
DARK MODE (slate) - Footer mapping
Material redeclares --md-footer-* inside [data-md-color-scheme]
blocks, which beats :root on specificity. So we have to map
at the same specificity level here.
============================================================ */
[data-md-color-scheme="slate"] {
--md-footer-bg-color: var(--lds-color-bg-primary);
--md-footer-bg-color--dark: var(--lds-color-bg-primary);
--md-footer-fg-color: var(--lds-color-text-primary);
--md-footer-fg-color--light: var(--lds-color-text-muted);
--md-footer-fg-color--lighter: var(--lds-color-text-disabled);
}
/* ============================================================
LIGHT MODE - Syntax highlighting adjustments
============================================================ */
[data-md-color-scheme="default"] {
--md-code-hl-keyword-color: #7c4dff;
--md-code-hl-string-color: #2e7d32;
--md-code-hl-number-color: #d84315;
--md-code-hl-function-color: #1565c0;
--md-code-hl-constant-color: #0097a7;
--md-code-hl-special-color: #c62828;
--md-code-hl-name-color: var(--lds-color-text-accent);
--md-code-hl-operator-color: #0097a7;
--md-code-hl-punctuation-color: #0097a7;
--md-code-hl-comment-color: #6b7280;
--md-code-hl-generic-color: var(--lds-color-text-primary);
--md-code-hl-variable-color: #c62828;
}
/* ============================================================
LIGHT MODE - Component-specific overrides
============================================================ */
/* Logo: the lenshq-icon.svg is white, so it's invisible on the light
header. Invert it so it renders as dark on the light background. */
[data-md-color-scheme="default"] .md-header__button.md-logo img,
[data-md-color-scheme="default"] .md-nav__button.md-logo img {
filter: invert(1);
opacity: 1;
}
/* Footer: Material's .md-footer-meta uses --md-footer-bg-color--dark which
inherits bg-primary (#ffffff in light mode). Give it a subtle surface
tone so it visibly separates from the page content. */
[data-md-color-scheme="default"] .md-footer {
background: var(--lds-color-bg-secondary);
color: var(--lds-color-text-primary);
}
[data-md-color-scheme="default"] .md-footer-meta {
background: var(--lds-color-bg-secondary);
}
/* Remap the Material footer fg chain for light mode so .md-copyright
(which uses --md-footer-fg-color--lighter = text-disabled #b0b3b8)
becomes readable against the light footer bg. */
[data-md-color-scheme="default"] {
--md-footer-fg-color: #37352f;
--md-footer-fg-color--light: #6b7280;
--md-footer-fg-color--lighter: #6b7280;
}
[data-md-color-scheme="default"] .md-copyright,
[data-md-color-scheme="default"] .md-copyright__highlight,
[data-md-color-scheme="default"] .md-social__link {
color: #6b7280 !important;
}
[data-md-color-scheme="default"] html .md-footer-meta.md-typeset a,
[data-md-color-scheme="default"] .md-copyright a {
color: var(--lds-color-primary) !important;
}
[data-md-color-scheme="default"] html .md-footer-meta.md-typeset a:hover,
[data-md-color-scheme="default"] html .md-footer-meta.md-typeset a:focus,
[data-md-color-scheme="default"] .md-copyright a:hover,
[data-md-color-scheme="default"] .md-social__link:hover {
color: var(--lds-color-primary-hover) !important;
}
/* --- Light mode: search result dropdown ---
Material uses --md-accent-fg-color (text-accent) for highlighted match
terms and hover colors; in light mode this needs explicit values so
the word highlight is visible and the "N more on this page" hover
doesn't flip to dark bg + white text. */
/* Highlighted match term inside result preview text */
[data-md-color-scheme="default"] .md-search-result mark {
color: var(--lds-color-primary) !important;
background-color: transparent;
text-decoration: underline;
font-weight: var(--lds-font-weight-medium);
}
/* Result link text / headings */
[data-md-color-scheme="default"] .md-search-result__link,
[data-md-color-scheme="default"] .md-search-result__title,
[data-md-color-scheme="default"] .md-search-result__teaser,
[data-md-color-scheme="default"] .md-search-result__terms {
color: #37352f;
}
[data-md-color-scheme="default"] .md-search-result__article--document .md-search-result__title {
color: #1a1a1a;
font-weight: var(--lds-font-weight-medium);
}
/* Result item hover */
[data-md-color-scheme="default"] .md-search-result__link:hover,
[data-md-color-scheme="default"] .md-search-result__link:focus {
background-color: var(--lds-color-bg-tertiary) !important;
}
/* "N more on this page" summary and its hover */
[data-md-color-scheme="default"] .md-search-result__more > summary > div {
color: var(--lds-color-primary);
background-color: transparent;
}
[data-md-color-scheme="default"] .md-search-result__more > summary:hover > div,
[data-md-color-scheme="default"] .md-search-result__more > summary:focus > div {
background-color: var(--lds-color-bg-tertiary) !important;
color: var(--lds-color-primary) !important;
}
/* Meta bar at top of results */
[data-md-color-scheme="default"] .md-search-result__meta {
background-color: var(--lds-color-bg-secondary);
color: var(--lds-color-text-muted);
}
/* Prose links: Material maps link hover to --md-accent-fg-color which we
set globally to --lds-color-text-accent (dark in light mode → looks black).
Use the LDS prose link-hover token (primary-hover blue) for a proper
visible hover color in both modes. */
.md-typeset a:hover,
.md-typeset a:focus {
color: var(--lds-prose-color-link-hover);
}
/* Headings: explicitly use the prose heading color so Material's default
typeset rules (which can apply --md-default-fg-color) don't dilute them
in light mode. */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6,
.md-content .md-typeset h1,
.md-content .md-typeset h2,
.md-content .md-typeset h3,
.md-content .md-typeset h4,
.md-content .md-typeset h5,
.md-content .md-typeset h6 {
color: var(--lds-prose-color-heading) !important;
opacity: 1;
margin-top: 1.4em;
font-size: 1.2em;
font-weight: normal;
}
/* Admonition body: stronger contrast text inside callouts in light mode.
In light mode, prose-color-body is already #37352f (via lds-light.css),
this rule re-asserts it in case Material's typeset color inherits. */
[data-md-color-scheme="default"] .md-typeset .admonition,
[data-md-color-scheme="default"] .md-typeset details {
color: var(--lds-prose-color-body);
}
[data-md-color-scheme="default"] .md-typeset .admonition > *:not(.admonition-title),
[data-md-color-scheme="default"] .md-typeset details > *:not(summary) {
color: var(--lds-prose-color-body);
}
/* Admonition title ("Tip", "Warning", etc.) - force dark text in light mode */
[data-md-color-scheme="default"] .md-typeset .admonition > .admonition-title,
[data-md-color-scheme="default"] .md-typeset details > summary {
color: #1a1a1a !important;
}
/* --- Light mode: force readable heading + nav hover colors ---
Material uses --md-accent-fg-color for both link hover and nav hover.
We map that to --lds-color-text-accent which resolves to #1a1a1a in
light mode — but browsers sometimes fail to re-resolve chained var()
references across scheme boundaries. Hard-set the colors here. */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6,
[data-md-color-scheme="default"] article.md-content__inner > h1,
[data-md-color-scheme="default"] .md-content .md-typeset h1 {
color: #1a1a1a !important;
}
/* Nav link hover / focus in light mode — muted for a clear affordance */
[data-md-color-scheme="default"] .md-nav__link[href]:hover,
[data-md-color-scheme="default"] .md-nav__link[href]:focus,
[data-md-color-scheme="default"] .md-nav__link[for]:hover,
[data-md-color-scheme="default"] .md-nav__link[for]:focus,
[data-md-color-scheme="default"] .md-nav__link:focus,
[data-md-color-scheme="default"] .md-nav--primary .md-nav__item--active > .md-nav__link:hover {
color: var(--lds-color-text-muted) !important;
}
/* Active nav item in light mode keeps the darkest accent */
[data-md-color-scheme="default"] .md-nav__item .md-nav__link--active {
color: var(--lds-color-text-accent) !important;
}
/* Section headers in light mode */
[data-md-color-scheme="default"] .md-nav__title {
color: #1a1a1a;
}
/* Links in body text should be LDS blue; hover should be primary-hover blue */
[data-md-color-scheme="default"] .md-typeset a {
color: var(--lds-color-primary);
}
[data-md-color-scheme="default"] .md-typeset a:hover,
[data-md-color-scheme="default"] .md-typeset a:focus {
color: var(--lds-color-primary-hover);
}
/* ============================================================
LAYER 2: TARGETED OVERRIDES
============================================================ */
/* --- Header: LDS Header look --- */
.md-header {
background-color: var(--lds-color-bg-secondary);
box-shadow: none;
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
}
.md-header__title {
font-size: var(--lds-font-size-md);
color: var(--lds-color-text-primary);
margin-left: 0!important;
}
.md-header__button.md-logo img {
width: 16px;
opacity: 0.8;
}
.md-header__topic:first-child {
font-weight: 400;
}
.md-header__option,
.md-header a.md-header__button.md-icon {
order: 1;
color: var(--lds-color-text-primary);
}
/* --- Back to top button: LDS Button Ghost (standard size) ---
Reference: src/components/controls/Button/Button.module.css (.ghost + .standard)
- Transparent bg, transparent border, primary color text
- Hover: 15% alpha primary bg tint (--btn-color-muted)
- Standard size: 26px tall, 13px medium weight, 4px radius, 4px gap
*/
.md-top {
--btn-color: var(--lds-color-accent);
--btn-color-muted: var();
--btn-color-muted: var(--lds-color-bg-tertiary);
display: flex;
align-items: center;
justify-content: center;
gap: var(--lds-space-1);
height: var(--lds-control-height-standard, 26px);
padding: 0 var(--lds-space-3);
padding-left: var(--lds-space-2);
margin: 0;
background: var(--lds-color-bg-secondary);
border: var(--lds-border-width) solid var(--lds-color-border);
border-radius: var(
--lds-radius-md);
color: var(
--btn-color);
font-family: var(
--lds-font-family);
font-size: var(
--lds-font-size-md);
font-weight: var(
--lds-font-weight-medium);
line-height: 1;
cursor: pointer;
box-shadow: none;
transition:
background-color var(
--lds-transition-normal),
border-color var(--lds-transition-normal),
color var(--lds-transition-normal),
transform var(--lds-transition-normal),
opacity var(--lds-transition-normal);
}
/* Keep Material's centering via translate, override only the positioning */
[dir=ltr] .md-top {
margin-left: 50%;
}
[dir=rtl] .md-top {
margin-right: 50%;
}
.md-top:hover:not(:disabled) {
background: var(--btn-color-muted);
border-color: transparent;
/* color: var(--btn-color); */
border: var(--lds-border-width) solid var(--lds-color-border);
}
.md-top:active:not(:disabled) {
background: color-mix(in srgb, var(--lds-color-primary) 25%, transparent);
}
.md-top:focus-visible {
outline: 2px solid var(--lds-color-border-focus);
outline-offset: 2px;
}
.md-top svg {
width: var(--lds-icon-sm, 16px);
height: var(--lds-icon-sm, 16px);
fill: currentColor;
flex-shrink: 0;
}
/* --- Search: LDS Input look ---
Material structure:
.md-search__form (wrapper)
.md-search__input (actual input)
.md-search__icon (search icon label, left)
.md-search__options (clear button container, right)
*/
/* Wrapper styled like LDS Input/InputWrapper */
.md-search__form {
display: flex;
align-items: center;
height: 26px; /* slightly taller for web context */
padding: 0 var(--lds-space-2);
gap: var(--lds-space-2);
background: var(--lds-color-bg-primary);
border: var(--lds-border-width) solid var(--lds-color-border);
border-radius: var(--lds-radius-md);
box-shadow: none;
transition:
border-color var(--lds-transition-normal),
background-color var(--lds-transition-normal),
box-shadow var(--lds-transition-normal);
cursor: text;
}
/* Hover state (not when focused) */
.md-search__form:hover:not(:focus-within) {
border-color: var(--lds-color-surface-muted);
background: var(--lds-color-bg-primary);
}
/* Focus state - blue border + glow ring (LDS pattern) */
.md-search__form:focus-within {
border-color: var(--lds-color-border-focus);
box-shadow: 0 0 0 1px var(--lds-color-border-focus);
background: var(--lds-color-bg-primary);
}
/* Active/expanded search (when user is typing) - keep LDS focus look */
[data-md-toggle="search"]:checked ~ .md-header .md-search__form,
.md-search__form[data-md-state="active"] {
background: var(--lds-color-bg-primary);
border-color: var(--lds-color-border-focus);
border-radius: var(--lds-radius-md);
}
/* The actual input element - transparent, no borders */
.md-search__input {
flex: 1;
height: 100%;
padding: 0;
background: transparent !important;
border: none;
outline: none;
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
font-weight: var(--lds-font-weight-regular);
color: var(--lds-color-text-primary);
border-radius: 0;
box-shadow: none;
/* display: flex; */
/* align-items: center; */
/* justify-content: center; */
}
.md-search__input::placeholder,
.md-search__input + label {
color: var(--lds-color-text-muted);
font-size: 12px;
}
/* Brighter text when focused (LDS pattern) */
.md-search__form:focus-within .md-search__input {
color: var(--lds-color-text-accent);
}
/* Search icon (magnifier) - flow as a flex item, vertically centered.
Material absolutely positions this at top: .3rem which breaks flex
alignment - override to static positioning. */
.md-search__icon[for="__search"] {
position: static;
top: auto;
left: auto;
right: auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
margin: 0;
padding: 0;
color: var(--lds-color-text-muted);
flex-shrink: 0;
order: -1; /* show before input */
}
/* SVG inside the icon label - center it */
.md-search__icon[for="__search"] svg {
width: 16px;
height: 16px;
margin: 0;
position: static;
top: auto;
left: auto;
display: block;
}
.md-search__scrollwrap {
background-color: var(--lds-color-bg-secondary);
}
/* Material pins .md-search__scrollwrap to 34.4rem (550px) at >=76.25em,
which was correct for its default expanded search. Our search is wider
(up to 820px). Let the scrollwrap fill the output so results align
with the form above them. */
@media screen and (min-width: 60em) {
.md-search__scrollwrap {
width: 100%;
}
}
@media screen and (min-width: 60em) {
/* Absolutely position the search box so it's horizontally centered
in the header (≈ .md-content center) and cannot push the palette
or other header items off-screen. Width matches .md-content with
some breathing room on the sides. */
.md-header__inner {
position: relative;
}
.md-search {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
justify-content: center;
width: calc(100% - 32rem);
max-width: 820px;
padding: 0 1rem;
pointer-events: none;
}
.md-search__form,
.md-search__output,
.md-search__overlay {
pointer-events: auto;
}
/* The backdrop overlay is absolutely positioned inside .md-search;
since we constrained .md-search to ≈820px, the overlay was clipped.
Detach it with position:fixed so it covers the full viewport.
Raise it above the header (z-index: 4) so header items (GitHub link,
Download) are also dimmed. */
[data-md-toggle="search"]:checked ~ .md-header .md-search__overlay {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
transform: none;
z-index: 5;
}
/* Lift the search itself above the overlay so the form stays bright. */
.md-search {
z-index: 6;
}
/* Inside .md-search's stacking context, the overlay (z-index: 5) sits
above .md-search__inner (Material defaults to z-index: 2). Lift the
inner so the form + output render on top of the overlay. */
.md-search__inner {
z-index: 10;
}
/* Material hides .md-header__option (palette toggle) when the search
is active to reclaim space for its full-width expand. With our
fixed-width centered search, there's plenty of room — keep it visible. */
[data-md-toggle="search"]:checked ~ .md-header .md-header__option {
max-width: none;
opacity: 1;
}
.md-search__form {
width: 100%;
}
/* Cancel Material's 2.2rem left-padding (reserved space for the
absolutely-positioned icon) — our icon is a flex sibling now */
[dir=ltr] .md-search__input {
padding-left: 0;
}
[dir=rtl] .md-search__input {
padding-right: 0;
}
}
[dir=ltr] .md-search__icon[for=__search],
[dir=rtl] .md-search__icon[for=__search] {
left: auto;
right: auto;
}
.md-icon svg {
height: 16px;
width: 16px;
position: relative;
/* top: -1px; */
}
.md-search__form:focus-within .md-search__icon[for="__search"] {
color: var(--lds-color-text-primary);
}
/* Clear button (reset type) - right side */
.md-search__options {
display: flex;
align-items: center;
flex-shrink: 0;
margin: 0;
top: auto;
right: auto;
transform: none;
position: static;
}
.md-search__options > .md-search__icon[type="reset"] {
width: 20px;
height: 20px;
padding: var(--lds-space-half);
margin: 0;
background: transparent;
border: none;
border-radius: var(--lds-radius-sm);
color: var(--lds-color-text-muted);
cursor: pointer;
transition:
background-color var(--lds-transition-normal),
color var(--lds-transition-normal);
}
.md-search__options > .md-search__icon[type="reset"]:hover {
background: var(--lds-color-bg-secondary);
color: var(--lds-color-text-primary);
}
.md-search__options > .md-search__icon[type="reset"]:focus-visible {
outline: 2px solid var(--lds-color-border-focus);
outline-offset: -2px;
}
/* Search suggestions dropdown - LDS dropdown look */
.md-search__output {
background: var(--lds-color-bg-primary);
border: var(--lds-border-width) solid var(--lds-color-border);
border-radius: var(--lds-radius-md);
box-shadow: var(--lds-shadow-sm);
margin-top: var(--lds-space-1);
}
.md-search-result__item {
background: transparent;
border-color: var(--lds-color-border);
transition: background-color var(--lds-transition-fast);
}
.md-search-result__link {
color: var(--lds-color-text-primary);
transition:
background-color var(--lds-transition-fast),
color var(--lds-transition-fast);
padding: var(--lds-space-1);
/* padding-bottom: 0; */
}
.md-search-result__link:hover,
.md-search-result__link:focus {
background: var(--lds-color-bg-tertiary);
color: var(--lds-color-text-accent);
}
.md-search-result__article--document .md-search-result__title {
color: var(--lds-color-text-accent);
font-weight: var(--lds-font-weight-medium);
}
.md-search-result__meta {
background: var(--lds-color-bg-secondary);
color: var(--lds-color-text-muted);
font-size: var(--lds-font-size-sm);
/* border-bottom: 1px solid var(--lds-color-border); */
}
/* Show border only when the search result list has content */
.md-search__output:has(.md-search-result__list:not(:empty)) .md-search-result__meta {
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
box-shadow: var(--lds-shadow-sm);
}
.md-search-result__more>summary>div {
color: var(--lds-color-text-primary);
}
.md-search-result__more[open]>summary {
background-color: var(--lds-color-bg-tertiary);
}
/* Document icon in each result row: 16 × 16 to match other LDS icons.
Material's default is 1.2rem (19.2px) with margin: .5rem. */
.md-search-result__icon {
width: 16px;
height: 16px;
margin: 10px;
}
.md-search-result__icon::after {
width: 16px;
height: 16px;
}
/* Tighten the icon gutter on each result row (Material reserves 2.2rem
for the larger default icon). */
@media screen and (min-width: 60em) {
[dir=ltr] .md-search-result__article,
[dir=ltr] .md-search-result__meta {
padding-left: 2rem;
}
[dir=ltr] .md-search-result__article {
padding-right: 1rem;
}
}
/* The result title is an , and our broad `.md-typeset h1` rule
inflates it to prose-h1 size. Keep Material's compact sizing and
make sure it can wrap inside the article. */
.md-search-result .md-typeset h1,
.md-search-result .md-typeset h2 {
font-size: var(--lds-font-size-md) !important;
line-height: 1.4;
margin: 0.4rem 0 0.25rem;
font-weight: var(--lds-font-weight-semibold);
white-space: normal;
overflow-wrap: break-word;
word-break: break-word;
}
.md-search-result .md-typeset p {
font-size: var(--lds-font-size-md);
line-height: 1.5;
word-break: break-word;
overflow-wrap: break-word;
}
/* Secondary content (terms, teaser-style snippets, "N more on this page"
summary) — keep smaller. */
.md-search-result .md-typeset,
.md-search-result__terms,
.md-search-result__more > summary > div {
font-size: var(--lds-font-size-sm);
line-height: 1.5;
}
[dir=ltr] .md-search__suggest {
font-size: var(--lds-font-size-md);
padding-left: 1.1rem;
}
/* --- Sidebar: LDS TreeView look --- */
.md-sidebar {
/* background: var(--lds-color-bg-primary); */
border-right: var(--lds-border-width) solid var(--lds-color-border);
}
.md-sidebar.md-sidebar--secondary {
border-right: none;
border-left: var(--lds-border-width) solid var(--lds-color-border);
}
@media screen and (min-width: 60em) {
[dir=ltr] .md-search-result__more>summary>div {
padding-left: 48px;
}
}
@media screen and (min-width: 76.25em) {
.md-sidebar {
height: auto;
}
}
/* Nav items and links intentionally left unstyled — to be redesigned
from scratch following the LDS TreeView pattern. */
.md-nav__item .md-nav__link--active, .md-nav__item .md-nav__link--active code {
color: var(--lds-color-text-accent);
}
/* Normalize row height so nested rows (with a chevron) don't sit
slightly taller than leaf rows. Matches LDS compact control height. */
.md-nav__item .md-nav__link {
min-height: var(--lds-control-height-compact);
}
/* Section title ("LENS DOCUMENTATION") - LDS section header look
Muted color, uppercase small text, compact padding */
.md-nav__title {
display: flex;
align-items: center;
/* height: var(--lds-height-tree-item, 24px); */
padding: 0 var(--lds-space-3);
padding-bottom: var(--lds-space-3);
margin: 0;
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-sm);
font-weight: var(--lds-font-weight-semibold);
letter-spacing: 0.5px;
text-transform: uppercase;
color: var(--lds-color-text-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media screen and (max-width: 76.2344em) {
.md-nav--primary .md-nav__list .md-nav__item--nested .md-nav__list .md-nav__item {
border-top: 0;
}
body > div.md-container > main > div > div.md-sidebar.md-sidebar--primary > div > div > nav > ul > li.md-nav__item.md-nav__item--active.md-nav__item--nested > nav > ul > li:nth-child(1) {
line-height: 1.8;
}
.md-sidebar--primary li.md-nav__item.md-nav__item--active.md-nav__item--nested > nav > ul > li.md-nav__item.md-nav__item.md-nav__item--nested > nav > ul > li {
line-height: 1.4;
padding-top: 3px;
}
}
@media screen and (min-width: 76.25em) {
.md-nav--primary .md-nav__title {
background: none;
box-shadow: none;
position: static;
/* top: 0; */
/* z-index: 1; */
}
}
@media screen and (min-width: 60em) {
.md-nav--secondary .md-nav__title {
background: transparent;
position: static;
box-shadow: none;
top: 0;
z-index: 1;
}
}
/* --- Content area --- */
.md-main {
background: var(--lds-color-bg-secondary);
/* font-size: 13px; */
}
.md-main__inner {
margin-top: 0;
}
.md-content {
max-width: 980px;
}
/* --- Headings: DocumentationView styling ---
Overrides Material's default large heading typography
to match LDS prose tokens from DocumentationView.module.css */
.md-typeset {
font-size: var(--docs-font-size-content);
}
.md-typeset h1,
article.md-content__inner > h1,
.md-content .md-typeset h1,
.md-content__inner > h1 {
font-size: var(--lds-prose-h1-size);
font-weight: var(--lds-prose-h1-weight);
color: var(--lds-prose-color-heading) !important;
margin: 0 0 var(--lds-prose-heading-margin-bottom);
line-height: var(--lds-prose-line-height-heading);
font-family: var(--lds-font-family);
letter-spacing: normal;
opacity: 1;
}
.md-nav {
font-size: var(--lds-font-size-md);
line-height: 1.3;
}
.md-nav__link .md-typeset {
font-size: var(--lds-font-size-md);
line-height: 1.3;
}
.md-typeset .grid {
grid-gap: .6rem;
margin: 1.3em 0;
}
/* --- Grid cards: LDS ActionCard look ---
Reference: src/components/containers/ActionCard/ActionCard.module.css
Martial markdown grid-card HTML:
[icon] Title
Description
*/
.md-path__link {
font-size: var(--lds-font-size-md);
}
[data-md-color-scheme="default"] .md-path__link:hover,
[data-md-color-scheme="default"] .md-path__link:focus {
color: var(--lds-color-text-accent);
}
/* Grid container - consistent LDS gap */
.md-typeset .grid.cards > ul {
gap: var(--lds-space-3);
padding: 0;
margin: var(--lds-space-3) 0;
}
/* Card (li) - ActionCard base styling */
.md-typeset .grid.cards > ul > li {
position: relative;
display: flex;
flex-direction: column;
gap: var(--lds-space-1);
padding: var(--lds-space-4);
background: var(--lds-color-bg-tertiary);
border: var(--lds-border-width) solid var(--lds-color-border);
border-radius: var(--lds-radius-md);
box-shadow: none;
font-family: var(--lds-font-family);
cursor: pointer;
overflow: hidden;
transition:
background-color var(--lds-transition-fast),
border-color var(--lds-transition-fast);
}
/* Expand the title link's hit area to cover the entire card so the
whole tile behaves like the single clickable element its hover
state advertises. Inline links inside the description (if any)
keep working because they sit above this overlay via z-index. */
.md-typeset .grid.cards > ul > li > p:first-child a::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
}
.md-typeset .grid.cards > ul > li > *:not(:first-child) a {
position: relative;
z-index: 2;
}
/* Hover: bg lightens 5%, border lightens 10% (LDS hover pattern) */
.md-typeset .grid.cards > ul > li:hover {
background: color-mix(in srgb, var(--lds-color-bg-tertiary), white 5%);
border-color: color-mix(in srgb, var(--lds-color-border), white 10%);
box-shadow: none;
}
/* Focus ring on contained link (keyboard accessibility) */
.md-typeset .grid.cards > ul > li:focus-within {
outline: 2px solid var(--lds-color-border-focus);
outline-offset: 2px;
}
/* Title paragraph - icon + link row */
.md-typeset .grid.cards > ul > li > p:first-child {
display: flex;
align-items: center;
gap: var(--lds-space-2);
margin: 0;
font-size: var(--lds-font-size-md);
font-weight: var(--lds-font-weight-medium);
line-height: 1.3;
}
/* Title link (inside strong) - ActionCard title color */
.md-typeset .grid.cards > ul > li > p:first-child strong {
font-weight: var(--lds-font-weight-medium);
}
.md-typeset .grid.cards > ul > li > p:first-child a {
display: inline-flex;
align-items: center;
gap: var(--lds-space-2);
color: var(--lds-color-text-primary);
text-decoration: none;
transition: color var(--lds-transition-fast);
font-size: var(--lds-font-size-lg);
}
.md-typeset .grid.cards > ul > li:hover p:first-child a {
color: var(--lds-color-text-accent);
}
/* Icon (twemoji span) - ActionCard 20px accent icon */
.md-typeset .grid.cards > ul > li .twemoji {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: var(--lds-icon-md, 20px);
height: var(--lds-icon-md, 20px);
color: var(--lds-color-text-accent);
}
.md-typeset .grid.cards > ul > li .twemoji svg {
width: 100%;
height: 100%;
}
/* Hide the hr divider Material inserts between title and description */
.md-typeset .grid.cards > ul > li > hr {
display: none;
}
/* Description paragraph - ActionCard description styling */
.md-typeset .grid.cards > ul > li > p:not(:first-child) {
margin: 0;
font-size: var(--lds-font-size-md);
color: var(--lds-color-text-primary);
line-height: 1.5;
}
/* --- Admonitions: LDS Callout look ---
Reference: src/components/display/Callout/Callout.module.css
- Flex row with top-aligned icon (flex-start)
- Left border only (3px), no borders on other sides
- 16px padding, 12px gap between icon and content
- Title: medium weight, accent color, 4px margin-bottom
- Icon: 20px, variant color, 1px top offset
- Body: muted, 1.6 line-height
*/
.md-typeset .admonition,
.md-typeset details {
display: block;
margin: 0 0 var(--lds-prose-block-margin);
padding: var(--lds-prose-callout-padding);
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
line-height: var(--lds-prose-line-height);
color: var(--lds-prose-color-body);
background: var(--lds-prose-color-callout-note-bg);
border: none;
border-left: var(--lds-prose-blockquote-border-width) solid var(--lds-prose-color-callout-note-border);
border-radius: var(--lds-radius-md);
box-shadow: none;
}
/* Title row: flex with icon + title text */
.md-typeset .admonition > .admonition-title,
.md-typeset details > summary {
display: flex;
align-items: flex-start;
gap: var(--lds-prose-callout-icon-gap);
padding: 0;
margin: 0 0 var(--lds-space-1);
background: transparent;
border: none;
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
font-weight: var(--lds-font-weight-medium);
line-height: var(--lds-prose-line-height);
color: var(--lds-prose-color-heading);
}
/* Leading icon - Material renders it as a ::before pseudo-element.
Reset Material's absolute positioning and render it inline as a 20px glyph. */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
position: static;
top: auto;
left: auto;
width: var(--lds-icon-md, 20px);
height: var(--lds-icon-md, 20px);
margin: 1px 0 0 0;
flex-shrink: 0;
background-color: var(--lds-prose-color-callout-note-icon);
}
/* Collapsible details chevron on the right */
.md-typeset details > summary::after {
background-color: var(--lds-color-text-muted);
}
/* Body content (paragraphs inside admonition) - remove Material's inner padding
since we added the outer padding on the container. Reset margins and match body color. */
.md-typeset .admonition > *:not(.admonition-title),
.md-typeset details > *:not(summary) {
color: var(--lds-prose-color-body);
padding: 0;
margin: 0 0 var(--lds-prose-block-margin);
}
.md-typeset .admonition > *:not(.admonition-title):last-child,
.md-typeset details > *:not(summary):last-child {
margin-bottom: 0;
}
/* --- Variant colors --- */
/* Note / Info / Abstract / Question -> LDS note (blue) */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.abstract,
.md-typeset .admonition.question,
.md-typeset details.note,
.md-typeset details.info,
.md-typeset details.abstract,
.md-typeset details.question {
background: var(--lds-prose-color-callout-note-bg);
border-left-color: var(--lds-prose-color-callout-note-border);
}
.md-typeset .admonition.note > .admonition-title::before,
.md-typeset .admonition.info > .admonition-title::before,
.md-typeset .admonition.abstract > .admonition-title::before,
.md-typeset .admonition.question > .admonition-title::before,
.md-typeset details.note > summary::before,
.md-typeset details.info > summary::before,
.md-typeset details.abstract > summary::before,
.md-typeset details.question > summary::before {
background-color: var(--lds-prose-color-callout-note-icon);
}
/* Warning -> LDS warning (orange) */
.md-typeset .admonition.warning,
.md-typeset details.warning {
background: var(--lds-prose-color-callout-warning-bg);
border-left-color: var(--lds-prose-color-callout-warning-border);
}
.md-typeset .admonition.warning > .admonition-title::before,
.md-typeset details.warning > summary::before {
background-color: var(--lds-prose-color-callout-warning-icon);
}
/* Tip / Success / Example -> LDS tip (green) */
.md-typeset .admonition.tip,
.md-typeset .admonition.success,
.md-typeset .admonition.example,
.md-typeset details.tip,
.md-typeset details.success,
.md-typeset details.example {
background: var(--lds-prose-color-callout-tip-bg);
border-left-color: var(--lds-prose-color-callout-tip-border);
}
.md-typeset .admonition.tip > .admonition-title::before,
.md-typeset .admonition.success > .admonition-title::before,
.md-typeset .admonition.example > .admonition-title::before,
.md-typeset details.tip > summary::before,
.md-typeset details.success > summary::before,
.md-typeset details.example > summary::before {
background-color: var(--lds-prose-color-callout-tip-icon);
}
/* Danger / Failure / Bug -> LDS caution (red) */
.md-typeset .admonition.danger,
.md-typeset .admonition.failure,
.md-typeset .admonition.bug,
.md-typeset details.danger,
.md-typeset details.failure,
.md-typeset details.bug {
background: var(--lds-prose-color-callout-caution-bg);
border-left-color: var(--lds-prose-color-callout-caution-border);
}
.md-typeset .admonition.danger > .admonition-title::before,
.md-typeset .admonition.failure > .admonition-title::before,
.md-typeset .admonition.bug > .admonition-title::before,
.md-typeset details.danger > summary::before,
.md-typeset details.failure > summary::before,
.md-typeset details.bug > summary::before {
background-color: var(--lds-prose-color-callout-caution-icon);
}
/* Quote -> LDS important (purple) */
.md-typeset .admonition.quote,
.md-typeset details.quote {
background: var(--lds-prose-color-callout-important-bg);
border-left-color: var(--lds-prose-color-callout-important-border);
}
.md-typeset .admonition.quote > .admonition-title::before,
.md-typeset details.quote > summary::before {
background-color: var(--lds-prose-color-callout-important-icon);
}
/* --- Tabs: LDS Tabs look --- */
.md-typeset .tabbed-labels > label {
color: var(--lds-color-text-muted);
font-weight: var(--lds-font-weight-regular);
transition: color var(--lds-transition-fast);
}
.md-typeset .tabbed-labels > label:hover {
color: var(--lds-color-text-accent);
}
.md-typeset .tabbed-labels > label.tabbed-labels--active,
.md-typeset .tabbed-labels > .tabbed-alternate > input:checked + label {
color: var(--lds-color-text-accent);
font-weight: var(--lds-font-weight-medium);
}
/* --- Tables: LDS DataTable look ---
Reference: src/components/data/DataTable/DataTable.module.css
- No zebra stripes, single bg color for all rows
- Thin bottom border separating rows
- Header bg slightly different from body
- Compact horizontal-only padding; flex row height via line-height
*/
.md-typeset table:not([class]) {
width: 100%;
background: var(--lds-color-bg-secondary);
border: var(--lds-border-width) solid var(--lds-color-border);
border-radius: var(--lds-radius-md);
border-collapse: separate;
border-spacing: 0;
box-shadow: none;
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
color: var(--lds-color-text-primary);
overflow: hidden;
}
/* Header */
.md-typeset table:not([class]) thead {
background: var(--lds-color-bg-secondary);
}
.md-typeset table:not([class]) th {
height: var(--lds-height-table-header, 40px);
padding: 0 var(--lds-space-4);
background: var(--lds-color-bg-secondary);
color: var(--lds-color-text-accent);
font-size: var(--lds-font-size-lg);
font-weight: var(--lds-font-weight-regular);
text-align: left;
border: none;
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
vertical-align: middle;
user-select: none;
}
/* Body rows */
.md-typeset table:not([class]) tbody tr {
background: var(--lds-color-bg-secondary);
border: none;
transition: background-color var(--lds-transition-fast);
}
/* Remove Material's zebra striping */
.md-typeset table:not([class]) tr:nth-child(even),
.md-typeset table:not([class]) tbody tr:nth-child(odd) {
background: var(--lds-color-bg-secondary);
}
.md-typeset table:not([class]) tbody tr:hover {
background: var(--lds-color-bg-tertiary);
}
/* Body cells */
.md-typeset table:not([class]) td {
height: var(--lds-height-table-row, 36px);
padding: 0 var(--lds-space-4);
color: var(--lds-color-text-primary);
font-size: var(--lds-font-size-lg);
border: none;
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
vertical-align: middle;
}
/* Last row: remove bottom border so it doesn't double up with the
outer table border */
.md-typeset table:not([class]) tbody tr:last-child td {
border-bottom: none;
}
/* --- Code blocks --- */
.md-typeset code {
border-radius: var(--lds-radius-md);
background-color: var(--lds-color-bg-primary);
border: 1px solid var(--lds-color-border);
padding: 0px 6px;
display: inline-block;
}
.md-typeset pre > code {
border-radius: var(--lds-radius-md);
background: var(--lds-color-bg-primary);
border: 1px solid var(--lds-color-border);
}
/* --- Footer ---
Compact footer: reduce Material's generous paddings to match LDS density */
.md-footer {
border-top: var(--lds-border-width) solid var(--lds-color-border);
}
.md-footer-meta__inner {
padding: 0 var(--lds-space-4);
align-items: center;
min-height: var(--lds-row-height-standard, 34px);
}
.md-copyright {
padding: var(--lds-space-half) 0;
margin: 0;
font-size: var(--lds-font-size-sm);
}
.md-social {
display: flex;
padding: 0;
margin: 0;
gap: var(--lds-space-1);
align-items: center;
}
.md-social__link {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
}
.md-social__link svg {
max-height: 14px;
}
/* --- Buttons: LDS Button look ---
Applied to .md-button elements (cookie consent, download button, etc.)
- .md-button (default) -> LDS secondary (outline) variant
- .md-button--primary -> LDS primary (filled) variant
*/
/* Match button elements AND label.md-button (used in cookie consent) */
.md-typeset .md-button,
.md-button,
label.md-button {
--btn-color: var(--lds-color-primary);
--btn-color-hover: color-mix(in srgb, var(--lds-color-primary), white 15%);
--btn-color-pressed: color-mix(in srgb, var(--lds-color-primary), black 15%);
--btn-color-muted: color-mix(in srgb, var(--lds-color-primary) 15%, transparent);
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
height: 26px; /* LDS --lds-control-height-standard */
min-height: 26px;
padding: 0 var(--lds-space-3);
margin: 0;
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
font-weight: var(--lds-font-weight-medium);
line-height: 1; /* flex centering handles vertical alignment */
vertical-align: middle;
border-radius: var(--lds-radius-md);
border: var(--lds-border-width) solid var(--btn-color);
background: transparent;
color: var(--btn-color);
cursor: pointer;
white-space: nowrap;
user-select: none;
box-shadow: none;
text-decoration: none;
transition:
background-color var(--lds-transition-normal),
border-color var(--lds-transition-normal),
color var(--lds-transition-normal);
}
/* Secondary (outline) hover */
.md-typeset .md-button:hover:not(:disabled),
.md-button:hover:not(:disabled) {
background: var(--btn-color-muted);
color: var(--btn-color);
border-color: var(--btn-color);
box-shadow: none;
}
.md-typeset .md-button:focus-visible,
.md-button:focus-visible {
outline: 2px solid var(--lds-color-border-focus);
outline-offset: 2px;
}
/* Primary (filled) variant */
.md-typeset .md-button--primary,
.md-button--primary {
background: var(--btn-color);
border-color: var(--btn-color);
color: var(--lds-color-text-inverse);
}
.md-typeset .md-button--primary:hover:not(:disabled),
.md-button--primary:hover:not(:disabled) {
background: var(--btn-color-hover);
border-color: var(--btn-color-hover);
color: var(--lds-color-text-inverse);
}
/* Override Material's forced display:inline on cookie consent buttons
(Material rule: .md-typeset .md-consent__controls .md-button { display: inline }) */
.md-typeset .md-consent__controls .md-button,
.md-consent__controls .md-button {
display: inline-flex;
align-items: center;
justify-content: center;
height: 26px;
min-height: 26px;
padding: 0 var(--lds-space-3);
margin-right: var(--lds-space-2);
}
.md-typeset .md-consent__controls .md-button:last-child,
.md-consent__controls .md-button:last-child {
margin-right: 0;
}
/* Mobile: Material stacks buttons full-width - keep that but with LDS height */
@media screen and (max-width: 44.984375em) {
.md-typeset .md-consent__controls .md-button,
.md-consent__controls .md-button {
display: flex;
width: 100%;
margin-right: 0;
margin-top: var(--lds-space-1);
}
}
/* Banner button on gradient background needs readable contrast */
.md-banner .md-button {
--btn-color: #ffffff;
border-color: #ffffff;
color: #ffffff;
}
.md-banner .md-button:hover:not(:disabled) {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
}
/* --- Banner --- */
.md-banner {
background-image: linear-gradient(270deg, rgba(84, 142, 201, 1) 0%, rgba(77, 27, 101, 1) 100%);
color: #ffffff;
font-weight: var(--lds-font-weight-bold);
}
.md-banner__button {
color: rgba(77, 27, 101, 1);
}
/* --- Video elements (preserved from original) --- */
ul.video-list {
counter-reset: section;
list-style: none;
padding-left: 0;
position: relative;
}
ul.video-list .video:not(:last-of-type) a {
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
}
ul.video-list a {
position: relative;
padding: var(--lds-space-5) var(--lds-space-5) var(--lds-space-5) 4.2rem;
display: block;
box-sizing: border-box;
}
ul.video-list a .info {
padding-top: var(--lds-space-1);
}
ul.video-list a .info::before {
counter-increment: section;
content: counter(section);
position: absolute;
left: 1.5rem;
color: var(--lds-color-text-muted);
}
ul.video-list a .info > p,
ul.video-list a .info > span {
color: var(--lds-color-text-primary);
}
ul.video-list a .info .title {
margin-top: 0;
margin-bottom: var(--lds-space-2);
}
ul.video-list a .info .description {
margin-bottom: var(--lds-space-3);
}
ul.video-list a .info .duration,
ul.video-list a .info .duration span {
color: var(--lds-color-text-muted);
}
ul.video-list a:hover,
ul.video-list a:focus {
text-decoration: none;
}
ul.video-list a:hover {
background: var(--lds-color-bg-tertiary);
}
ul.video-list .thumb {
max-height: 8.2rem;
padding-right: var(--lds-space-5);
position: relative;
float: left;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: var(--lds-radius-md);
}
/* --- Refiner widget --- */
#refiner-widget-frame {
color-scheme: light;
}
/* --- Header: Hamburger (drawer) icon color at the smallest breakpoint --- */
.md-header__button[for=__drawer] {
color: var(--lds-color-text-primary);
}
/* --- Mobile drawer (smallest breakpoint): restyle to match the LDS
MobileNav component. Material's drawer rules apply at max-width:76.234em,
but in the 60em–76.25em range we flip the layout to inline (see below),
so these styles only visibly affect <60em. --- */
@media screen and (max-width: 59.984375em) {
/* Drawer container */
[dir=ltr] .md-sidebar--primary { left: -17.5rem; }
[dir=rtl] .md-sidebar--primary { right: -17.5rem; }
.md-sidebar--primary {
width: 14.2rem; /* 280px */
max-width: 85vw;
background-color: var(--lds-color-bg-secondary);
border-right: var(--lds-border-width) solid var(--lds-color-border);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
transition: transform var(--lds-transition-slow), opacity var(--lds-transition-slow);
}
[data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary {
transform: translateX(17.5rem);
}
[dir=rtl] [data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary {
transform: translateX(-17.5rem);
}
/* Nav container — use LDS bg and column layout */
.md-nav--primary,
.md-nav--primary .md-nav {
background-color: var(--lds-color-bg-secondary);
}
/* Drawer header (root title) — logo + product name, subtle border */
.md-nav--primary .md-nav__title[for=__drawer] {
display: flex;
align-items: center;
gap: var(--lds-space-2);
min-height: 44px;
height: auto;
padding: var(--lds-space-3) var(--lds-space-4);
background: var(--lds-color-bg-secondary);
color: var(--lds-color-text-primary);
font-family: var(--lds-font-family);
font-size: var(--lds-font-size-md);
font-weight: var(--lds-font-weight-medium);
letter-spacing: 0.01em;
line-height: normal;
cursor: pointer;
white-space: nowrap;
border-bottom: var(--lds-border-width) solid var(--lds-color-border);
position: relative;
text-transform: none;
}
/* Small inline logo tinted with the LDS primary color.
The source SVG is white, so use it as a CSS mask on the parent and
hide the original ![]()
/