@navikt/ds-css 8.2.0 → 8.2.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 8.2.2
4
+
5
+ ### Patch Changes
6
+
7
+ - ExpansionCard: Remove redundant class name ([#4602](https://github.com/navikt/aksel/pull/4602))
8
+
9
+ - AccordionItem: Remove redundant class name ([#4602](https://github.com/navikt/aksel/pull/4602))
10
+
11
+ ## 8.2.1
12
+
3
13
  ## 8.2.0
4
14
 
5
15
  ### Minor Changes
@@ -170,10 +170,6 @@
170
170
  .aksel-accordion__item[data-expanded="true"]:last-child {
171
171
  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
172
172
  }
173
-
174
- .aksel-accordion__item--no-animation > .aksel-accordion__content {
175
- transition: none;
176
- }
177
173
  }
178
174
 
179
175
  @layer aksel.layout;
@@ -1 +1 @@
1
- @layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-accordion__header{justify-content:flex-start;align-items:flex-start;gap:var(--ax-space-12);width:100%;padding:var(--ax-space-12);text-align:left;cursor:pointer;border-radius:var(--ax-radius-8);color:var(--ax-text-subtle);background:none;border:none;display:flex;position:relative}.aksel-accordion__header>*{font-weight:var(--ax-font-weight-regular)}@media(forced-colors:active){.aksel-accordion__header{color:canvastext;background-color:canvas;border:1px solid buttonborder}}.aksel-accordion__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-accordion__header:hover:before{display:none}.aksel-accordion__header:hover:after{display:none}.aksel-accordion__header:hover>.aksel-accordion__icon-wrapper{background-color:var(--ax-bg-strong-hover);color:var(--ax-text-contrast)}@media(forced-colors:active){.aksel-accordion__header:hover{color:highlight;background-color:canvas;border:1px solid highlight}}.aksel-accordion__header:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-accordion__header:focus-visible:before{display:none}.aksel-accordion__header:focus-visible:after{display:none}.aksel-accordion--small .aksel-accordion__header{padding-block:var(--ax-space-8)}.aksel-accordion__header:before,.aksel-accordion__header:after{content:"";background-color:var(--ax-border-neutral-subtleA);width:100%;height:1px;display:block;position:absolute;top:0;left:0;right:0}.aksel-accordion__header:after{top:initial;bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header:after,.aksel-accordion__item:not(:last-child)>.aksel-accordion__header:after{display:none}.aksel-accordion__item[data-expanded=false]:has(.aksel-accordion__header:where(:hover,:focus-visible))+.aksel-accordion__item>.aksel-accordion__header:before{display:none}.aksel-accordion__icon-wrapper{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-moderateA);width:22px;height:22px;color:var(--ax-text-subtle);align-self:center}.aksel-accordion__header-chevron{height:inherit;width:inherit;flex-shrink:0;transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header .aksel-accordion__header-chevron{transform:rotateX(-180deg)}.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{padding-block:var(--ax-space-8);padding-inline:calc(var(--ax-space-20) + 2px) var(--ax-space-20)}@media(forced-colors:active){.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{border-left:1px solid canvastext}}.aksel-accordion--indent>.aksel-accordion__item>.aksel-accordion__content{box-shadow:-2px 0 0 0 var(--ax-border-neutral-subtleA)}.aksel-accordion__item>.aksel-accordion__content{visibility:hidden;margin-inline:var(--ax-space-24) var(--ax-space-12);opacity:0;border-color:#0000;grid-template-rows:0fr;margin-top:0;margin-bottom:0;transition-property:visibility,opacity,grid-template-rows,margin,min-height;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-accordion__item>.aksel-accordion__content .aksel-accordion__content-inner{min-height:0;padding-top:0;padding-bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content{visibility:visible;margin-block:var(--ax-space-8);border-color:var(--ax-border-neutral-subtleA);opacity:1;grid-template-rows:1fr;margin-bottom:var(--ax-space-24)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content .aksel-accordion__content-inner{min-height:-webkit-fit-content;min-height:fit-content}.aksel-accordion__item[data-expanded=true]:last-child{border-bottom:1px solid var(--ax-border-neutral-subtleA)}.aksel-accordion__item--no-animation>.aksel-accordion__content{transition:none}}@layer aksel.layout;
1
+ @layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-accordion__header{justify-content:flex-start;align-items:flex-start;gap:var(--ax-space-12);width:100%;padding:var(--ax-space-12);text-align:left;cursor:pointer;border-radius:var(--ax-radius-8);color:var(--ax-text-subtle);background:none;border:none;display:flex;position:relative}.aksel-accordion__header>*{font-weight:var(--ax-font-weight-regular)}@media(forced-colors:active){.aksel-accordion__header{color:canvastext;background-color:canvas;border:1px solid buttonborder}}.aksel-accordion__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-accordion__header:hover:before{display:none}.aksel-accordion__header:hover:after{display:none}.aksel-accordion__header:hover>.aksel-accordion__icon-wrapper{background-color:var(--ax-bg-strong-hover);color:var(--ax-text-contrast)}@media(forced-colors:active){.aksel-accordion__header:hover{color:highlight;background-color:canvas;border:1px solid highlight}}.aksel-accordion__header:focus-visible{outline:3px solid var(--ax-border-focus);outline-offset:3px;z-index:1}.aksel-accordion__header:focus-visible:before{display:none}.aksel-accordion__header:focus-visible:after{display:none}.aksel-accordion--small .aksel-accordion__header{padding-block:var(--ax-space-8)}.aksel-accordion__header:before,.aksel-accordion__header:after{content:"";background-color:var(--ax-border-neutral-subtleA);width:100%;height:1px;display:block;position:absolute;top:0;left:0;right:0}.aksel-accordion__header:after{top:initial;bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header:after,.aksel-accordion__item:not(:last-child)>.aksel-accordion__header:after{display:none}.aksel-accordion__item[data-expanded=false]:has(.aksel-accordion__header:where(:hover,:focus-visible))+.aksel-accordion__item>.aksel-accordion__header:before{display:none}.aksel-accordion__icon-wrapper{border-radius:var(--ax-radius-8);background-color:var(--ax-bg-moderateA);width:22px;height:22px;color:var(--ax-text-subtle);align-self:center}.aksel-accordion__header-chevron{height:inherit;width:inherit;flex-shrink:0;transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__header .aksel-accordion__header-chevron{transform:rotateX(-180deg)}.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{padding-block:var(--ax-space-8);padding-inline:calc(var(--ax-space-20) + 2px) var(--ax-space-20)}@media(forced-colors:active){.aksel-accordion--indent>.aksel-accordion__item .aksel-accordion__content-inner{border-left:1px solid canvastext}}.aksel-accordion--indent>.aksel-accordion__item>.aksel-accordion__content{box-shadow:-2px 0 0 0 var(--ax-border-neutral-subtleA)}.aksel-accordion__item>.aksel-accordion__content{visibility:hidden;margin-inline:var(--ax-space-24) var(--ax-space-12);opacity:0;border-color:#0000;grid-template-rows:0fr;margin-top:0;margin-bottom:0;transition-property:visibility,opacity,grid-template-rows,margin,min-height;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-accordion__item>.aksel-accordion__content .aksel-accordion__content-inner{min-height:0;padding-top:0;padding-bottom:0}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content{visibility:visible;margin-block:var(--ax-space-8);border-color:var(--ax-border-neutral-subtleA);opacity:1;grid-template-rows:1fr;margin-bottom:var(--ax-space-24)}.aksel-accordion__item[data-expanded=true]>.aksel-accordion__content .aksel-accordion__content-inner{min-height:-webkit-fit-content;min-height:fit-content}.aksel-accordion__item[data-expanded=true]:last-child{border-bottom:1px solid var(--ax-border-neutral-subtleA)}}@layer aksel.layout;
@@ -181,14 +181,6 @@
181
181
  min-height: 0;
182
182
  transition: opacity .25s cubic-bezier(.2, 0, 0, 1);
183
183
  }
184
-
185
- .aksel-expansioncard--no-animation :-webkit-any(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
186
- transition: none;
187
- }
188
-
189
- .aksel-expansioncard--no-animation :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
190
- transition: none;
191
- }
192
184
  }
193
185
 
194
186
  @layer aksel.layout;
@@ -1 +1 @@
1
- @layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-expansioncard{--__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);--__axc-expansioncard-padding-block: var(--ax-space-16);--__axc-expansioncard-padding-inline: var(--ax-space-20);border-radius:var(--ax-radius-12);background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-default);height:-webkit-fit-content;height:fit-content}.aksel-expansioncard[data-color=neutral]{background-color:var(--ax-bg-raised)}.aksel-expansioncard:has(.aksel-expansioncard__header:hover){box-shadow:0 0 0 1px var(--ax-border-strong);border-color:var(--ax-border-strong)}.aksel-expansioncard--small{--__axc-expansioncard-padding-inline: var(--ax-space-16);--__axc-expansioncard-padding-block: var(--ax-space-12)}.aksel-expansioncard--small>.aksel-expansioncard__header .aksel-expansioncard__title--small{margin-top:var(--ax-space-2)}.aksel-expansioncard--small :-webkit-any(.aksel-expansioncard__title--medium,.aksel-expansioncard__title--large){margin-top:0}.aksel-expansioncard--small :is(.aksel-expansioncard__title--medium,.aksel-expansioncard__title--large){margin-top:0}.aksel-expansioncard--small>.aksel-expansioncard__header>.aksel-expansioncard__header-button{min-width:2rem;min-height:2rem}.aksel-expansioncard__header{gap:var(--ax-space-16);width:100%;padding:var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);border-radius:var(--__axc-expansioncard-border-radius);background-color:#0000;justify-content:space-between;display:flex;position:relative}.aksel-expansioncard__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-expansioncard__header[data-open=true]{border-bottom-right-radius:0;border-bottom-left-radius:0}.aksel-expansioncard__header[data-open=true]:after{content:"";background-color:var(--ax-border-subtleA);bottom:0;left:var(--__axc-expansioncard-padding-inline);height:1px;width:calc(100% - 2 * var(--__axc-expansioncard-padding-inline));opacity:1;position:absolute}.aksel-expansioncard__header[data-open=true]:hover:after{opacity:0}.aksel-expansioncard__title--small{margin-top:.625rem}.aksel-expansioncard__title--medium{margin-top:var(--ax-space-8)}.aksel-expansioncard__title--large{margin-top:var(--ax-space-4)}.aksel-expansioncard__header-button{cursor:pointer;border-radius:var(--ax-radius-8);background:none;border:none;place-content:center;align-self:flex-start;min-width:3rem;min-height:3rem;margin:0;font-size:1.5rem;display:grid}.aksel-expansioncard__header-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-expansioncard__header-button:after{z-index:1;content:"";cursor:pointer;opacity:0;width:100%;height:100%;position:absolute;inset:0}.aksel-expansioncard__header:hover>.aksel-expansioncard__header-button{background-color:var(--ax-bg-moderate-hoverA)}.aksel-expansioncard__header-chevron{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-expansioncard__header[data-open=true] .aksel-expansioncard__header-chevron{transform:rotateX(-180deg)}.aksel-expansioncard__header[data-open=false] .aksel-expansioncard__header-chevron{transition-duration:.4s}.aksel-expansioncard__content{padding-inline:var(--__axc-expansioncard-padding-inline);visibility:hidden;grid-template-rows:0fr;padding-top:0;padding-bottom:0;transition-property:visibility,padding-top,padding-bottom,grid-template-rows;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-expansioncard__content:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-right-radius:var(--__axc-expansioncard-border-radius);border-bottom-left-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-left-radius:var(--__axc-expansioncard-border-radius);border-bottom-right-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-left-radius:var(--__axc-expansioncard-border-radius);border-bottom-right-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content[data-open=true]{visibility:visible;padding-block:var(--__axc-expansioncard-padding-block);grid-template-rows:1fr}.aksel-expansioncard__content[data-open=true] .aksel-expansioncard__content-inner{opacity:1}.aksel-expansioncard__content-inner{opacity:0;min-height:0;transition:opacity .25s cubic-bezier(.2,0,0,1)}.aksel-expansioncard--no-animation :-webkit-any(.aksel-expansioncard__content,.aksel-expansioncard__content-inner){transition:none}.aksel-expansioncard--no-animation :is(.aksel-expansioncard__content,.aksel-expansioncard__content-inner){transition:none}}@layer aksel.layout;
1
+ @layer aksel.reset,aksel.theming,aksel.baseline,aksel.print,aksel.typography,aksel.components.core,aksel.components.core.loader,aksel.components.core.button,aksel.components.form;@layer aksel.components.modules{.aksel-expansioncard{--__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);--__axc-expansioncard-padding-block: var(--ax-space-16);--__axc-expansioncard-padding-inline: var(--ax-space-20);border-radius:var(--ax-radius-12);background-color:var(--ax-bg-softA);border:1px solid var(--ax-border-default);height:-webkit-fit-content;height:fit-content}.aksel-expansioncard[data-color=neutral]{background-color:var(--ax-bg-raised)}.aksel-expansioncard:has(.aksel-expansioncard__header:hover){box-shadow:0 0 0 1px var(--ax-border-strong);border-color:var(--ax-border-strong)}.aksel-expansioncard--small{--__axc-expansioncard-padding-inline: var(--ax-space-16);--__axc-expansioncard-padding-block: var(--ax-space-12)}.aksel-expansioncard--small>.aksel-expansioncard__header .aksel-expansioncard__title--small{margin-top:var(--ax-space-2)}.aksel-expansioncard--small :-webkit-any(.aksel-expansioncard__title--medium,.aksel-expansioncard__title--large){margin-top:0}.aksel-expansioncard--small :is(.aksel-expansioncard__title--medium,.aksel-expansioncard__title--large){margin-top:0}.aksel-expansioncard--small>.aksel-expansioncard__header>.aksel-expansioncard__header-button{min-width:2rem;min-height:2rem}.aksel-expansioncard__header{gap:var(--ax-space-16);width:100%;padding:var(--__axc-expansioncard-padding-block) var(--__axc-expansioncard-padding-inline);border-radius:var(--__axc-expansioncard-border-radius);background-color:#0000;justify-content:space-between;display:flex;position:relative}.aksel-expansioncard__header:hover{background-color:var(--ax-bg-moderate-hoverA)}.aksel-expansioncard__header[data-open=true]{border-bottom-right-radius:0;border-bottom-left-radius:0}.aksel-expansioncard__header[data-open=true]:after{content:"";background-color:var(--ax-border-subtleA);bottom:0;left:var(--__axc-expansioncard-padding-inline);height:1px;width:calc(100% - 2 * var(--__axc-expansioncard-padding-inline));opacity:1;position:absolute}.aksel-expansioncard__header[data-open=true]:hover:after{opacity:0}.aksel-expansioncard__title--small{margin-top:.625rem}.aksel-expansioncard__title--medium{margin-top:var(--ax-space-8)}.aksel-expansioncard__title--large{margin-top:var(--ax-space-4)}.aksel-expansioncard__header-button{cursor:pointer;border-radius:var(--ax-radius-8);background:none;border:none;place-content:center;align-self:flex-start;min-width:3rem;min-height:3rem;margin:0;font-size:1.5rem;display:grid}.aksel-expansioncard__header-button:focus-visible{outline:3px solid var(--ax-border-focus)}.aksel-expansioncard__header-button:after{z-index:1;content:"";cursor:pointer;opacity:0;width:100%;height:100%;position:absolute;inset:0}.aksel-expansioncard__header:hover>.aksel-expansioncard__header-button{background-color:var(--ax-bg-moderate-hoverA)}.aksel-expansioncard__header-chevron{transition:transform .25s cubic-bezier(.2,0,0,1)}.aksel-expansioncard__header[data-open=true] .aksel-expansioncard__header-chevron{transform:rotateX(-180deg)}.aksel-expansioncard__header[data-open=false] .aksel-expansioncard__header-chevron{transition-duration:.4s}.aksel-expansioncard__content{padding-inline:var(--__axc-expansioncard-padding-inline);visibility:hidden;grid-template-rows:0fr;padding-top:0;padding-bottom:0;transition-property:visibility,padding-top,padding-bottom,grid-template-rows;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.aksel-expansioncard__content:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-right-radius:var(--__axc-expansioncard-border-radius);border-bottom-left-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content:-webkit-any(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-left-radius:var(--__axc-expansioncard-border-radius);border-bottom-right-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)){border-bottom-left-radius:var(--__axc-expansioncard-border-radius);border-bottom-right-radius:var(--__axc-expansioncard-border-radius)}.aksel-expansioncard__content[data-open=true]{visibility:visible;padding-block:var(--__axc-expansioncard-padding-block);grid-template-rows:1fr}.aksel-expansioncard__content[data-open=true] .aksel-expansioncard__content-inner{opacity:1}.aksel-expansioncard__content-inner{opacity:0;min-height:0;transition:opacity .25s cubic-bezier(.2,0,0,1)}}@layer aksel.layout;
@@ -3026,10 +3026,6 @@
3026
3026
  border-bottom: 1px solid var(--ax-border-neutral-subtleA);
3027
3027
  }
3028
3028
 
3029
- .aksel-accordion__item--no-animation > .aksel-accordion__content {
3030
- transition: none;
3031
- }
3032
-
3033
3029
  .aksel-alert {
3034
3030
  border-radius: var(--ax-radius-12);
3035
3031
  padding: var(--ax-space-16) var(--ax-space-20);
@@ -3359,28 +3355,6 @@
3359
3355
  }
3360
3356
  }
3361
3357
 
3362
- .aksel-data-toolbar {
3363
- padding: var(--ax-space-16);
3364
- align-items: center;
3365
- gap: var(--ax-space-16);
3366
- border: 1px solid var(--ax-border-neutral);
3367
- border-radius: var(--ax-radius-16);
3368
- background-color: var(--ax-bg-raised);
3369
- display: flex;
3370
- }
3371
-
3372
- .aksel-data-toolbar__toggle-button {
3373
- background-color: var(--ax-bg-neutral-moderate);
3374
- }
3375
-
3376
- .aksel-data-toolbar__toggle-button:hover {
3377
- background-color: var(--ax-bg-neutral-moderate-hover);
3378
- }
3379
-
3380
- .aksel-data-toolbar__toggle-button[aria-pressed="true"] {
3381
- background-color: var(--ax-bg-neutral-strong-pressed);
3382
- }
3383
-
3384
3358
  .aksel-date {
3385
3359
  padding: var(--ax-space-16);
3386
3360
  }
@@ -4432,14 +4406,6 @@
4432
4406
  transition: opacity .25s cubic-bezier(.2, 0, 0, 1);
4433
4407
  }
4434
4408
 
4435
- .aksel-expansioncard--no-animation :-webkit-any(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
4436
- transition: none;
4437
- }
4438
-
4439
- .aksel-expansioncard--no-animation :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
4440
- transition: none;
4441
- }
4442
-
4443
4409
  .aksel-guide-panel {
4444
4410
  --__axc-guide-panel-guide-size: 5rem;
4445
4411
  width: -webkit-fit-content;