@navikt/ds-css 7.9.0 → 7.9.2

package/dist/darkside/component/form.css

@@ -7,7 +7,7 @@
   }
 
   .navds-fieldset > :not(:first-child, :empty) {
-    margin-top: var(--ax-spacing-2);
+    margin-top: var(--ax-space-8);
   }
 
   .navds-fieldset__description {
@@ -42,16 +42,16 @@
 
   .navds-dropzone__area {
     --__axc-dropzone-background: var(--ax-bg-input);
-    --__axc-dropzone-icon-padding: var(--ax-spacing-2);
+    --__axc-dropzone-icon-padding: var(--ax-space-8);
     --__axc-dropzone-animation-length-long: .4s;
     --__axc-dropzone-animation-length-short: .25s;
     --__axc-dropzone-animation-ease-out: cubic-bezier(.3, 1, .3, 1);
     --__axc-dropzone-animation-over-under: cubic-bezier(.3, 1, .3, 1);
     align-items: center;
-    gap: var(--ax-spacing-4);
+    gap: var(--ax-space-16);
     text-align: center;
     width: 100%;
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    padding: var(--ax-space-16) var(--ax-space-20);
     border: 1px dashed var(--ax-border-default);
     border-radius: var(--ax-border-radius-xlarge);
     background-color: var(--__axc-dropzone-background);
@@ -131,7 +131,7 @@
   }
 
   .navds-dropzone__area-release {
-    top: var(--ax-spacing-4);
+    top: var(--ax-space-16);
     z-index: 1;
     pointer-events: none;
     transition: top var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under), transform var(--__axc-dropzone-animation-length-long) var(--__axc-dropzone-animation-over-under);
@@ -142,7 +142,7 @@
   .navds-dropzone__area-release__icon {
     padding: var(--__axc-dropzone-icon-padding);
     border-radius: var(--ax-border-radius-full);
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     transition: background-color .3s var(--__axc-dropzone-animation-ease-out), font-size .3s var(--__axc-dropzone-animation-ease-out);
     font-size: 1.5rem;
     display: grid;
@@ -171,7 +171,7 @@
   .navds-dropzone__area-disabled {
     color: var(--ax-text-subtle);
     align-items: center;
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
     flex-direction: column;
     display: flex;
   }
@@ -187,8 +187,8 @@
     border: 1px solid var(--ax-border-subtleA);
     outline-offset: -1px;
     border-radius: var(--ax-border-radius-xlarge);
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
-    gap: var(--ax-spacing-3);
+    padding: var(--ax-space-12) var(--ax-space-16);
+    gap: var(--ax-space-12);
     align-items: flex-start;
     transition: outline-color .25s cubic-bezier(0, .3, .15, 1);
     display: flex;
@@ -199,12 +199,12 @@
   }
 
   .navds-file-item__icon {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
     color: var(--ax-text-default);
     border-radius: var(--ax-border-radius-full);
     min-width: 2.5rem;
     min-height: 2.5rem;
-    margin-top: var(--ax-spacing-05);
+    margin-top: var(--ax-space-2);
     place-content: center;
     transition: background-color .25s cubic-bezier(0, .3, .15, 1);
     display: grid;
@@ -238,12 +238,12 @@
   }
 
   .navds-file-item__error .navds-file-item__error {
-    padding-top: var(--ax-spacing-1);
+    padding-top: var(--ax-space-4);
     grid-template-rows: 1fr;
   }
 
   .navds-file-item__error-content {
-    gap: var(--ax-spacing-1);
+    gap: var(--ax-space-4);
     min-height: 0;
     display: flex;
   }
@@ -256,7 +256,7 @@
 
   .navds-form-field {
     justify-items: start;
-    gap: var(--ax-spacing-2);
+    gap: var(--ax-space-8);
     display: grid;
   }
 
@@ -283,8 +283,8 @@
   }
 
   .navds-form-field__readonly-icon {
-    margin-top: var(--ax-spacing-05);
-    margin-right: var(--ax-spacing-1);
+    margin-top: var(--ax-space-2);
+    margin-right: var(--ax-space-4);
     flex-shrink: 0;
     align-self: flex-start;
   }
@@ -297,7 +297,7 @@
 
   .navds-error-summary {
     background-color: var(--ax-bg-default);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    padding: var(--ax-space-16) var(--ax-space-20);
     border: 4px solid var(--ax-border-danger);
     border-radius: var(--ax-border-radius-xlarge);
     outline-offset: 2px;
@@ -314,21 +314,21 @@
   }
 
   .navds-error-summary--small {
-    padding: var(--ax-spacing-3) var(--ax-spacing-4);
+    padding: var(--ax-space-12) var(--ax-space-16);
   }
 
   .navds-error-summary--small .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-4);
