@cloud-ru/ds-accordion 1.0.0

package/dist/esm/components/CollapseBlock/styles.module.css

@@ -0,0 +1,480 @@
+@charset "UTF-8";
+.acrylic{
+  pointer-events:none;
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+
+.stateLayer{
+  visibility:initial;
+}
+
+.wrapper[data-component=accordionPrimary]{
+  border-radius:var(--sn-accordion-anatomy-accordionPrimary-container-borderRadius, var(--sn-brand-anatomy-radius-block-l, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+}
+.wrapper[data-component=accordionSecondary]{
+  border-radius:var(--sn-accordion-anatomy-accordionSecondary-container-borderRadius, var(--sn-brand-anatomy-radius-block-m, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+}
+.wrapper[data-component=accordionTertiary]{
+  border-radius:var(--sn-accordion-anatomy-accordionTertiary-container-borderRadius, var(--sn-brand-anatomy-radius-block-s, var(--sn-primitive-dimension-4, 4px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+}
+.wrapper{
+  position:relative;
+  display:block;
+  flex-direction:column;
+  align-self:stretch;
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-primary-background, var(--sn-brand-color-primary-90, var(--sn-brandRole-color-brandA-90, var(--sn-primitive-color-brandA-90, #edf7f1))));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=primary][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-neutral-background, var(--sn-brand-color-neutral-90, var(--sn-primitive-color-gray-90, #eeeff3)));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=neutral][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-red-background, var(--sn-primitive-color-red-90, #fee8e5));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-red-background1Level, var(--sn-primitive-color-red-95, #fef5f1));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=red][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-red-background2Level, var(--sn-primitive-color-red-99, #fffaf7));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-orange-background, var(--sn-primitive-color-orange-90, #ffedcf));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-orange-background1Level, var(--sn-primitive-color-orange-95, #fff6e5));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=orange][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-orange-background2Level, var(--sn-primitive-color-orange-99, #fffcf4));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-yellow-background, var(--sn-primitive-color-yellow-90, #fdf4cc));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-yellow-background1Level, var(--sn-primitive-color-yellow-95, #fffbe6));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=yellow][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-yellow-background2Level, var(--sn-primitive-color-yellow-99, #fffef6));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-green-background, var(--sn-primitive-color-green-90, #e4f5df));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-green-background1Level, var(--sn-primitive-color-green-95, #f1faed));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=green][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-green-background2Level, var(--sn-primitive-color-green-99, #fcfefa));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-blue-background, var(--sn-primitive-color-blue-90, #e6f4fd));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-blue-background1Level, var(--sn-primitive-color-blue-95, #f2f9ff));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=blue][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-blue-background2Level, var(--sn-primitive-color-blue-99, #fdfeff));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-violet-background, var(--sn-primitive-color-violet-90, #f3edfc));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-violet-background1Level, var(--sn-primitive-color-violet-95, #f9f5ff));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=violet][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-violet-background2Level, var(--sn-primitive-color-violet-99, #fdfdfd));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level=default], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level=default]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level=default] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground, 1);
+  background:var(--sn-theme-color-pink-background, var(--sn-primitive-color-pink-90, #fceaf0));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="1Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="1Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="1Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-pink-background1Level, var(--sn-primitive-color-pink-95, #fff5f7));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="2Level"], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="2Level"]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground2Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=pink][data-acrylic-level="2Level"] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground2Level, 1);
+  background:var(--sn-theme-color-pink-background2Level, var(--sn-primitive-color-pink-99, #fdfcfc));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=transparent], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=transparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=transparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=transparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:transparent;
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent], .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent]{
+  backdrop-filter:blur(calc(var(--sn-acrylic-blurBackground1Level, 0) / 2));
+}
+.wrapper[data-component=accordionPrimary][data-acrylic-appearance=decorTransparent] .acrylic, .wrapper[data-component=accordionSecondary][data-acrylic-appearance=decorTransparent] .acrylic{
+  opacity:var(--sn-acrylic-opacityBackground1Level, 1);
+  background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
+}
+.wrapper[data-component=accordionPrimary][data-view=elevated], .wrapper[data-component=accordionSecondary][data-view=elevated]{
+  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.wrapper[data-component=accordionPrimary][data-view=simple]:hover, .wrapper[data-component=accordionPrimary][data-view=simple]:focus-within, .wrapper[data-component=accordionPrimary][data-view=elevated]:hover, .wrapper[data-component=accordionPrimary][data-view=elevated]:focus-within, .wrapper[data-component=accordionSecondary][data-view=simple]:hover, .wrapper[data-component=accordionSecondary][data-view=simple]:focus-within, .wrapper[data-component=accordionSecondary][data-view=elevated]:hover, .wrapper[data-component=accordionSecondary][data-view=elevated]:focus-within{
+  box-shadow:var(--sn-boxShadow-elevation-level3, var(--sn-theme-effect-shadow-level3-layer1-positionX, 0) var(--sn-theme-effect-shadow-level3-layer1-positionY, 0) var(--sn-theme-effect-shadow-level3-layer1-blur, 8px) var(--sn-theme-effect-shadow-level3-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level3-layer2-positionX, 0) var(--sn-theme-effect-shadow-level3-layer2-positionY, 8px) var(--sn-theme-effect-shadow-level3-layer2-blur, 16px) var(--sn-theme-effect-shadow-level3-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer, .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer{
+  position:absolute;
+  inset:0;
+  border-radius:inherit;
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-default-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+  border-style:solid;
+  border-width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled, var(--sn-brand-color-state-neutral-forLightMode-default-background, rgba(120, 123, 138, 0)));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-default-filled, rgba(0, 0, 0, 0.0509803922));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-default-filled, rgba(255, 255, 255, 0.1019607843));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-defaultEmpty-filled, rgba(255, 255, 255, 0));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline] .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionSecondary][data-view=outline] .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-defaultEmpty-filled, rgba(0, 0, 0, 0));
+}
+@media (hover: hover){
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+    border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+    background:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-versionOnColor-hovered-filled, rgba(0, 0, 0, 0.1019607843));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+    background:var(--sn-theme-color-material-stateLayer-inversionOnColor-hovered-filled, rgba(255, 255, 255, 0.1490196078));
+  }
+  .wrapper[data-component=accordionPrimary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionSecondary][data-view=outline]:hover:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+    background:var(--sn-theme-color-material-stateLayer-darkOnAccent-hovered-filled, rgba(0, 0, 0, 0.0588235294));
+  }
+}
+.wrapper[data-component=accordionPrimary][data-view=outline], .wrapper[data-component=accordionSecondary][data-view=outline]{
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=borderOnBackground]{
+  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-pressed-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-pressed-borderColor, rgba(159, 166, 198, 0.8)));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyNeutralOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=activatedOnBackground]{
+  background:var(--sn-theme-color-material-stateLayer-activated-pressed-filled, var(--sn-brand-color-state-activated-pressed-background, var(--sn-brandRole-color-brandA-backgroundActivatedPressed, rgba(56, 159, 116, 0.4509803922))));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=versionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyVersionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-versionOnColor-pressed-filled, rgba(0, 0, 0, 0.1490196078));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=inversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyInversionOnColor]{
+  background:var(--sn-theme-color-material-stateLayer-inversionOnColor-pressed-filled, rgba(255, 255, 255, 0.0509803922));
+}
+.wrapper[data-component=accordionPrimary][data-view=outline][data-loading] .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionPrimary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionPrimary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionSecondary][data-view=outline][data-loading] .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionSecondary][data-view=outline]:active:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent], .wrapper[data-component=accordionSecondary][data-view=outline][data-pressed=true]:not([data-disabled], [data-loading]) .stateLayer[data-state=emptyDarkOnAccent]{
+  background:var(--sn-theme-color-material-stateLayer-darkOnAccent-pressed-filled, rgba(0, 0, 0, 0.1215686275));
+}
+
+.titleWrapper{
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  width:100%;
+  min-width:0;
+}
+
+.title{
+  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
+}
+
+.subTitle{
+  font-family:var(--sn-regular-body-m-fontFamily, var(--sn-brand-font-fontFamily-regular-body, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
+  font-weight:var(--sn-regular-body-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-body-m, var(--sn-brand-font-fontWeight-light-regular-body-m, var(--sn-primitive-font-fontWeightValue-400, 400))));
+  line-height:var(--sn-regular-body-m-lineHeight, var(--sn-density-typography-roleBody-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+  font-size:var(--sn-regular-body-m-fontSize, var(--sn-density-typography-roleBody-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
+  letter-spacing:var(--sn-regular-body-m-letterSpacing, var(--sn-primitive-font-letterSpacing-m, 0.1px));
+  paragraph-spacing:var(--sn-regular-body-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
+  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
+}
+
+[data-component=accordionPrimary] .titleContent{
+  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingTop, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  gap:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-bottom:0;
+}
+[data-component=accordionSecondary] .titleContent{
+  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingTop, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  gap:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-paddingBottom, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:0;
+}
+[data-component=accordionTertiary] .titleContent{
+  gap:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-gap, var(--sn-density-spacing-interval-s, var(--sn-primitive-dimension-8, 8px)));
+  padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingTop, var(--sn-primitive-dimension-4, 4px));
+  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+  padding-bottom:0;
+}
+.titleContent{
+  cursor:pointer;
+  position:relative;
+  display:flex;
+  align-items:stretch;
+  justify-content:space-between;
+  box-sizing:border-box;
+}
+.titleContent[data-chevron-position=before]{
+  flex-direction:row-reverse;
+  justify-content:flex-end;
+}
+
+.afterTitle{
+  display:flex;
+  flex:1 0 0;
+  align-items:center;
+  min-width:0;
+}
+
+[data-component=accordionPrimary] .chevronWrapper{
+  height:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
+}
+[data-component=accordionSecondary] .chevronWrapper{
+  height:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
+}
+[data-component=accordionTertiary] .chevronWrapper{
+  height:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-chevronWrapper-height, var(--sn-density-typography-roleTitle-lineHeightS, var(--sn-primitive-font-lineHeight-by14, 20px)));
+}
+.chevronWrapper{
+  display:flex;
+  align-items:center;
+  justify-content:center;
+}
+
+.titleLine{
+  display:flex;
+  align-items:center;
+}
+[data-component=accordionPrimary] .titleLine{
+  gap:var(--sn-accordion-anatomy-accordionPrimary-container-titleContent-titleWrapper-titleLine-gap, var(--sn-primitive-dimension-4, 4px));
+}
+[data-component=accordionSecondary] .titleLine{
+  gap:var(--sn-accordion-anatomy-accordionSecondary-container-titleContent-titleWrapper-titleLine-gap, var(--sn-primitive-dimension-4, 4px));
+}
+[data-component=accordionTertiary] .titleLine{
+  gap:var(--sn-accordion-anatomy-accordionTertiary-container-titleContent-titleWrapper-titleLine-gap, var(--sn-primitive-dimension-4, 4px));
+}
+
+.collapse{
+  position:relative;
+  display:grid;
+  grid-template-rows:0fr;
+  box-sizing:border-box;
+  transition:grid-template-rows var(--sn-collapse-block-animation-duration, 300ms) ease-out;
+}
+.collapse[data-expanded]{
+  grid-template-rows:1fr;
+}
+
+[data-component=accordionPrimary] .container{
+  box-sizing:border-box;
+  padding-top:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-left:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+  padding-right:var(--sn-accordion-anatomy-accordionPrimary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-l-padding, var(--sn-primitive-dimension-32, 32px)));
+}
+[data-component=accordionPrimary] .container:not([data-expanded]){
+  padding-top:0;
+  padding-bottom:0;
+}
+[data-component=accordionPrimary] .container[data-expanded]{
+  padding-bottom:0;
+}
+[data-component=accordionSecondary] .container{
+  box-sizing:border-box;
+  padding-top:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-bottom:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingVertical, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-left:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+  padding-right:var(--sn-accordion-anatomy-accordionSecondary-container-bodyContent-paddingHorizontal, var(--sn-density-spacing-block-m-padding, var(--sn-primitive-dimension-24, 24px)));
+}
+[data-component=accordionSecondary] .container:not([data-expanded]){
+  padding-top:0;
+  padding-bottom:0;
+}
+[data-component=accordionSecondary] .container[data-expanded]{
+  padding-bottom:0;
+}
+[data-component=accordionTertiary] .container{
+  box-sizing:border-box;
+  padding-top:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+  padding-bottom:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingVertical, var(--sn-primitive-dimension-4, 4px));
+  padding-left:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+  padding-right:var(--sn-accordion-anatomy-accordionTertiary-container-bodyContent-paddingHorizontal, var(--sn-primitive-dimension-0, 0));
+}
+[data-component=accordionTertiary] .container:not([data-expanded]){
+  padding-top:0;
+  padding-bottom:0;
+}
+[data-component=accordionTertiary] .container[data-expanded]{
+  padding-bottom:0;
+}
+.container{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  min-height:0;
+  transition:padding-top var(--sn-collapse-block-animation-duration, 300ms) ease-out, padding-bottom var(--sn-collapse-block-animation-duration, 300ms) ease-out;
+}
+.container.containerCompletelyOpen{
+  overflow:visible;
+}

package/dist/esm/components/index.d.ts

@@ -0,0 +1 @@
+export * from './CollapseBlock/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './CollapseBlock/index.js';

package/dist/esm/constants.d.ts

@@ -0,0 +1,22 @@
+export declare const VIEW: {
+    readonly Simple: "simple";
+    readonly Outline: "outline";
+    readonly Elevated: "elevated";
+};
+export declare const CHEVRON_POSITION: {
+    readonly Before: "before";
+    readonly After: "after";
+};
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};
+export declare const TEST_IDS: {
+    collapseBlock: string;
+    chevron: string;
+    title: string;
+    subTitle: string;
+    content: string;
+    afterTitle: string;
+};
+export declare const ANIMATION_DURATION = 300;

package/dist/esm/constants.js

@@ -0,0 +1,22 @@
+export const VIEW = {
+    Simple: 'simple',
+    Outline: 'outline',
+    Elevated: 'elevated',
+};
+export const CHEVRON_POSITION = {
+    Before: 'before',
+    After: 'after',
+};
+export const SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};
+export const TEST_IDS = {
+    collapseBlock: 'accordion__collapse-block',
+    chevron: 'accordion__collapse-block__chevron',
+    title: 'accordion__collapse-block__title',
+    subTitle: 'accordion__collapse-block__sub-title',
+    content: 'accordion__collapse-block__content',
+    afterTitle: 'accordion__collapse-block__after-title',
+};
+export const ANIMATION_DURATION = 300;

package/dist/esm/index.d.ts

@@ -0,0 +1,4 @@
+export * from './Accordion.js';
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';

package/dist/esm/index.js

@@ -0,0 +1,4 @@
+export * from './Accordion.js';
+export * from './components/index.js';
+export * from './constants.js';
+export * from './types.js';