@siemens/element-theme 51.0.0-rc.7 → 51.0.0-rc.9

package/src/styles/components/_list-item.scss

@@ -4,24 +4,48 @@
 
 @use 'sass:map';
 
+.list,
 ul:has(.list-item),
 ol:has(.list-item) {
+  display: flex;
+  flex-direction: column;
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
+.list {
+  &.list-divider > li:not(:last-child) {
+    border-block-end: 1px solid variables.$si-sys-border-4;
+  }
+
+  &.list-filled,
+  &.list-outline {
+    gap: map.get(variables.$spacers, 4);
+  }
+
+  &.list-filled .list-item {
+    background-color: variables.$si-sys-background-1;
+    border-radius: variables.$element-radius-2;
+  }
+
+  &.list-outline .list-item {
+    border: 1px solid variables.$si-sys-border-4;
+    border-radius: variables.$element-radius-2;
+  }
+}
+
 .list-item {
   display: grid;
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: auto auto 1fr auto;
   grid-template-areas:
-    '.         timestamp     timestamp'
-    'indicator title         action'
-    '.         description   description'
-    '.         metadata      metadata'
-    '.         quick-actions quick-actions';
-  padding-block: map.get(variables.$spacers, 4);
-  padding-inline: map.get(variables.$spacers, 6);
+    '.     .         timestamp     timestamp'
+    'check indicator title         action'
+    '.     .         description   description'
+    '.     .         metadata      metadata'
+    '.     .         quick-actions quick-actions';
+  padding-block: map.get(variables.$spacers-block, 4);
+  padding-inline: map.get(variables.$spacers-inline, 6);
 
   @include typography.si-font(
     typography.$si-font-size-body,
@@ -30,7 +54,13 @@ ol:has(.list-item) {
   );
 
   > * {
-    grid-column: 2 / -1;
+    grid-column: 3 / -1;
+  }
+
+  .list-item-check {
+    grid-area: check;
+    align-self: center;
+    margin-inline-end: map.get(variables.$spacers, 4);
   }
 
   .list-item-indicator {
@@ -41,10 +71,10 @@ ol:has(.list-item) {
     // This restricts the height on purpose.
     // Content taller than the title remains centered and overflows on both sides.
     max-block-size: calc(
-      #{typography.$si-line-height-h5 * typography.$si-font-size-h5} +
-        #{map.get(variables.$spacers, 4) * 2}
+      #{typography.$si-line-height-h5} * #{typography.$si-font-size-h5} +
+        #{map.get(variables.$spacers-block, 4)} * 2
     );
-    margin-inline-end: map.get(variables.$spacers, 4);
+    margin-inline-end: map.get(variables.$spacers-inline, 4);
   }
 
   .list-item-timestamp {
@@ -55,7 +85,7 @@ ol:has(.list-item) {
 
   .list-item-title {
     grid-area: title;
-    padding-block: map.get(variables.$spacers, 4);
+    padding-block: map.get(variables.$spacers-block, 4);
     margin-block-end: 0;
 
     @include typography.si-font(
@@ -94,7 +124,7 @@ ol:has(.list-item) {
 
   .list-item-description {
     grid-area: description;
-    margin-block-end: map.get(variables.$spacers, 4);
+    margin-block-end: map.get(variables.$spacers-block, 4);
   }
 
   .list-item-metadata {
@@ -103,7 +133,7 @@ ol:has(.list-item) {
     flex-direction: row;
     align-items: center;
     color: variables.$si-sys-text-secondary;
-    margin-block-end: map.get(variables.$spacers, 4);
+    margin-block-end: map.get(variables.$spacers-block, 4);
 
     a:not(:hover) {
       color: variables.$si-sys-text-secondary;
@@ -118,14 +148,14 @@ ol:has(.list-item) {
       block-size: 0.125rem;
       border-radius: 50%;
       background-color: variables.$si-sys-text-secondary;
-      margin-inline: map.get(variables.$spacers, 2);
+      margin-inline: map.get(variables.$spacers-inline, 2);
     }
   }
 
   .list-item-quick-actions {
     grid-area: quick-actions;
     display: flex;
-    gap: map.get(variables.$spacers, 4);
+    gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4);
   }
 
   &.list-item-action {
@@ -138,7 +168,7 @@ ol:has(.list-item) {
     }
 
     &:active {
-      background-color: variables.$si-sys-background-selected;
+      background-color: variables.$si-sys-background-active;
     }
 
     &:focus-visible {

package/src/styles/components/_markdown.scss

@@ -7,10 +7,10 @@
   word-wrap: break-word;
   overflow-wrap: break-word;
   word-break: break-word;
-  line-height: variables.px-to-ratio(variables.$si-font-size-body, 20px);
+  line-height: variables.$si-line-height-body-paragraph;
 
   strong {
-    font-weight: variables.$si-font-weight-semibold;
+    font-weight: variables.$si-font-weight-sbold;
   }
 
   :is(ul, ol) {
@@ -27,7 +27,7 @@
   }
 
   li {
-    margin-block: map.get(variables.$spacers, 2);
+    margin-block: map.get(variables.$spacers-block, 2);
     max-inline-size: 100%;
     overflow-wrap: break-word;
   }
@@ -36,8 +36,8 @@
     list-style: none;
 
     .form-check-input {
-      margin-inline-start: calc(-1rem - map.get(variables.$spacers, 2));
-      margin-inline-end: map.get(variables.$spacers, 2);
+      margin-inline-start: calc(-1rem - map.get(variables.$spacers-inline, 2));
+      margin-inline-end: map.get(variables.$spacers-inline, 2);
       vertical-align: text-bottom;
       pointer-events: none;
     }
@@ -64,7 +64,7 @@
 
   blockquote {
     border-inline-start: 4px solid variables.$si-sys-border-4;
-    padding-inline-start: map.get(variables.$spacers, 4);
+    padding-inline-start: map.get(variables.$spacers-inline, 4);
 
     p {
       margin-block-end: 0;
@@ -93,7 +93,7 @@
 
     :is(ul, ol) {
       // stylelint-disable-next-line declaration-no-important
-      padding-inline-start: map.get(variables.$spacers, 6) !important;
+      padding-inline-start: map.get(variables.$spacers-inline, 6) !important;
     }
 
     td:last-child,
@@ -126,6 +126,6 @@
     inline-size: auto;
     object-fit: contain;
     display: block;
-    margin-block: map.get(variables.$spacers, 4);
+    margin-block: map.get(variables.$spacers-block, 4);
   }
 }

package/src/styles/components/_pills.scss

@@ -7,11 +7,11 @@
   align-items: center;
   border-radius: 0.75rem;
   background: var(--filter-pill-background-color, variables.$si-sys-background-0);
-  padding-inline: map.get(variables.$spacers, 4);
+  padding-inline: map.get(variables.$spacers-inline, 4);
   max-inline-size: 100%;
 
   &.active {
-    background: variables.$si-sys-background-selected;
+    background: variables.$si-sys-background-active;
   }
 
   &.pill-interactive {
@@ -23,13 +23,13 @@
   }
 
   :is(.name, .value) {
-    padding-block: map.get(variables.$spacers, 2);
+    padding-block: map.get(variables.$spacers-block, 2);
   }
 }
 
 .pill-group {
   display: flex;
-  gap: map.get(variables.$spacers, 1);
+  gap: map.get(variables.$spacers-block, 1) map.get(variables.$spacers-inline, 1);
 
   .pill {
     border-radius: 0;

package/src/styles/components/_search-bar.scss

@@ -0,0 +1,67 @@
+@use '../variables';
+@use '../variables/semantic-tokens';
+@use '../variables/system-tokens';
+@use '../bootstrap/variables' as bootstrap-variables;
+
+@use 'sass:map';
+
+.search-bar {
+  position: relative;
+
+  &:has(.search-bar-input:disabled) {
+    .search-bar-icon,
+    .search-bar-input,
+    .search-bar-input::placeholder {
+      color: system-tokens.$si-sys-text-disabled;
+    }
+  }
+}
+
+.search-bar-input.form-control {
+  transition: none;
+  background-color: system-tokens.$si-sys-background-1 !important; // stylelint-disable-line declaration-no-important
+  border-radius: semantic-tokens.$element-radius-2;
+  border-width: 0;
+
+  &::placeholder {
+    color: system-tokens.$si-sys-text-secondary;
+  }
+
+  &:is(:hover, :focus)::placeholder {
+    color: system-tokens.$si-sys-text-primary;
+  }
+
+  .search-bar:has(.search-bar-icon) & {
+    padding-inline-start: calc(
+      #{variables.$si-icon-font-size} + #{map.get(variables.$spacers-inline, 2)} * 2
+    );
+  }
+
+  .search-bar:has(.search-bar-clear) & {
+    padding-inline-end: calc(
+      #{bootstrap-variables.$btn-font-size} * #{bootstrap-variables.$btn-line-height} +
+        #{bootstrap-variables.$btn-padding-y-sm} * 2 + #{map.get(variables.$spacers-inline, 2)} * 2
+    );
+  }
+
+  .search-bar.variant-background-0 & {
+    background-color: system-tokens.$si-sys-background-4 !important; // stylelint-disable-line declaration-no-important
+  }
+}
+
+.search-bar-icon {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-start: map.get(variables.$spacers-inline, 2);
+  align-items: center;
+  font-size: variables.$si-icon-font-size;
+  color: system-tokens.$si-sys-text-disabled;
+  pointer-events: none;
+}
+
+.search-bar-clear {
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: map.get(variables.$spacers-inline, 2);
+  margin-block: auto;
+}

package/src/styles/components/_skeleton.scss

@@ -14,7 +14,7 @@
   background: linear-gradient(
     90deg,
     system-tokens.$si-sys-background-hover 0%,
-    system-tokens.$si-sys-background-selected 25%,
+    system-tokens.$si-sys-background-active 25%,
     system-tokens.$si-sys-background-hover 50%
   );
   background-size: 200% 100%;

package/src/styles/components/_switch.scss

@@ -2,19 +2,19 @@
 
 @use 'sass:map';
 
-$si-switch-size: 1.25rem !default;
+$si-switch-size: max(1.25rem, 20px) !default;
 $si-switch-inline-size: calc(2 * #{$si-switch-size});
-$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers, 4));
+$si-switch-inline-spacing: calc($si-switch-inline-size + map.get(variables.$spacers-inline, 4));
 $si-switch-background-off-color: variables.$si-sys-background-1 !default;
 $si-switch-background-on-color: variables.$si-sys-background-accent !default;
-$si-switch-slider-margin: 0.25rem !default;
+$si-switch-slider-margin: calc($si-switch-size / 5);
 $si-switch-slider-on-color: variables.$si-sys-text-on-accent !default;
 $si-switch-transition-length: variables.element-transition-duration(0.4s) !default;
 
 $si-switch-knob-size: calc(#{$si-switch-size} - 2 * #{$si-switch-slider-margin});
 
 .form-switch {
-  padding-block: map.get(variables.$spacers, 1);
+  padding-block: map.get(variables.$spacers-block, 1);
   padding-inline-start: $si-switch-inline-spacing;
 
   .form-check-input {

package/src/styles/components/_widgets.scss

@@ -7,9 +7,11 @@
 @use './skeleton';
 
 .si-value-widget-value {
-  @extend .si-display-bold;
+  @extend .si-display-lg-sbold;
   display: inline-block;
-  min-block-size: variables.$si-font-size-display-bold * variables.$si-line-height-display-bold;
+  min-block-size: calc(
+    #{variables.$si-font-size-display-lg-sbold} * #{variables.$si-line-height-display-lg-sbold}
+  );
 }
 
 /**
@@ -17,10 +19,10 @@
 * the line height.
 */
 .si-value-widget-value-skeleton {
-  @extend .si-display-bold;
+  @extend .si-display-lg-sbold;
   @extend .si-skeleton;
   display: inline-block;
-  block-size: variables.$si-font-size-display-bold;
+  block-size: #{variables.$si-font-size-display-lg-sbold};
   vertical-align: middle;
   inline-size: 100%;
 }
@@ -28,26 +30,26 @@
 .si-value-widget-unit {
   @extend .si-body-lg;
   display: inline-block;
-  margin-inline-start: map.get(variables.$spacers, 2);
+  margin-inline-start: map.get(variables.$spacers-inline, 2);
 }
 
 .si-value-widget-description {
   display: flex;
   align-items: center;
-  gap: map.get(variables.$spacers, 2);
-  margin-block-start: map.get(variables.$spacers, 2);
+  gap: map.get(variables.$spacers-block, 2) map.get(variables.$spacers-inline, 2);
+  margin-block-start: map.get(variables.$spacers-block, 2);
   min-block-size: variables.$si-icon-font-size;
 }
 
 .si-link-widget {
   display: flex;
   flex-direction: column;
-  gap: map.get(variables.$spacers, 4);
+  gap: map.get(variables.$spacers-block, 4) map.get(variables.$spacers-inline, 4);
 }
 
 .si-link-widget-skeleton {
   @extend .si-skeleton;
-  block-size: calc(variables.$si-font-size-body * variables.$si-line-height-body);
+  block-size: calc(#{variables.$si-font-size-body} * #{variables.$si-line-height-body});
   inline-size: 100%;
 }
 

package/src/styles/mixins/_utilities.scss

@@ -0,0 +1,259 @@
+@use '../variables/system-tokens' as tokens;
+
+// This file currently diverges from its original by add !important everywhere.
+// stylelint-disable declaration-no-important
+
+@mixin background-utilities($prefix: 'background-') {
+  .#{$prefix}0 {
+    background-color: tokens.$si-sys-background-0 !important;
+  }
+  .#{$prefix}1 {
+    background-color: tokens.$si-sys-background-1 !important;
+  }
+  .#{$prefix}2 {
+    background-color: tokens.$si-sys-background-2 !important;
+  }
+  .#{$prefix}3 {
+    background-color: tokens.$si-sys-background-3 !important;
+  }
+  .#{$prefix}4 {
+    background-color: tokens.$si-sys-background-4 !important;
+  }
+  .#{$prefix}accent {
+    background-color: tokens.$si-sys-background-accent !important;
+  }
+  .#{$prefix}accent-active {
+    background-color: tokens.$si-sys-background-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    background-color: tokens.$si-sys-background-accent-hover !important;
+  }
+  .#{$prefix}accent-secondary {
+    background-color: tokens.$si-sys-background-accent-secondary !important;
+  }
+  .#{$prefix}accent-secondary-active {
+    background-color: tokens.$si-sys-background-accent-secondary-active !important;
+  }
+  .#{$prefix}accent-secondary-hover {
+    background-color: tokens.$si-sys-background-accent-secondary-hover !important;
+  }
+  .#{$prefix}caution {
+    background-color: tokens.$si-sys-background-caution !important;
+  }
+  .#{$prefix}caution-active {
+    background-color: tokens.$si-sys-background-caution-active !important;
+  }
+  .#{$prefix}caution-hover {
+    background-color: tokens.$si-sys-background-caution-hover !important;
+  }
+  .#{$prefix}caution-subtle {
+    background-color: tokens.$si-sys-background-caution-subtle !important;
+  }
+  .#{$prefix}critical {
+    background-color: tokens.$si-sys-background-critical !important;
+  }
+  .#{$prefix}critical-active {
+    background-color: tokens.$si-sys-background-critical-active !important;
+  }
+  .#{$prefix}critical-hover {
+    background-color: tokens.$si-sys-background-critical-hover !important;
+  }
+  .#{$prefix}critical-subtle {
+    background-color: tokens.$si-sys-background-critical-subtle !important;
+  }
+  .#{$prefix}danger {
+    background-color: tokens.$si-sys-background-danger !important;
+  }
+  .#{$prefix}danger-active {
+    background-color: tokens.$si-sys-background-danger-active !important;
+  }
+  .#{$prefix}danger-hover {
+    background-color: tokens.$si-sys-background-danger-hover !important;
+  }
+  .#{$prefix}danger-secondary {
+    background-color: tokens.$si-sys-background-danger-secondary !important;
+  }
+  .#{$prefix}danger-subtle {
+    background-color: tokens.$si-sys-background-danger-subtle !important;
+  }
+  .#{$prefix}hover {
+    background-color: tokens.$si-sys-background-hover !important;
+  }
+  .#{$prefix}information {
+    background-color: tokens.$si-sys-background-information !important;
+  }
+  .#{$prefix}information-active {
+    background-color: tokens.$si-sys-background-information-active !important;
+  }
+  .#{$prefix}information-hover {
+    background-color: tokens.$si-sys-background-information-hover !important;
+  }
+  .#{$prefix}information-subtle {
+    background-color: tokens.$si-sys-background-information-subtle !important;
+  }
+  .#{$prefix}inverse {
+    background-color: tokens.$si-sys-background-inverse !important;
+  }
+  .#{$prefix}neutral {
+    background-color: tokens.$si-sys-background-neutral !important;
+  }
+  .#{$prefix}success {
+    background-color: tokens.$si-sys-background-success !important;
+  }
+  .#{$prefix}success-active {
+    background-color: tokens.$si-sys-background-success-active !important;
+  }
+  .#{$prefix}success-hover {
+    background-color: tokens.$si-sys-background-success-hover !important;
+  }
+  .#{$prefix}success-subtle {
+    background-color: tokens.$si-sys-background-success-subtle !important;
+  }
+  .#{$prefix}warning {
+    background-color: tokens.$si-sys-background-warning !important;
+  }
+  .#{$prefix}warning-active {
+    background-color: tokens.$si-sys-background-warning-active !important;
+  }
+  .#{$prefix}warning-hover {
+    background-color: tokens.$si-sys-background-warning-hover !important;
+  }
+  .#{$prefix}warning-secondary {
+    background-color: tokens.$si-sys-background-warning-secondary !important;
+  }
+  .#{$prefix}warning-subtle {
+    background-color: tokens.$si-sys-background-warning-subtle !important;
+  }
+}
+
+@mixin text-utilities($prefix: 'text-') {
+  .#{$prefix}accent {
+    color: tokens.$si-sys-text-accent !important;
+  }
+  .#{$prefix}accent-active {
+    color: tokens.$si-sys-text-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    color: tokens.$si-sys-text-accent-hover !important;
+  }
+  .#{$prefix}caution {
+    color: tokens.$si-sys-text-caution !important;
+  }
+  .#{$prefix}critical {
+    color: tokens.$si-sys-text-critical !important;
+  }
+  .#{$prefix}danger {
+    color: tokens.$si-sys-text-danger !important;
+  }
+  .#{$prefix}disabled {
+    color: tokens.$si-sys-text-disabled !important;
+  }
+  .#{$prefix}information {
+    color: tokens.$si-sys-text-information !important;
+  }
+  .#{$prefix}inverse {
+    color: tokens.$si-sys-text-inverse !important;
+  }
+  .#{$prefix}on-accent {
+    color: tokens.$si-sys-text-on-accent !important;
+  }
+  .#{$prefix}on-accent-secondary {
+    color: tokens.$si-sys-text-on-accent-secondary !important;
+  }
+  .#{$prefix}on-accent-secondary-active {
+    color: tokens.$si-sys-text-on-accent-secondary-active !important;
+  }
+  .#{$prefix}on-accent-secondary-hover {
+    color: tokens.$si-sys-text-on-accent-secondary-hover !important;
+  }
+  .#{$prefix}on-caution {
+    color: tokens.$si-sys-text-on-caution !important;
+  }
+  .#{$prefix}on-critical {
+    color: tokens.$si-sys-text-on-critical !important;
+  }
+  .#{$prefix}on-danger {
+    color: tokens.$si-sys-text-on-danger !important;
+  }
+  .#{$prefix}on-danger-secondary {
+    color: tokens.$si-sys-text-on-danger-secondary !important;
+  }
+  .#{$prefix}on-information {
+    color: tokens.$si-sys-text-on-information !important;
+  }
+  .#{$prefix}on-success {
+    color: tokens.$si-sys-text-on-success !important;
+  }
+  .#{$prefix}on-warning {
+    color: tokens.$si-sys-text-on-warning !important;
+  }
+  .#{$prefix}on-warning-secondary {
+    color: tokens.$si-sys-text-on-warning-secondary !important;
+  }
+  .#{$prefix}primary {
+    color: tokens.$si-sys-text-primary !important;
+  }
+  .#{$prefix}secondary {
+    color: tokens.$si-sys-text-secondary !important;
+  }
+  .#{$prefix}success {
+    color: tokens.$si-sys-text-success !important;
+  }
+  .#{$prefix}warning {
+    color: tokens.$si-sys-text-warning !important;
+  }
+}
+
+@mixin border-utilities($prefix: 'border-') {
+  .#{$prefix}1 {
+    border-color: tokens.$si-sys-border-1 !important;
+  }
+  .#{$prefix}2 {
+    border-color: tokens.$si-sys-border-2 !important;
+  }
+  .#{$prefix}3 {
+    border-color: tokens.$si-sys-border-3 !important;
+  }
+  .#{$prefix}4 {
+    border-color: tokens.$si-sys-border-4 !important;
+  }
+  .#{$prefix}accent {
+    border-color: tokens.$si-sys-border-accent !important;
+  }
+  .#{$prefix}accent-active {
+    border-color: tokens.$si-sys-border-accent-active !important;
+  }
+  .#{$prefix}accent-hover {
+    border-color: tokens.$si-sys-border-accent-hover !important;
+  }
+  .#{$prefix}caution {
+    border-color: tokens.$si-sys-border-caution !important;
+  }
+  .#{$prefix}critical {
+    border-color: tokens.$si-sys-border-critical !important;
+  }
+  .#{$prefix}danger {
+    border-color: tokens.$si-sys-border-danger !important;
+  }
+  .#{$prefix}danger-secondary {
+    border-color: tokens.$si-sys-border-danger-secondary !important;
+  }
+  .#{$prefix}information {
+    border-color: tokens.$si-sys-border-information !important;
+  }
+  .#{$prefix}inverse {
+    border-color: tokens.$si-sys-border-inverse !important;
+  }
+  .#{$prefix}neutral {
+    border-color: tokens.$si-sys-border-neutral !important;
+  }
+  .#{$prefix}success {
+    border-color: tokens.$si-sys-border-success !important;
+  }
+  .#{$prefix}warning {
+    border-color: tokens.$si-sys-border-warning !important;
+  }
+  .#{$prefix}warning-secondary {
+    border-color: tokens.$si-sys-border-warning-secondary !important;
+  }
+}

