@navikt/ds-css 7.40.0 → 8.0.0

package/dist/component/expansioncard.css

@@ -1,242 +1,168 @@
-.navds-expansioncard {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-color, var(--a-border-default));
-  --__ac-expansioncard-border-radius: var(--ac-expansioncard-border-radius, var(--a-border-radius-large));
-  --__ac-expansioncard-border-width: 1px;
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-6);
-
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-bg, var(--a-surface-default));
-  height: fit-content;
-}
-
-.navds-expansioncard--open {
-  --__ac-expansioncard-border-color: var(
-    --ac-expansioncard-border-open-color,
-    var(--ac-expansioncard-border-color, var(--a-border-default))
-  );
-}
-
-.navds-expansioncard:hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-:where(.navds-expansioncard.navds-expansioncard--open):hover {
-  --__ac-expansioncard-border-color: var(--ac-expansioncard-border-hover-color, var(--a-border-strong));
-}
-
-/*************************
- * Header *
- *************************/
-
-.navds-expansioncard__header {
-  width: 100%;
-  display: flex;
-  gap: var(--a-spacing-4);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);
-  border-radius: var(--__ac-expansioncard-border-radius);
-  background-color: var(--ac-expansioncard-header-bg, var(--a-surface-transparent));
-  position: relative;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  justify-content: space-between;
-}
-
-.navds-expansioncard--small {
-  --__ac-expansioncard-padding-block: var(--a-spacing-3);
-  --__ac-expansioncard-padding-inline: var(--a-spacing-4);
-}
-
-.navds-expansioncard__header:hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow: 0 0 0 1px var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header) {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-bottom: none;
-  background-color: var(--ac-expansioncard-header-open-bg, var(--a-surface-transparent));
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header):hover {
-  background-color: var(--ac-expansioncard-header-bg-hover, var(--a-surface-hover));
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 -1px 0 0 var(--__ac-expansioncard-border-color);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header)::after {
-  content: "";
-  background-color: var(--a-border-divider);
-  bottom: 0;
-  left: var(--__ac-expansioncard-padding-inline);
-  height: 1px;
-  width: calc(100% - 2 * var(--__ac-expansioncard-padding-inline));
-  position: absolute;
-  opacity: 1;
-  transition: opacity 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275);
-}
-
-.navds-expansioncard--open > :where(.navds-expansioncard__header:hover)::after {
-  opacity: 0;
-}
-
-/*************************
- * Header/Typography *
- *************************/
-
-.navds-expansioncard__title--small {
-  margin-top: 0.625rem;
-}
-
-.navds-expansioncard__title--medium {
-  margin-top: var(--a-spacing-2);
-}
+@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: fit-content;
+  }
 
-.navds-expansioncard__title--large {
-  margin-top: var(--a-spacing-1);
-}
+  .aksel-expansioncard[data-color="neutral"] {
+    background-color: var(--ax-bg-raised);
+  }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small) {
-  margin-top: var(--a-spacing-05);
-}
+  .aksel-expansioncard:has(.aksel-expansioncard__header:hover) {
+    box-shadow: 0 0 0 1px var(--ax-border-strong);
+    border-color: var(--ax-border-strong);
+  }
 
-.navds-expansioncard--small :where(.navds-expansioncard__title--medium, .navds-expansioncard__title--large) {
-  margin-top: 0;
-}
+  .aksel-expansioncard--small {
+    --__axc-expansioncard-padding-inline: var(--ax-space-16);
+    --__axc-expansioncard-padding-block: var(--ax-space-12);
+  }
 
-/*************************
- * Header/Button *
- *************************/
-
-.navds-expansioncard__header-button {
-  display: grid;
-  place-content: center;
-  cursor: pointer;
-  margin: 0;
-  background: transparent;
-  border: none;
-  border-radius: var(--ac-expansioncard-button-border-radius, var(--a-border-radius-medium));
-  min-height: 3rem;
-  min-width: 3rem;
-  font-size: 1.5rem;
-  align-self: flex-start;
-  padding: 0;
-}
+  .aksel-expansioncard--small > .aksel-expansioncard__header .aksel-expansioncard__title--small {
+    margin-top: var(--ax-space-2);
+  }
 
