6 // scss-docs-start accordion-css-vars
7 --#{$prefix}accordion-color: #{$accordion-color};
8 --#{$prefix}accordion-bg: #{$accordion-bg};
9 --#{$prefix}accordion-transition: #{$accordion-transition};
10 --#{$prefix}accordion-border-color: #{$accordion-border-color};
11 --#{$prefix}accordion-border-width: #{$accordion-border-width};
12 --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
13 --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
14 --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
15 --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
16 --#{$prefix}accordion-btn-color: #{$accordion-button-color};
17 --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
18 --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
19 --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
20 --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
21 --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
22 --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
23 --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
24 --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
25 --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
26 --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
27 --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
28 --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
29 // scss-docs-end accordion-css-vars
37 padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
38 @include font-size($font-size-base);
39 color: var(--#{$prefix}accordion-btn-color);
40 text-align: left; // Reset button style
41 background-color: var(--#{$prefix}accordion-btn-bg);
43 @include border-radius(0);
44 overflow-anchor: none;
45 @include transition(var(--#{$prefix}accordion-transition));
48 color: var(--#{$prefix}accordion-active-color);
49 background-color: var(--#{$prefix}accordion-active-bg);
50 box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
53 background-image: var(--#{$prefix}accordion-btn-active-icon);
54 transform: var(--#{$prefix}accordion-btn-icon-transform);
61 width: var(--#{$prefix}accordion-btn-icon-width);
62 height: var(--#{$prefix}accordion-btn-icon-width);
65 background-image: var(--#{$prefix}accordion-btn-icon);
66 background-repeat: no-repeat;
67 background-size: var(--#{$prefix}accordion-btn-icon-width);
68 @include transition(var(--#{$prefix}accordion-btn-icon-transition));
77 border-color: var(--#{$prefix}accordion-btn-focus-border-color);
79 box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
88 color: var(--#{$prefix}accordion-color);
89 background-color: var(--#{$prefix}accordion-bg);
90 border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
93 @include border-top-radius(var(--#{$prefix}accordion-border-radius));
96 @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
100 &:not(:first-of-type) {
104 // Only set a border-radius on the last item if the accordion is collapsed
106 @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
110 @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
114 .accordion-collapse {
115 @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
121 padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
125 // Flush accordion items
127 // Remove borders and border-radius to keep accordion items edge-to-edge.
130 .accordion-collapse {
137 @include border-radius(0);
139 &:first-child { border-top: 0; }
140 &:last-child { border-bottom: 0; }
145 @include border-radius(0);