.AreaHeader {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 40px; // was a fixed height: box-sizing:border-box was absorbing padding-top into the
                      // existing 40px instead of growing the header, so top padding had no visible effect.
    box-sizing: border-box;
    // AreaHeader has no edge inset of its own — it relies on its parent Area for that. Default to
    // GroupedElementsArea's own edge padding so a bare/unpadded parent (e.g. SingleElementArea)
    // doesn't leave it flush against the screen edge.
    padding: var(--slds-g-spacing-4) var(--slds-g-spacing-4) 0;

    @media @phone {
        padding: var(--slds-g-spacing-3) var(--slds-g-spacing-3) 0;
    }
}

// GroupedElementsArea already supplies edge padding on all sides (formfield-lumina.less) — avoid
// double-padding AreaHeader when it's a direct child there.
.GroupedElementsArea.GroupedElementsArea--lumina > .AreaHeader {
    padding: 0;
}

.AreaHeader-title {
    font-family: var(--slds-g-font-family-base);
    font-weight: var(--slds-g-font-weight-7);
    font-size: var(--slds-g-font-scale-2);
    line-height: var(--slds-g-font-line-height-3);
    color: var(--slds-g-color-on-surface-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.AreaHeader-actions {
    display: flex;
    align-items: center;
    gap: var(--slds-g-spacing-4);
    flex-shrink: 0;
    margin-left: auto;
}