+    scroll-margin-top: var(--ax-space-16);
   }
 
   .navds-error-summary--small > .navds-error-summary__list {
-    margin: var(--ax-spacing-2) 0;
-    gap: var(--ax-spacing-2);
-    padding-left: var(--ax-spacing-5);
+    margin: var(--ax-space-8) 0;
+    gap: var(--ax-space-8);
+    padding-left: var(--ax-space-20);
   }
 
   .navds-error-summary__heading {
-    scroll-margin-top: var(--ax-spacing-6);
+    scroll-margin-top: var(--ax-space-24);
   }
 
   .navds-error-summary__heading:focus {
@@ -336,9 +336,9 @@
   }
 
   .navds-error-summary__list {
-    margin: var(--ax-spacing-3) 0;
-    gap: var(--ax-spacing-3);
-    padding-left: var(--ax-spacing-6);
+    margin: var(--ax-space-12) 0;
+    gap: var(--ax-space-12);
+    padding-left: var(--ax-space-24);
     list-style: inherit;
     flex-direction: column;
     display: flex;
@@ -416,10 +416,10 @@
   }
 
   .navds-checkbox__label, .navds-radio__label {
-    padding: var(--ax-spacing-3) 0;
+    padding: var(--ax-space-12) 0;
     cursor: pointer;
-    gap: var(--ax-spacing-2);
-    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-neutral-moderate);
+    gap: var(--ax-space-8);
+    --__axc-radio-checkbox-readonly-bg: var(--ax-bg-moderate);
     --__axc-radio-checkbox-readonly-border: var(--ax-border-subtle);
     display: flex;
   }
@@ -452,7 +452,7 @@
   }
 
   .navds-checkbox--small > .navds-checkbox__label, .navds-radio--small > .navds-radio__label {
-    padding: var(--ax-spacing-1-alt) 0;
+    padding: var(--ax-space-6) 0;
   }
 
   .navds-checkbox--small > .navds-checkbox__label:before, .navds-radio--small > .navds-radio__label:before {
@@ -467,7 +467,7 @@
 
   .navds-checkbox__input:indeterminate + .navds-checkbox__label:after {
     content: "";
-    transform: translate(var(--ax-spacing-1-alt), -50%);
+    transform: translate(var(--ax-space-6), -50%);
     background-color: var(--ax-bg-default);
     border-radius: 1px;
     flex-shrink: 0;
@@ -498,7 +498,7 @@
   .navds-checkbox__input:checked + .navds-checkbox__label > .navds-checkbox__icon {
     color: var(--ax-bg-default);
     height: 1.5rem;
-    transform: translate(var(--ax-spacing-1-alt));
+    transform: translate(var(--ax-space-6));
     pointer-events: none;
     align-items: center;
     display: flex;
@@ -589,8 +589,8 @@
   }
 
   .navds-radio--readonly > .navds-radio__input:checked + .navds-radio__label:before {
-    background-color: var(--ax-bg-neutral-strong);
-    box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-strong);
+    box-shadow: inset 0 0 0 2px var(--ax-border-subtle), inset 0 0 0 8px var(--ax-bg-moderate);
     border-width: 0;
   }
 
@@ -660,8 +660,8 @@
     box-sizing: border-box;
     width: 100%;
     min-height: 3rem;
-    padding: var(--ax-spacing-2);
-    padding-right: var(--ax-spacing-10);
+    padding: var(--ax-space-8);
+    padding-right: var(--ax-space-40);
     display: inline-block;
     position: relative;
   }
@@ -693,7 +693,7 @@
   }
 
   .navds-select__chevron {
-    right: var(--ax-spacing-2);
+    right: var(--ax-space-8);
     pointer-events: none;
     color: var(--ax-text-default);
     align-self: center;
@@ -742,8 +742,8 @@
   }
 
   .navds-select--readonly .navds-select__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -801,11 +801,11 @@
   }
 
   .navds-switch--small .navds-switch__content {
-    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0 calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem;
+    padding: calc(var(--ax-space-8)  - var(--ax-space-2)) 0 calc(var(--ax-space-8)  - var(--ax-space-2)) 3.25rem;
   }
 
   .navds-switch--right.navds-switch--small .navds-switch__content {
-    padding: calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 3.25rem calc(var(--ax-spacing-2)  - var(--ax-spacing-05)) 0;
+    padding: calc(var(--ax-space-8)  - var(--ax-space-2)) 3.25rem calc(var(--ax-space-8)  - var(--ax-space-2)) 0;
   }
 
   .navds-switch--with-description {
@@ -824,7 +824,7 @@
     background-color: var(--ax-bg-input);
     width: 2.75rem;
     height: 1.5rem;
-    top: var(--ax-spacing-3);
+    top: var(--ax-space-12);
     border-radius: var(--ax-border-radius-full);
     border: 2px solid var(--ax-border-default);
     transition-property: background-color, border-color;
@@ -835,7 +835,7 @@
   }
 
   .navds-switch--small > .navds-switch__track {
-    top: var(--ax-spacing-1);
+    top: var(--ax-space-4);
   }
 
   .navds-switch__input:checked ~ .navds-switch__track {
@@ -864,7 +864,7 @@
   }
 
   .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
     border-radius: var(--ax-border-radius-full);
     justify-content: center;
     align-items: center;