package/src/styles/variables/_elevation.scss

@@ -1,25 +1,27 @@
-$element-elevation-1:
-  0 0 4px var(--element-box-shadow-color-1),
-  0 4px 4px var(--element-box-shadow-color-2);
-$element-elevation-2:
-  0 0 8px var(--element-box-shadow-color-1),
-  0 8px 8px var(--element-box-shadow-color-2);
-$element-elevation-3:
-  0 0 16px var(--element-box-shadow-color-1),
-  0 16px 16px var(--element-box-shadow-color-2);
-$element-elevation-4:
-  0 0 32px var(--element-box-shadow-color-1),
-  0 32px 32px var(--element-box-shadow-color-2);
+@use 'system-tokens';
 
+// @deprecated Use $si-sys-effects-shadow-1 instead.
+$element-elevation-1: system-tokens.$si-sys-effects-shadow-1;
+// @deprecated Use $si-sys-effects-shadow-2 instead.
+$element-elevation-2: system-tokens.$si-sys-effects-shadow-2;
+// @deprecated Use $si-sys-effects-shadow-3 instead.
+$element-elevation-3: system-tokens.$si-sys-effects-shadow-3;
+// @deprecated Use $si-sys-effects-shadow-4 instead.
+$element-elevation-4: system-tokens.$si-sys-effects-shadow-4;
+
+// @deprecated There is no replacement.
 $element-elevation-inset-1:
   inset 0 0 4px var(--element-box-shadow-color-1),
   inset 0 4px 4px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-2:
   inset 0 0 8px var(--element-box-shadow-color-1),
   inset 0 8px 8px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-3:
   inset 0 0 16px var(--element-box-shadow-color-1),
   inset 0 16px 16px var(--element-box-shadow-color-2);
+// @deprecated There is no replacement.
 $element-elevation-inset-4:
   inset 0 0 32px var(--element-box-shadow-color-1),
   inset 0 32px 32px var(--element-box-shadow-color-2);