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

/// Surface with explicit header / body / footer slots.
///
/// Distinct from `card` (an editorial content surface) and `box`
/// (a bare surface with no slots).
@mixin ss-panel {
    display: flex;
    flex-direction: column;

    background-color: var(--ss-color-surface);
    border: map.get(config.$ss-panel-config, border);
    border-radius: map.get(config.$ss-panel-config, radius);
    overflow: hidden;
}

@mixin ss-panel-header {
    // Heading first, then any actions (buttons) pushed to the end.
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ss-space-2);
    padding: map.get(config.$ss-panel-config, header-padding);
    background-color: var(--ss-color-surface-alt);
    border-bottom: map.get(config.$ss-panel-config, border);

    font-size: map.get(config.$ss-panel-config, header-size);
    font-weight: map.get(config.$ss-panel-config, header-weight);

    // A heading element in the header takes the header's size, so a
    // correctly ranked `<h2>`/`<h3>` does not render at page-heading size.
    > :is(h1, h2, h3, h4, h5, h6) {
        margin: 0;
        font-size: inherit;
        font-weight: inherit;
        line-height: inherit;
    }
}

@mixin ss-panel-body {
    flex: 1;
    padding: map.get(config.$ss-panel-config, body-padding);
    overflow: auto;
}

@mixin ss-panel-footer {
    padding: map.get(config.$ss-panel-config, footer-padding);
    background-color: var(--ss-color-surface-alt);
    border-top: map.get(config.$ss-panel-config, border);
}