@@ -11,12 +11,6 @@ summary::-webkit-details-marker {
1111 display : none
1212}
1313
14- .accordion-stack {
15- display : grid;
16- gap : var (--space-10 );
17- padding : var (--space-14 )
18- }
19-
2014details .vertical-accordion {
2115 border : var (--border-standard );
2216 border-radius : var (--radius-lg );
@@ -84,137 +78,3 @@ details.vertical-accordion[open] summary:active:after {
8478 color : var (--muted );
8579 line-height : 1.5
8680}
87-
88- .horizontal-accordion-toggle {
89- --accordion-button-border : var (--line );
90- --accordion-button-background : var (--panel-soft );
91- --accordion-button-color : var (--gold );
92- min-width : var (--space-20 );
93- width : var (--space-20 );
94- height : var (--space-20 );
95- padding : var (--space-0 );
96- border : var (--border-standard );
97- border-color : var (--accordion-button-border );
98- border-radius : var (--radius-pill );
99- background : var (--accordion-button-background );
100- color : var (--accordion-button-color );
101- line-height : var (--line-height-single );
102- display : inline-grid;
103- place-items : center;
104- flex : 0 0 auto;
105- margin-left : auto;
106- font-size : var (--space-0 );
107- overflow : hidden;
108- position : relative
109- }
110-
111- .horizontal-accordion-toggle : before {
112- content : "" ;
113- position : absolute;
114- top : 50% ;
115- left : 50% ;
116- width : var (--size-horizontal-toggle-icon );
117- height : var (--size-horizontal-toggle-icon );
118- background : currentColor;
119- clip-path : polygon (70% 50% , 30% 20% , 30% 80% );
120- transform-origin : center
121- }
122-
123- .horizontal-accordion-toggle [aria-expanded = "true" ]: before {
124- transform : translate (-50% , -50% )
125- }
126-
127- .horizontal-accordion-toggle [aria-expanded = "false" ]: before {
128- transform : translate (-50% , -50% ) rotate (180deg )
129- }
130-
131- .horizontal-accordion-toggle--left [aria-expanded = "true" ]: before {
132- transform : translate (-50% , -50% ) rotate (180deg )
133- }
134-
135- .horizontal-accordion-toggle--left [aria-expanded = "false" ]: before {
136- transform : translate (-50% , -50% )
137- }
138-
139- .tool-column .accordion-stack {
140- padding : var (--space-8 ) var (--space-12 );
141- gap : var (--space-8 )
142- }
143-
144- .tool-column details .vertical-accordion summary {
145- padding : var (--space-10 ) var (--space-12 )
146- }
147-
148- .tool-column .accordion-body {
149- padding : var (--space-0 ) var (--space-12 ) var (--space-10 )
150- }
151-
152- .tool-column-header .horizontal-accordion-toggle {
153- order : 2
154- }
155-
156- .tool-column [class *= "tool-group-" ] .horizontal-accordion-toggle ,
157- .tool-column [class *= "tool-group-" ] details .vertical-accordion summary : after {
158- --accordion-button-border : var (--tool-group-accent );
159- --accordion-button-color : var (--tool-group-color )
160- }
161-
162- .tool-column .is-collapsed .horizontal-accordion-toggle {
163- margin : var (--space-0 );
164- order : 1 ;
165- writing-mode : horizontal-tb
166- }
167-
168- .vertical-accordion [class *= "tool-group-" ] {
169- border-color : var (--tool-group-accent )
170- }
171-
172- .vertical-accordion [class *= "tool-group-" ] summary {
173- color : var (--tool-group-color )
174- }
175-
176- .tool-display-mode summary {
177- color : var (--gold );
178- font-weight : var (--font-weight-heavy );
179- cursor : pointer;
180- list-style : none;
181- padding : var (--space-10 ) var (--space-44 ) var (--space-10 ) var (--space-10 );
182- display : flex;
183- align-items : center;
184- justify-content : center;
185- gap : var (--space-10 );
186- flex : 0 0 auto
187- }
188-
189- .tool-display-mode summary ::-webkit-details-marker {
190- display : none
191- }
192-
193- .tool-display-mode summary : after {
194- content : "" ;
195- position : absolute;
196- right : var (--space-12 );
197- top : 50% ;
198- transform : translateY (-50% );
199- width : var (--space-20 );
200- height : var (--space-20 );
201- border : var (--border-standard );
202- border-radius : var (--radius-pill );
203- background : var (--panel-soft );
204- color : var (--gold );
205- display : inline-grid;
206- place-items : center;
207- background-image : linear-gradient (45deg , transparent 50% , currentColor 50% ), linear-gradient (135deg , currentColor 50% , transparent 50% );
208- background-position : calc (50% - var (--space-3 )) 50% , calc (50% + var (--space-3 )) 50% ;
209- background-size : var (--space-7 ) var (--space-7 );
210- background-repeat : no-repeat
211- }
212-
213- .tool-display-mode [open ] summary : after ,
214- .tool-display-mode summary : active : after {
215- background-image : linear-gradient (135deg , transparent 50% , currentColor 50% ), linear-gradient (45deg , currentColor 50% , transparent 50% )
216- }
217-
218- .tool-display-mode [open ] summary : active : after {
219- background-image : linear-gradient (45deg , transparent 50% , currentColor 50% ), linear-gradient (135deg , currentColor 50% , transparent 50% )
220- }
0 commit comments