@@ -931,8 +931,8 @@
   }
 
   .navds-switch--readonly > .navds-switch__track, .navds-switch--readonly > .navds-switch__input:hover ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track, .navds-switch--readonly > .navds-switch__input:checked:hover ~ .navds-switch__track {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
   }
 
   .navds-switch--readonly > .navds-switch__label-wrapper, .navds-switch--readonly > .navds-switch__input {
@@ -948,12 +948,12 @@
   }
 
   .navds-switch--readonly .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
+    background-color: var(--ax-bg-strong);
   }
 
   .navds-switch--readonly > .navds-switch__input:checked ~ .navds-switch__track > .navds-switch__thumb {
-    background-color: var(--ax-bg-neutral-strong);
-    color: var(--ax-text-neutral-contrast);
+    background-color: var(--ax-bg-strong);
+    color: var(--ax-text-contrast);
   }
 
   @media (hover: hover) and (pointer: fine) {
@@ -1003,7 +1003,7 @@
 
   .navds-text-field__input {
     appearance: none;
-    padding: var(--ax-spacing-2);
+    padding: var(--ax-space-8);
     background: var(--ax-bg-input);
     border-radius: var(--ax-border-radius-medium);
     border: 1px solid var(--ax-border-default);
@@ -1029,7 +1029,7 @@
   }
 
   .navds-text-field__input::placeholder {
-    color: var(--ax-text-neutral);
+    color: var(--ax-text-subtle);
   }
 
   .navds-text-field__input[size] {
@@ -1037,7 +1037,7 @@
   }
 
   .navds-form-field--small .navds-text-field__input {
-    padding: 0 var(--ax-spacing-2);
+    padding: 0 var(--ax-space-8);
     min-height: 2rem;
   }
 
@@ -1047,8 +1047,8 @@
   }
 
   .navds-text-field--readonly .navds-text-field__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -1078,7 +1078,7 @@
   .navds-textarea__input {
     height: var(--__axc-textarea-height);
     appearance: none;
-    padding: var(--ax-spacing-2);
+    padding: var(--ax-space-8);
     background-color: var(--ax-bg-input);
     border-radius: var(--ax-border-radius-medium);
     border: 1px solid var(--ax-border-default);
@@ -1109,12 +1109,12 @@
   }
 
   .navds-form-field--small .navds-textarea__input {
-    padding: var(--ax-spacing-1-alt);
+    padding: var(--ax-space-6);
   }
 
   .navds-textarea--readonly .navds-textarea__input {
-    background-color: var(--ax-bg-neutral-moderate);
-    border-color: var(--ax-border-neutral-subtleA);
+    background-color: var(--ax-bg-moderate);
+    border-color: var(--ax-border-subtleA);
     cursor: default;
   }
 
@@ -1205,7 +1205,7 @@
   }
 
   .navds-search__input {
-    padding-right: var(--ax-spacing-10);
+    padding-right: var(--ax-space-40);
   }
 
   .navds-search__input:focus-visible {
@@ -1219,28 +1219,28 @@
   }
 
   .navds-search__input--simple {
-    padding-left: var(--ax-spacing-10);
+    padding-left: var(--ax-space-40);
   }
 
   .navds-form-field--small .navds-search__input {
-    padding-right: var(--ax-spacing-7);
+    padding-right: var(--ax-space-28);
   }
 
   .navds-form-field--small .navds-search__input--simple {
-    padding-left: var(--ax-spacing-7);
+    padding-left: var(--ax-space-28);
   }
 
   .navds-form-field--small .navds-search__search-icon {
-    left: var(--ax-spacing-1);
+    left: var(--ax-space-4);
     font-size: 1.25rem;
   }
 
   .navds-form-field--small .navds-search__button-clear {
-    right: var(--ax-spacing-1);
+    right: var(--ax-space-4);
   }
 
   .navds-search__search-icon {
-    left: var(--ax-spacing-2);
+    left: var(--ax-space-8);
     pointer-events: none;
     font-size: 1.5rem;
     position: absolute;
@@ -1253,7 +1253,7 @@
   }
 
   .navds-search__button-clear {
-    right: var(--ax-spacing-2);
+    right: var(--ax-space-8);
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -1307,9 +1307,9 @@
 
   .navds-combobox__wrapper {
     --__axc-combobox-icon-size: 1.5rem;
-    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-2);
-    --__axc-combobox-list-item-padding-block: var(--ax-spacing-3);
-    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-3);
+    --__axc-combobox-wrapper-inner-padding: var(--ax-space-8);
+    --__axc-combobox-list-item-padding-block: var(--ax-space-12);
+    --__axc-combobox-list-item-padding-inline: var(--ax-space-12);
     --__axc-combobox-border-width: 1px;
     --__axc-combobox-input-height: 2rem;
     border-radius: var(--ax-border-radius-medium);