-.navds-expansioncard--small > :where(.navds-expansioncard__header) > :where(.navds-expansioncard__header-button) {
-  min-height: 2rem;
-  min-width: 2rem;
-}
+  .aksel-expansioncard--small :is(.aksel-expansioncard__title--medium, .aksel-expansioncard__title--large) {
+    margin-top: 0;
+  }
 
-:where(.navds-expansioncard__header):hover > :where(.navds-expansioncard__header-button) {
-  background-color: var(--a-surface-hover);
-}
+  .aksel-expansioncard--small > .aksel-expansioncard__header > .aksel-expansioncard__header-button {
+    min-width: 2rem;
+    min-height: 2rem;
+  }
 
-.navds-expansioncard__header-chevron {
-  transition: transform 150ms ease-in-out;
-}
+  .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: rgba(0, 0, 0, 0);
+    justify-content: space-between;
+    display: flex;
+    position: relative;
+  }
 
-.navds-expansioncard--open > :where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(0) rotate(180deg);
-}
+  .aksel-expansioncard__header:hover {
+    background-color: var(--ax-bg-moderate-hoverA);
+  }
 
-.navds-expansioncard__header-button:hover > :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(1px);
-}
+  .aksel-expansioncard__header[data-open="true"] {
+    border-bottom-right-radius: 0;
+    border-bottom-left-radius: 0;
+  }
 
-.navds-expansioncard__header-button:focus-visible {
-  outline: 3px solid transparent;
-  box-shadow: var(--a-shadow-focus);
-}
+  .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;
+  }
 
-@supports not selector(:focus-visible) {
-  .navds-expansioncard__header-button:focus {
-    outline: 3px solid transparent;
-    box-shadow: var(--a-shadow-focus);
+  .aksel-expansioncard__header[data-open="true"]:hover:after {
+    opacity: 0;
   }
-}
 
-.navds-expansioncard--open
-  > :where(.navds-expansioncard__header)
-  > :where(.navds-expansioncard__header-button):hover
-  :where(.navds-expansioncard__header-chevron) {
-  transform: translateY(-1px) rotate(180deg);
-}
+  .aksel-expansioncard__title--small {
+    margin-top: .625rem;
+  }
 
-.navds-expansioncard__header-button::after {
-  inset: 0;
-  z-index: 1;
-  position: absolute;
-  content: "";
-  height: 100%;
-  width: 100%;
-  cursor: pointer;
-
-  /* Avoid @media print from styling after-element */
-  opacity: 0;
-}
+  .aksel-expansioncard__title--medium {
+    margin-top: var(--ax-space-8);
+  }
 
-/*************************
- * Content *
- *************************/
+  .aksel-expansioncard__title--large {
+    margin-top: var(--ax-space-4);
+  }
 
-.navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-5);
+  .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;
+  }
 
-  border-end-end-radius: var(--__ac-expansioncard-border-radius);
-  border-end-start-radius: var(--__ac-expansioncard-border-radius);
-  padding: var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline)
-    var(--__ac-expansioncard-padding-inline);
-  border: var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);
-  border-top: none;
-}
+  .aksel-expansioncard__header-button:focus-visible {
+    outline: 3px solid var(--ax-border-focus);
+  }
 
-.navds-expansioncard--small .navds-expansioncard__content {
-  --__ac-expansioncard-padding-block: var(--a-spacing-4);
-}
+  .aksel-expansioncard__header-button:after {
+    z-index: 1;
+    content: "";
+    cursor: pointer;
+    opacity: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    inset: 0;
+  }
 
-.navds-expansioncard__content--closed {
-  display: none;
-}
+  .aksel-expansioncard__header:hover > .aksel-expansioncard__header-button {
+    background-color: var(--ax-bg-moderate-hoverA);
+  }
 
-:where(.navds-expansioncard__header):hover + .navds-expansioncard__content {
-  box-shadow:
-    1px 0 0 0 var(--__ac-expansioncard-border-color),
-    -1px 0 0 0 var(--__ac-expansioncard-border-color),
-    0 1px 0 0 var(--__ac-expansioncard-border-color);
-}
+  .aksel-expansioncard__header-chevron {
+    transition: transform .25s cubic-bezier(.2, 0, 0, 1);
+  }
 
