// =============================================================================
// 31-modules / demo / mixins
// =============================================================================

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

@mixin ss-demo-section {
    display: block;
    margin: 0 0 map.get(config.$demo-config, "section-gap");

    > * + * {
        margin-top: q(16);
    }
}

@mixin ss-demo-section-header {
    display: flex;
    flex-direction: column;
    gap: map.get(config.$demo-config, "header-gap");
    margin: 0 0 q(24);

    > h1,
    > h2,
    > h3,
    > h4 {
        margin: 0;
    }

    > p {
        margin: 0;
        color: map.get(config.$demo-config, "label-color");
    }
}

@mixin ss-demo-subsection {
    display: block;
    margin: 0 0 map.get(config.$demo-config, "subsection-gap");

    > h3,
    > h4 {
        margin: 0 0 q(12);
    }

    > * + * {
        margin-top: q(12);
    }
}

// Hidden until focused, then pinned over the top ribbon.
@mixin ss-demo-skip-link {
    position: absolute;
    inset-block-start: q(4);
    inset-inline-start: q(4);
    z-index: var(--ss-z-toast);
    padding: q(8) q(12);
    background: var(--ss-color-background);
    color: var(--ss-color-text);
    outline: q(2) solid var(--ss-color-focus, currentColor);
    transform: translateY(-200%);

    &:focus {
        transform: none;
    }
}

// Grid overlays toggled from the ribbon (see GridManager).
@mixin ss-demo-guide {
    display: none;
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    pointer-events: none;
    z-index: var(--ss-z-fixed);

    &.active {
        display: block;
    }
}