@24vlh/vds 0.1.0

package/dist/components/content-blocks.css

@@ -0,0 +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;
+}