// =============================================================================
// 31-modules / spacer / mixins
// =============================================================================

@use "sass:map";
@use "./spacer.config" as config;
@use "../../01-core/external" as *;

@mixin ss-spacer($size: map.get(config.$spacer-config, "size-md")) {
    display: block;
    width: 100%;
    height: $size;
    flex-shrink: 0;
}

@mixin ss-spacer-inline($size: map.get(config.$spacer-config, "size-md")) {
    display: inline-block;
    width: $size;
    height: q(1);
    flex-shrink: 0;
}

/// `--divider`: a spacer that carries a rule. When it wraps an <hr>, the rule
/// is the hr itself (no second border, no extra hr margin).
@mixin ss-spacer-divider {
    border-top: q(1) solid var(--ss-color-border);
    margin: q(16) 0;

    > hr {
        margin-block: 0;
    }
    &:has(> hr) {
        border-top: 0;
    }
}