@24vlh/vds 0.1.2 → 0.1.3

package/dist/components/content-blocks.css

@@ -1,944 +1,944 @@
-/************************************************************
- * VLAH DESIGN SYSTEM (VDS) - Content Blocks
- *
- *  Responsibilities:
- *    - Define the structural building blocks of the UI: cards, media blocks,
- *      list groups, callouts, empty states, stats, metric titles, tags/chips/badges,
- *      avatars, features, processes, highlights, fact blocks, and content blocks
- *    - Provide consistent, token-driven spacing, radii, borders, shadows, and
- *      interaction patterns across all content surfaces
- *    - Expose semantic and interactive variants for blocks, tags, callouts, and
- *      process steps
- *    - Enable layout-neutral composition while supporting grid, stack, inline,
- *      horizontal, and compact patterns
- *
- *  System Notes:
- *    - Pure CSS; no behavioural assumptions or JavaScript dependencies
- *    - Fully theme-driven: all tokens derive from primitives + active theme
- *    - All interactive states use shared VDS focus, hover, and selected patterns
- ************************************************************/
-
-/* ---------------------------------------------------------
-   1. CONTENT BLOCK TOKEN DEFINITIONS
---------------------------------------------------------- */
-
-[data-vds-content-block],
-.vds-content-block {
-    --content-block-tag-size-sm: var(--space-4);
-    --content-block-tag-size-md: var(--space-5);
-    --content-block-tag-size-lg: var(--space-6);
-    --content-block-component-disabled--opacity: 0.3;
-
-
-    --content-block-component-pad-sm: var(--space-3);
-    --content-block-component-pad-md: var(--space-6);
-    --content-block-component-pad-lg: var(--space-8);
-
-    --content-block-component-border-sm: var(--border-width);
-
-    --content-block-card-min-width: 16.25rem;
-
-    --content-block-card-gap: var(--space-4);
-    --content-block-card-pad: var(--space-8);
-    --content-block-card-pad-mobile: var(--space-6);
-
-    --content-block-fact-pad: var(--space-10);
-
-    --content-block-process-gap: var(--space-10);
-    --content-block-process-step-min-width: 15rem;
-
-    --content-block-media-gap: var(--space-6);
-
-    --content-block-empty-pad-vertical: var(--space-14);
-    --content-block-empty-pad-horizontal: var(--space-6);
-
-    --content-block-empty-gap: var(--space-4);
-
-    --content-block-highlight-border-width: var(--border-width-strong);
-    --content-block-highlight-pad: var(--space-6);
-}
-
-/* ---------------------------------------------------------
-   2. GENERIC INTERACTIVE / DISABLED
---------------------------------------------------------- */
-
-.interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
-}
-
-.interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.interactive:active {
-    background-color: var(--color-surface-subtle);
-}
-
-.interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.is-disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   3. CARD
---------------------------------------------------------- */
-
-.card {
-    background-color: var(--color-surface);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--content-block-card-pad);
-    display: flex;
-    flex-direction: column;
-    gap: var(--content-block-card-gap);
-    box-shadow: var(--shadow-1);
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.card--soft {
-    background-color: var(--color-surface-subtle);
-}
-
-.card--muted {
-    background-color: var(--color-muted-bg);
-}
-
-.card--tone-accent {
-    background-color: var(--color-accent-soft);
-}
-
-@media (max-width: 640px) {
-    .card {
-        padding: var(--content-block-card-pad-mobile);
-    }
-}
-
-.card--flat {
-    box-shadow: none;
-}
-
-.card--raised {
-    box-shadow: var(--shadow-2);
-}
-
-.card--interactive {
-    cursor: pointer;
-}
-
-.card--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-2);
-}
-
-.card--interactive:active {
-    background-color: var(--color-surface-subtle);
-}
-
-.card--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.card--selected {
-    border-color: var(--color-accent);
-    box-shadow: var(--shadow-2);
-}
-
-.card--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.card__header,
-.card__body {
-    width: 100%;
-}
-
-.card__footer {
-    margin-top: var(--component-gap-lg);
-    display: flex;
-    gap: var(--component-gap-md);
-    justify-content: flex-end;
-}
-
-.card__section-stack,
-.card__body-stack,
-.card__header-stack {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-}
-
-.card__section-inline,
-.card__body-inline,
-.card__footer-inline {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--component-gap-md);
-    align-items: flex-start;
-}
-
-/* ---------------------------------------------------------
-   4. CARD GRID
---------------------------------------------------------- */
-
-.card-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-card-min-width), 1fr));
-    grid-gap: var(--component-gap-lg);
-    gap: var(--component-gap-lg);
-}
-
-.card-grid--compact {
-    gap: var(--component-gap-md);
-}
-
-.card-grid--tight {
-    gap: var(--component-gap-xs);
-}
-
-.card-grid--wide {
-    gap: var(--component-gap-xl);
-}
-
-/* ---------------------------------------------------------
-   5. MEDIA BLOCK
---------------------------------------------------------- */
-
-.media {
-    display: flex;
-    align-items: center;
-    gap: var(--content-block-media-gap);
-}
-
-.media--stack {
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.media--horizontal {
-    flex-direction: row;
-    align-items: center;
-}
-
-.media--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.media--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-@media (max-width: 768px) {
-    .media {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-.media__img,
-.media__icon {
-    width: var(--icon-container-lg);
-    height: var(--icon-container-lg);
-    flex-shrink: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.media__img img,
-.media__icon svg {
-    width: 100%;
-    height: 100%;
-    -o-object-fit: contain;
-       object-fit: contain;
-    border-radius: var(--radius-sm);
-}
-
-.media__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.media__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.media__meta {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   6. LIST GROUP
---------------------------------------------------------- */
-
-.list-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.list-group__item {
-    display: flex;
-    gap: var(--component-gap-md);
-    padding: var(--component-gap-md) 0;
-    border-bottom: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-}
-
-.list-group__item:last-child {
-    border-bottom: none;
-}
-
-.list-group--borderless .list-group__item {
-    border-bottom: none;
-}
-
-.list-group--tight .list-group__item {
-    padding: var(--component-gap-xs) 0;
-}
-
-.list-group__item--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.list-group__item--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-.list-group__item--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.list-group__item--selected {
-    background-color: var(--accent-soft-surface, var(--color-accent-soft));
-    border-left-color: var(--accent-soft-border, var(--color-accent));
-    box-shadow: 0 0 0 1px transparent;
-    box-shadow: 0 0 0 1px var(--accent-soft-shadow, transparent);
-    color: var(--accent-soft-on, var(--color-on-accent));
-}
-
-.list-group__item--disabled {
-    opacity: var(--content-block-component-disabled--opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   7. CALLOUTS (Semantic Variants)
---------------------------------------------------------- */
-
-.callout {
-    border-radius: var(--radius-md);
-    padding: var(--content-block-component-pad-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    background-color: var(--color-muted-bg);
-}
-
-.callout--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.callout--outline {
-    background-color: var(--color-surface);
-    border-color: var(--color-border-strong);
-}
-
-.callout--minimal {
-    background-color: transparent;
-    border-color: transparent;
-}
-
-.callout__title {
-    font-size: var(--text-sm);
-    font-weight: 600;
-}
-
-.callout__body {
-    margin-top: var(--component-gap-xs);
-}
-
-.callout__icon {
-    margin-bottom: var(--component-gap-xs);
-}
-
-.callout--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
-}
-
-.callout--interactive:hover {
-    background: color-mix(in srgb, currentColor 10%, transparent);
-}
-
-.callout--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.semantic-info {
-    background-color: var(--semantic-info-bg);
-    border-color: var(--semantic-info-border);
-    color: var(--semantic-info-text);
-}
-
-.semantic-success {
-    background-color: var(--semantic-success-bg);
-    border-color: var(--semantic-success-border);
-    color: var(--semantic-success-text);
-}
-
-.semantic-warning {
-    background-color: var(--semantic-warning-bg);
-    border-color: var(--semantic-warning-border);
-    color: var(--semantic-warning-text);
-}
-
-.semantic-danger {
-    background-color: var(--semantic-danger-bg);
-    border-color: var(--semantic-danger-border);
-    color: var(--semantic-danger-text);
-}
-
-/* ---------------------------------------------------------
-   8. EMPTY STATE
---------------------------------------------------------- */
-
-.empty {
-    text-align: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);
-}
-
-.empty--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.empty--inline {
-    display: inline-flex;
-    align-items: center;
-    text-align: left;
-}
-
-.empty__icon {
-    width: var(--space-16);
-    height: var(--space-16);
-    margin: 0 auto var(--content-block-empty-gap);
-    stroke: var(--color-text-muted);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.empty--inline .empty__icon {
-    margin: 0 var(--component-gap-md) 0 0;
-}
-
-.empty__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.empty__actions {
-    margin-top: var(--component-gap-lg);
-    display: flex;
-    justify-content: center;
-    gap: var(--component-gap-md);
-}
-
-/* ---------------------------------------------------------
-   9. STATS BLOCK
---------------------------------------------------------- */
-
-.stats {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--component-gap-xl);
-}
-
-@media (max-width: 768px) {
-    .stats {
-        gap: var(--component-gap-lg);
-    }
-}
-
-.stats__item {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.stats--center .stats__item {
-    align-items: center;
-}
-
-.stats__value {
-    font-size: var(--text-lg);
-    font-weight: 600;
-    color: var(--color-text);
-}
-
-.stats__label {
-    font-size: var(--text-xs);
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   10. METRIC TITLE
---------------------------------------------------------- */
-
-.metric-title {
-    font-size: var(--text-xs);
-    letter-spacing: 0.04em;
-    text-transform: uppercase;
-    font-weight: 600;
-    color: var(--color-text-muted);
-}
-
-/* ---------------------------------------------------------
-   11. TAGS / CHIPS / BADGES + INTERACTIVE
---------------------------------------------------------- */
-
-.tag,
-.chip,
-.badge {
-    display: inline-flex;
-    align-items: center;
-    gap: var(--component-gap-xs);
-    padding: var(--component-gap-sm) var(--component-gap-md);
-    height: var(--content-block-tag-size-md);
-    font-size: var(--text-xs);
-    border-radius: 9999px;
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    background-color: var(--color-surface);
-    color: var(--color-text);
-}
-
-.tag--sm,
-.chip--sm,
-.badge--sm {
-    height: var(--content-block-tag-size-sm);
-}
-
-.tag--lg,
-.chip--lg,
-.badge--lg {
-    height: var(--content-block-tag-size-lg);
-}
-
-.tag--soft,
-.chip--soft,
-.badge--soft {
-    background-color: var(--color-surface-subtle);
-}
-
-.tag--outline,
-.chip--outline,
-.badge--outline {
-    background-color: transparent;
-    border-color: var(--color-border-strong);
-}
-
-.tag--interactive,
-.chip--interactive,
-.badge--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
-}
-
-.tag--interactive:hover,
-.chip--interactive:hover,
-.badge--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.tag--interactive:focus-visible,
-.chip--interactive:focus-visible,
-.badge--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.tag--disabled,
-.chip--disabled,
-.badge--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-.tag.semantic-info,
-.chip.semantic-info,
-.badge.semantic-info {
-    background-color: var(--semantic-info-bg);
-    color: var(--semantic-info-text);
-}
-
-.tag.semantic-warning,
-.chip.semantic-warning,
-.badge.semantic-warning {
-    background-color: var(--semantic-warning-bg);
-    color: var(--semantic-warning-text);
-}
-
-.tag.semantic-success,
-.chip.semantic-success,
-.badge.semantic-success {
-    background-color: var(--semantic-success-bg);
-    color: var(--semantic-success-text);
-}
-
-.tag.semantic-danger,
-.chip.semantic-danger,
-.badge.semantic-danger {
-    background-color: var(--semantic-danger-bg);
-    color: var(--semantic-danger-text);
-}
-
-/* ---------------------------------------------------------
-   12. AVATAR + STATUS
---------------------------------------------------------- */
-
-.avatar {
-    position: relative;
-    width: var(--avatar-size-md);
-    height: var(--avatar-size-md);
-    border-radius: 50%;
-    overflow: hidden;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    background-color: var(--color-muted-bg);
-}
-
-.avatar--sm {
-    width: var(--avatar-size-sm);
-    height: var(--avatar-size-sm);
-}
-
-.avatar--lg {
-    width: var(--avatar-size-lg);
-    height: var(--avatar-size-lg);
-}
-
-.avatar--status::after {
-    content: "";
-    position: absolute;
-    width: var(--avatar-status-size);
-    height: var(--avatar-status-size);
-    border-radius: 50%;
-    background-color: var(--color-success);
-    border: var(--border-width) solid var(--color-surface);
-    bottom: 0;
-    right: 0;
-}
-
-/* ---------------------------------------------------------
-   13. FEATURE BLOCK
---------------------------------------------------------- */
-
-.feature {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.feature--horizontal {
-    flex-direction: row;
-    align-items: center;
-}
-
-.feature__icon {
-    width: var(--icon-container-lg);
-    height: var(--icon-container-lg);
-    flex-shrink: 0;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.feature__icon .icon {
-    width: 100%;
-    height: 100%;
-    display: block;
-}
-
-.feature--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal);
-}
-
-.feature--interactive:hover {
-    background-color: var(--color-surface-hover);
-}
-
-.feature--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-@media (max-width: 640px) {
-    .feature--horizontal {
-        flex-direction: column;
-        align-items: flex-start;
-    }
-}
-
-/* ---------------------------------------------------------
-   14. PROCESS BLOCK
---------------------------------------------------------- */
-
-.process {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-process-step-min-width), 1fr));
-    grid-gap: var(--content-block-process-gap);
-    gap: var(--content-block-process-gap);
-}
-
-@media (max-width: 768px) {
-    .process {
-        gap: var(--component-gap-lg);
-    }
-}
-
-.process__step {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-    padding: var(--content-block-component-pad-md);
-    border-radius: var(--radius-md);
-    background-color: var(--color-surface);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    color: var(--color-text);
-}
-
-.process__step--active {
-    background-color: var(--accent-soft-surface);
-    border-color: var(--accent-soft-border);
-    color: var(--accent-soft-on);
-}
-
-.process__step--complete {
-    background-color: var(--success-soft-surface);
-    border-color: var(--success-soft-border);
-    color: var(--success-soft-on);
-}
-
-.process__step--disabled {
-    opacity: var(--content-block-component-disabled--opacity);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   15. HIGHLIGHT BLOCK
---------------------------------------------------------- */
-
-.highlight {
-    background-color: var(--color-surface-subtle);
-    border-left: var(--content-block-highlight-border-width) solid var(--color-accent);
-    padding: var(--content-block-highlight-pad);
-    border-radius: var(--radius-sm);
-}
-
-.highlight--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.highlight--info {
-    border-color: var(--semantic-info-border);
-    background-color: var(--semantic-info-bg);
-}
-
-.highlight--success {
-    border-color: var(--semantic-success-border);
-    background-color: var(--semantic-success-bg);
-}
-
-.highlight--warning {
-    border-color: var(--semantic-warning-border);
-    background-color: var(--semantic-warning-bg);
-}
-
-.highlight--danger {
-    border-color: var(--semantic-danger-border);
-    background-color: var(--semantic-danger-bg);
-}
-
-/* ---------------------------------------------------------
-   16. FACT BLOCK
---------------------------------------------------------- */
-
-.fact {
-    text-align: center;
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-fact-pad);
-}
-
-.fact--horizontal {
-    text-align: left;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--component-gap-lg);
-}
-
-.fact--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.fact--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal);
-}
-
-.fact--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-}
-
-.fact--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.fact--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    cursor: not-allowed;
-    pointer-events: none;
-}
-
-/* ---------------------------------------------------------
-   17. CONTENT BLOCK (NEW STRUCTURAL BLOCK)
-   --------------------------------------------------------- */
-
-.content-block {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-    width: 100%;
-}
-
-.content-block--surface {
-    background-color: var(--color-surface);
-    border-radius: var(--radius-md);
-    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
-    padding: var(--content-block-component-pad-lg);
-    box-shadow: var(--shadow-1);
-}
-
-.content-block--inset {
-    background-color: var(--color-surface-subtle);
-    border-radius: var(--radius-md);
-    padding: var(--content-block-component-pad-md);
-}
-
-.content-block--compact {
-    gap: var(--component-gap-xs);
-}
-
-.content-block--surface.content-block--compact {
-    padding: var(--content-block-component-pad-md);
-}
-
-.content-block--inset.content-block--compact {
-    padding: var(--content-block-component-pad-sm);
-}
-
-.content-block--bordered {
-    border: var(--content-block-component-border-sm) solid var(--color-border-strong);
-}
-
-/* ---------------------------------------------------------
-   17.1 CONTENT BLOCK - REGIONS
-   --------------------------------------------------------- */
-
-.content-block__header {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-xs);
-}
-
-.content-block__body {
-    display: flex;
-    flex-direction: column;
-    gap: var(--component-gap-md);
-}
-
-.content-block__media {
-    width: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.content-block__media img,
-.content-block__media svg,
-.content-block__media picture {
-    max-width: 100%;
-    height: auto;
-    border-radius: var(--radius-sm);
-}
-
-.content-block__footer {
-    display: flex;
-    justify-content: flex-end;
-    gap: var(--component-gap-md);
-    margin-top: var(--component-gap-lg);
-}
-
-/* ---------------------------------------------------------
-   17.2 INTERACTIVE STATE (optional)
-   --------------------------------------------------------- */
-
-.content-block--interactive {
-    cursor: pointer;
-    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
-}
-
-.content-block--interactive:hover {
-    background-color: var(--color-surface-hover);
-    border-color: var(--color-border-strong);
-    box-shadow: var(--shadow-2);
-}
-
-.content-block--interactive:focus-visible {
-    outline: var(--focus-ring-width) solid var(--focus-ring-color);
-    outline-offset: var(--focus-ring-offset);
-}
-
-.content-block--disabled {
-    opacity: 0.5;
-    opacity: var(--content-block-component-disabled--opacity, 0.5);
-    pointer-events: none;
-    cursor: not-allowed;
-}
+/************************************************************
+ * VLAH DESIGN SYSTEM (VDS) - Content Blocks
+ *
+ *  Responsibilities:
+ *    - Define the structural building blocks of the UI: cards, media blocks,
+ *      list groups, callouts, empty states, stats, metric titles, tags/chips/badges,
+ *      avatars, features, processes, highlights, fact blocks, and content blocks
+ *    - Provide consistent, token-driven spacing, radii, borders, shadows, and
+ *      interaction patterns across all content surfaces
+ *    - Expose semantic and interactive variants for blocks, tags, callouts, and
+ *      process steps
+ *    - Enable layout-neutral composition while supporting grid, stack, inline,
+ *      horizontal, and compact patterns
+ *
+ *  System Notes:
+ *    - Pure CSS; no behavioural assumptions or JavaScript dependencies
+ *    - Fully theme-driven: all tokens derive from primitives + active theme
+ *    - All interactive states use shared VDS focus, hover, and selected patterns
+ ************************************************************/
+
+/* ---------------------------------------------------------
+   1. CONTENT BLOCK TOKEN DEFINITIONS
+--------------------------------------------------------- */
+
+[data-vds-content-block],
+.vds-content-block {
+    --content-block-tag-size-sm: var(--space-4);
+    --content-block-tag-size-md: var(--space-5);
+    --content-block-tag-size-lg: var(--space-6);
+    --content-block-component-disabled--opacity: 0.3;
+
+
+    --content-block-component-pad-sm: var(--space-3);
+    --content-block-component-pad-md: var(--space-6);
+    --content-block-component-pad-lg: var(--space-8);
+
+    --content-block-component-border-sm: var(--border-width);
+
+    --content-block-card-min-width: 16.25rem;
+
+    --content-block-card-gap: var(--space-4);
+    --content-block-card-pad: var(--space-8);
+    --content-block-card-pad-mobile: var(--space-6);
+
+    --content-block-fact-pad: var(--space-10);
+
+    --content-block-process-gap: var(--space-10);
+    --content-block-process-step-min-width: 15rem;
+
+    --content-block-media-gap: var(--space-6);
+
+    --content-block-empty-pad-vertical: var(--space-14);
+    --content-block-empty-pad-horizontal: var(--space-6);
+
+    --content-block-empty-gap: var(--space-4);
+
+    --content-block-highlight-border-width: var(--border-width-strong);
+    --content-block-highlight-pad: var(--space-6);
+}
+
+/* ---------------------------------------------------------
+   2. GENERIC INTERACTIVE / DISABLED
+--------------------------------------------------------- */
+
+.interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal), color var(--transition-normal);
+}
+
+.interactive:hover {
+    background-color: var(--color-surface-hover);
+    border-color: var(--color-border-strong);
+}
+
+.interactive:active {
+    background-color: var(--color-surface-subtle);
+}
+
+.interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.is-disabled {
+    opacity: 0.5;
+    opacity: var(--content-block-component-disabled--opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ---------------------------------------------------------
+   3. CARD
+--------------------------------------------------------- */
+
+.card {
+    background-color: var(--color-surface);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--content-block-card-pad);
+    display: flex;
+    flex-direction: column;
+    gap: var(--content-block-card-gap);
+    box-shadow: var(--shadow-1);
+    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
+}
+
+.card--soft {
+    background-color: var(--color-surface-subtle);
+}
+
+.card--muted {
+    background-color: var(--color-muted-bg);
+}
+
+.card--tone-accent {
+    background-color: var(--color-accent-soft);
+}
+
+@media (max-width: 640px) {
+    .card {
+        padding: var(--content-block-card-pad-mobile);
+    }
+}
+
+.card--flat {
+    box-shadow: none;
+}
+
+.card--raised {
+    box-shadow: var(--shadow-2);
+}
+
+.card--interactive {
+    cursor: pointer;
+}
+
+.card--interactive:hover {
+    background-color: var(--color-surface-hover);
+    border-color: var(--color-border-strong);
+    box-shadow: var(--shadow-2);
+}
+
+.card--interactive:active {
+    background-color: var(--color-surface-subtle);
+}
+
+.card--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.card--selected {
+    border-color: var(--color-accent);
+    box-shadow: var(--shadow-2);
+}
+
+.card--disabled {
+    opacity: 0.5;
+    opacity: var(--content-block-component-disabled--opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.card__header,
+.card__body {
+    width: 100%;
+}
+
+.card__footer {
+    margin-top: var(--component-gap-lg);
+    display: flex;
+    gap: var(--component-gap-md);
+    justify-content: flex-end;
+}
+
+.card__section-stack,
+.card__body-stack,
+.card__header-stack {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-md);
+}
+
+.card__section-inline,
+.card__body-inline,
+.card__footer-inline {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--component-gap-md);
+    align-items: flex-start;
+}
+
+/* ---------------------------------------------------------
+   4. CARD GRID
+--------------------------------------------------------- */
+
+.card-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-card-min-width), 1fr));
+    grid-gap: var(--component-gap-lg);
+    gap: var(--component-gap-lg);
+}
+
+.card-grid--compact {
+    gap: var(--component-gap-md);
+}
+
+.card-grid--tight {
+    gap: var(--component-gap-xs);
+}
+
+.card-grid--wide {
+    gap: var(--component-gap-xl);
+}
+
+/* ---------------------------------------------------------
+   5. MEDIA BLOCK
+--------------------------------------------------------- */
+
+.media {
+    display: flex;
+    align-items: center;
+    gap: var(--content-block-media-gap);
+}
+
+.media--stack {
+    flex-direction: column;
+    align-items: flex-start;
+}
+
+.media--horizontal {
+    flex-direction: row;
+    align-items: center;
+}
+
+.media--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal);
+}
+
+.media--interactive:hover {
+    background-color: var(--color-surface-hover);
+}
+
+@media (max-width: 768px) {
+    .media {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+.media__img,
+.media__icon {
+    width: var(--icon-container-lg);
+    height: var(--icon-container-lg);
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.media__img img,
+.media__icon svg {
+    width: 100%;
+    height: 100%;
+    -o-object-fit: contain;
+       object-fit: contain;
+    border-radius: var(--radius-sm);
+}
+
+.media__icon .icon {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.media__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-xs);
+}
+
+.media__meta {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   6. LIST GROUP
+--------------------------------------------------------- */
+
+.list-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-xs);
+}
+
+.list-group__item {
+    display: flex;
+    gap: var(--component-gap-md);
+    padding: var(--component-gap-md) 0;
+    border-bottom: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+}
+
+.list-group__item:last-child {
+    border-bottom: none;
+}
+
+.list-group--borderless .list-group__item {
+    border-bottom: none;
+}
+
+.list-group--tight .list-group__item {
+    padding: var(--component-gap-xs) 0;
+}
+
+.list-group__item--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal);
+}
+
+.list-group__item--interactive:hover {
+    background-color: var(--color-surface-hover);
+}
+
+.list-group__item--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.list-group__item--selected {
+    background-color: var(--accent-soft-surface, var(--color-accent-soft));
+    border-left-color: var(--accent-soft-border, var(--color-accent));
+    box-shadow: 0 0 0 1px transparent;
+    box-shadow: 0 0 0 1px var(--accent-soft-shadow, transparent);
+    color: var(--accent-soft-on, var(--color-on-accent));
+}
+
+.list-group__item--disabled {
+    opacity: var(--content-block-component-disabled--opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ---------------------------------------------------------
+   7. CALLOUTS (Semantic Variants)
+--------------------------------------------------------- */
+
+.callout {
+    border-radius: var(--radius-md);
+    padding: var(--content-block-component-pad-md);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    background-color: var(--color-muted-bg);
+}
+
+.callout--compact {
+    padding: var(--content-block-component-pad-sm);
+}
+
+.callout--outline {
+    background-color: var(--color-surface);
+    border-color: var(--color-border-strong);
+}
+
+.callout--minimal {
+    background-color: transparent;
+    border-color: transparent;
+}
+
+.callout__title {
+    font-size: var(--text-sm);
+    font-weight: 600;
+}
+
+.callout__body {
+    margin-top: var(--component-gap-xs);
+}
+
+.callout__icon {
+    margin-bottom: var(--component-gap-xs);
+}
+
+.callout--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+
+.callout--interactive:hover {
+    background: color-mix(in srgb, currentColor 10%, transparent);
+}
+
+.callout--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.semantic-info {
+    background-color: var(--semantic-info-bg);
+    border-color: var(--semantic-info-border);
+    color: var(--semantic-info-text);
+}
+
+.semantic-success {
+    background-color: var(--semantic-success-bg);
+    border-color: var(--semantic-success-border);
+    color: var(--semantic-success-text);
+}
+
+.semantic-warning {
+    background-color: var(--semantic-warning-bg);
+    border-color: var(--semantic-warning-border);
+    color: var(--semantic-warning-text);
+}
+
+.semantic-danger {
+    background-color: var(--semantic-danger-bg);
+    border-color: var(--semantic-danger-border);
+    color: var(--semantic-danger-text);
+}
+
+/* ---------------------------------------------------------
+   8. EMPTY STATE
+--------------------------------------------------------- */
+
+.empty {
+    text-align: center;
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    padding: var(--content-block-empty-pad-vertical) var(--content-block-empty-pad-horizontal);
+}
+
+.empty--compact {
+    padding: var(--content-block-component-pad-md);
+}
+
+.empty--inline {
+    display: inline-flex;
+    align-items: center;
+    text-align: left;
+}
+
+.empty__icon {
+    width: var(--space-16);
+    height: var(--space-16);
+    margin: 0 auto var(--content-block-empty-gap);
+    stroke: var(--color-text-muted);
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.empty--inline .empty__icon {
+    margin: 0 var(--component-gap-md) 0 0;
+}
+
+.empty__icon .icon {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.empty__actions {
+    margin-top: var(--component-gap-lg);
+    display: flex;
+    justify-content: center;
+    gap: var(--component-gap-md);
+}
+
+/* ---------------------------------------------------------
+   9. STATS BLOCK
+--------------------------------------------------------- */
+
+.stats {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--component-gap-xl);
+}
+
+@media (max-width: 768px) {
+    .stats {
+        gap: var(--component-gap-lg);
+    }
+}
+
+.stats__item {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-xs);
+}
+
+.stats--center .stats__item {
+    align-items: center;
+}
+
+.stats__value {
+    font-size: var(--text-lg);
+    font-weight: 600;
+    color: var(--color-text);
+}
+
+.stats__label {
+    font-size: var(--text-xs);
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   10. METRIC TITLE
+--------------------------------------------------------- */
+
+.metric-title {
+    font-size: var(--text-xs);
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    font-weight: 600;
+    color: var(--color-text-muted);
+}
+
+/* ---------------------------------------------------------
+   11. TAGS / CHIPS / BADGES + INTERACTIVE
+--------------------------------------------------------- */
+
+.tag,
+.chip,
+.badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--component-gap-xs);
+    padding: var(--component-gap-sm) var(--component-gap-md);
+    height: var(--content-block-tag-size-md);
+    font-size: var(--text-xs);
+    border-radius: 9999px;
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    background-color: var(--color-surface);
+    color: var(--color-text);
+}
+
+.tag--sm,
+.chip--sm,
+.badge--sm {
+    height: var(--content-block-tag-size-sm);
+}
+
+.tag--lg,
+.chip--lg,
+.badge--lg {
+    height: var(--content-block-tag-size-lg);
+}
+
+.tag--soft,
+.chip--soft,
+.badge--soft {
+    background-color: var(--color-surface-subtle);
+}
+
+.tag--outline,
+.chip--outline,
+.badge--outline {
+    background-color: transparent;
+    border-color: var(--color-border-strong);
+}
+
+.tag--interactive,
+.chip--interactive,
+.badge--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
+}
+
+.tag--interactive:hover,
+.chip--interactive:hover,
+.badge--interactive:hover {
+    background-color: var(--color-surface-hover);
+    border-color: var(--color-border-strong);
+}
+
+.tag--interactive:focus-visible,
+.chip--interactive:focus-visible,
+.badge--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.tag--disabled,
+.chip--disabled,
+.badge--disabled {
+    opacity: 0.5;
+    opacity: var(--content-block-component-disabled--opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+.tag.semantic-info,
+.chip.semantic-info,
+.badge.semantic-info {
+    background-color: var(--semantic-info-bg);
+    color: var(--semantic-info-text);
+}
+
+.tag.semantic-warning,
+.chip.semantic-warning,
+.badge.semantic-warning {
+    background-color: var(--semantic-warning-bg);
+    color: var(--semantic-warning-text);
+}
+
+.tag.semantic-success,
+.chip.semantic-success,
+.badge.semantic-success {
+    background-color: var(--semantic-success-bg);
+    color: var(--semantic-success-text);
+}
+
+.tag.semantic-danger,
+.chip.semantic-danger,
+.badge.semantic-danger {
+    background-color: var(--semantic-danger-bg);
+    color: var(--semantic-danger-text);
+}
+
+/* ---------------------------------------------------------
+   12. AVATAR + STATUS
+--------------------------------------------------------- */
+
+.avatar {
+    position: relative;
+    width: var(--avatar-size-md);
+    height: var(--avatar-size-md);
+    border-radius: 50%;
+    overflow: hidden;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background-color: var(--color-muted-bg);
+}
+
+.avatar--sm {
+    width: var(--avatar-size-sm);
+    height: var(--avatar-size-sm);
+}
+
+.avatar--lg {
+    width: var(--avatar-size-lg);
+    height: var(--avatar-size-lg);
+}
+
+.avatar--status::after {
+    content: "";
+    position: absolute;
+    width: var(--avatar-status-size);
+    height: var(--avatar-status-size);
+    border-radius: 50%;
+    background-color: var(--color-success);
+    border: var(--border-width) solid var(--color-surface);
+    bottom: 0;
+    right: 0;
+}
+
+/* ---------------------------------------------------------
+   13. FEATURE BLOCK
+--------------------------------------------------------- */
+
+.feature {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-xs);
+}
+
+.feature--horizontal {
+    flex-direction: row;
+    align-items: center;
+}
+
+.feature__icon {
+    width: var(--icon-container-lg);
+    height: var(--icon-container-lg);
+    flex-shrink: 0;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.feature__icon .icon {
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.feature--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal);
+}
+
+.feature--interactive:hover {
+    background-color: var(--color-surface-hover);
+}
+
+.feature--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+@media (max-width: 640px) {
+    .feature--horizontal {
+        flex-direction: column;
+        align-items: flex-start;
+    }
+}
+
+/* ---------------------------------------------------------
+   14. PROCESS BLOCK
+--------------------------------------------------------- */
+
+.process {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(var(--content-block-process-step-min-width), 1fr));
+    grid-gap: var(--content-block-process-gap);
+    gap: var(--content-block-process-gap);
+}
+
+@media (max-width: 768px) {
+    .process {
+        gap: var(--component-gap-lg);
+    }
+}
+
+.process__step {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-md);
+    padding: var(--content-block-component-pad-md);
+    border-radius: var(--radius-md);
+    background-color: var(--color-surface);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    color: var(--color-text);
+}
+
+.process__step--active {
+    background-color: var(--accent-soft-surface);
+    border-color: var(--accent-soft-border);
+    color: var(--accent-soft-on);
+}
+
+.process__step--complete {
+    background-color: var(--success-soft-surface);
+    border-color: var(--success-soft-border);
+    color: var(--success-soft-on);
+}
+
+.process__step--disabled {
+    opacity: var(--content-block-component-disabled--opacity);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ---------------------------------------------------------
+   15. HIGHLIGHT BLOCK
+--------------------------------------------------------- */
+
+.highlight {
+    background-color: var(--color-surface-subtle);
+    border-left: var(--content-block-highlight-border-width) solid var(--color-accent);
+    padding: var(--content-block-highlight-pad);
+    border-radius: var(--radius-sm);
+}
+
+.highlight--compact {
+    padding: var(--content-block-component-pad-sm);
+}
+
+.highlight--info {
+    border-color: var(--semantic-info-border);
+    background-color: var(--semantic-info-bg);
+}
+
+.highlight--success {
+    border-color: var(--semantic-success-border);
+    background-color: var(--semantic-success-bg);
+}
+
+.highlight--warning {
+    border-color: var(--semantic-warning-border);
+    background-color: var(--semantic-warning-bg);
+}
+
+.highlight--danger {
+    border-color: var(--semantic-danger-border);
+    background-color: var(--semantic-danger-bg);
+}
+
+/* ---------------------------------------------------------
+   16. FACT BLOCK
+--------------------------------------------------------- */
+
+.fact {
+    text-align: center;
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    padding: var(--content-block-fact-pad);
+}
+
+.fact--horizontal {
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--component-gap-lg);
+}
+
+.fact--compact {
+    padding: var(--content-block-component-pad-md);
+}
+
+.fact--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal);
+}
+
+.fact--interactive:hover {
+    background-color: var(--color-surface-hover);
+    border-color: var(--color-border-strong);
+}
+
+.fact--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.fact--disabled {
+    opacity: 0.5;
+    opacity: var(--content-block-component-disabled--opacity, 0.5);
+    cursor: not-allowed;
+    pointer-events: none;
+}
+
+/* ---------------------------------------------------------
+   17. CONTENT BLOCK (NEW STRUCTURAL BLOCK)
+   --------------------------------------------------------- */
+
+.content-block {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-md);
+    width: 100%;
+}
+
+.content-block--surface {
+    background-color: var(--color-surface);
+    border-radius: var(--radius-md);
+    border: var(--content-block-component-border-sm) solid var(--color-border-subtle);
+    padding: var(--content-block-component-pad-lg);
+    box-shadow: var(--shadow-1);
+}
+
+.content-block--inset {
+    background-color: var(--color-surface-subtle);
+    border-radius: var(--radius-md);
+    padding: var(--content-block-component-pad-md);
+}
+
+.content-block--compact {
+    gap: var(--component-gap-xs);
+}
+
+.content-block--surface.content-block--compact {
+    padding: var(--content-block-component-pad-md);
+}
+
+.content-block--inset.content-block--compact {
+    padding: var(--content-block-component-pad-sm);
+}
+
+.content-block--bordered {
+    border: var(--content-block-component-border-sm) solid var(--color-border-strong);
+}
+
+/* ---------------------------------------------------------
+   17.1 CONTENT BLOCK - REGIONS
+   --------------------------------------------------------- */
+
+.content-block__header {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-xs);
+}
+
+.content-block__body {
+    display: flex;
+    flex-direction: column;
+    gap: var(--component-gap-md);
+}
+
+.content-block__media {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.content-block__media img,
+.content-block__media svg,
+.content-block__media picture {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--radius-sm);
+}
+
+.content-block__footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: var(--component-gap-md);
+    margin-top: var(--component-gap-lg);
+}
+
+/* ---------------------------------------------------------
+   17.2 INTERACTIVE STATE (optional)
+   --------------------------------------------------------- */
+
+.content-block--interactive {
+    cursor: pointer;
+    transition: background-color var(--transition-normal), border-color var(--transition-normal), box-shadow var(--transition-normal);
+}
+
+.content-block--interactive:hover {
+    background-color: var(--color-surface-hover);
+    border-color: var(--color-border-strong);
+    box-shadow: var(--shadow-2);
+}
+
+.content-block--interactive:focus-visible {
+    outline: var(--focus-ring-width) solid var(--focus-ring-color);
+    outline-offset: var(--focus-ring-offset);
+}
+
+.content-block--disabled {
+    opacity: 0.5;
+    opacity: var(--content-block-component-disabled--opacity, 0.5);
+    pointer-events: none;
+    cursor: not-allowed;
+}