fix(sbb-container): fix background color for nested containers (#2611)

src/components/container/container/container.scss

@@ -16,7 +16,14 @@
 }
 
 .sbb-container {
-  background-color: var(--sbb-container-background-color, transparent);
+  background-color: var(--sbb-container-background-color);
+
+  // In order to support nested sbb-containers (e.g. if used in an overlay), we need to explicitly set background color to transparent.
+  // We cannot use the --sbb-container-background-color variable because using it would
+  // destroy sbb-sticky-bar behavior when the container and the sticky bar have transparent color.
+  :host([color='transparent']) & {
+    background-color: transparent;
+  }
 
   // Placing content before and after the container stops the margin of inner elements from overflowing
   &::after,

src/components/container/container/container.stories.ts

@@ -47,13 +47,25 @@ const defaultArgs: Args = {
   color: color.options![0],
 };
 
-const DefaultTemplate = ({ color, ...args }: Args): TemplateResult => html`
-  <sbb-container ${sbbSpread(args)} color=${color}>
+const DefaultTemplate = (args: Args): TemplateResult => html`
+  <sbb-container ${sbbSpread(args)}>
     ${containerContent('Example title')} ${containerContent('Another one')}
     ${containerContent('And another one', true)}
   </sbb-container>
 `;
 
+// Only for visual regression
+const NestedContainerTemplate = (): TemplateResult => html`
+  <sbb-container color="white">
+    ${containerContent('Example title')}
+    <div style="background-color: var(--sbb-color-milk);">
+      <sbb-container color="transparent">
+        ${containerContent('And another one', true)}
+      </sbb-container>
+    </div>
+  </sbb-container>
+`;
+
 export const Default: StoryObj = {
   render: DefaultTemplate,
   argTypes: defaultArgTypes,
@@ -78,7 +90,14 @@ export const Expanded: StoryObj = {
   args: { ...defaultArgs, expanded: true },
 };
 
+export const NestedContainer: StoryObj = {
+  render: NestedContainerTemplate,
+  argTypes: { defaultArgTypes },
+  args: { ...defaultArgs, expanded: true },
+};
+
 const meta: Meta = {
+  excludeStories: /^(NestedContainer)$/,
   parameters: {
     docs: {
       extractComponentDescription: () => readme,