@use "sass:map";
@use "./messages.config" as config;

@function _cfg($key) {
    @return map.get(config.$ss-messages-config, $key);
}

/// Inline stack of alerts above the page content. Alerts space
/// themselves (the alert module's sibling margin), so no gap here.
@mixin ss-messages {
    display: flex;
    flex-direction: column;
    margin: 0 0 _cfg(margin-block-end);
    padding: 0;
    list-style: none;

    &:empty {
        display: none;
    }
}

/// Floating stack of toasts in the top-right corner.
@mixin ss-messages-toast {
    position: fixed;
    // Below the app header inside `ss-l-app` (`--ss-app-overlay-top`).
    inset-block-start: calc(
        var(--ss-app-overlay-top, 0px) + #{_cfg(toast-inset)}
    );
    inset-inline-end: _cfg(toast-inset);
    z-index: _cfg(toast-z-index);
    gap: _cfg(gap);
    margin: 0;
    pointer-events: none;

    > * {
        pointer-events: auto;
    }
}