-.navds-expansioncard__content-inner {
-  animation: fadeExpansionCard 250ms ease;
-}
+  .aksel-expansioncard__header[data-open="true"] .aksel-expansioncard__header-chevron {
+    transform: rotateX(-180deg);
+  }
 
-.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner) {
-  animation: none;
-}
+  .aksel-expansioncard__header[data-open="false"] .aksel-expansioncard__header-chevron {
+    transition-duration: .4s;
+  }
 
-@keyframes fadeExpansionCard {
-  0% {
-    opacity: 0.25;
-    transform: translateY(-8px);
+  .aksel-expansioncard__content {
+    padding-inline: var(--__axc-expansioncard-padding-inline);
+    visibility: hidden;
+    border-end-end-radius: var(--__axc-expansioncard-border-radius);
+    border-end-start-radius: var(--__axc-expansioncard-border-radius);
+    grid-template-rows: 0fr;
+    padding-block: 0;
+    transition-property: visibility, padding-block, grid-template-rows;
+    transition-duration: .25s;
+    transition-timing-function: cubic-bezier(.2, 0, 0, 1);
+    display: grid;
+    overflow: hidden;
   }
 
-  40% {
-    opacity: 0.7;
+  .aksel-expansioncard__content[data-open="true"] {
+    visibility: visible;
+    padding-block: var(--__axc-expansioncard-padding-block);
+    grid-template-rows: 1fr;
   }
 
-  100% {
+  .aksel-expansioncard__content[data-open="true"] .aksel-expansioncard__content-inner {
     opacity: 1;
-    transform: translateY(0);
   }
-}
 
-@media (forced-colors: active) {
-  .navds-expansioncard:hover {
-    --__ac-expansioncard-border-color: highlight;
+  .aksel-expansioncard__content-inner {
+    opacity: 0;
+    min-height: 0;
+    transition: opacity .25s cubic-bezier(.2, 0, 0, 1);
+  }
 
-    outline: 1px solid highlight;
+  .aksel-expansioncard--no-animation :is(.aksel-expansioncard__content, .aksel-expansioncard__content-inner) {
+    transition: none;
   }
 }
+
+@layer aksel.layout;

package/dist/component/expansioncard.min.css

@@ -1,3 +1 @@
-.navds-expansioncard{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-color,var(--a-border-default));--__ac-expansioncard-border-radius:var(--ac-expansioncard-border-radius,var(--a-border-radius-large));--__ac-expansioncard-border-width:1px;--__ac-expansioncard-padding-block:var(--a-spacing-4);--__ac-expansioncard-padding-inline:var(--a-spacing-6);background-color:var(--ac-expansioncard-bg,var(--a-surface-default));border-radius:var(--__ac-expansioncard-border-radius);height:-webkit-fit-content;height:fit-content}.navds-expansioncard--open{--__ac-expansioncard-border-color:var(
-    --ac-expansioncard-border-open-color,var(--ac-expansioncard-border-color,var(--a-border-default))
-  )}.navds-expansioncard:hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}:where(.navds-expansioncard.navds-expansioncard--open):hover{--__ac-expansioncard-border-color:var(--ac-expansioncard-border-hover-color,var(--a-border-strong))}.navds-expansioncard__header{background-color:var(--ac-expansioncard-header-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-radius:var(--__ac-expansioncard-border-radius);display:flex;gap:var(--a-spacing-4);justify-content:space-between;padding:var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline);position:relative;width:100%}.navds-expansioncard--small{--__ac-expansioncard-padding-block:var(--a-spacing-3);--__ac-expansioncard-padding-inline:var(--a-spacing-4)}.navds-expansioncard__header:hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:0 0 0 1px var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header){background-color:var(--ac-expansioncard-header-open-bg,var(--a-surface-transparent));border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-bottom:none;border-bottom-left-radius:0;border-bottom-right-radius:0}.navds-expansioncard--open>:where(.navds-expansioncard__header):hover{background-color:var(--ac-expansioncard-header-bg-hover,var(--a-surface-hover));box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 -1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard--open>:where(.navds-expansioncard__header):after{background-color:var(--a-border-divider);bottom:0;content:"";height:1px;left:var(--__ac-expansioncard-padding-inline);opacity:1;position:absolute;transition:opacity .1s cubic-bezier(.175,.885,.32,1.275);width:calc(100% - var(--__ac-expansioncard-padding-inline)*2)}.navds-expansioncard--open>:where(.navds-expansioncard__header:hover):after{opacity:0}.navds-expansioncard__title--small{margin-top:.625rem}.navds-expansioncard__title--medium{margin-top:var(--a-spacing-2)}.navds-expansioncard__title--large{margin-top:var(--a-spacing-1)}.navds-expansioncard--small>:where(.navds-expansioncard__header) :where(.navds-expansioncard__title--small){margin-top:var(--a-spacing-05)}.navds-expansioncard--small :where(.navds-expansioncard__title--medium,.navds-expansioncard__title--large){margin-top:0}.navds-expansioncard__header-button{align-self:flex-start;background:#0000;border:none;border-radius:var(--ac-expansioncard-button-border-radius,var(--a-border-radius-medium));cursor:pointer;display:grid;font-size:1.5rem;margin:0;min-height:3rem;min-width:3rem;padding:0;place-content:center}.navds-expansioncard--small>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button){min-height:2rem;min-width:2rem}:where(.navds-expansioncard__header):hover>:where(.navds-expansioncard__header-button){background-color:var(--a-surface-hover)}.navds-expansioncard__header-chevron{transition:transform .15s ease-in-out}.navds-expansioncard--open>:where(.navds-expansioncard__header) :where(.navds-expansioncard__header-chevron){transform:translateY(0) rotate(180deg)}.navds-expansioncard__header-button:hover>:where(.navds-expansioncard__header-chevron){transform:translateY(1px)}.navds-expansioncard__header-button:focus-visible{box-shadow:var(--a-shadow-focus);outline:3px solid #0000}@supports not selector(:focus-visible){.navds-expansioncard__header-button:focus{box-shadow:var(--a-shadow-focus);outline:3px solid #0000}}.navds-expansioncard--open>:where(.navds-expansioncard__header)>:where(.navds-expansioncard__header-button):hover :where(.navds-expansioncard__header-chevron){transform:translateY(-1px) rotate(180deg)}.navds-expansioncard__header-button:after{content:"";cursor:pointer;height:100%;inset:0;opacity:0;position:absolute;width:100%;z-index:1}.navds-expansioncard__content{--__ac-expansioncard-padding-block:var(--a-spacing-5);border:var(--__ac-expansioncard-border-width) solid var(--__ac-expansioncard-border-color);border-end-end-radius:var(--__ac-expansioncard-border-radius);border-end-start-radius:var(--__ac-expansioncard-border-radius);border-top:none;padding:var(--__ac-expansioncard-padding-block) var(--__ac-expansioncard-padding-inline) var(--__ac-expansioncard-padding-inline)}.navds-expansioncard--small .navds-expansioncard__content{--__ac-expansioncard-padding-block:var(--a-spacing-4)}.navds-expansioncard__content--closed{display:none}:where(.navds-expansioncard__header):hover+.navds-expansioncard__content{box-shadow:1px 0 0 0 var(--__ac-expansioncard-border-color),-1px 0 0 0 var(--__ac-expansioncard-border-color),0 1px 0 0 var(--__ac-expansioncard-border-color)}.navds-expansioncard__content-inner{animation:fadeExpansionCard .25s ease}.navds-expansioncard--no-animation :where(.navds-expansioncard__content-inner){animation:none}@keyframes fadeExpansionCard{0%{opacity:.25;transform:translateY(-8px)}40%{opacity:.7}to{opacity:1;transform:translateY(0)}}@media (forced-colors:active){.navds-expansioncard:hover{--__ac-expansioncard-border-color:highlight;outline:1px solid highlight}}
+@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: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 :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;border-end-end-radius:var(--__axc-expansioncard-border-radius);border-end-start-radius:var(--__axc-expansioncard-border-radius);grid-template-rows:0fr;padding-block:0;transition-property:visibility,padding-block,grid-template-rows;transition-duration:.25s;transition-timing-function:cubic-bezier(.2,0,0,1);display:grid;overflow:hidden}.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 :is(.aksel-expansioncard__content,.aksel-expansioncard__content-inner){transition:none}}@layer aksel.layout;