@sbb-esta/lyne-elements-dev 5.9.0-dev.1790082244 → 5.9.0-dev.1790138893

package/standard-theme.css

@@ -2278,6 +2278,674 @@ sbb-breadcrumb-group:not(:defined) {
   overflow: hidden;
 }
 
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l) {
+  appearance: none;
+  box-sizing: border-box;
+  margin: 0;
+  outline: none;
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  background: none;
+  -webkit-tap-highlight-color: transparent;
+  color: inherit;
+  display: inline-block;
+  outline: none !important;
+  --sbb-button-transition-duration: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-animation-duration-2x)
+  );
+  --sbb-button-box-shadow-definition:
+    var(--sbb-shadow-elevation-level-3-shadow-2-offset-x) var(--sbb-button-shadow-2-offset-y)
+      var(--sbb-button-shadow-2-blur) var(--sbb-shadow-elevation-level-3-shadow-2-spread)
+      var(--sbb-button-shadow-2-color),
+    var(--sbb-shadow-elevation-level-3-shadow-1-offset-x) var(--sbb-button-shadow-1-offset-y)
+      var(--sbb-button-shadow-1-blur) var(--sbb-shadow-elevation-level-3-shadow-1-spread)
+      var(--sbb-button-shadow-1-color);
+  --_width: unset;
+  --_border-color: var(--sbb-button-color-default-border);
+  --_background-color: var(--sbb-button-color-default-background);
+  --_background: var(--_background-color);
+  --_color: var(--sbb-button-color-default-text);
+  --_button-inset: 0;
+  --_hover-offset: 0.0625rem;
+  --_padding-block: var(--sbb-button-padding-block-min);
+  --_padding-inline: var(--sbb-button-padding-inline);
+  --_border: calc(var(--sbb-button-border-width) + var(--sbb-button-border-overlap-fix, 1px)) solid
+    var(--_border-color);
+  --_animation-loading-delay: var(
+    --sbb-disable-animation-duration,
+    var(--sbb-button-loading-delay)
+  );
+  --_animation-loading-duration: var(--sbb-disable-animation-duration, 3s);
+  --_animation-loading-rotate-function: linear(0, 0.25 12.5% 37.5%, 0.75 62.5% 87.5%, 1);
+  --_animation-loading-rotate: sbb-button-rotate var(--_animation-loading-duration)
+    var(--_animation-loading-delay) infinite var(--_animation-loading-rotate-function);
+  --_animation-loading-move: sbb-button-move calc(var(--_animation-loading-duration) / 2)
+    var(--_animation-loading-delay) alternate infinite linear;
+}
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l) {
+    --sbb-button-color-default-border: CanvasText !important;
+    --sbb-button-color-active-border: Highlight !important;
+    --sbb-button-color-default-background: Canvas !important;
+    --sbb-button-color-hover-background: Canvas !important;
+    --sbb-button-color-active-background: Canvas !important;
+    --sbb-button-color-disabled-background: Canvas !important;
+    --sbb-button-color-disabled-text: GrayText !important;
+    --sbb-button-color-loading-border: Highlight !important;
+    --_sbb-button-loading-hidden-border-color: Canvas !important;
+    --sbb-button-color-default-text: CanvasText !important;
+    --sbb-button-color-hover-text: CanvasText !important;
+    --sbb-button-color-active-text: CanvasText !important;
+    --sbb-button-border-overlap-fix: 0rem;
+  }
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l) {
+  gap: var(--sbb-button-gap);
+  align-items: center;
+  justify-content: center;
+  font-size: var(--sbb-text-font-size-xs);
+  font-weight: bold;
+  letter-spacing: var(--sbb-letter-spacing-text);
+  line-height: var(--sbb-typo-line-height-text);
+  text-align: left;
+  white-space: nowrap;
+  text-decoration: none;
+  min-height: var(--sbb-button-min-height);
+  outline: none;
+  width: var(--_width);
+  border-radius: var(--sbb-button-border-radius);
+  color: var(--_color);
+  cursor: var(--sbb-button-cursor);
+  user-select: none;
+  background: var(--_background);
+  border: var(--_border-action);
+  transition-duration: var(--sbb-button-transition-duration);
+  transition-timing-function: var(--sbb-button-transition-easing-function);
+  transition-property: color, background-color, padding-top, padding-bottom;
+  animation: var(--_animation);
+  padding-block: var(--_padding-block);
+  padding-inline: var(--_padding-inline);
+  position: relative;
+  display: inline flex;
+  vertical-align: middle;
+}
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not(a) {
+    --sbb-button-color-default-text: ButtonText !important;
+    --sbb-button-color-hover-text: ButtonText !important;
+    --sbb-button-color-active-text: ButtonText !important;
+  }
+}
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):is(a) {
+    --sbb-button-color-default-text: LinkText !important;
+    --sbb-button-color-hover-text: LinkText !important;
+    --sbb-button-color-active-text: LinkText !important;
+  }
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l).sbb-negative {
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-disabled-text: var(--sbb-color-aluminium);
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l).sbb-icon-button {
+  --sbb-button-padding-inline: 0;
+  --_width: var(--sbb-button-min-height);
+  --_animation-loading-rotate-function: linear;
+}
+@media (any-hover: hover) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading):is(:hover, .sbb-hover) {
+    --sbb-button-translate-y-content-hover: -0.0625rem;
+    --sbb-button-shadow-1-offset-y: calc(
+      0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-offset-y)
+    );
+    --sbb-button-shadow-1-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-1-blur));
+    --sbb-button-shadow-2-blur: calc(0.5 * var(--sbb-shadow-elevation-level-3-shadow-2-blur));
+    --sbb-button-cursor: var(--sbb-cursor-pointer);
+    --_border-color: var(--sbb-button-color-hover-border);
+    --_color: var(--sbb-button-color-hover-text);
+    --_background-color: var(--sbb-button-color-hover-background);
+    --_button-inset: calc(var(--sbb-button-border-width) * -1);
+    --sbb-button-padding-block-min: calc(var(--sbb-spacing-fixed-1x) - var(--_hover-offset))
+      calc(var(--sbb-spacing-fixed-1x) + var(--_hover-offset));
+  }
+}
+@media (forced-colors: active) {
+  :is(.sbb-button,
+  .sbb-button-s,
+  .sbb-button-m,
+  .sbb-button-l,
+  .sbb-secondary-button,
+  .sbb-secondary-button-s,
+  .sbb-secondary-button-m,
+  .sbb-secondary-button-l,
+  .sbb-accent-button,
+  .sbb-accent-button-s,
+  .sbb-accent-button-m,
+  .sbb-accent-button-l,
+  .sbb-transparent-button,
+  .sbb-transparent-button-s,
+  .sbb-transparent-button-m,
+  .sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading):is(:hover, .sbb-hover) {
+    --sbb-button-color-hover-border: Highlight !important;
+  }
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l):is([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive) {
+  --sbb-button-cursor: var(--sbb-cursor-default);
+  --_color: var(--sbb-button-color-disabled-text);
+  --_background-color: var(--sbb-button-color-disabled-background);
+  --_border-color: var(--sbb-button-color-disabled-border);
+  --_border: var(--sbb-button-border-disabled-width) var(--sbb-button-border-disabled-style)
+    var(--_border-color);
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is(:active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
+  --_color: var(--sbb-button-color-active-text);
+  --_background-color: var(--sbb-button-color-active-background);
+  --_border-color: var(--sbb-button-color-active-border);
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l)::before {
+  content: "";
+  position: absolute;
+  inset: var(--_button-inset);
+  border: var(--_border);
+  border-radius: var(--sbb-button-border-radius);
+  pointer-events: none;
+  box-shadow: var(--sbb-button-box-shadow);
+  transition-duration: var(--sbb-button-transition-duration);
+  transition-timing-function: var(--sbb-button-transition-easing-function);
+  transition-property: inset, border, box-shadow;
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive):is([loading], .sbb-loading) {
+  --_background:
+    border-box padding-box linear-gradient(var(--_background-color)),
+    border-box
+      conic-gradient(
+        from var(--sbb-button-loading-angle) at
+          clamp(
+            calc(var(--sbb-button-min-height) / 2),
+            var(--sbb-button-loading-offset),
+            calc(100% - var(--sbb-button-min-height) / 2)
+          )
+          50%,
+        var(--sbb-button-color-loading-border) 0deg,
+        var(--sbb-button-color-loading-border) 300deg,
+        var(--sbb-button-color-active-text) 360deg
+      ),
+    var(--_background-color);
+  --_loading-outline-offset: calc(
+    var(--sbb-focus-outline-offset) + var(--sbb-button-loading-border-width)
+  );
+  --_border: none;
+  --_border-action: var(--sbb-button-loading-border-width) dotted
+    var(--_sbb-button-loading-hidden-border-color, transparent);
+  --_padding-block: calc(
+    var(--sbb-button-padding-block-min) - var(--sbb-button-loading-border-width)
+  );
+  --_padding-inline: calc(
+    var(--sbb-button-padding-inline) - var(--sbb-button-loading-border-width)
+  );
+  --_animation: var(--_animation-loading-rotate), var(--_animation-loading-move);
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l):focus-visible::before {
+  outline-offset: var(--sbb-focus-outline-offset);
+  outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
+  outline-offset: var(--_loading-outline-offset, var(--sbb-focus-outline-offset));
+}
+:is(.sbb-button,
+.sbb-button-s,
+.sbb-button-m,
+.sbb-button-l,
+.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l,
+.sbb-accent-button,
+.sbb-accent-button-s,
+.sbb-accent-button-m,
+.sbb-accent-button-l,
+.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l) > .sbb-button-label {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+:is(.sbb-button-s, .sbb-secondary-button-s, .sbb-accent-button-s, .sbb-transparent-button-s) {
+  --sbb-button-min-height: var(--sbb-button-min-height-size-s);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-s);
+  --sbb-button-gap: var(--sbb-spacing-fixed-1x);
+}
+
+:is(.sbb-button-m, .sbb-secondary-button-m, .sbb-accent-button-m, .sbb-transparent-button-m) {
+  --sbb-button-min-height: var(--sbb-button-min-height-size-m);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-m);
+}
+
+:is(.sbb-button-l, .sbb-secondary-button-l, .sbb-accent-button-l, .sbb-transparent-button-l) {
+  --sbb-button-min-height: var(--sbb-button-min-height-size-l);
+  --sbb-button-padding-inline: var(--sbb-button-padding-inline-size-l);
+}
+
+:is(.sbb-button, .sbb-button-s, .sbb-button-m, .sbb-button-l) {
+  --sbb-button-color-active-background: var(--sbb-color-primary150);
+  --sbb-button-color-active-border: var(--sbb-color-primary150);
+  --sbb-button-color-active-text: var(--sbb-color-4-negative);
+  --sbb-button-color-default-background: var(--sbb-color-primary);
+  --sbb-button-color-default-border: var(--sbb-color-primary);
+  --sbb-button-color-default-text: var(--sbb-color-1-negative);
+  --sbb-button-color-hover-background: var(--sbb-color-primary125);
+  --sbb-button-color-hover-border: var(--sbb-color-primary125);
+  --sbb-button-color-hover-text: var(--sbb-color-3-negative);
+  --sbb-button-color-loading-border: color-mix(
+      in srgb,
+      var(--sbb-button-color-active-background) 50%,
+      var(--sbb-button-color-default-text)
+    );
+  --sbb-button-color-loading-border: light-dark(
+    color-mix(
+      in srgb,
+      var(--sbb-button-color-active-background) 50%,
+      var(--sbb-button-color-default-text)
+    ),
+    color-mix(
+      in srgb,
+      var(--sbb-button-color-active-background) 70%,
+      var(--sbb-button-color-default-text)
+    )
+  );
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 20%, transparent);
+  --sbb-button-shadow-1-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-primary) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)
+  );
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent);
+  --sbb-button-shadow-2-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-primary125) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)
+  );
+}
+:is(.sbb-button, .sbb-button-s, .sbb-button-m, .sbb-button-l).sbb-negative {
+  --sbb-button-color-active-background: var(--sbb-color-primary150);
+  --sbb-button-color-active-border: var(--sbb-color-primary150);
+  --sbb-button-color-active-text: var(--sbb-color-4-negative);
+  --sbb-button-color-default-background: var(--sbb-color-primary);
+  --sbb-button-color-default-border: var(--sbb-color-primary);
+  --sbb-button-color-default-text: var(--sbb-color-1-negative);
+  --sbb-button-color-hover-background: var(--sbb-color-primary125);
+  --sbb-button-color-hover-border: var(--sbb-color-primary125);
+  --sbb-button-color-hover-text: var(--sbb-color-3-negative);
+  --sbb-button-color-loading-border: color-mix(
+    in srgb,
+    var(--sbb-button-color-active-background) 70%,
+    var(--sbb-button-color-default-text)
+  );
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-primary) 60%, transparent);
+  --sbb-button-shadow-1-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-primary) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-primary) 40%, transparent)
+  );
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent);
+  --sbb-button-shadow-2-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-primary125) 60%, transparent),
+    color-mix(in srgb, var(--sbb-color-primary125) 40%, transparent)
+  );
+}
+:is(.sbb-button, .sbb-button-s, .sbb-button-m, .sbb-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
+  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
+}
+
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l) {
+  --sbb-button-color-active-background: var(--sbb-background-color-3);
+  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);
+  --sbb-button-color-active-text: var(--sbb-color-anthracite);
+  --sbb-button-color-active-text: light-dark(
+    var(--sbb-color-anthracite),
+    var(--sbb-color-graphite)
+  );
+  --sbb-button-color-default-background: var(--sbb-background-color-1);
+  --sbb-button-color-default-border: var(--sbb-border-color-4-inverted);
+  --sbb-button-color-default-text: var(--sbb-color-3);
+  --sbb-button-color-hover-background: var(--sbb-background-color-1);
+  --sbb-button-color-hover-border: var(--sbb-border-color-4-inverted);
+  --sbb-button-color-hover-text: var(--sbb-color-4);
+  --sbb-button-color-loading-border: var(--sbb-border-color-4-inverted);
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);
+  --sbb-button-shadow-1-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);
+  --sbb-button-shadow-2-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+  --sbb-button-border-overlap-fix: 0rem;
+}
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l).sbb-negative {
+  --sbb-button-color-active-background: var(--sbb-background-color-2-negative);
+  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);
+  --sbb-button-color-active-text: var(--sbb-color-graphite);
+  --sbb-button-color-default-background: var(--sbb-background-color-1-negative);
+  --sbb-button-color-default-border: var(--sbb-border-color-4-negative-inverted);
+  --sbb-button-color-default-text: var(--sbb-color-3-negative);
+  --sbb-button-color-hover-background: var(--sbb-background-color-1-negative);
+  --sbb-button-color-hover-border: var(--sbb-border-color-4-negative-inverted);
+  --sbb-button-color-hover-text: var(--sbb-color-4-negative);
+  --sbb-button-color-loading-border: var(--sbb-border-color-4-negative-inverted);
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+}
+:is(.sbb-secondary-button,
+.sbb-secondary-button-s,
+.sbb-secondary-button-m,
+.sbb-secondary-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
+  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
+}
+
+:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l) {
+  --sbb-button-color-active-background: var(--sbb-background-color-1-inverted);
+  --sbb-button-color-active-border: var(--sbb-border-color-1);
+  --sbb-button-color-active-text: var(--sbb-color-cloud);
+  --sbb-button-color-active-text: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
+  --sbb-button-color-default-background: var(--sbb-background-color-3-inverted);
+  --sbb-button-color-default-border: var(--sbb-border-color-3);
+  --sbb-button-color-default-text: var(--sbb-color-1-inverted);
+  --sbb-button-color-hover-background: var(--sbb-background-color-3-inverted);
+  --sbb-button-color-hover-border: var(--sbb-border-color-3);
+  --sbb-button-color-hover-text: var(--sbb-color-3-inverted);
+  --sbb-button-color-loading-border: var(--sbb-color-iron);
+  --sbb-button-color-loading-border: light-dark(var(--sbb-color-iron), var(--sbb-color-silver));
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent);
+  --sbb-button-shadow-1-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-platinum) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-cement) 20%, transparent);
+  --sbb-button-shadow-2-color: light-dark(
+    color-mix(in srgb, var(--sbb-color-cement) 20%, transparent),
+    color-mix(in srgb, var(--sbb-color-black) 30%, transparent)
+  );
+}
+:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l).sbb-negative {
+  --sbb-button-color-active-background: var(--sbb-background-color-1-negative-inverted);
+  --sbb-button-color-active-border: var(--sbb-border-color-1-negative);
+  --sbb-button-color-active-text: var(--sbb-color-anthracite);
+  --sbb-button-color-default-background: var(--sbb-background-color-3-negative-inverted);
+  --sbb-button-color-default-border: var(--sbb-border-color-3-negative);
+  --sbb-button-color-default-text: var(--sbb-color-1-negative-inverted);
+  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative-inverted);
+  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative);
+  --sbb-button-color-hover-text: var(--sbb-color-4-negative-inverted);
+  --sbb-button-color-loading-border: var(--sbb-color-silver);
+  --sbb-button-shadow-1-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+  --sbb-button-shadow-2-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);
+}
+:is(.sbb-accent-button, .sbb-accent-button-s, .sbb-accent-button-m, .sbb-accent-button-l):not([disabled], :disabled, [disabled-interactive], .sbb-disabled-interactive, :active, :is(:state(active),[state--active]), [loading], .sbb-loading) {
+  --sbb-button-box-shadow: var(--sbb-button-box-shadow-definition);
+}
+
+:is(.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l) {
+  --sbb-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-button-color-active-border: var(--sbb-border-color-4-inverted);
+  --sbb-button-color-active-text: var(--sbb-color-1);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-default-border: transparent;
+  --sbb-button-color-default-text: var(--sbb-color-1);
+  --sbb-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-button-color-hover-border: var(--sbb-border-color-3-inverted);
+  --sbb-button-color-hover-text: var(--sbb-color-1);
+  --sbb-button-color-loading-border: var(--sbb-color-silver);
+  --sbb-button-color-loading-border: light-dark(var(--sbb-color-silver), var(--sbb-color-granite));
+}
+:is(.sbb-transparent-button,
+.sbb-transparent-button-s,
+.sbb-transparent-button-m,
+.sbb-transparent-button-l).sbb-negative {
+  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
+  --sbb-button-color-active-border: var(--sbb-border-color-4-negative-inverted);
+  --sbb-button-color-active-text: var(--sbb-color-1-negative);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-default-border: transparent;
+  --sbb-button-color-default-text: var(--sbb-color-1-negative);
+  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-hover-border: var(--sbb-border-color-3-negative-inverted);
+  --sbb-button-color-hover-text: var(--sbb-color-1-negative);
+  --sbb-button-color-loading-border: var(--sbb-color-granite);
+}
+
+@keyframes sbb-button-rotate {
+  from {
+    --sbb-button-loading-angle: -90deg;
+  }
+  to {
+    --sbb-button-loading-angle: 270deg;
+  }
+}
+@keyframes sbb-button-move {
+  from {
+    --sbb-button-loading-offset: 0%;
+  }
+  to {
+    --sbb-button-loading-offset: 100%;
+  }
+}
+@property --sbb-button-loading-angle {
+  syntax: "<angle>";
+  initial-value: 0deg;
+  inherits: false;
+}
+@property --sbb-button-loading-offset {
+  syntax: "<percentage>";
+  initial-value: 0%;
+  inherits: false;
+}
 sbb-card .sbb-action {
   pointer-events: all;
 }