/**
 * Black Sheep responsive spacing.
 *
 * Consumes the per-side CSS custom properties written onto a block wrapper
 * (class .bsc-rsp) by the editor preview filter and the PHP render_block filter.
 *
 * The empty fallback - var(--bsc-pt, ) - is deliberate: when a property is not
 * set the declaration resolves to an empty value and is dropped, so the block's
 * own padding/margin is left untouched. Only sides the user actually set apply.
 *
 * Breakpoints cascade mobile -> tablet -> desktop, so a blank tablet/mobile side
 * inherits the next larger screen. The doubled class keeps specificity above a
 * block's own single-class padding/margin rule.
 */

.bsc-rsp.bsc-rsp {
    padding-top: var(--bsc-pt, );
    padding-right: var(--bsc-pr, );
    padding-bottom: var(--bsc-pb, );
    padding-left: var(--bsc-pl, );
    margin-top: var(--bsc-mt, );
    margin-right: var(--bsc-mr, );
    margin-bottom: var(--bsc-mb, );
    margin-left: var(--bsc-ml, );
}

/* Tablet: 980px and below. Falls back to the desktop value when blank. */
@media (max-width: 980px) {
    .bsc-rsp.bsc-rsp {
        padding-top: var(--bsc-pt-t, var(--bsc-pt, ));
        padding-right: var(--bsc-pr-t, var(--bsc-pr, ));
        padding-bottom: var(--bsc-pb-t, var(--bsc-pb, ));
        padding-left: var(--bsc-pl-t, var(--bsc-pl, ));
        margin-top: var(--bsc-mt-t, var(--bsc-mt, ));
        margin-right: var(--bsc-mr-t, var(--bsc-mr, ));
        margin-bottom: var(--bsc-mb-t, var(--bsc-mb, ));
        margin-left: var(--bsc-ml-t, var(--bsc-ml, ));
    }
}

/* Mobile: 600px and below. Falls back to tablet, then desktop, when blank. */
@media (max-width: 600px) {
    .bsc-rsp.bsc-rsp {
        padding-top: var(--bsc-pt-m, var(--bsc-pt-t, var(--bsc-pt, )));
        padding-right: var(--bsc-pr-m, var(--bsc-pr-t, var(--bsc-pr, )));
        padding-bottom: var(--bsc-pb-m, var(--bsc-pb-t, var(--bsc-pb, )));
        padding-left: var(--bsc-pl-m, var(--bsc-pl-t, var(--bsc-pl, )));
        margin-top: var(--bsc-mt-m, var(--bsc-mt-t, var(--bsc-mt, )));
        margin-right: var(--bsc-mr-m, var(--bsc-mr-t, var(--bsc-mr, )));
        margin-bottom: var(--bsc-mb-m, var(--bsc-mb-t, var(--bsc-mb, )));
        margin-left: var(--bsc-ml-m, var(--bsc-ml-t, var(--bsc-ml, )));
    }
}