*/
/* ========================================
Brand Borders
======================================== */
.border-primary {
border-color: var(--color-primary);
}
.border-secondary {
border-color: var(--color-secondary);
}
/* ========================================
State Borders
======================================== */
.border-success {
border-color: var(--color-success-border);
}
.border-error {
border-color: var(--color-error-border);
}
.border-warning {
border-color: var(--color-warning-border);
}
.border-info {
border-color: var(--color-info-border);
}
/* ========================================
UI Borders
======================================== */
.border-default {
border-color: var(--color-border);
}
.border-subtle {
border-color: var(--color-border-subtle);
}
.border-transparent {
border-color: transparent;
}
/* Display / visibility utilities */
/* ============================================================================
DISPLAY UTILITIES - Visibility and Display Control
============================================================================
Utility classes for showing/hiding elements at any breakpoint.
All utilities use !important to win specificity over component styles.
Breakpoints (matching flex.scss):
- sm: 30rem (480px)
- md: 48rem (768px)
- lg: 62rem (992px)
- xl: 80rem (1280px)
Usage:
Always hidden
Hidden on mobile, shown at md+
Screen reader only
Skip link
============================================================================ */
/* Base utilities (no breakpoint)
========================================================================== */
/** Removes element from layout and accessibility tree */
.hide {
display: none !important;
}
/** Restores browser default display per element type */
.show {
display: revert !important;
}
/** Hides element visually but preserves layout space */
.invisible {
visibility: hidden !important;
}
/* Accessibility utilities
========================================================================== */
/** Visually hidden but present in the accessibility tree */
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/** sr-only that becomes visible on focus — for skip links (WCAG 2.4.1) */
.sr-only-focusable {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.sr-only-focusable:focus, .sr-only-focusable:focus-within {
position: static;
width: auto;
height: auto;
padding: 0;
margin: 0;
overflow: visible;
clip: auto;
white-space: normal;
}
/* Print variant
========================================================================== */
@media print {
.print\:hide {
display: none !important;
}
}
/* Responsive variants — sm (30rem / 480px)
========================================================================== */
@media (width >= 30rem) {
.sm\:hide {
display: none !important;
}
.sm\:show {
display: revert !important;
}
.sm\:invisible {
visibility: hidden !important;
}
}
/* Responsive variants — md (48rem / 768px)
========================================================================== */
@media (width >= 48rem) {
.md\:hide {
display: none !important;
}
.md\:show {
display: revert !important;
}
.md\:invisible {
visibility: hidden !important;
}
}
/* Responsive variants — lg (62rem / 992px)
========================================================================== */
@media (width >= 62rem) {
.lg\:hide {
display: none !important;
}
.lg\:show {
display: revert !important;
}
.lg\:invisible {
visibility: hidden !important;
}
}
/* Responsive variants — xl (80rem / 1280px)
========================================================================== */
@media (width >= 80rem) {
.xl\:hide {
display: none !important;
}
.xl\:show {
display: revert !important;
}
.xl\:invisible {
visibility: hidden !important;
}
}
button {
--btn-size-xs: 0.6875rem;
--btn-size-sm: 0.8125rem;
--btn-size-md: 0.9375rem;
--btn-size-lg: 1.125rem;
--btn-size-xl: 1.375rem;
--btn-size-2xl: 1.75rem;
--btn-pill: 100vw;
--btn-fs: var(--btn-size-md);
--btn-height: calc(var(--btn-fs) * 2.75);
--btn-bg: var(--color-primary);
--btn-color: var(--color-text-inverse);
--btn-width: max-content;
font-size: var(--btn-fs);
font-weight: var(--btn-fw, 500);
height: var(--btn-height);
place-items: var(--btn-place, center);
padding-inline: var(--btn-padding-inline, calc(var(--btn-fs) * 1.5));
padding-block: var(--btn-padding-block, calc(var(--btn-fs) * 0.5));
border: var(--btn-border, none);
border-radius: var(--btn-radius, 0.375rem);
text-decoration: var(--btn-deco, none);
color: var(--btn-color, currentColor);
display: var(--btn-display, inline-flex);
gap: var(--btn-gap, 0.2rem);
white-space: var(--btn-whitespace, inherit);
margin: var(--btn-spacing, 0);
transition: var(--btn-transition, var(--tran-all, all 0.3s cubic-bezier(0.4, 0, 0.2, 1)));
background-color: var(--btn-bg, var(--btn));
outline: none;
width: var(--btn-width);
display: inline-flex;
align-items: center;
line-height: 0cap;
}
button[type] {
background-color: var(--btn-bg, var(--color-primary));
--btn-border: solid var(--btn-sg);
}
button[type=submit], button[style*=submit] {
--btn-bg: var(--color-primary);
--btn-color: var(--color-text-inverse);
}
button[disabled], button[aria-disabled=true] {
cursor: var(--btn-cursor, not-allowed);
}
button[disabled]:is(:hover, :focus), button[aria-disabled=true]:is(:hover, :focus) {
transform: none;
}
button:is(:hover, :focus) {
filter: var(--btn-hover-filter, brightness(0.85));
transform: var(--btn-hover-transform, scale(1.03));
outline: var(--btn-hover-outline, thin);
outline-offset: var(--line-offset, 1px);
}
button:is(:hover, :focus)[aria-disabled=true] {
transform: none;
opacity: var(--btn-opacity, 0.5);
filter: none;
}
button:focus-visible {
outline: var(--btn-focus-outline, 2px solid currentColor);
outline-offset: var(--btn-focus-outline-offset, 1px);
}
button[type=reset] {
--btn-bg: transparent;
--btn-color: var(--color-text-secondary);
--btn-border: var(--color-border) thin solid;
}
button[type=submit] {
--btn-bg: var(--color-primary);
--btn-color: var(--color-text-inverse);
--btn-border: none;
}
button[data-fp-btn~=pill], button[data-btn~=pill], button[data-style~=pill], button.btn-pill {
border-radius: var(--btn-pill, 100vw);
}
button[data-color=primary] {
--btn-bg: var(--color-primary);
--btn-color: var(--color-text-inverse);
}
button[data-color=secondary] {
--btn-bg: var(--color-secondary);
--btn-color: var(--color-text-inverse);
}
button[data-color=danger] {
--btn-bg: var(--color-error);
--btn-color: var(--color-text-inverse);
}
button[data-color=success] {
--btn-bg: var(--color-success);
--btn-color: var(--color-text-inverse);
}
button[data-color=warning] {
--btn-bg: var(--color-warning);
--btn-color: var(--color-text-inverse);
}
button[data-color=info] {
--btn-bg: var(--color-info);
--btn-color: var(--color-text-inverse);
}
button[data-style~=outline] {
--btn-bg: transparent;
--btn-color: currentColor;
--btn-border: 0.125rem solid currentColor;
}
button[data-style~=outline]:is(:hover, :focus) {
background-color: color-mix(in srgb, currentColor 10%, transparent);
filter: none;
outline: 0.025rem solid currentColor;
outline-offset: 0;
}
button[data-style~=text] {
--btn-bg: transparent;
--btn-color: currentColor;
--btn-border: none;
--btn-height: unset;
--btn-width: unset;
--btn-padding-block: 0.75rem;
--btn-padding-inline: 0.75rem;
}
button[data-style~=text]:is(:hover, :focus) {
background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
outline: 0.025rem solid var(--btn-color);
outline-offset: 0;
filter: none;
}
button[data-style~=icon] {
padding: unset;
height: unset;
--btn-bg: transparent;
min-width: 1.5rem;
min-height: 1.5rem;
text-align: center;
display: inline-flex;
align-items: center;
justify-content: center;
}
button[data-btn~=xs],
button .btn-xs {
--btn-fs: var(--btn-size-xs);
text-transform: uppercase;
}
button[data-btn~=sm],
button .btn-sm {
--btn-fs: var(--btn-size-sm);
}
button[data-btn~=md],
button .btn-md {
--btn-fs: var(--btn-size-md);
}
button[data-btn~=lg],
button .btn-lg {
--btn-fs: var(--btn-size-lg);
}
button[data-btn~=xl],
button .btn-xl {
--btn-fs: var(--btn-size-xl);
}
button[data-btn~="2xl"],
button .btn-2xl {
--btn-fs: var(--btn-size-2xl);
}
button[data-btn~=block],
button .btn-block {
--btn-width: 100%;
display: flex;
justify-content: center;
}
button[data-btn~=text],
button .btn-text {
--btn-bg: transparent;
--btn-color: currentColor;
--btn-border: none;
--btn-height: unset;
--btn-width: unset;
--btn-padding-block: 0.75rem;
--btn-padding-inline: 0.75rem;
}
button[data-btn~=text]:is(:hover, :focus),
button .btn-text:is(:hover, :focus) {
background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
outline: 0.025rem solid var(--btn-color);
outline-offset: 0;
filter: none;
}
/**
* Tag Component Styles - WCAG 2.1 AA Compliant
*
* Provides visual styling for the Tag component with CSS custom properties
* for easy theming and variant support. All measurements use rem units
* for scalability and accessibility.
*
* Accessibility Features:
* - Color contrast ratios meet WCAG AA 4.5:1 minimum (WCAG 1.4.3)
* - Visual indicators beyond color (symbols via ::before) (WCAG 1.4.1)
* - Visible focus indicators with 3:1 contrast (WCAG 2.4.7)
*/
/**
* Base Tag Styles
* Applied to all tag elements via role and data-tag attributes
*/
p[role=note],
[role=note],
small > span,
[data-tag] {
/* Variant color tokens - WCAG AA compliant colors */
--beta: var(--color-amber-400); /* Amber: 6.94:1 contrast with black */
--stable: var(--color-green-700); /* Dark green: 4.56:1 contrast with white */
--production: var(--color-blue-900); /* Dark blue: 8.59:1 contrast with white */
/* Tag component tokens */
--tag-padding-inline: 0.7rem; /* Horizontal padding (11.2px at 16px base) */
--tag-padding-block: 0.2rem; /* Vertical padding (3.2px at 16px base) */
--tag-fs: 0.8rem; /* Font size (12.8px at 16px base) */
--tag-radius: 99rem; /* Fully rounded pill shape */
--tag-bg: var(--color-neutral-300); /* Default background color */
--tag-fw: 500; /* Medium font weight */
--tag-color: currentColor; /* Default text color (inherits) */
--tag-display: inline-block; /* Display type */
/* Apply CSS custom properties */
display: var(--tag-display);
padding-inline: var(--tag-padding-inline);
padding-block: var(--tag-padding-block);
font-size: var(--tag-fs);
color: var(--tag-color);
background-color: var(--tag-bg);
border-radius: var(--tag-radius);
/**
* Focus Indicators (WCAG 2.4.7)
* Visible focus for keyboard navigation with 3:1 minimum contrast
*/
/* Remove outline for mouse users while preserving for keyboard users */
/**
* Variant Modifiers
* Applied via data-tag attribute (e.g., data-tag="beta")
* Each variant includes both color AND visual symbol for accessibility (WCAG 1.4.1)
*/
/* Alpha variant - early development stage */
/* Beta variant - pre-release version */
/* Stable variant - production-ready release */
/* Production variant - live environment indicator */
}
p[role=note]:focus-visible,
[role=note]:focus-visible,
small > span:focus-visible,
[data-tag]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
p[role=note]:focus:not(:focus-visible),
[role=note]:focus:not(:focus-visible),
small > span:focus:not(:focus-visible),
[data-tag]:focus:not(:focus-visible) {
outline: none;
}
p[role=note][data-tag~=alpha],
[role=note][data-tag~=alpha],
small > span[data-tag~=alpha],
[data-tag][data-tag~=alpha] {
--tag-color: var(--color-neutral-900); /* Black: maximum contrast with amber background */
--tag-bg: var(--beta);
/* Visual indicator beyond color - warning symbol */
}
p[role=note][data-tag~=alpha]::before,
[role=note][data-tag~=alpha]::before,
small > span[data-tag~=alpha]::before,
[data-tag][data-tag~=alpha]::before {
content: "⚠";
margin-inline-end: 0.25rem;
font-weight: 700;
aria-hidden: true;
}
p[role=note][data-tag~=beta],
[role=note][data-tag~=beta],
small > span[data-tag~=beta],
[data-tag][data-tag~=beta] {
--tag-color: var(--color-neutral-900); /* Black: maximum contrast with amber background */
--tag-bg: var(--beta);
/* Visual indicator beyond color - warning symbol */
}
p[role=note][data-tag~=beta]::before,
[role=note][data-tag~=beta]::before,
small > span[data-tag~=beta]::before,
[data-tag][data-tag~=beta]::before {
content: "⚠";
margin-inline-end: 0.25rem;
font-weight: 700;
aria-hidden: true;
}
p[role=note][data-tag~=stable],
[role=note][data-tag~=stable],
small > span[data-tag~=stable],
[data-tag][data-tag~=stable] {
--tag-color: var(--color-text-inverse); /* White: 4.56:1 contrast with dark green */
--tag-bg: var(--stable);
/* Visual indicator beyond color - checkmark symbol */
}
p[role=note][data-tag~=stable]::before,
[role=note][data-tag~=stable]::before,
small > span[data-tag~=stable]::before,
[data-tag][data-tag~=stable]::before {
content: "✓";
margin-inline-end: 0.25rem;
font-weight: 700;
aria-hidden: true;
}
p[role=note][data-tag~=production],
[role=note][data-tag~=production],
small > span[data-tag~=production],
[data-tag][data-tag~=production] {
--tag-color: var(--color-text-inverse); /* White: 8.59:1 contrast with dark blue */
--tag-bg: var(--production);
/* Visual indicator beyond color - live indicator symbol */
}
p[role=note][data-tag~=production]::before,
[role=note][data-tag~=production]::before,
small > span[data-tag~=production]::before,
[data-tag][data-tag~=production]::before {
content: "●";
margin-inline-end: 0.25rem;
font-weight: 700;
aria-hidden: true;
}
/**
* Block-level tag modifier
* Applied when Tag renders as
element
*/
p[role=note] {
--tag-display: block;
--tag-radius: 0.5rem; /* Less rounded for block tags (8px at 16px base) */
}
/**
* Image component styles
*
* Applies to all images with alt attribute (both decorative alt="" and semantic).
* Uses CSS custom properties for flexible theming and responsive behavior.
*/
img[alt] {
/* CSS Custom Properties - Override these for customization */
--img-max-width: 100%;
--img-height: auto;
--img-object-fit: cover;
--img-object-position: center;
--img-aspect-ratio: auto 2/3;
--img-display: inline-block;
/* Layout - Responsive by default */
max-width: var(--img-max-width);
max-inline-size: var(--img-max-width); /* Logical property for i18n */
block-size: var(--img-height);
display: var(--img-display);
vertical-align: middle;
/* Object fitting for responsive images */
object-fit: var(--img-object-fit);
object-position: var(--img-object-position);
aspect-ratio: var(--img-aspect-ratio);
/* Accessibility - Italic font for broken image alt text */
font-style: italic;
/* Background for loading state */
background-size: cover;
background-repeat: no-repeat;
/* Shape margin for text wrapping */
shape-margin: var(--spc-3);
}
figure:has(img[alt]) {
--fig-display: flex;
--fig-padding: 0.5rem;
--fig-bg: var(--color-surface-tertiary);
--fig-width: fit-content;
display: var(--fig-display);
position: relative;
padding: var(--fig-padding);
background-color: var(--fig-bg);
max-width: var(--fig-width);
}
figure:has(img[alt]) > figcaption {
position: absolute;
bottom: var(--fig-bottom, var(--fig-padding));
left: var(--fig-left, var(--fig-padding));
right: var(--fig-right, var(--fig-padding));
padding: var(--caption-padding, var(--spc-3));
background-color: var(--fig-bg);
}
:root {
--card-padding: 1.5rem;
--card-bg: var(--color-surface);
--card-radius: calc(var(--card-padding) / 4);
--card-gap: 1rem;
--card-header-padding: 1rem 1.5rem;
--card-header-bg: var(--color-surface-secondary);
--card-header-border-bottom-width: 0.0625rem;
--card-header-border-bottom-style: solid;
--card-header-border-bottom-color: var(--color-border);
--card-body-padding: 1.5rem;
--card-footer-padding: 1rem 1.5rem;
--card-footer-bg: var(--color-surface-secondary);
--card-footer-border-top-width: 0.0625rem;
--card-footer-border-top-style: solid;
--card-footer-border-top-color: var(--color-border);
}
[data-card],
[data-component~=card] {
display: flex;
flex-direction: column;
gap: var(--card-gap);
border-radius: var(--card-radius);
border: var(--card-border, 0.0625rem solid var(--color-border-subtle));
background-color: var(--card-bg);
text-align: var(--card-align, left);
}
[data-card] h3,
[data-card] h2,
[data-component~=card] h3,
[data-component~=card] h2 {
margin-block-end: 0;
padding-block-end: 0;
}
[data-card] + div,
[data-component~=card] + div {
margin-block-start: 0;
}
[data-card] > article,
[data-component~=card] > article {
display: flex;
flex-direction: column;
flex: 2;
}
[data-card] > *:not(img),
[data-component~=card] > *:not(img) {
padding-inline: var(--card-padding);
}
[data-card] > *:last-child:not(img),
[data-component~=card] > *:last-child:not(img) {
padding-block-end: var(--card-padding);
}
[data-card] > *:first-child:not(img),
[data-component~=card] > *:first-child:not(img) {
padding-block-start: calc(var(--card-padding) - 0.5rem);
}
[data-card] > header,
[data-card] > [data-card-header],
[data-component~=card] > header,
[data-component~=card] > [data-card-header] {
padding: var(--card-header-padding);
background-color: var(--card-header-bg);
border-bottom: var(--card-header-border-bottom-width) var(--card-header-border-bottom-style) var(--card-header-border-bottom-color);
border-radius: var(--card-radius) var(--card-radius) 0 0;
}
[data-card] > [data-card-body],
[data-component~=card] > [data-card-body] {
padding: var(--card-body-padding);
flex: 1;
}
[data-card] > footer,
[data-card] > [data-card-footer],
[data-component~=card] > footer,
[data-component~=card] > [data-card-footer] {
padding: var(--card-footer-padding);
background-color: var(--card-footer-bg);
border-top: var(--card-footer-border-top-width) var(--card-footer-border-top-style) var(--card-footer-border-top-color);
border-radius: 0 0 var(--card-radius) var(--card-radius);
}
[data-card=interactive] {
--card-transition-duration: 0.2s;
--card-transition-timing: ease;
--card-hover-lift: -0.125rem;
--card-hover-shadow: 0 0.25rem 0.75rem rgba(var(--color-ui-overlay-base), 0.15);
cursor: pointer;
transition: box-shadow var(--card-transition-duration) var(--card-transition-timing), transform var(--card-transition-duration) var(--card-transition-timing);
}
[data-card=interactive]:hover {
transform: translateY(var(--card-hover-lift));
box-shadow: var(--card-hover-shadow);
}
[data-card=interactive]:focus-visible {
outline: 0.125rem solid var(--color-focus);
outline-offset: 0.125rem;
}
[data-card=interactive]:focus:not(:focus-visible) {
outline: none;
}
progress {
/* Revert all styles */
all: revert;
--progress-width: 100%;
--progress-height: 1rem;
--progress-bg: var(--color-neutral-300);
--progress-color: var(--color-primary);
--progress-accent-color: var(--progress-color);
/* This code changes the color of the progress bar. */
/* The variable names indicate the colors that are used. */
/* The colors are used in the progress bar. */
/* If the progress element is busy, remove the revert styles */
}
progress[value] {
width: var(--progress-width);
height: var(--progress-height);
background-color: var(--progress-bg);
accent-color: var(--progress-accent-color);
/* Styling for the remaining part of the& bar */
}
progress[value]::-webkit-progress-value {
/* Color for Chrome, Safari, and newer Opera */
background-color: var(--progress-accent-color);
accent-color: var(--progress-accent-color);
}
progress[value]::-moz-progress-bar {
/* Color for Firefox */
background-color: var(--progress-accent-color);
accent-color: var(--progress-accent-color);
}
progress[value]::-webkit-progress-bar {
/* Background for Chrome, Safari, and newer Opera */
background-color: var(--progress-background-color);
accent-color: var(--progress-accent-color);
}
progress[aria-busy] {
width: var(--progress-width);
height: var(--progress-height);
accent-color: var(--progress-accent-color);
/* Styling for the remaining part of the& bar */
}
progress[aria-busy]::-webkit-progress-value {
/* Color for Chrome, Safari, and newer Opera */
accent-color: var(--progress-accent-color);
}
progress[aria-busy]::-moz-progress-bar {
accent-color: var(--progress-accent-color);
}
progress[aria-busy]::-webkit-progress-bar {
/* Background for Chrome, Safari, and newer Opera */
accent-color: var(--progress-accent-color);
}
details {
--details-border: 0.0625rem solid var(--color-border-subtle);
--details-direction: column;
--details-display: flex;
--details-gap: 0rem;
--details-height: max-content;
--details-justify: flex-start;
--details-padding-inline: 1.5rem;
--details-padding-block: 1rem;
--details-radius: 0;
--details-width: 100%;
--details-max-height-closed: 6.25rem;
--details-max-height-open: 50rem;
--summary-align: center;
--summary-cursor: pointer;
--summary-display: flex;
--summary-gap: 0.5rem;
--summary-justify: flex-start;
--summary-transitions: all 0.75s ease-in-out;
interpolate-size: allow-keywords;
display: var(--details-display);
flex-direction: var(--details-direction);
justify-content: var(--details-justify);
gap: var(--details-gap);
width: var(--details-width);
border: var(--details-border);
border-left: none;
border-right: none;
transition: var(--summary-transitions);
max-height: var(--details-max-height-closed);
overflow: clip;
}
@starting-style {
details {
transition: var(--summary-transitions);
}
}
details + details {
border-radius: 0;
border-top: none;
}
details:first-of-type {
border-radius: var(--details-radius) var(--details-radius) 0 0;
}
details:last-of-type {
border-radius: 0 0 var(--details-radius) var(--details-radius);
}
details:only-of-type {
border-radius: var(--details-radius);
}
details::marker {
content: none;
}
details summary {
display: var(--summary-display);
justify-content: var(--summary-justify);
align-items: var(--summary-align);
padding-inline: var(--summary-padding-inline, var(--details-padding-inline));
padding-block: var(--summary-padding-block, var(--details-padding-block));
gap: var(--summary-gap);
list-style: none;
border-top-left-radius: var(--details-radius);
border-top-right-radius: var(--details-radius);
transition: var(--summary-transitions);
/* This ensures no bullet points are shown */
}
details summary::-webkit-details-marker {
display: none;
}
details summary:focus-within {
outline: none;
border-bottom: solid 2px currentColor;
background-color: var(--color-surface-secondary);
}
details summary:hover {
cursor: var(--summary-cursor);
}
details summary > section {
width: var(--details-width);
}
details .list-styles summary {
border-left: none;
border-right: none;
}
details > section {
padding-inline: var(--details-padding-inline);
padding-block: var(--details-padding-block);
margin-block-start: 0;
border: 1px transparent solid;
}
details[open] {
max-height: max-content;
transition: var(--summary-transitions);
}
details[open] > summary {
border-bottom: var(--details-border);
}
details[open] > section {
max-height: var(--details-max-height-open);
}
@starting-style {
details[open] > section {
max-height: 0;
}
}
@supports (transition-behavior: allow-discrete) {
@starting-style {
details {
max-height: 0;
transition: var(--summary-transitions);
}
}
}
/**
* Link Component Styles
*
* Provides accessible, customizable link styles using CSS custom properties.
* Supports standard text links, button-styled links, and pill variants.
*
* WCAG 2.1 AA Compliance:
* - Focus indicators meet 2.4.7 (3:1 contrast minimum)
* - Color contrast meets 1.4.3 (4.5:1 for normal text)
* - Uses :focus-visible for better UX (keyboard vs mouse)
*/
a[href] {
--link-color: var(--color-link);
--link-fw: 400;
--link-fs: 1rem;
--link-decoration: none;
--link-decoration-offset: 0.09375rem;
--link-decoration-thickness: 0.0625rem;
--link-skip-ink: auto;
--link-bg: transparent;
--link-radius: 0.25rem;
--link-padding-inline: 0;
--link-padding-block: 0;
--link-transition: all 0.35s ease-in-out;
--link-focus-color: currentColor;
--link-focus-width: 0.125rem;
--link-focus-offset: 0.125rem;
--link-focus-style: solid;
color: var(--link-color);
font-size: var(--link-fs);
font-weight: var(--link-fw);
text-decoration: var(--link-decoration);
text-underline-offset: var(--link-decoration-offset);
text-decoration-thickness: var(--link-decoration-thickness);
text-decoration-skip-ink: var(--link-skip-ink);
background-color: var(--link-bg);
border-radius: var(--link-radius);
transition: var(--link-transition);
}
a[href] > i,
a[href] > b {
font-weight: var(--link-fw);
font-style: normal;
}
a[href]:hover {
--link-decoration: underline;
}
a[href]:focus-visible {
outline: var(--link-focus-width) var(--link-focus-style) var(--link-focus-color);
outline-offset: var(--link-focus-offset);
font-weight: bold;
}
a[href]:visited, a[href]:active {
--link-color: currentColor;
}
a[href]:has(> b), a[href][data-btn], a[href]:has(> i) {
--link-button-color: var(--link-color);
--link-bg: transparent;
--link-decoration: none;
--link-border-width: 0.125rem;
--link-border-color: currentColor;
--link-border-style: solid;
--link-fs: 0.9rem;
color: var(--link-button-color);
background-color: var(--link-bg);
font-style: normal;
font-size: var(--link-fs);
padding-inline: var(--link-fs);
padding-block: calc(var(--link-fs) - 0.4rem);
border-radius: var(--link-radius, 100vw);
display: inline-flex;
align-items: center;
justify-content: center;
outline: var(--link-border-width) var(--link-border-color) var(--link-border-style);
--scale-transition: transform 0.25s ease;
--scale: scale(1);
--scale-to: scale(1.05);
transform: var(--scale);
transition: var(--scale-transition);
}
a[href]:has(> b):focus, a[href]:has(> b):focus-visible, a[href][data-btn]:focus, a[href][data-btn]:focus-visible, a[href]:has(> i):focus, a[href]:has(> i):focus-visible {
outline: var(--link-border-width) var(--link-border-color) var(--link-border-style);
outline-offset: var(--link-focus-offset);
--link-decoration: none;
}
a[href]:has(> b):hover, a[href][data-btn]:hover, a[href]:has(> i):hover {
--link-decoration: none;
}
a[href]:has(> b):hover, a[href][data-btn]:hover, a[href]:has(> i):hover {
transform: var(--scale-to);
}
a[href][data-link~=pill], a[href]:has(> i) {
--link-radius: 100vw;
--link-decoration: none;
font-style: normal;
}
a[href][data-link~=pill]:hover, a[href][data-link~=pill]:focus, a[href][data-link~=pill]:focus-visible, a[href]:has(> i):hover, a[href]:has(> i):focus, a[href]:has(> i):focus-visible {
--link-decoration: none;
}
header,
[data-hero],
[data-grid~=overlay] {
--overlay-grid-area: overlay;
--overlay-placement: center;
--overlay-display: grid;
--overlay-padding: 2rem;
--overlay-width: 100%;
--overlay-height: 40vh;
--overlay-max-height: 500px;
--overlay-color: currentColor;
--overlay-content-width: 80%;
--overlay-gap: 2rem;
--overlay-bg: whitesmoke;
--overlay-padding-inline: auto;
--overlay-padding-block: auto;
--overlay-margin-inline: auto;
--overlay-margin-block: auto;
grid-template-areas: "overlay";
display: var(--overlay-display);
place-items: var(--overlay-placement);
align-items: var(--overlay-placement);
min-height: var(--overlay-height);
width: var(--overlay-width);
color: var(--overlay-color);
background-color: var(--overlay-bg);
min-width: 20rem;
}
header > *,
[data-hero] > *,
[data-grid~=overlay] > * {
grid-area: overlay;
}
header > img,
[data-hero] > img,
[data-grid~=overlay] > img {
width: var(--overlay-width);
background-size: contain;
}
header > div,
header > section,
[data-hero] > div,
[data-hero] > section,
[data-grid~=overlay] > div,
[data-grid~=overlay] > section {
--overlay-display: flex;
max-width: var(--overlay-content-width);
padding-inline: var(--spc-4);
margin-inline: var(--overlay-margin-inline);
gap: var(--overlay-gap);
text-align: center;
}
header > div p,
header > section p,
[data-hero] > div p,
[data-hero] > section p,
[data-grid~=overlay] > div p,
[data-grid~=overlay] > section p {
width: auto;
max-width: 60ch;
font-size: var(--fs-8);
line-height: 1.4;
}
header > div > h1,
header > div > h2,
header > section > h1,
header > section > h2,
[data-hero] > div > h1,
[data-hero] > div > h2,
[data-hero] > section > h1,
[data-hero] > section > h2,
[data-grid~=overlay] > div > h1,
[data-grid~=overlay] > div > h2,
[data-grid~=overlay] > section > h1,
[data-grid~=overlay] > section > h2 {
line-height: var(--header-line-height, 1.1);
font-weight: 500;
}
header > div > h1,
header > section > h1,
[data-hero] > div > h1,
[data-hero] > section > h1,
[data-grid~=overlay] > div > h1,
[data-grid~=overlay] > section > h1 {
font-size: var(--fs-12);
}
header > div > h2,
header > section > h2,
[data-hero] > div > h2,
[data-hero] > section > h2,
[data-grid~=overlay] > div > h2,
[data-grid~=overlay] > section > h2 {
font-size: var(--fs-11);
}
header > div > h3,
header > section > h3,
[data-hero] > div > h3,
[data-hero] > section > h3,
[data-grid~=overlay] > div > h3,
[data-grid~=overlay] > section > h3 {
font-size: var(--fs-10);
}
main,
footer {
--content-width: min(100%, 1480px);
--content-margin-inline: auto;
--content-padding-inline: 1rem;
--content-gap: 2rem;
padding-block: var(--overlay-padding);
}
main > section,
footer > section {
width: var(--content-width);
margin-inline: var(--content-margin-inline);
padding-inline: var(--spc-6);
}
main {
flex: 1;
font-size: var(--fs-3);
}
main > section[aria-label],
main > section {
width: var(--content-width);
margin-inline: var(--content-margin-inline);
}
main > section[aria-label]:has(> article, > aside),
main > section:has(> article, > aside) {
display: flex;
flex-wrap: wrap;
flex: 1;
gap: var(--content-gap);
}
main > section[aria-label]:has(> article, > aside) > article,
main > section:has(> article, > aside) > article {
flex-basis: 0;
flex-grow: 999;
min-inline-size: 50%;
}
main > section[aria-label]:has(> article, > aside) > aside,
main > section:has(> article, > aside) > aside {
flex-basis: 20rem;
flex-grow: 1;
}
footer > div {
display: flex;
align-items: center;
justify-content: center;
min-height: 5rem;
text-align: center;
}
fieldset {
border: var(--fieldset-border, 0.0625rem solid var(--color-border));
border-radius: var(--fieldset-border-radius, 0.5rem);
padding: var(--fieldset-padding, 1rem);
padding-inline: var(--fieldset-padding-inline, 1.5rem);
padding-block: var(--fieldset-padding-block, 1rem);
margin-block: var(--fieldset-margin-block, 2rem);
background: var(--fieldset-bg, transparent);
display: flex;
flex-direction: column;
gap: 1rem;
}
fieldset > legend {
font-size: var(--legend-fs, 1rem);
font-weight: var(--legend-fw, 600);
padding-inline: var(--legend-padding-inline, 0.5rem);
color: var(--legend-color, currentColor);
}
fieldset .fieldset-description {
margin-block-start: 0.5rem;
margin-block-end: 0;
font-size: var(--fieldset-description-fs, 0.875rem);
color: var(--fieldset-description-color, var(--color-text-tertiary));
}
fieldset:focus-within {
outline: var(--fieldset-focus-outline, 0.125rem solid var(--color-focus));
outline-offset: var(--fieldset-focus-offset, 0.125rem);
}
@media (hover: hover) {
fieldset:focus-within:not(:focus-visible) {
outline: none;
}
}
fieldset:disabled {
opacity: var(--fieldset-disabled-opacity, 0.6);
cursor: not-allowed;
}
fieldset:disabled > legend {
color: var(--legend-disabled-color, var(--color-text-disabled));
}
fieldset[data-legend=inline] {
--fieldset-border: none;
--fieldset-padding: 0;
}
fieldset[data-legend=inline] > legend {
float: inline-start;
margin-inline-end: 1rem;
margin-block-end: 0.5rem;
}
fieldset[data-fieldset=grouped] {
--fieldset-bg: var(--color-surface-tertiary);
--fieldset-padding-block: 1.5rem;
--fieldset-border: 0.125rem solid var(--color-focus);
}
fieldset[data-fieldset=grouped] > legend {
--legend-fs: 1.125rem;
--legend-fw: 700;
}
@media (prefers-contrast: high) {
fieldset {
border-width: 2px;
}
fieldset > legend {
font-weight: 700;
}
}
@media (forced-colors: active) {
fieldset {
border: 1px solid CanvasText;
}
fieldset > legend {
color: CanvasText;
}
fieldset .fieldset-description {
color: CanvasText;
}
}
/**
* Box Component Styles
*
* Utility classes for the Box layout primitive.
* All spacing values use the unified spacing scale from globals.
* All units are in rem (1rem = 16px base).
*/
.box-padding-0 {
padding: 0;
}
.box-padding-xs {
padding: var(--spacing-xs);
}
.box-padding-sm {
padding: var(--spacing-sm);
}
.box-padding-md {
padding: var(--spacing-md);
}
.box-padding-lg {
padding: var(--spacing-lg);
}
.box-padding-xl {
padding: var(--spacing-xl);
}
.box-padding-inline-0 {
padding-inline: 0;
}
.box-padding-inline-xs {
padding-inline: var(--spacing-xs);
}
.box-padding-inline-sm {
padding-inline: var(--spacing-sm);
}
.box-padding-inline-md {
padding-inline: var(--spacing-md);
}
.box-padding-inline-lg {
padding-inline: var(--spacing-lg);
}
.box-padding-inline-xl {
padding-inline: var(--spacing-xl);
}
.box-padding-block-0 {
padding-block: 0;
}
.box-padding-block-xs {
padding-block: var(--spacing-xs);
}
.box-padding-block-sm {
padding-block: var(--spacing-sm);
}
.box-padding-block-md {
padding-block: var(--spacing-md);
}
.box-padding-block-lg {
padding-block: var(--spacing-lg);
}
.box-padding-block-xl {
padding-block: var(--spacing-xl);
}
.box-margin-0 {
margin: 0;
}
.box-margin-xs {
margin: var(--spacing-xs);
}
.box-margin-sm {
margin: var(--spacing-sm);
}
.box-margin-md {
margin: var(--spacing-md);
}
.box-margin-lg {
margin: var(--spacing-lg);
}
.box-margin-xl {
margin: var(--spacing-xl);
}
.box-margin-inline-0 {
margin-inline: 0;
}
.box-margin-inline-xs {
margin-inline: var(--spacing-xs);
}
.box-margin-inline-sm {
margin-inline: var(--spacing-sm);
}
.box-margin-inline-md {
margin-inline: var(--spacing-md);
}
.box-margin-inline-lg {
margin-inline: var(--spacing-lg);
}
.box-margin-inline-xl {
margin-inline: var(--spacing-xl);
}
.box-margin-block-0 {
margin-block: 0;
}
.box-margin-block-xs {
margin-block: var(--spacing-xs);
}
.box-margin-block-sm {
margin-block: var(--spacing-sm);
}
.box-margin-block-md {
margin-block: var(--spacing-md);
}
.box-margin-block-lg {
margin-block: var(--spacing-lg);
}
.box-margin-block-xl {
margin-block: var(--spacing-xl);
}
.box-width-auto {
width: auto;
}
.box-width-full {
width: 100%;
}
.box-width-fit {
width: fit-content;
}
.box-width-max {
width: max-content;
}
.box-max-width-xs {
max-width: var(--box-max-width-xs);
}
.box-max-width-sm {
max-width: var(--box-max-width-sm);
}
.box-max-width-md {
max-width: var(--box-max-width-md);
}
.box-max-width-lg {
max-width: var(--box-max-width-lg);
}
.box-max-width-xl {
max-width: var(--box-max-width-xl);
}
.box-max-width-container {
max-width: var(--box-max-width-container);
}
.box-radius-0 {
border-radius: 0;
}
.box-radius-xs {
border-radius: var(--box-radius-xs);
}
.box-radius-sm {
border-radius: var(--box-radius-sm);
}
.box-radius-md {
border-radius: var(--box-radius-md);
}
.box-radius-lg {
border-radius: var(--box-radius-lg);
}
.box-radius-xl {
border-radius: var(--box-radius-xl);
}
.box-radius-full {
border-radius: var(--box-radius-full);
}
/**
* Stack Component Styles
*
* Utility classes for the Stack layout primitive.
* Provides flexbox-based vertical/horizontal layouts with gap spacing.
* All spacing values use the unified spacing scale from globals.
* All units are in rem (1rem = 16px base).
*/
.stack {
display: flex;
flex-direction: column;
}
.stack-vertical {
flex-direction: column;
}
.stack-horizontal {
flex-direction: row;
}
.stack-gap-0 {
gap: 0;
}
.stack-gap-xs {
gap: var(--spacing-xs);
}
.stack-gap-sm {
gap: var(--spacing-sm);
}
.stack-gap-md {
gap: var(--spacing-md);
}
.stack-gap-lg {
gap: var(--spacing-lg);
}
.stack-gap-xl {
gap: var(--spacing-xl);
}
.stack-align-start {
align-items: flex-start;
}
.stack-align-center {
align-items: center;
}
.stack-align-end {
align-items: flex-end;
}
.stack-align-stretch {
align-items: stretch;
}
.stack-justify-start {
justify-content: flex-start;
}
.stack-justify-center {
justify-content: center;
}
.stack-justify-end {
justify-content: flex-end;
}
.stack-justify-between {
justify-content: space-between;
}
.stack-wrap {
flex-wrap: wrap;
}
.stack-nowrap {
flex-wrap: nowrap;
}
/**
* Cluster Component Styles
*
* Utility classes for the Cluster layout primitive.
* Provides wrapping flex layout for inline groups (tags, badges, buttons).
* All spacing values use the unified spacing scale from globals.
* All units are in rem (1rem = 16px base).
*/
.cluster {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-sm);
}
.cluster-gap-0 {
gap: 0;
}
.cluster-gap-xs {
gap: var(--spacing-xs);
}
.cluster-gap-sm {
gap: var(--spacing-sm);
}
.cluster-gap-md {
gap: var(--spacing-md);
}
.cluster-gap-lg {
gap: var(--spacing-lg);
}
.cluster-gap-xl {
gap: var(--spacing-xl);
}
.cluster-justify-start {
justify-content: flex-start;
}
.cluster-justify-center {
justify-content: center;
}
.cluster-justify-end {
justify-content: flex-end;
}
.cluster-justify-between {
justify-content: space-between;
}
.cluster-align-start {
align-items: flex-start;
}
.cluster-align-center {
align-items: center;
}
.cluster-align-end {
align-items: flex-end;
}
.cluster-align-baseline {
align-items: baseline;
}
/**
* Grid Component Styles
*
* Utility classes for the Grid layout primitive and Grid.Item sub-component.
* Provides CSS Grid-based layouts with responsive columns, gap spacing, and alignment.
* All spacing values use the unified spacing scale from globals.
* All units are in rem (1rem = 16px base).
*/
.grid {
display: grid;
gap: var(--spacing-md);
}
.grid-cols-1 {
grid-template-columns: repeat(1, 1fr);
}
.grid-cols-2 {
grid-template-columns: repeat(2, 1fr);
}
.grid-cols-3 {
grid-template-columns: repeat(3, 1fr);
}
.grid-cols-4 {
grid-template-columns: repeat(4, 1fr);
}
.grid-cols-5 {
grid-template-columns: repeat(5, 1fr);
}
.grid-cols-6 {
grid-template-columns: repeat(6, 1fr);
}
.grid-cols-7 {
grid-template-columns: repeat(7, 1fr);
}
.grid-cols-8 {
grid-template-columns: repeat(8, 1fr);
}
.grid-cols-9 {
grid-template-columns: repeat(9, 1fr);
}
.grid-cols-10 {
grid-template-columns: repeat(10, 1fr);
}
.grid-cols-11 {
grid-template-columns: repeat(11, 1fr);
}
.grid-cols-12 {
grid-template-columns: repeat(12, 1fr);
}
.grid-gap-0 {
gap: 0;
}
.grid-gap-xs {
gap: var(--spacing-xs);
}
.grid-gap-sm {
gap: var(--spacing-sm);
}
.grid-gap-md {
gap: var(--spacing-md);
}
.grid-gap-lg {
gap: var(--spacing-lg);
}
.grid-gap-xl {
gap: var(--spacing-xl);
}
.grid-gap-x-0 {
column-gap: 0;
}
.grid-gap-x-xs {
column-gap: var(--spacing-xs);
}
.grid-gap-x-sm {
column-gap: var(--spacing-sm);
}
.grid-gap-x-md {
column-gap: var(--spacing-md);
}
.grid-gap-x-lg {
column-gap: var(--spacing-lg);
}
.grid-gap-x-xl {
column-gap: var(--spacing-xl);
}
.grid-gap-y-0 {
row-gap: 0;
}
.grid-gap-y-xs {
row-gap: var(--spacing-xs);
}
.grid-gap-y-sm {
row-gap: var(--spacing-sm);
}
.grid-gap-y-md {
row-gap: var(--spacing-md);
}
.grid-gap-y-lg {
row-gap: var(--spacing-lg);
}
.grid-gap-y-xl {
row-gap: var(--spacing-xl);
}
.grid-justify-items-start {
justify-items: start;
}
.grid-justify-items-center {
justify-items: center;
}
.grid-justify-items-end {
justify-items: end;
}
.grid-justify-items-stretch {
justify-items: stretch;
}
.grid-align-items-start {
align-items: start;
}
.grid-align-items-center {
align-items: center;
}
.grid-align-items-end {
align-items: end;
}
.grid-align-items-stretch {
align-items: stretch;
}
.grid-col-span-1 {
grid-column: span 1;
}
.grid-col-span-2 {
grid-column: span 2;
}
.grid-col-span-3 {
grid-column: span 3;
}
.grid-col-span-4 {
grid-column: span 4;
}
.grid-col-span-5 {
grid-column: span 5;
}
.grid-col-span-6 {
grid-column: span 6;
}
.grid-col-span-7 {
grid-column: span 7;
}
.grid-col-span-8 {
grid-column: span 8;
}
.grid-col-span-9 {
grid-column: span 9;
}
.grid-col-span-10 {
grid-column: span 10;
}
.grid-col-span-11 {
grid-column: span 11;
}
.grid-col-span-12 {
grid-column: span 12;
}
.grid-row-span-1 {
grid-row: span 1;
}
.grid-row-span-2 {
grid-row: span 2;
}
.grid-row-span-3 {
grid-row: span 3;
}
.grid-row-span-4 {
grid-row: span 4;
}
.grid-row-span-5 {
grid-row: span 5;
}
.grid-row-span-6 {
grid-row: span 6;
}
:root {
--dialog-min-width: max(20rem, 80%);
--dialog-width: var(--dialog-min-width);
--dialog-max-width: 90vw;
--dialog-max-height: 85vh;
--dialog-margin: auto;
--dialog-inset: 0;
--dialog-gap: 0.625rem;
--dialog-border-color: var(--color-border);
--dialog-border-width: thin;
--dialog-border-style: solid;
--dialog-border-radius: var(--border-radius);
--dialog-padding: 1.5rem;
--dialog-padding-inline: 1rem;
--dialog-close-color: var(--color-text-secondary);
--dialog-button-bg: transparent;
--dialog-button-border: transparent thin solid;
--dialog-button-hover-bg: var(--color-surface-secondary);
--dialog-display: flex;
--dialog-flex-direction: column;
/* Focus and accessibility */
--dialog-focus-color: var(--color-focus);
--dialog-focus-width: 0.125rem;
--dialog-focus-offset: 0.125rem;
--dialog-focus-outline: var(--dialog-focus-width) solid var(--dialog-focus-color);
}
/* High contrast mode support */
@media (prefers-contrast: high) {
:root {
--dialog-border-color: currentColor;
--dialog-border-width: 0.125rem;
--dialog-close-color: currentColor;
--dialog-button-border: currentColor 0.125rem solid;
--dialog-focus-width: 0.1875rem;
}
}
dialog {
margin: var(--dialog-margin);
inset: var(--dialog-inset);
width: var(--dialog-width);
max-width: var(--dialog-max-width);
max-height: var(--dialog-max-height);
gap: var(--dialog-gap);
border: var(--dialog-border-color) var(--dialog-border-width) solid;
border-radius: var(--dialog-border-radius);
padding: var(--dialog-padding);
padding-block-start: var(--dialog-padding);
/* Focus visible for keyboard navigation */
}
dialog:focus-visible {
outline: var(--dialog-focus-outline);
outline-offset: var(--dialog-focus-offset);
}
dialog[open] {
display: var(--dialog-display);
flex-direction: var(--dialog-flex-direction);
gap: var(--dialog-gap);
}
dialog section {
width: 100%;
display: flex;
justify-content: start;
gap: var(--dialog-gap);
flex-direction: var(--dialog-flex-direction);
margin-block-start: 0;
--sect-y: 0;
}
.dialog-header {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
min-width: 100%;
}
.dialog-header h3 {
margin-block-start: 0;
margin-block-end: 0;
}
.dialog-header .dialog-close {
margin-block-end: 0;
}
.dialog-header button[type=button] {
background-color: var(--dialog-button-bg);
border: var(--dialog-button-border);
color: var(--dialog-close-color);
cursor: pointer;
/* Keyboard focus indicator */
/* Remove default focus for mouse users */
}
.dialog-header button[type=button]:hover {
border-color: var(--dialog-close-color);
background-color: var(--dialog-button-hover-bg);
}
.dialog-header button[type=button]:focus-visible {
outline: var(--dialog-focus-outline);
outline-offset: var(--dialog-focus-offset);
border-color: var(--dialog-focus-color);
background-color: var(--dialog-button-hover-bg);
}
.dialog-header button[type=button]:focus:not(:focus-visible) {
outline: none;
}
.alert-dialog-actions,
.dialog-footer {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: var(--dialog-footer-justify, flex-end);
gap: var(--dialog-gap);
width: 100%;
/* Focus styles for footer buttons */
}
.alert-dialog-actions button:focus-visible,
.dialog-footer button:focus-visible {
outline: var(--dialog-focus-outline);
outline-offset: var(--dialog-focus-offset);
}
.alert-dialog-actions button:focus:not(:focus-visible),
.dialog-footer button:focus:not(:focus-visible) {
outline: none;
}
/* ── Size variants ─────────────────────────── */
dialog[data-size=sm] {
--dialog-width: 25rem;
}
dialog[data-size=md] {
--dialog-width: 32rem;
}
dialog[data-size=lg] {
--dialog-width: 48rem;
}
dialog[data-size=full] {
box-sizing: border-box;
width: 100vw;
max-width: 100vw;
height: 100vh;
max-height: 100vh;
margin: 0;
inset: 0;
border: 0;
border-radius: 0;
}
/* ── Position variants ─────────────────────── */
dialog[data-position=center] {
--dialog-margin: auto;
--dialog-inset: 0;
}
dialog[data-position=top] {
--dialog-margin: 0 auto auto auto;
--dialog-inset: 0;
}
dialog[data-position=bottom] {
--dialog-margin: auto auto 0 auto;
--dialog-inset: 0;
}
dialog[data-position=left] {
--dialog-margin: 0 auto 0 0;
--dialog-inset: 0;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
dialog[data-position=right] {
--dialog-margin: 0 0 0 auto;
--dialog-inset: 0;
height: 100vh;
max-height: 100vh;
border-radius: 0;
}
dialog[data-position=top-left] {
--dialog-margin: 0 auto auto 0;
--dialog-inset: 0;
}
dialog[data-position=top-right] {
--dialog-margin: 0 0 auto auto;
--dialog-inset: 0;
}
dialog[data-position=bottom-left] {
--dialog-margin: auto auto 0 0;
--dialog-inset: 0;
}
dialog[data-position=bottom-right] {
--dialog-margin: auto 0 0 auto;
--dialog-inset: 0;
}
/**
* Popover Component Styles
* Uses native HTML popover API with CSS custom properties
*/
.fpkit-popover {
--popover-bg: var(--color-surface-elevated);
--popover-border: 0.0625rem solid var(--color-border);
--popover-border-radius: 0.5rem;
--popover-padding: 1rem;
--popover-margin: 0.5rem;
--popover-max-width: 20rem;
--popover-shadow: 0 0.25rem 0.5rem rgba(var(--color-ui-overlay-base), 0.1),
0 0.125rem 0.25rem rgba(var(--color-ui-overlay-base), 0.06);
--popover-arrow-size: 0.5rem;
--popover-arrow-color: var(--popover-bg);
--popover-close-size: 1.5rem;
--popover-close-color: var(--color-text-tertiary);
--popover-close-hover-color: var(--color-text);
--popover-close-hover-bg: var(--color-hover-overlay);
background: var(--popover-bg);
border: var(--popover-border);
border-radius: var(--popover-border-radius);
padding: var(--popover-padding);
max-width: var(--popover-max-width);
box-shadow: var(--popover-shadow);
margin: 0;
}
.fpkit-popover[data-placement=top] {
margin-bottom: var(--popover-margin);
}
.fpkit-popover[data-placement=bottom] {
margin-top: var(--popover-margin);
}
.fpkit-popover[data-placement=left] {
margin-right: var(--popover-margin);
}
.fpkit-popover[data-placement=right] {
margin-left: var(--popover-margin);
}
.fpkit-popover:popover-open {
opacity: 1;
transform: scale(1);
transition: opacity 0.2s ease-out, transform 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete;
}
@starting-style {
.fpkit-popover:popover-open {
opacity: 0;
transform: scale(0.95);
}
}
.fpkit-popover:not(:popover-open) {
opacity: 0;
transform: scale(0.95);
transition: opacity 0.2s ease-in, transform 0.2s ease-in, overlay 0.2s ease-in allow-discrete, display 0.2s ease-in allow-discrete;
}
.fpkit-popover::backdrop {
background: rgba(var(--color-ui-overlay-base), 0.3);
backdrop-filter: blur(0.125rem);
transition: background 0.2s ease-out, backdrop-filter 0.2s ease-out, overlay 0.2s ease-out allow-discrete, display 0.2s ease-out allow-discrete;
}
@starting-style {
.fpkit-popover::backdrop {
background: rgba(var(--color-ui-overlay-base), 0);
backdrop-filter: blur(0);
}
}
.fpkit-popover-content {
position: relative;
display: block;
}
.fpkit-popover-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: var(--popover-close-size);
height: var(--popover-close-size);
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
border-radius: 0.25rem;
color: var(--popover-close-color);
font-size: 1rem;
line-height: 1;
cursor: pointer;
transition: background-color 0.15s ease, color 0.15s ease;
}
.fpkit-popover-close:hover {
background: var(--popover-close-hover-bg);
color: var(--popover-close-hover-color);
}
.fpkit-popover-close:focus-visible {
outline: 0.125rem solid currentColor;
outline-offset: 0.125rem;
}
.fpkit-popover-arrow {
position: absolute;
width: var(--popover-arrow-size);
height: var(--popover-arrow-size);
background: var(--popover-arrow-color);
transform: rotate(45deg);
border: inherit;
}
.fpkit-popover-arrow[data-placement=top] {
bottom: calc(var(--popover-arrow-size) / -2);
left: 50%;
margin-left: calc(var(--popover-arrow-size) / -2);
border-top: none;
border-left: none;
}
.fpkit-popover-arrow[data-placement=bottom] {
top: calc(var(--popover-arrow-size) / -2);
left: 50%;
margin-left: calc(var(--popover-arrow-size) / -2);
border-bottom: none;
border-right: none;
}
.fpkit-popover-arrow[data-placement=left] {
right: calc(var(--popover-arrow-size) / -2);
top: 50%;
margin-top: calc(var(--popover-arrow-size) / -2);
border-left: none;
border-bottom: none;
}
.fpkit-popover-arrow[data-placement=right] {
left: calc(var(--popover-arrow-size) / -2);
top: 50%;
margin-top: calc(var(--popover-arrow-size) / -2);
border-right: none;
border-top: none;
}
.fpkit-popover-trigger {
padding: 0.5rem 1rem;
background: var(--color-primary);
color: var(--color-text-inverse);
border: none;
border-radius: 0.25rem;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.15s ease, transform 0.1s ease;
}
.fpkit-popover-trigger:hover {
background: var(--color-primary-hover);
}
.fpkit-popover-trigger:active {
transform: scale(0.98);
}
.fpkit-popover-trigger:focus-visible {
outline: 0.125rem solid currentColor;
outline-offset: 0.125rem;
}
@supports (anchor-name: --trigger) {
.fpkit-popover-trigger {
anchor-name: --trigger;
}
.fpkit-popover {
position-anchor: --trigger;
}
.fpkit-popover[data-placement=top] {
bottom: anchor(top);
left: anchor(center);
translate: -50% 0;
}
.fpkit-popover[data-placement=bottom] {
top: anchor(bottom);
left: anchor(center);
translate: -50% 0;
}
.fpkit-popover[data-placement=left] {
right: anchor(left);
top: anchor(center);
translate: 0 -50%;
}
.fpkit-popover[data-placement=right] {
left: anchor(right);
top: anchor(center);
translate: 0 -50%;
}
}
:root {
--gap: 1.75rem;
}
:where([data-grid]) {
--gap: 1.5rem;
--grid-column-min-width: 20.3125rem;
--grid-gap: var(--gap);
--grid-padding: 10px;
--grid-justify-content: center;
--grid-align-content: center;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min-width), 1fr));
gap: var(--grid-gap);
padding: var(--grid-padding);
justify-content: var(--grid-justify-content);
align-content: var(--grid-align-content);
}
:where([data-flex]) {
display: flex;
flex-wrap: wrap;
margin-block-end: 3rem;
margin-inline: auto;
justify-content: center;
gap: var(--gap);
}
:where([data-flex]) > *:has(div, aside, article) {
flex-basis: calc(var(--col-w, 100%) - var(--card-gap));
min-width: var(--col-min-w, 18.75rem);
}
:where([data-flex~=start]) {
justify-content: start;
}
:where([data-flex~=end]) {
justify-content: end;
}
:where([data-flex~=cols-2]) {
--col-w: 50%;
}
:where([data-flex~=cols-3]) {
--col-w: 33%;
}
:where([data-flex~=cols-4]) {
--col-w: 25%;
}
:where([data-flex~=cols-5]) {
--col-w: 20%;
}
:where([data-flex~=cols-6]) {
--col-w: 16%;
}
:where([data-flex~=cols-7]) {
--col-w: 14%;
}
:where([data-flex~=cols-8]) {
--col-w: 12%;
}
:where([data-flex~=cols-9]) {
--col-w: 11%;
}
:where([data-flex~=cols-10]) {
--col-w: 10%;
}
:where([data-flex~=cols-11]) {
--col-w: 9%;
}
:where([data-flex~=cols-12]) {
--col-w: 8%;
}
:where([data-flex-grid]) {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(var(--grid-column-min-width, 20.3125rem), 1fr));
gap: var(--gap);
margin-block-end: 3rem;
margin-inline: auto;
justify-content: center;
align-content: start;
}
/**
* 12-Column Utility System
*
* Layout-agnostic column width utilities following Bootstrap/Foundation patterns.
* Works with Flex, Grid, or standalone elements.
*
* Responsive Behavior:
* - Mobile (< 48rem): All columns 100% width (stacked)
* - Desktop (>= 48rem): Fractional percentage widths
*
* All units in rem (1rem = 16px base).
*/
/* CSS Custom Properties */
:root {
--col-breakpoint: 48rem; /* 768px - matches fpkit md breakpoint */
/* Column width percentages (fractions of 12) */
--col-1: 8.333333%;
--col-2: 16.666667%;
--col-3: 25%;
--col-4: 33.333333%;
--col-5: 41.666667%;
--col-6: 50%;
--col-7: 58.333333%;
--col-8: 66.666667%;
--col-9: 75%;
--col-10: 83.333333%;
--col-11: 91.666667%;
--col-12: 100%;
}
/**
* Responsive Breakpoints (mobile-first)
* These CSS custom properties document the breakpoint values and can be
* accessed via JavaScript. SCSS uses literal values for media queries.
*/
:root {
--col-breakpoint-xs: 0rem; /* 0px - base mobile */
--col-breakpoint-sm: 30rem; /* 480px - large phones */
--col-breakpoint-md: 48rem; /* 768px - tablets */
--col-breakpoint-lg: 64rem; /* 1024px - desktops */
/* Legacy support - keep for backward compatibility */
--col-breakpoint: var(--col-breakpoint-md);
}
/**
* Breakpoint map for SCSS loop generation
* Uses literal rem values (not CSS custom properties) because
* @media queries require compile-time values, not runtime CSS variables.
*/
/* ============================================================================
Row Container Utility (Optional)
========================================================================== */
/**
* .col-row provides a convenient flex container for column layouts.
* Alternative to using the Flex component for simple, standalone usage.
*
* Usage:
*
*/
.col-row {
display: flex;
flex-wrap: wrap;
gap: var(--spacing-md); /* Default gap - can be overridden with gap utilities */
}
/* ============================================================================
Base Column Classes - Mobile First (100% width)
========================================================================== */
.col-1,
.col-2,
.col-3,
.col-4,
.col-5,
.col-6,
.col-7,
.col-8,
.col-9,
.col-10,
.col-11,
.col-12 {
flex: 0 0 100%; /* flex-grow flex-shrink flex-basis */
min-width: 0; /* Prevent content overflow in flex containers */
box-sizing: border-box;
}
/* Desktop Column Widths (>= 48rem / 768px) */
@media (width >= 48rem) {
/* Prevent wrapping at desktop - columns shrink to fit instead */
.col-row {
flex-wrap: nowrap;
}
.col-1 {
flex: 0 1 var(--col-1);
}
.col-2 {
flex: 0 1 var(--col-2);
}
.col-3 {
flex: 0 1 var(--col-3);
}
.col-4 {
flex: 0 1 var(--col-4);
}
.col-5 {
flex: 0 1 var(--col-5);
}
.col-6 {
flex: 0 1 var(--col-6);
}
.col-7 {
flex: 0 1 var(--col-7);
}
.col-8 {
flex: 0 1 var(--col-8);
}
.col-9 {
flex: 0 1 var(--col-9);
}
.col-10 {
flex: 0 1 var(--col-10);
}
.col-11 {
flex: 0 1 var(--col-11);
}
.col-12 {
flex: 0 1 var(--col-12);
}
}
/* ============================================================================
Responsive Column Span Utilities (Generated)
========================================================================== */
/**
* Generate responsive span utilities for all breakpoints
* Produces: .col-{sm|md|lg}-{1-12}, .col-{sm|md|lg}-auto, .col-{sm|md|lg}-flex
*
* These utilities enable mobile-first responsive layouts where columns can
* have different widths at different breakpoints. For example:
* .col-12.col-md-6.col-lg-4 creates a layout that:
* - Stacks full-width (100%) on mobile (< 768px)
* - Shows 2 columns (50%) on tablets (>= 768px)
* - Shows 3 columns (33.33%) on desktops (>= 1024px)
*/
@media (width >= 30rem) {
.col-sm-1 {
flex: 0 1 var(--col-1);
}
.col-sm-2 {
flex: 0 1 var(--col-2);
}
.col-sm-3 {
flex: 0 1 var(--col-3);
}
.col-sm-4 {
flex: 0 1 var(--col-4);
}
.col-sm-5 {
flex: 0 1 var(--col-5);
}
.col-sm-6 {
flex: 0 1 var(--col-6);
}
.col-sm-7 {
flex: 0 1 var(--col-7);
}
.col-sm-8 {
flex: 0 1 var(--col-8);
}
.col-sm-9 {
flex: 0 1 var(--col-9);
}
.col-sm-10 {
flex: 0 1 var(--col-10);
}
.col-sm-11 {
flex: 0 1 var(--col-11);
}
.col-sm-12 {
flex: 0 1 var(--col-12);
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.col-sm-flex {
flex: 1 1 0%;
min-width: 0;
}
}
@media (width >= 48rem) {
.col-md-1 {
flex: 0 1 var(--col-1);
}
.col-md-2 {
flex: 0 1 var(--col-2);
}
.col-md-3 {
flex: 0 1 var(--col-3);
}
.col-md-4 {
flex: 0 1 var(--col-4);
}
.col-md-5 {
flex: 0 1 var(--col-5);
}
.col-md-6 {
flex: 0 1 var(--col-6);
}
.col-md-7 {
flex: 0 1 var(--col-7);
}
.col-md-8 {
flex: 0 1 var(--col-8);
}
.col-md-9 {
flex: 0 1 var(--col-9);
}
.col-md-10 {
flex: 0 1 var(--col-10);
}
.col-md-11 {
flex: 0 1 var(--col-11);
}
.col-md-12 {
flex: 0 1 var(--col-12);
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
}
.col-md-flex {
flex: 1 1 0%;
min-width: 0;
}
}
@media (width >= 64rem) {
.col-lg-1 {
flex: 0 1 var(--col-1);
}
.col-lg-2 {
flex: 0 1 var(--col-2);
}
.col-lg-3 {
flex: 0 1 var(--col-3);
}
.col-lg-4 {
flex: 0 1 var(--col-4);
}
.col-lg-5 {
flex: 0 1 var(--col-5);
}
.col-lg-6 {
flex: 0 1 var(--col-6);
}
.col-lg-7 {
flex: 0 1 var(--col-7);
}
.col-lg-8 {
flex: 0 1 var(--col-8);
}
.col-lg-9 {
flex: 0 1 var(--col-9);
}
.col-lg-10 {
flex: 0 1 var(--col-10);
}
.col-lg-11 {
flex: 0 1 var(--col-11);
}
.col-lg-12 {
flex: 0 1 var(--col-12);
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.col-lg-flex {
flex: 1 1 0%;
min-width: 0;
}
}
/* ============================================================================
DEPRECATED: Proportional Layout Mode
========================================================================== */
/**
* @deprecated Use responsive utility classes instead (.col-sm-*, .col-md-*, .col-lg-*)
* This class will be removed in v5.0.0
*
* .col-row-proportional prevents columns from stacking on tablets and larger.
* Columns still stack on mobile phones (< 30rem / 480px) for readability,
* but maintain proportional widths on tablets and desktops (>= 30rem / 480px).
*
* Migration:
* Before:
|
* After:
|
*
* Backward compatibility maintained for now, but use responsive utilities for new code.
*
* Usage with Row component (deprecated):
*
* Column 1
* Column 2
*
*
* Usage with vanilla HTML (deprecated):
*
*/
@media (width >= 30rem) {
.col-row-proportional .col-1,
.col-row-proportional .col-2,
.col-row-proportional .col-3,
.col-row-proportional .col-4,
.col-row-proportional .col-5,
.col-row-proportional .col-6,
.col-row-proportional .col-7,
.col-row-proportional .col-8,
.col-row-proportional .col-9,
.col-row-proportional .col-10,
.col-row-proportional .col-11,
.col-row-proportional .col-12 {
flex: 0 1 auto; /* Allow proportional sizing with shrink */
}
.col-row-proportional .col-1 {
flex-basis: var(--col-1);
}
.col-row-proportional .col-2 {
flex-basis: var(--col-2);
}
.col-row-proportional .col-3 {
flex-basis: var(--col-3);
}
.col-row-proportional .col-4 {
flex-basis: var(--col-4);
}
.col-row-proportional .col-5 {
flex-basis: var(--col-5);
}
.col-row-proportional .col-6 {
flex-basis: var(--col-6);
}
.col-row-proportional .col-7 {
flex-basis: var(--col-7);
}
.col-row-proportional .col-8 {
flex-basis: var(--col-8);
}
.col-row-proportional .col-9 {
flex-basis: var(--col-9);
}
.col-row-proportional .col-10 {
flex-basis: var(--col-10);
}
.col-row-proportional .col-11 {
flex-basis: var(--col-11);
}
.col-row-proportional .col-12 {
flex-basis: var(--col-12);
}
}
/* Optional: Column Offset Utilities */
@media (width >= 48rem) {
.col-offset-0 {
margin-inline-start: 0;
}
.col-offset-1 {
margin-inline-start: var(--col-1);
}
.col-offset-2 {
margin-inline-start: var(--col-2);
}
.col-offset-3 {
margin-inline-start: var(--col-3);
}
.col-offset-4 {
margin-inline-start: var(--col-4);
}
.col-offset-5 {
margin-inline-start: var(--col-5);
}
.col-offset-6 {
margin-inline-start: var(--col-6);
}
.col-offset-7 {
margin-inline-start: var(--col-7);
}
.col-offset-8 {
margin-inline-start: var(--col-8);
}
.col-offset-9 {
margin-inline-start: var(--col-9);
}
.col-offset-10 {
margin-inline-start: var(--col-10);
}
.col-offset-11 {
margin-inline-start: var(--col-11);
}
}
/* ============================================================================
Responsive Column Offset Utilities (Generated)
========================================================================== */
/**
* Generate responsive offset utilities for all breakpoints
* Produces: .col-{sm|md|lg}-offset-{0-11}
*
* Responsive offsets enable pushing columns to the right at specific breakpoints.
* For example: .col-md-offset-3 adds left margin equal to 3 columns on tablets+
*/
@media (width >= 30rem) {
.col-sm-offset-0 {
margin-inline-start: 0;
}
.col-sm-offset-1 {
margin-inline-start: var(--col-1);
}
.col-sm-offset-2 {
margin-inline-start: var(--col-2);
}
.col-sm-offset-3 {
margin-inline-start: var(--col-3);
}
.col-sm-offset-4 {
margin-inline-start: var(--col-4);
}
.col-sm-offset-5 {
margin-inline-start: var(--col-5);
}
.col-sm-offset-6 {
margin-inline-start: var(--col-6);
}
.col-sm-offset-7 {
margin-inline-start: var(--col-7);
}
.col-sm-offset-8 {
margin-inline-start: var(--col-8);
}
.col-sm-offset-9 {
margin-inline-start: var(--col-9);
}
.col-sm-offset-10 {
margin-inline-start: var(--col-10);
}
.col-sm-offset-11 {
margin-inline-start: var(--col-11);
}
}
@media (width >= 48rem) {
.col-md-offset-0 {
margin-inline-start: 0;
}
.col-md-offset-1 {
margin-inline-start: var(--col-1);
}
.col-md-offset-2 {
margin-inline-start: var(--col-2);
}
.col-md-offset-3 {
margin-inline-start: var(--col-3);
}
.col-md-offset-4 {
margin-inline-start: var(--col-4);
}
.col-md-offset-5 {
margin-inline-start: var(--col-5);
}
.col-md-offset-6 {
margin-inline-start: var(--col-6);
}
.col-md-offset-7 {
margin-inline-start: var(--col-7);
}
.col-md-offset-8 {
margin-inline-start: var(--col-8);
}
.col-md-offset-9 {
margin-inline-start: var(--col-9);
}
.col-md-offset-10 {
margin-inline-start: var(--col-10);
}
.col-md-offset-11 {
margin-inline-start: var(--col-11);
}
}
@media (width >= 64rem) {
.col-lg-offset-0 {
margin-inline-start: 0;
}
.col-lg-offset-1 {
margin-inline-start: var(--col-1);
}
.col-lg-offset-2 {
margin-inline-start: var(--col-2);
}
.col-lg-offset-3 {
margin-inline-start: var(--col-3);
}
.col-lg-offset-4 {
margin-inline-start: var(--col-4);
}
.col-lg-offset-5 {
margin-inline-start: var(--col-5);
}
.col-lg-offset-6 {
margin-inline-start: var(--col-6);
}
.col-lg-offset-7 {
margin-inline-start: var(--col-7);
}
.col-lg-offset-8 {
margin-inline-start: var(--col-8);
}
.col-lg-offset-9 {
margin-inline-start: var(--col-9);
}
.col-lg-offset-10 {
margin-inline-start: var(--col-10);
}
.col-lg-offset-11 {
margin-inline-start: var(--col-11);
}
}
/* Optional: Auto-Width Columns */
.col-auto {
width: auto;
flex: 0 0 auto;
}
/* Optional: Flex-Grow Columns */
/**
* .col-flex provides a column that grows to fill remaining space.
* Different from .col-auto (content-based) - this uses flex-grow.
*
* Key Differences:
* - .col-auto: Sizes to content width (flex: 0 0 auto)
* - .col-flex: Grows to fill space (flex: 1 1 0%)
*
* Responsive Behavior:
* - Mobile (< 48rem): 100% width (stacked)
* - Desktop (>= 48rem): Grows to fill remaining space
*
* Usage:
*
* Fixed 25%
* Fills remaining 75%
*
*/
.col-flex {
/* Mobile: Stack like all columns */
flex: 0 0 100%;
min-width: 0; /* Prevent content overflow */
box-sizing: border-box;
}
/* Desktop: Grow to fill available space */
@media (width >= 48rem) {
.col-flex {
flex: 1 1 0%; /* flex-grow: 1, flex-shrink: 1, flex-basis: 0% */
}
}
/* Optional: Column Order Utilities */
@media (width >= 48rem) {
.col-order-first {
order: -1;
}
.col-order-last {
order: 13;
}
.col-order-0 {
order: 0;
}
.col-order-1 {
order: 1;
}
.col-order-2 {
order: 2;
}
.col-order-3 {
order: 3;
}
.col-order-4 {
order: 4;
}
.col-order-5 {
order: 5;
}
.col-order-6 {
order: 6;
}
.col-order-7 {
order: 7;
}
.col-order-8 {
order: 8;
}
.col-order-9 {
order: 9;
}
.col-order-10 {
order: 10;
}
.col-order-11 {
order: 11;
}
.col-order-12 {
order: 12;
}
}
/* ============================================================================
Responsive Column Order Utilities (Generated)
========================================================================== */
/**
* Generate responsive order utilities for all breakpoints
* Produces: .col-{sm|md|lg}-order-{first|last|0-12}
*
* Responsive ordering enables reordering columns at specific breakpoints.
* Visual order changes don't affect DOM order (important for accessibility).
* For example: .col-md-order-2 sets order:2 on tablets+
*/
@media (width >= 30rem) {
.col-sm-order-first {
order: -1;
}
.col-sm-order-last {
order: 13;
}
.col-sm-order-0 {
order: 0;
}
.col-sm-order-1 {
order: 1;
}
.col-sm-order-2 {
order: 2;
}
.col-sm-order-3 {
order: 3;
}
.col-sm-order-4 {
order: 4;
}
.col-sm-order-5 {
order: 5;
}
.col-sm-order-6 {
order: 6;
}
.col-sm-order-7 {
order: 7;
}
.col-sm-order-8 {
order: 8;
}
.col-sm-order-9 {
order: 9;
}
.col-sm-order-10 {
order: 10;
}
.col-sm-order-11 {
order: 11;
}
.col-sm-order-12 {
order: 12;
}
}
@media (width >= 48rem) {
.col-md-order-first {
order: -1;
}
.col-md-order-last {
order: 13;
}
.col-md-order-0 {
order: 0;
}
.col-md-order-1 {
order: 1;
}
.col-md-order-2 {
order: 2;
}
.col-md-order-3 {
order: 3;
}
.col-md-order-4 {
order: 4;
}
.col-md-order-5 {
order: 5;
}
.col-md-order-6 {
order: 6;
}
.col-md-order-7 {
order: 7;
}
.col-md-order-8 {
order: 8;
}
.col-md-order-9 {
order: 9;
}
.col-md-order-10 {
order: 10;
}
.col-md-order-11 {
order: 11;
}
.col-md-order-12 {
order: 12;
}
}
@media (width >= 64rem) {
.col-lg-order-first {
order: -1;
}
.col-lg-order-last {
order: 13;
}
.col-lg-order-0 {
order: 0;
}
.col-lg-order-1 {
order: 1;
}
.col-lg-order-2 {
order: 2;
}
.col-lg-order-3 {
order: 3;
}
.col-lg-order-4 {
order: 4;
}
.col-lg-order-5 {
order: 5;
}
.col-lg-order-6 {
order: 6;
}
.col-lg-order-7 {
order: 7;
}
.col-lg-order-8 {
order: 8;
}
.col-lg-order-9 {
order: 9;
}
.col-lg-order-10 {
order: 10;
}
.col-lg-order-11 {
order: 11;
}
.col-lg-order-12 {
order: 12;
}
}
/* ============================================================================
Row Variant Utilities (for Row React Component)
========================================================================== */
/* Row Gap Utilities - Override default gap */
.col-row-gap-0 {
gap: 0;
}
.col-row-gap-xs {
gap: var(--spacing-xs);
}
.col-row-gap-sm {
gap: var(--spacing-sm);
}
.col-row-gap-md {
gap: var(--spacing-md);
}
.col-row-gap-lg {
gap: var(--spacing-lg);
}
.col-row-gap-xl {
gap: var(--spacing-xl);
}
/* Row Justify Content Utilities */
.col-row-justify-start {
justify-content: flex-start;
}
.col-row-justify-center {
justify-content: center;
}
.col-row-justify-end {
justify-content: flex-end;
}
.col-row-justify-between {
justify-content: space-between;
}
.col-row-justify-around {
justify-content: space-around;
}
.col-row-justify-evenly {
justify-content: space-evenly;
}
/* Row Align Items Utilities */
.col-row-align-start {
align-items: flex-start;
}
.col-row-align-center {
align-items: center;
}
.col-row-align-end {
align-items: flex-end;
}
.col-row-align-baseline {
align-items: baseline;
}
.col-row-align-stretch {
align-items: stretch;
}
/* Row Wrap Utilities */
.col-row-nowrap {
flex-wrap: nowrap;
}
.col-row-wrap-reverse {
flex-wrap: wrap-reverse;
}
sup:has(> span) {
--badge-bg: var(--color-neutral-300);
--badge-color: currentColor;
--badge-radius: 0.5rem;
--badge-padding: 0.3rem;
--badge-vertical-align: 0.5rem;
--badge-fs: var(--fs-1);
background-color: var(--badge-bg);
color: var(--badge-color);
padding: var(--badge-padding);
border-radius: var(--badge-radius);
vertical-align: var(--badge-vertical-align);
font-size: var(--badge-fs);
}
sup:has(> span) span {
color: inherit;
}
sup:has(> span)[data-badge~=rounded] {
--badge-radius: 50%;
--badge-padding: 0;
--badge-size: 1.5625rem;
width: var(--badge-size);
height: var(--badge-size);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
font-size: 0.6875rem;
font-weight: 700;
overflow: hidden;
box-sizing: border-box;
}
sup:has(> span)[data-badge~=rounded] span {
max-width: 100%;
overflow: hidden;
text-overflow: clip;
white-space: nowrap;
padding: 0 0.125rem;
}
body > nav,
[aria-label~=navbar],
.navbar {
padding-inline: var(--nav-padding-inline, 1rem);
min-height: var(--nav-height, fit-content);
}
@media (max-width: 580px) {
body > nav,
[aria-label~=navbar],
.navbar {
flex-direction: column;
height: fit-content;
min-height: fit-content;
padding-block: unset;
gap: 0.5rem;
}
}
body > nav ul > li,
[aria-label~=navbar] ul > li,
.navbar ul > li {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
min-height: 100%;
padding-inline: var(--nav-padding-inline, 0.75rem);
}
body > nav ul > li:hover,
[aria-label~=navbar] ul > li:hover,
.navbar ul > li:hover {
background-color: var(--nav-hover-bg, var(--color-surface-secondary));
}
body > nav ul > li:hover:has(img, button),
[aria-label~=navbar] ul > li:hover:has(img, button),
.navbar ul > li:hover:has(img, button) {
background-color: transparent;
}
nav {
--nav-focus-color: currentColor;
--nav-focus-width: 0.125rem;
--nav-focus-offset: 0.125rem;
--nav-focus-style: solid;
display: var(--nav-display, flex);
flex-direction: var(--nav-direction, row);
width: var(--nav-width, auto);
place-items: var(--nav-align, center);
justify-content: var(--nav-justify, space-between);
margin-inline: var(--nav-margin-inline, 0);
background-color: var(--nav-bg, initial);
}
nav > section,
nav > ul {
--nav-display: flex;
flex-direction: var(--nav-direction, row);
display: var(--nav-display, flex);
gap: var(--nav-gap, 0);
font-size: var(--nav-fs, 0.9rem);
align-items: var(--nav-align, center);
padding-inline: var(--nav-padding-inline, 1rem);
padding-block: var(--nav-padding-block, 0);
margin-block-end: var(--nav-margin-block-end, 0);
height: 100%;
}
nav > section[data-list~=block],
nav > ul[data-list~=block] {
--nav-direction: column;
}
nav > section > div {
--nav-padding-block: 0;
}
nav ul > li {
display: flex;
align-items: center;
list-style: none;
margin: 0;
padding: 0;
min-height: 100%;
padding-inline: var(--nav-padding-inline, 1rem);
}
nav img[alt] {
--nav-img-padding-inline: 0 var(--s1);
--nav-img-width: var(--brand-w, 3.6rem);
}
nav[data-variant] {
background-color: var(--nav-bg);
color: var(--nav-color);
font-size: var(--nav-fs, 0.9rem);
}
nav > div {
margin-block-start: 0;
}
nav a:focus {
outline: var(--nav-focus-width) var(--nav-focus-style) var(--nav-focus-color);
outline-offset: var(--nav-focus-offset);
}
nav a:focus-visible {
outline: var(--nav-focus-width) var(--nav-focus-style) var(--nav-focus-color);
outline-offset: var(--nav-focus-offset);
}
nav button:focus {
outline: var(--nav-focus-width) var(--nav-focus-style) var(--nav-focus-color);
outline-offset: var(--nav-focus-offset);
}
nav button:focus-visible {
outline: var(--nav-focus-width) var(--nav-focus-style) var(--nav-focus-color);
outline-offset: var(--nav-focus-offset);
}
/**
* Checkbox Wrapper Component Styles
*
* Modern CSS architecture using :has() selector with ARIA attributes.
* No JavaScript class management required - ARIA attributes drive both
* accessibility AND styling.
*
* CSS Custom Properties:
* - --checkbox-gap: Space between checkbox and label (default: 0.5rem)
* - --checkbox-disabled-opacity: Opacity for disabled state (default: 0.6)
* - --checkbox-disabled-color: Label color when disabled (default: var(--color-disabled-text))
* - --checkbox-label-fs: Label font size (default: 1rem)
* - --checkbox-label-lh: Label line height (default: 1.5)
* - --color-required: Required indicator color (default: var(--color-required))
* - --checkbox-focus-ring-color: Focus ring color (default: var(--color-focus-ring))
* - --checkbox-focus-ring-width: Focus ring width (default: 0.125rem)
* - --checkbox-focus-ring-offset: Focus ring offset (default: 0.125rem)
* - --checkbox-hover-label-color: Label color on hover (default: inherit)
* - --checkbox-error-label-color: Label color when invalid (default: var(--color-error-text))
* - --checkbox-valid-label-color: Label color when valid (default: var(--color-success))
* - --checkbox-focus-radius: Focus outline border radius (default: 0.125rem)
*
* WCAG 2.1 AA Compliance:
* - 2.4.7 Focus Visible: Focus-visible indicators with sufficient contrast
* - 2.3.3 Animation from Interactions: Respects prefers-reduced-motion
* - 3.3.1 Error Identification: Visual error states with color + text
* - 4.1.2 Name, Role, Value: ARIA attributes for assistive technologies
* - 1.4.13 Content on Hover or Focus: Hover states for visual feedback
*/
div:has(> input[type=checkbox]) {
display: flex;
align-items: center;
gap: var(--checkbox-gap, 0.5rem);
position: relative;
/* ==========================================================================
Size Variants - Applied via data-checkbox-size attribute
========================================================================== */
}
div:has(> input[type=checkbox]) > input[type=checkbox] {
flex-shrink: 0;
order: -1;
}
div:has(> input[type=checkbox]):not(:has(> input[aria-disabled=true])):hover .checkbox-label {
color: var(--checkbox-hover-label-color, currentColor);
}
div:has(> input[type=checkbox]):has(> input:focus-visible) .checkbox-label {
outline: var(--checkbox-focus-ring-width, 0.125rem) solid var(--checkbox-focus-ring-color, var(--color-focus-ring));
outline-offset: var(--checkbox-focus-ring-offset, 0.125rem);
border-radius: var(--checkbox-focus-radius, 0.125rem);
}
div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) {
opacity: var(--checkbox-disabled-opacity, 0.6);
cursor: not-allowed;
}
div:has(> input[type=checkbox]):has(> input[aria-disabled=true]) .checkbox-label {
color: var(--checkbox-disabled-color, var(--color-disabled-text));
cursor: not-allowed;
}
div:has(> input[type=checkbox]):has(> input[aria-invalid=true]) .checkbox-label {
color: var(--checkbox-error-label-color, var(--color-error-text));
}
div:has(> input[type=checkbox]):has(> input[aria-invalid=false]:checked) label[for] {
color: var(--checkbox-valid-label-color, currentColor);
}
div:has(> input[type=checkbox])[data-checkbox-size~=xs] {
--checkbox-size: var(--checkbox-size-xs);
--checkbox-gap: var(--checkbox-gap-xs, 0.375rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=sm] {
--checkbox-size: var(--checkbox-size-sm);
--checkbox-gap: var(--checkbox-gap-sm, 0.5rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=md] {
--checkbox-size: var(--checkbox-size-md);
--checkbox-gap: var(--checkbox-gap-md, 0.5rem);
}
div:has(> input[type=checkbox])[data-checkbox-size~=lg] {
--checkbox-size: var(--checkbox-size-lg);
--checkbox-gap: var(--checkbox-gap-lg, 0.625rem);
}
.checkbox-label {
cursor: pointer;
font-size: var(--checkbox-label-fs, 1rem);
line-height: var(--checkbox-label-lh, 1.5);
user-select: none;
margin: 0;
flex: 1;
min-width: 0;
transition: color 0.2s ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
.checkbox-label {
transition: none;
}
}
.checkbox-label .checkbox-required {
color: var(--color-required);
font-weight: 600;
margin-inline-start: 0.125rem;
}
@media (forced-colors: active) {
.checkbox-input {
forced-color-adjust: auto;
}
}
@container (max-width: 400px) {
div:has(> input[type=checkbox]) {
flex-direction: column;
align-items: flex-start;
}
}
:root {
--select-arrow-color: var(--color-text);
--select-width-mobile: 18.75rem; /* 300px minimum on mobile */
--select-width-desktop: 100%; /* Full width on larger screens */
}
select {
border: var(--input-outline);
border-radius: var(--input-radius);
outline: none;
background-color: var(--input-bg, var(--color-surface));
-webkit-appearance: none; /* Remove default arrow in Chrome and Safari */
-moz-appearance: none; /* Remove default arrow in Firefox */
appearance: none; /* Remove default arrow in other browsers */
background-image: linear-gradient(45deg, transparent 50%, var(--select-arrow-color, currentColor) 50%), linear-gradient(135deg, var(--select-arrow-color, currentColor) 50%, transparent 50%);
background-position: calc(100% - 1.25rem) center, calc(100% - 1rem) center;
background-size: 0.3125rem 0.3125rem, 0.3125rem 0.3125rem;
background-repeat: no-repeat;
padding-inline-start: var(--input-padding-inline);
padding-inline-end: 2.5rem;
padding-block: var(--input-padding-block);
width: max(var(--select-width-mobile), var(--select-width-desktop));
}
/* ==========================================================================
Option Styling with Data Attributes
========================================================================== */
/*
option[data-option="primary"] {
background-color: var(--color-primary-light);
color: var(--color-primary);
font-weight: 600;
}
option[data-option="success"] {
background-color: var(--color-success-bg);
color: var(--color-success);
}
option[data-option="error"] {
background-color: var(--color-error-bg);
color: var(--color-error);
}
option[data-option="warning"] {
background-color: var(--color-warning-bg);
color: var(--color-warning);
}
*/
/*
option[data-size="sm"] {
font-size: 0.875rem; // 14px
padding: 0.25rem 0.5rem;
}
option[data-size="lg"] {
font-size: 1.125rem; // 18px
padding: 0.75rem 1rem;
font-weight: 500;
}
*/
/*
option[data-featured="true"] {
font-weight: 700;
background: var(--color-primary);
color: var(--color-text-inverse);
}
option[data-category="premium"] {
background-color: var(--color-warning-bg);
font-style: italic;
}
*/
:root {
--input-border-color: var(--color-border);
--input-appearance: none;
--input-bg: inherit;
--input-border: none;
--input-outline: thin solid var(--input-border-color);
--input-padding-inline: 0.6rem;
--input-padding-block: 0.4rem;
--input-radius: var(--radius);
--input-fs: var(--fs);
--input-width: clamp(12.5rem, 100%, 31.25rem);
--input-focus-outline: medium solid var(--input-border-color);
--input-focus-outline-offset: 0;
--input-disabled-bg: var(--color-disabled-bg);
--input-disabled-opacity: 0.6;
--input-disabled-cursor: not-allowed;
--placeholder-color: var(--color-text-tertiary);
--placeholder-style: italic;
--placeholder-fs: smaller;
--form-direction: column;
/* ==========================================================================
Size Tokens
========================================================================== */
--checkbox-size-xs: 0.875rem; /* 14px - extra small */
--checkbox-size-sm: 1rem; /* 16px */
--checkbox-size-md: 1.25rem; /* 20px */
--checkbox-size-lg: 1.5rem; /* 24px */
/* Gap tokens for each size variant */
--checkbox-gap-xs: 0.375rem; /* 6px */
--checkbox-gap-sm: 0.5rem; /* 8px */
--checkbox-gap-md: 0.5rem; /* 8px - default */
--checkbox-gap-lg: 0.625rem; /* 10px */
/* ==========================================================================
Base Properties
========================================================================== */
--checkbox-size: var(--checkbox-size-md);
--checkbox-bg: var(--color-surface);
--checkbox-border: 0.125rem solid var(--color-neutral-600); /* 2px border */
--checkbox-border-color: var(--color-neutral-600); /* Gray 500 */
--checkbox-radius: 0.25rem; /* 4px */
--checkbox-cursor: pointer;
--checkbox-transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
/* ==========================================================================
Checked State Properties
========================================================================== */
--checkbox-checked-outline-color: var(--color-success);
--checkbox-checked-bg: var(--color-success);
}
form {
display: flex;
flex-direction: var(--form-direction);
gap: 1rem;
}
form > div {
display: flex;
gap: 1rem;
flex-direction: var(--form-direction);
}
form label {
display: block;
}
input {
-webkit-appearance: var(--input-appearance);
-moz-appearance: var(--input-appearance);
appearance: var(--input-appearance);
width: var(--input-width);
border: var(--input-border);
outline: var(--input-outline);
padding-inline: var(--input-padding-inline);
padding-block: var(--input-padding-block);
border-radius: var(--input-radius);
background-color: var(--input-bg, var(--color-surface));
}
input:focus-visible, input:focus {
outline: var(--input-focus-outline);
outline-offset: var(--input-focus-outline-offset);
}
input[aria-disabled=true], input:disabled {
--input-border-color: var(--color-border-subtle);
background-color: var(--input-disabled-bg);
opacity: var(--input-disabled-opacity);
cursor: var(--input-disabled-cursor);
text-transform: capitalize;
text-decoration: line-through;
}
input[type]:not([type=checkbox], [type=radio])::placeholder,
textarea::placeholder,
select::placeholder {
color: var(--placeholder-color);
font-style: var(--placeholder-style);
font-size: var(--placeholder-fs);
text-transform: capitalize;
}
input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder,
textarea[aria-required=true]::placeholder,
select[aria-required=true]::placeholder {
color: var(--color-required, var(--placeholder-color));
font-weight: 600;
}
input[type]:not([type=checkbox], [type=radio])[aria-required=true]::placeholder::after,
textarea[aria-required=true]::placeholder::after,
select[aria-required=true]::placeholder::after {
content: "* ";
}
input[type=checkbox] {
opacity: 1;
width: var(--checkbox-size);
height: var(--checkbox-size);
margin: 0;
cursor: var(--checkbox-cursor);
flex-shrink: 0;
}
input[type=checkbox]:checked {
background-color: var(--checkbox-bg, red);
outline: var(--checkbox-checked-outline-color) solid 2px;
background: var(--checkbox-checked-bg) url("data:image/svg+xml;utf8,
") no-repeat center center;
}
nav:not(body > nav),
nav[data-breadcrumb] {
--breadcrumb-padding-inline: unset;
--breadcrumb-display: flex;
--breadcrumb-gap: 0.5rem;
--breadcrumb-color: currentColor;
--breadcrumb-current-color: var(--color-text);
--breadcrumb-fs: var(--fs-3);
margin-inline: unset;
padding-inline: unset;
}
nav:not(body > nav) ol,
nav[data-breadcrumb] ol {
padding-inline: var(--breadcrumb-padding-inline);
display: var(--breadcrumb-display);
gap: var(--breadcrumb-gap);
}
nav:not(body > nav) ol li,
nav[data-breadcrumb] ol li {
padding-inline: unset;
width: var(--breadcrumb-width, fit-content);
text-transform: capitalize;
display: flex;
color: var(--breadcrumb-color);
gap: 0.5rem;
font-size: var(--breadcrumb-fs);
}
nav:not(body > nav) ol li span[aria-hidden=true],
nav[data-breadcrumb] ol li span[aria-hidden=true] {
opacity: 0.6;
}
nav:not(body > nav) ol li a[href],
nav[data-breadcrumb] ol li a[href] {
font-size: var(--breadcrumb-fs);
}
nav:not(body > nav) ol li a[href][aria-current],
nav[data-breadcrumb] ol li a[href][aria-current] {
color: var(--breadcrumb-current-color);
text-decoration: none;
}
/**
* List Component Styles
*
* Provides default styling for ul, ol, and dl list elements with CSS custom
* properties for theming. Uses rem units exclusively for accessibility.
*
* @base-rem: 16px = 1rem
*/
ul,
ol,
dl {
--list-margin-top: 0;
--list-margin-bottom: 1rem;
--list-margin-inline: 0;
--list-padding-inline: 0.5rem;
--list-gap: 0.5rem;
--list-marker-color: currentColor;
--list-marker-size: 1em;
--list-marker-offset: 0.5rem;
--list-font-size: 1rem;
--list-line-height: 1.5;
--list-font-family: inherit;
--list-color: inherit;
--list-item-margin-bottom: 0.5rem;
--list-item-padding-inline: 0;
--list-item-padding-block: 0;
--dt-font-weight: 600;
--dt-margin-bottom: 0.25rem;
--dd-margin-inline-start: 2rem;
--dd-margin-bottom: 1rem;
}
ul,
ol,
dl {
margin-block-start: var(--list-margin-top);
margin-block-end: var(--list-margin-bottom);
margin-inline: var(--list-margin-inline);
padding-inline-start: var(--list-padding-inline);
font-size: var(--list-font-size);
line-height: var(--list-line-height);
font-family: var(--list-font-family);
color: var(--list-color);
}
ul ul,
ul ol,
ul dl,
ol ul,
ol ol,
ol dl,
dl ul,
dl ol,
dl dl {
margin-block-start: var(--list-gap);
margin-block-end: var(--list-gap);
}
ul {
list-style-type: disc;
}
ul::marker {
color: var(--list-marker-color);
font-size: var(--list-marker-size);
}
ul ul {
list-style-type: circle;
}
ul ul ul {
list-style-type: square;
}
ol {
list-style-type: decimal;
}
ol::marker {
color: var(--list-marker-color);
font-size: var(--list-marker-size);
}
ol ol {
list-style-type: lower-alpha;
}
ol ol ol {
list-style-type: lower-roman;
}
li {
margin-block-end: var(--list-item-margin-bottom);
padding-inline: var(--list-item-padding-inline);
padding-block: var(--list-item-padding-block);
padding-inline-start: var(--list-marker-offset);
}
li:last-child {
margin-block-end: 0;
}
dl {
padding-inline-start: 0;
}
dt {
font-weight: var(--dt-font-weight);
margin-block-end: var(--dt-margin-bottom);
padding-inline: var(--list-item-padding-inline);
padding-block: var(--list-item-padding-block);
}
dd {
margin-inline-start: var(--dd-margin-inline-start);
margin-block-end: var(--dd-margin-bottom);
padding-inline: var(--list-item-padding-inline);
padding-block: var(--list-item-padding-block);
}
dd:last-child {
margin-block-end: 0;
}
ul[data-variant=none],
ol[data-variant=none],
dl[data-variant=none] {
list-style-type: none;
padding-inline-start: 0;
}
ul[data-variant=none] li,
ol[data-variant=none] li,
dl[data-variant=none] li {
padding-inline-start: 0;
}
ul[data-variant=inline],
ol[data-variant=inline],
dl[data-variant=inline] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--list-gap);
padding-inline-start: 0;
list-style-type: none;
}
ul[data-variant=inline] li,
ol[data-variant=inline] li,
dl[data-variant=inline] li {
padding-inline-start: 0;
margin-block-end: 0;
}
ul[data-variant=custom],
ol[data-variant=custom],
dl[data-variant=custom] {
list-style-type: none;
padding-inline-start: 0;
}
ul[data-variant=custom] li,
ol[data-variant=custom] li,
dl[data-variant=custom] li {
position: relative;
padding-inline-start: calc(var(--list-marker-size) + var(--list-marker-offset));
}
ul[data-variant=custom] li::before,
ol[data-variant=custom] li::before,
dl[data-variant=custom] li::before {
content: var(--list-marker-content, "•");
color: var(--list-marker-color);
font-size: var(--list-marker-size);
position: absolute;
left: 0;
}
ul[data-variant=compact],
ol[data-variant=compact],
dl[data-variant=compact] {
--list-gap: 0.25rem;
--list-item-margin-bottom: 0.25rem;
--list-margin-bottom: 0.5rem;
}
ul[data-variant=spaced],
ol[data-variant=spaced],
dl[data-variant=spaced] {
--list-gap: 1rem;
--list-item-margin-bottom: 1rem;
}
li:has(a:focus-visible),
li:has(button:focus-visible) {
outline: 0.0625rem solid transparent;
}
li:has(> a),
li:has(> button) {
margin-block-end: 0;
}
@media print {
ul,
ol,
dl {
--list-margin-bottom: 0.5rem;
--list-item-margin-bottom: 0.25rem;
}
ul,
ol {
list-style-position: inside;
}
}
@media (prefers-reduced-motion: reduce) {
ul,
ol,
dl,
li,
dt,
dd {
animation: none;
transition: none;
}
}
[role=alert] {
/* Success colors - WCAG AA compliant (mapped to semantic tokens) */
--alert-success-bg: var(--color-success-bg);
--alert-success-border: var(--color-success-border);
--alert-success-text: var(--color-success-text);
/* Error colors - WCAG AA compliant (mapped to semantic tokens) */
--alert-error-bg: var(--color-error-bg);
--alert-error-border: var(--color-error-border);
--alert-error-text: var(--color-error-text);
/* Warning colors - WCAG AA compliant (mapped to semantic tokens) */
--alert-warning-bg: var(--color-warning-bg);
--alert-warning-border: var(--color-warning-border);
--alert-warning-text: var(--color-warning-text);
/* Info colors - WCAG AA compliant (mapped to semantic tokens) */
--alert-info-bg: var(--color-info-bg);
--alert-info-border: var(--color-info-border);
--alert-info-text: var(--color-info-text);
/* Animation */
--alert-transition-duration: 0.3s;
--alert-border: thin solid currentColor;
background-color: var(--alert-bg, var(--color-surface));
border: var(--alert-border, var(--color-border));
color: var(--alert-color, var(--color-text));
padding: var(--alert-padding, var(--spc-4));
margin-block-end: var(--alert-margin-block-end);
font-size: var(--fs-0);
line-height: 1.6;
display: flex;
flex-direction: row;
border-radius: var(--alert-radius, var(--border-radius));
gap: var(--alert-gap, var(--spc-4));
/* Exit animations */
transition: opacity var(--alert-transition-duration) ease, transform var(--alert-transition-duration) ease;
opacity: 1;
transform: translateY(0);
/* Focus indicators for keyboard navigation (WCAG 2.4.7) */
/* Hide focus outline for mouse clicks, keep for keyboard */
/* Variant: Filled - Solid colored background */
/* Variant: Soft - No border, subtle background */
/* Variant: Outlined - Default with border (no additional styles needed) */
}
[role=alert]:not([data-visible=true]) {
opacity: 0;
transform: translateY(-0.5rem);
}
@media (prefers-reduced-motion: reduce) {
[role=alert] {
transition-duration: 0.01ms;
}
}
[role=alert]:focus {
outline: 2px solid currentColor;
outline-offset: 2px;
}
[role=alert]:focus:not(:focus-visible) {
outline: none;
}
[role=alert] .alert-icon {
margin-block-start: 0;
align-items: center;
}
[role=alert] .alert-message {
flex: 2;
margin-block-start: 0;
/* Title styles for both heading and strong elements */
/* Reset heading-specific styles */
}
[role=alert] .alert-message .alert-title {
margin-block-end: var(--spc-1, 0.25rem);
margin-block-start: 0;
font-weight: var(--alert-title-fw, 600);
font-size: var(--alert-title-fs, inherit);
line-height: 1.4;
}
[role=alert] .alert-message h2.alert-title,
[role=alert] .alert-message h3.alert-title,
[role=alert] .alert-message h4.alert-title,
[role=alert] .alert-message h5.alert-title,
[role=alert] .alert-message h6.alert-title {
margin: 0;
margin-block-end: var(--spc-1, 0.25rem);
font-size: inherit;
font-weight: var(--alert-title-fw, 600);
}
[role=alert][data-alert~=info] {
--alert-bg: var(--alert-info-bg);
--alert-color: var(--alert-info-text);
border-color: var(--alert-info-border);
}
[role=alert][data-alert~=warning] {
--alert-bg: var(--alert-warning-bg);
--alert-color: var(--alert-warning-text);
border-color: var(--alert-warning-border);
}
[role=alert][data-alert~=error] {
--alert-bg: var(--alert-error-bg);
--alert-color: var(--alert-error-text);
border-color: var(--alert-error-border);
}
[role=alert][data-alert~=success] {
--alert-bg: var(--alert-success-bg);
--alert-color: var(--alert-success-text);
border-color: var(--alert-success-border);
}
[role=alert] button[data-btn~=icon] {
--btn-bg: transparent;
align-items: flex-start;
}
[role=alert][data-variant=filled] {
border: none;
}
[role=alert][data-variant=filled][data-alert~=info] {
--alert-bg: var(--alert-info-border);
--alert-color: white;
}
[role=alert][data-variant=filled][data-alert~=warning] {
--alert-bg: var(--alert-warning-border);
--alert-color: white;
}
[role=alert][data-variant=filled][data-alert~=error] {
--alert-bg: var(--alert-error-border);
--alert-color: white;
}
[role=alert][data-variant=filled][data-alert~=success] {
--alert-bg: var(--alert-success-border);
--alert-color: white;
}
[role=alert][data-variant=filled][data-alert~=default] {
--alert-bg: var(--color-neutral-500);
--alert-color: var(--color-text-inverse);
}
[role=alert][data-variant=soft] {
border: none;
}
[role=alert][data-variant=outlined] {
/* This is the default variant, styles already applied above */
}
[role=alert] p {
font-size: 0.875rem;
}
[data-tts] {
--tts-gap: 0.5rem;
--tts-bg: var(--color-surface);
--tts-border-width: 0.125rem;
--tts-border-style: solid;
--tts-border-color: currentColor;
--tts-radius: 99rem;
--tts-padding: 0.5rem;
--tts-min-width: 20.3125rem;
--tts-align-items: center;
--tts-justify-content: center;
display: flex;
gap: var(--tts-gap);
align-items: var(--tts-align-items);
justify-content: var(--tts-justify-content);
background-color: var(--tts-bg);
border: none;
outline: var(--tts-border-width) var(--tts-border-style) var(--tts-border-color);
border-radius: var(--tts-radius);
padding: var(--tts-padding);
min-width: var(--tts-min-width);
}
[data-tts] button[data-btn~=tts-btn],
[data-tts] .tts-border {
outline: none;
}
[data-tts] button[data-btn~=tts-btn]:hover,
[data-tts] .tts-border:hover {
outline: var(--tts-border-width) var(--tts-border-style);
}
/**
* Title Component Styles
* Size and color variants using CSS custom properties
*/
:root {
/* Size tokens (rem only) */
--title-size-xs: 0.75rem; /* 12px */
--title-size-sm: 0.875rem; /* 14px */
--title-size-md: 1rem; /* 16px */
--title-size-lg: 1.5rem; /* 24px */
--title-size-xl: 2rem; /* 32px */
--title-size-2xl: 2.5rem; /* 40px */
}
[data-title] {
/* Base properties */
--title-fs: inherit;
--title-fw: 600;
--title-lh: 1.2;
--title-margin-block-end: 0.5em;
--title-color: inherit;
/* Apply properties */
font-size: var(--title-fs);
font-weight: var(--title-fw);
line-height: var(--title-lh);
margin-block-end: var(--title-margin-block-end);
color: var(--title-color);
/* Size variants */
/* Color variants - WCAG AA compliant (4.5:1 minimum) */
/* 8.59:1 */
/* 7.56:1 */
/* 4.62:1 */
/* 5.49:1 */
}
[data-title][data-title~=xs] {
--title-fs: var(--title-size-xs);
}
[data-title][data-title~=sm] {
--title-fs: var(--title-size-sm);
}
[data-title][data-title~=md] {
--title-fs: var(--title-size-md);
}
[data-title][data-title~=lg] {
--title-fs: var(--title-size-lg);
}
[data-title][data-title~=xl] {
--title-fs: var(--title-size-xl);
}
[data-title][data-title~="2xl"] {
--title-fs: var(--title-size-2xl);
}
[data-title][data-title~=primary] {
--title-color: var(--color-primary);
}
[data-title][data-title~=secondary] {
--title-color: var(--color-text-secondary);
}
[data-title][data-title~=accent] {
--title-color: var(--color-primary);
}
[data-title][data-title~=muted] {
--title-color: var(--color-text-tertiary);
}
[data-title][data-title~=inherit] {
--title-color: inherit;
}
/* Focus indicator */
[data-title]:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* ============================================================================
FLEXBOX UTILITIES - Responsive Layout Control
============================================================================
Comprehensive flexbox utility classes with responsive modifiers.
Uses CSS custom properties for flexibility and modern range media queries.
Usage:
1. Direct utility classes:
2. React Flex component:
- Flex component automatically generates these utility classes from props
- Supports responsive props:
- Sub-components: Flex.Item, Flex.Spacer
Breakpoints:
- sm: 30rem (480px)
- md: 48rem (768px)
- lg: 62rem (992px)
- xl: 80rem (1280px)
All spacing uses rem units (base: 1rem = 16px)
============================================================================ */
/* CSS Custom Properties
========================================================================== */
:root {
/* Gap spacing - fluid typography with clamp() */
--flex-gap-xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem); /* 4-8px */
--flex-gap-sm: clamp(0.5rem, 0.45rem + 0.35vw, 0.75rem); /* 8-12px */
--flex-gap-md: clamp(0.75rem, 0.65rem + 0.45vw, 1.125rem); /* 12-18px */
--flex-gap-lg: clamp(1rem, 0.85rem + 0.6vw, 1.5rem); /* 16-24px */
--flex-gap-xl: clamp(1.5rem, 1.25rem + 0.75vw, 2rem); /* 24-32px */
/* Default gap for flex containers */
--flex-gap: var(--flex-gap-sm);
}
/* Base Flex Containers
========================================================================== */
/* Standard flex container */
.flex {
display: flex;
gap: var(--flex-gap);
}
/* Inline flex container */
.flex-inline {
display: inline-flex;
gap: var(--flex-gap);
}
/* Flex Direction
========================================================================== */
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
/* Flex Wrap
========================================================================== */
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
.flex-nowrap {
flex-wrap: nowrap;
}
/* Justify Content (Main Axis)
========================================================================== */
.justify-start {
justify-content: flex-start;
}
.justify-end {
justify-content: flex-end;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.justify-around {
justify-content: space-around;
}
.justify-evenly {
justify-content: space-evenly;
}
/* Align Items (Cross Axis)
========================================================================== */
.items-start {
align-items: flex-start;
}
.items-end {
align-items: flex-end;
}
.items-center {
align-items: center;
}
.items-baseline {
align-items: baseline;
}
.items-stretch {
align-items: stretch;
}
/* Align Content (Multi-line)
========================================================================== */
.content-start {
align-content: flex-start;
}
.content-end {
align-content: flex-end;
}
.content-center {
align-content: center;
}
.content-between {
align-content: space-between;
}
.content-around {
align-content: space-around;
}
.content-evenly {
align-content: space-evenly;
}
.content-stretch {
align-content: stretch;
}
/* Align Self (Individual Items)
========================================================================== */
.self-auto {
align-self: auto;
}
.self-start {
align-self: flex-start;
}
.self-end {
align-self: flex-end;
}
.self-center {
align-self: center;
}
.self-baseline {
align-self: baseline;
}
.self-stretch {
align-self: stretch;
}
/* Flex Item Sizing
========================================================================== */
/* Flex grow */
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}
/* Flex shrink */
.flex-shrink-0 {
flex-shrink: 0;
}
.flex-shrink-1 {
flex-shrink: 1;
}
/* Flex basis */
.flex-basis-auto {
flex-basis: auto;
}
.flex-basis-0 {
flex-basis: 0;
}
.flex-basis-full {
flex-basis: 100%;
}
/* Flex shorthand utilities */
.flex-1 {
flex: 1 1 0%;
}
.flex-auto {
flex: 1 1 auto;
}
.flex-initial {
flex: 0 1 auto;
}
.flex-none {
flex: none;
}
/* Gap Utilities
========================================================================== */
.gap-0 {
gap: 0;
}
.gap-xs {
gap: var(--flex-gap-xs);
}
.gap-sm {
gap: var(--flex-gap-sm);
}
.gap-md {
gap: var(--flex-gap-md);
}
.gap-lg {
gap: var(--flex-gap-lg);
}
.gap-xl {
gap: var(--flex-gap-xl);
}
/* Row gap */
.row-gap-0 {
row-gap: 0;
}
.row-gap-xs {
row-gap: var(--flex-gap-xs);
}
.row-gap-sm {
row-gap: var(--flex-gap-sm);
}
.row-gap-md {
row-gap: var(--flex-gap-md);
}
.row-gap-lg {
row-gap: var(--flex-gap-lg);
}
.row-gap-xl {
row-gap: var(--flex-gap-xl);
}
/* Column gap */
.col-gap-0 {
column-gap: 0;
}
.col-gap-xs {
column-gap: var(--flex-gap-xs);
}
.col-gap-sm {
column-gap: var(--flex-gap-sm);
}
.col-gap-md {
column-gap: var(--flex-gap-md);
}
.col-gap-lg {
column-gap: var(--flex-gap-lg);
}
.col-gap-xl {
column-gap: var(--flex-gap-xl);
}
/* Common Flex Patterns
========================================================================== */
/* Center content both axes */
.flex-center {
display: flex;
align-items: center;
justify-content: center;
}
/* Space between with center alignment */
.flex-between {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Space around with center alignment */
.flex-around {
display: flex;
justify-content: space-around;
align-items: center;
}
/* Stack - column layout with gap */
.flex-stack {
display: flex;
flex-direction: column;
gap: var(--flex-gap-sm);
}
/* Spread - equal width children */
.flex-spread > * {
flex: 1 1 0%;
}
/* Order utilities
========================================================================== */
.order-first {
order: -1;
}
.order-last {
order: 999;
}
.order-none {
order: 0;
}
/* Responsive Utilities - Small (sm: 30rem / 480px)
========================================================================== */
@media (width >= 30rem) {
/* Direction */
.sm\:flex-row {
flex-direction: row;
}
.sm\:flex-row-reverse {
flex-direction: row-reverse;
}
.sm\:flex-col {
flex-direction: column;
}
.sm\:flex-col-reverse {
flex-direction: column-reverse;
}
/* Wrap */
.sm\:flex-wrap {
flex-wrap: wrap;
}
.sm\:flex-nowrap {
flex-wrap: nowrap;
}
/* Justify */
.sm\:justify-start {
justify-content: flex-start;
}
.sm\:justify-end {
justify-content: flex-end;
}
.sm\:justify-center {
justify-content: center;
}
.sm\:justify-between {
justify-content: space-between;
}
.sm\:justify-around {
justify-content: space-around;
}
.sm\:justify-evenly {
justify-content: space-evenly;
}
/* Align Items */
.sm\:items-start {
align-items: flex-start;
}
.sm\:items-end {
align-items: flex-end;
}
.sm\:items-center {
align-items: center;
}
.sm\:items-baseline {
align-items: baseline;
}
.sm\:items-stretch {
align-items: stretch;
}
/* Gaps */
.sm\:gap-0 {
gap: 0;
}
.sm\:gap-xs {
gap: var(--flex-gap-xs);
}
.sm\:gap-sm {
gap: var(--flex-gap-sm);
}
.sm\:gap-md {
gap: var(--flex-gap-md);
}
.sm\:gap-lg {
gap: var(--flex-gap-lg);
}
.sm\:gap-xl {
gap: var(--flex-gap-xl);
}
/* Flex sizing */
.sm\:flex-1 {
flex: 1 1 0%;
}
.sm\:flex-auto {
flex: 1 1 auto;
}
.sm\:flex-none {
flex: none;
}
}
/* Responsive Utilities - Medium (md: 48rem / 768px)
========================================================================== */
@media (width >= 48rem) {
/* Direction */
.md\:flex-row {
flex-direction: row;
}
.md\:flex-row-reverse {
flex-direction: row-reverse;
}
.md\:flex-col {
flex-direction: column;
}
.md\:flex-col-reverse {
flex-direction: column-reverse;
}
/* Wrap */
.md\:flex-wrap {
flex-wrap: wrap;
}
.md\:flex-nowrap {
flex-wrap: nowrap;
}
/* Justify */
.md\:justify-start {
justify-content: flex-start;
}
.md\:justify-end {
justify-content: flex-end;
}
.md\:justify-center {
justify-content: center;
}
.md\:justify-between {
justify-content: space-between;
}
.md\:justify-around {
justify-content: space-around;
}
.md\:justify-evenly {
justify-content: space-evenly;
}
/* Align Items */
.md\:items-start {
align-items: flex-start;
}
.md\:items-end {
align-items: flex-end;
}
.md\:items-center {
align-items: center;
}
.md\:items-baseline {
align-items: baseline;
}
.md\:items-stretch {
align-items: stretch;
}
/* Gaps */
.md\:gap-0 {
gap: 0;
}
.md\:gap-xs {
gap: var(--flex-gap-xs);
}
.md\:gap-sm {
gap: var(--flex-gap-sm);
}
.md\:gap-md {
gap: var(--flex-gap-md);
}
.md\:gap-lg {
gap: var(--flex-gap-lg);
}
.md\:gap-xl {
gap: var(--flex-gap-xl);
}
/* Flex sizing */
.md\:flex-1 {
flex: 1 1 0%;
}
.md\:flex-auto {
flex: 1 1 auto;
}
.md\:flex-none {
flex: none;
}
/* Common patterns at medium breakpoint */
.flex-stack {
flex-direction: row;
align-items: center;
gap: var(--flex-gap-md);
}
}
/* Responsive Utilities - Large (lg: 62rem / 992px)
========================================================================== */
@media (width >= 62rem) {
/* Direction */
.lg\:flex-row {
flex-direction: row;
}
.lg\:flex-row-reverse {
flex-direction: row-reverse;
}
.lg\:flex-col {
flex-direction: column;
}
.lg\:flex-col-reverse {
flex-direction: column-reverse;
}
/* Wrap */
.lg\:flex-wrap {
flex-wrap: wrap;
}
.lg\:flex-nowrap {
flex-wrap: nowrap;
}
/* Justify */
.lg\:justify-start {
justify-content: flex-start;
}
.lg\:justify-end {
justify-content: flex-end;
}
.lg\:justify-center {
justify-content: center;
}
.lg\:justify-between {
justify-content: space-between;
}
.lg\:justify-around {
justify-content: space-around;
}
.lg\:justify-evenly {
justify-content: space-evenly;
}
/* Align Items */
.lg\:items-start {
align-items: flex-start;
}
.lg\:items-end {
align-items: flex-end;
}
.lg\:items-center {
align-items: center;
}
.lg\:items-baseline {
align-items: baseline;
}
.lg\:items-stretch {
align-items: stretch;
}
/* Gaps */
.lg\:gap-0 {
gap: 0;
}
.lg\:gap-xs {
gap: var(--flex-gap-xs);
}
.lg\:gap-sm {
gap: var(--flex-gap-sm);
}
.lg\:gap-md {
gap: var(--flex-gap-md);
}
.lg\:gap-lg {
gap: var(--flex-gap-lg);
}
.lg\:gap-xl {
gap: var(--flex-gap-xl);
}
/* Flex sizing */
.lg\:flex-1 {
flex: 1 1 0%;
}
.lg\:flex-auto {
flex: 1 1 auto;
}
.lg\:flex-none {
flex: none;
}
/* Increase gaps at large screens */
.flex,
.flex-inline {
gap: var(--flex-gap-md);
}
.flex-stack {
gap: var(--flex-gap-lg);
}
}
/* Responsive Utilities - Extra Large (xl: 80rem / 1280px)
========================================================================== */
@media (width >= 80rem) {
/* Direction */
.xl\:flex-row {
flex-direction: row;
}
.xl\:flex-row-reverse {
flex-direction: row-reverse;
}
.xl\:flex-col {
flex-direction: column;
}
.xl\:flex-col-reverse {
flex-direction: column-reverse;
}
/* Wrap */
.xl\:flex-wrap {
flex-wrap: wrap;
}
.xl\:flex-nowrap {
flex-wrap: nowrap;
}
/* Justify */
.xl\:justify-start {
justify-content: flex-start;
}
.xl\:justify-end {
justify-content: flex-end;
}
.xl\:justify-center {
justify-content: center;
}
.xl\:justify-between {
justify-content: space-between;
}
.xl\:justify-around {
justify-content: space-around;
}
.xl\:justify-evenly {
justify-content: space-evenly;
}
/* Align Items */
.xl\:items-start {
align-items: flex-start;
}
.xl\:items-end {
align-items: flex-end;
}
.xl\:items-center {
align-items: center;
}
.xl\:items-baseline {
align-items: baseline;
}
.xl\:items-stretch {
align-items: stretch;
}
/* Gaps */
.xl\:gap-0 {
gap: 0;
}
.xl\:gap-xs {
gap: var(--flex-gap-xs);
}
.xl\:gap-sm {
gap: var(--flex-gap-sm);
}
.xl\:gap-md {
gap: var(--flex-gap-md);
}
.xl\:gap-lg {
gap: var(--flex-gap-lg);
}
.xl\:gap-xl {
gap: var(--flex-gap-xl);
}
/* Flex sizing */
.xl\:flex-1 {
flex: 1 1 0%;
}
.xl\:flex-auto {
flex: 1 1 auto;
}
.xl\:flex-none {
flex: none;
}
/* Maximum gaps at extra large screens */
.flex,
.flex-inline {
gap: var(--flex-gap-lg);
}
.flex-stack {
gap: var(--flex-gap-xl);
}
}
:root {
--shadow: 0 0 0.525rem 0 rgba(0, 0, 0, 0.1);
--shadow-xs: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.05);
--shadow-sm: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1),
0 0.0625rem 0.125rem rgba(0, 0, 0, 0.06);
--shadow-md: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1),
0 0.125rem 0.25rem rgba(0, 0, 0, 0.06);
--shadow-lg: 0 0.625rem 0.9375rem rgba(0, 0, 0, 0.1),
0 0.25rem 0.375rem rgba(0, 0, 0, 0.08);
--shadow-xl: 0 1.25rem 1.5625rem rgba(0, 0, 0, 0.1),
0 0.625rem 0.625rem rgba(0, 0, 0, 0.08);
}
.shadow-none {
box-shadow: none;
}
.shadow {
box-shadow: var(--shadow);
}
.shadow-xs {
box-shadow: var(--shadow-xs);
}
.shadow-sm {
box-shadow: var(--shadow-sm);
}
.shadow-md {
box-shadow: var(--shadow-md);
}
.shadow-lg {
box-shadow: var(--shadow-lg);
}
.shadow-xl {
box-shadow: var(--shadow-xl);
}
/**
* DEPRECATED: This file is deprecated in favor of the new token system.
*
* Use tokens from src/sass/tokens/ instead:
* - Primitives: src/sass/tokens/_color-primitives.scss
* - Semantic: src/sass/tokens/_color-semantic.scss
*
* Use utility classes from src/sass/utilities/ for quick styling:
* - .text-primary, .text-success, .text-error, etc.
* - .bg-primary, .bg-success, .bg-error, etc.
* - .border-primary, .border-success, .border-error, etc.
*
* This file will be removed in v6.0.0
* Keeping for backward compatibility only.
*/
:root {
--transparent: transparent;
}
.transparent {
background-color: var(--transparent);
}
.transparent-border {
border-color: var(--transparent);
}
.transparent-color {
color: var(--transparent);
}
/*# sourceMappingURL=index.css.map */