@@ -1325,9 +1325,9 @@
 
   .navds-form-field--small .navds-combobox__wrapper {
     --__axc-combobox-icon-size: 1.25rem;
-    --__axc-combobox-wrapper-inner-padding: var(--ax-spacing-1);
-    --__axc-combobox-list-item-padding-block: var(--ax-spacing-1-alt);
-    --__axc-combobox-list-item-padding-inline: var(--ax-spacing-2);
+    --__axc-combobox-wrapper-inner-padding: var(--ax-space-4);
+    --__axc-combobox-list-item-padding-block: var(--ax-space-6);
+    --__axc-combobox-list-item-padding-inline: var(--ax-space-8);
     --__axc-combobox-input-height: 1.5rem;
   }
 
@@ -1348,11 +1348,11 @@
   }
 
   .navds-combobox--readonly .navds-combobox__selected-options .navds-chips__chip {
-    background-color: var(--ax-bg-neutral-moderateA);
+    background-color: var(--ax-bg-moderateA);
   }
 
   .navds-combobox--readonly .navds-combobox__button-toggle-list {
-    color: var(--ax-bg-neutral-moderate);
+    color: var(--ax-bg-moderate);
   }
 
   .navds-combobox--readonly .navds-combobox__wrapper {
@@ -1361,7 +1361,7 @@
   }
 
   .navds-combobox--readonly .navds-text-field__input, .navds-combobox--readonly .navds-combobox__input {
-    background-color: var(--ax-bg-neutral-moderate);
+    background-color: var(--ax-bg-moderate);
   }
 
   .navds-combobox__button-toggle-list svg, .navds-combobox__list svg {
@@ -1468,7 +1468,7 @@
   }
 
   .navds-combobox__selected-options > li:only-child > .navds-combobox__input {
-    margin-left: var(--ax-spacing-1);
+    margin-left: var(--ax-space-4);
   }
 
   .navds-combobox__input--hide-caret {
@@ -1516,7 +1516,7 @@
     max-height: 290px;
     left: 0;
     right: 0;
-    top: calc(100% + var(--ax-spacing-2));
+    top: calc(100% + var(--ax-space-8));
     border: 1px solid var(--ax-border-subtleA);
     border-radius: var(--ax-border-radius-large);
     background-color: var(--ax-bg-raised);
@@ -1541,8 +1541,8 @@
     padding-block: var(--__axc-combobox-list-item-padding-block);
     padding-inline: var(--__axc-combobox-list-item-padding-inline);
     border-radius: var(--ax-border-radius-medium);
-    margin-inline: var(--ax-spacing-2);
-    margin-block: var(--ax-spacing-1);
+    margin-inline: var(--ax-space-8);
+    margin-block: var(--ax-space-4);
     border: 0;
     justify-content: space-between;
     align-items: center;
@@ -1560,9 +1560,9 @@
   }
 
   .navds-combobox__list-item--max-selected {
-    background-color: var(--ax-bg-neutral-moderateA);
-    border-bottom: 1px solid var(--ax-border-neutral-subtle);
-    padding-block: var(--ax-spacing-2);
+    background-color: var(--ax-bg-moderateA);
+    border-bottom: 1px solid var(--ax-border-subtle);
+    padding-block: var(--ax-space-8);
     line-height: var(--ax-font-line-height-large);
     border-radius: 0;
     margin: 0;
@@ -1574,7 +1574,7 @@
     gap: inherit;
     background-color: inherit;
     padding: 0;
-    padding-block: var(--ax-spacing-1);
+    padding-block: var(--ax-space-4);
     align-items: stretch;
     margin: 0;
     list-style: none;
@@ -1618,8 +1618,8 @@
     background: var(--ax-bg-accent-moderateA);
     cursor: pointer;
     margin: 0;
-    margin-block: calc(var(--ax-spacing-1) * -1);
-    padding-block: var(--ax-spacing-4);
+    margin-block: calc(var(--ax-space-4) * -1);
+    padding-block: var(--ax-space-16);
     border-radius: 0;
     justify-content: flex-start;
     gap: .25rem;
@@ -1654,7 +1654,7 @@
     }
 
     .navds-combobox__selected-options {
-      gap: var(--ax-spacing-1);
+      gap: var(--ax-space-4);
     }
   }
 
