// ------------------------------------------------------------------
// Layout
// ------------------------------------------------------------------

.o-mail-ChatterContainer, .o-mail-Form-chatter {
    background-color: $o-webclient-background-color;
    --Chatter-asideExtraWidth: 0px; // to take into account more items, e.g. "close" chatter feature
    &.o-aside {
        @media (max-width: 1920px) {
            --ChatterAsideForm-padding-left: #{map-get($spacers, 2)};
        }

        flex-shrink: 0;
        flex-grow: 1;
        padding: map-get($spacers, 0);
        width: calc(#{$o-mail-Chatter-minWidth} + var(--Chatter-asideExtraWidth));
    }

    &.o-isInFormSheetBg {
        margin-left: calc(var(--formView-sheetBg-padding-x) * -1);
        margin-right: calc(var(--formView-sheetBg-padding-x) * -1);
    }

    &:not(.o-aside):not(.o-full-width) .o-mail-Chatter {
        margin-left: auto;
        margin-right: auto;
    }
}

// Reduce horizontal spacing if the next sibling is an aside chatter
.o_form_sheet_bg:has(+ .o-mail-Form-chatter.o-aside) {
    @media screen and (max-width: 1920px) {
        --formView-sheetBg-padding-right: #{map-get($spacers, 2)};
    }
}

// Disable scroll anchoring when chatter is not in aside mode to prevent unwanted layout shifts
.o_content:has(.o-mail-Form-chatter:not(.o-aside)) {
    overflow-anchor: none;
}

// ------------------------------------------------------------------
// Style
// ------------------------------------------------------------------

.o-mail-ChatterContainer, .o-mail-Form-chatter {
    display: flex;
    margin: 0 auto;
    padding-bottom: map-get($spacers, 5);
    width: 100%;
}