@import '_content/Nodwise.UI.Components/Nodwise.UI.Components.knfcmg37v5.bundle.scp.css';

/* /Pages/ComponentsPage.razor.rz.scp.css */
/* A row of live specimens that wraps on narrow panes. */
.ds-row[b-w2sxduylrj] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-3);
}
/* /Pages/IconsPage.razor.rz.scp.css */
/* A row of specimens of growing size, aligned on their caption. */
.ds-ladder[b-0sya308b7n] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-4);
}

.ds-ladder-step[b-0sya308b7n] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}
/* /Pages/LayoutPage.razor.rz.scp.css */
/* The four wrap specimens side by side, aligned on their baseline caption. */
.ds-wraps[b-scv4zhep59] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--space-5);
}

.ds-wrap-figure[b-scv4zhep59] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
}

/* The wrap's own box is the subject, so it shows as a tint; the content inside is the icon. */
.ds-wrap[b-scv4zhep59] {
    background: var(--tint-strong);
    color: var(--text-accent);
}