@@ -1724,29 +1724,29 @@
   }
 
   .navds-form-summary {
-    border: 1px solid var(--ax-border-neutral-subtleA);
+    border: 1px solid var(--ax-border-subtleA);
     border-radius: var(--ax-border-radius-xlarge);
     background: var(--ax-bg-raised);
     overflow: hidden;
   }
 
   .navds-form-summary__header {
-    background: var(--ax-bg-neutral-moderateA);
-    padding: var(--ax-spacing-4) var(--ax-spacing-6);
+    background: var(--ax-bg-moderateA);
+    padding: var(--ax-space-16) var(--ax-space-24);
     justify-content: space-between;
-    gap: 0 var(--ax-spacing-3);
+    gap: 0 var(--ax-space-12);
     display: flex;
   }
 
   @media (max-width: 479px) {
     .navds-form-summary__header {
-      padding: var(--ax-spacing-3) var(--ax-spacing-4);
+      padding: var(--ax-space-12) var(--ax-space-16);
       flex-direction: column;
     }
   }
 
   .navds-form-summary__edit {
-    margin-top: var(--ax-spacing-1);
+    margin-top: var(--ax-space-4);
     flex-shrink: 0;
     align-self: flex-start;
   }
@@ -1756,24 +1756,24 @@
   }
 
   .navds-form-summary__answers {
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    padding: var(--ax-space-16) var(--ax-space-20);
     margin: 0;
   }
 
   @media (max-width: 479px) {
     .navds-form-summary__answers {
-      padding: var(--ax-spacing-4);
+      padding: var(--ax-space-16);
     }
   }
 
   .navds-form-summary__answer:not(:last-child) {
-    margin-bottom: var(--ax-spacing-4);
-    padding-bottom: var(--ax-spacing-4);
+    margin-bottom: var(--ax-space-16);
+    padding-bottom: var(--ax-space-16);
     border-bottom: 1px solid var(--ax-border-subtleA);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer) {
-    padding-bottom: var(--ax-spacing-6);
+    padding-bottom: var(--ax-space-24);
   }
 
   .navds-form-summary__answer:has(.navds-form-summary__answer):last-child {
@@ -1782,22 +1782,22 @@
 
   @media (max-width: 479px) {
     .navds-form-summary__answer:not(:last-child) {
-      margin-bottom: var(--ax-spacing-3);
-      padding-bottom: var(--ax-spacing-3);
+      margin-bottom: var(--ax-space-12);
+      padding-bottom: var(--ax-space-12);
     }
 
     .navds-form-summary__answer:has(.navds-form-summary__answer) {
-      padding-bottom: var(--ax-spacing-5);
+      padding-bottom: var(--ax-space-20);
     }
   }
 
   .navds-form-summary__value:first-of-type {
-    margin-top: var(--ax-spacing-1);
+    margin-top: var(--ax-space-4);
   }
 
   .navds-form-summary__value .navds-form-summary__answers {
-    margin-top: var(--ax-spacing-2);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
+    margin-top: var(--ax-space-8);
+    padding: var(--ax-space-16) var(--ax-space-20);
     background: var(--ax-bg-info-moderateA);
     border-radius: var(--ax-border-radius-large);
     border: 1px solid var(--ax-border-info-subtleA);
@@ -1808,7 +1808,7 @@
   }
 
   .navds-form-progress__bar {
-    margin-bottom: var(--ax-spacing-2);
+    margin-bottom: var(--ax-space-8);
   }
 
   .navds-form-progress__button:focus-visible {
@@ -1855,8 +1855,8 @@
   .navds-form-progress__stepper {
     border: 1px solid var(--ax-border-subtle);
     border-radius: var(--ax-border-radius-large);
-    padding: var(--ax-spacing-4) var(--ax-spacing-5);
-    margin-top: var(--ax-spacing-1);
+    padding: var(--ax-space-16) var(--ax-space-20);
+    margin-top: var(--ax-space-4);
     background: var(--ax-bg-raised);
   }
 }