/* ===== Inline Layout Primitive ===== */

.ui-inline {
    display: flex;
    flex-direction: row;
    flex-wrap: var(--inline-wrap, nowrap);
    align-items: var(--inline-align, center);
    justify-content: var(--inline-justify, flex-start);
    gap: var(--inline-gap, 16px);
}

@media (min-width: 768px) {
    .ui-inline {
        gap: var(--inline-gap-md, var(--inline-gap, 16px));
    }
}

@media (min-width: 1024px) {
    .ui-inline {
        gap: var(--inline-gap-lg, var(--inline-gap-md, var(--inline-gap, 16px)));
    }
}

/* FillBlock — Inline fills its non-flex parent (width + height 100%). */
.ui-inline--fill-block {
    width: 100%;
    height: 100%;
}

/* NoShrink — Inline doesn't shrink below its content size in a flex parent. */
.ui-inline--no-shrink {
    flex-shrink: 0;
}

/* Padding only when explicitly set via Inline.Padding/PaddingBlock/PaddingBlockEnd. */
.ui-inline[style*="--inline-padding"] {
    padding-top: var(--inline-padding-block, 0);
    padding-bottom: var(--inline-padding-block-end, var(--inline-padding-block, 0));
    padding-left: var(--inline-padding, 0);
    padding-right: var(--inline-padding, 0);
    box-sizing: border-box;
}