@db-ux/core-components 4.4.3 → 4.5.1

package/build/components/custom-button/custom-button.css

@@ -0,0 +1,893 @@
+/* Variants for adaptive components like input, select, notification, ... */
+.db-custom-button input {
+  clip: rect(0, 0, 0, 0) !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  font-size: 0 !important;
+  all: initial;
+  inset-block-start: 0 !important;
+  block-size: 1px !important;
+  position: absolute !important;
+  inline-size: 1px !important;
+  border-width: 0 !important;
+  border-style: initial !important;
+  border-color: initial !important;
+  border-image: initial !important;
+  padding: 0 !important;
+  pointer-events: none !important;
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-custom-button:not([data-disable-focus=true]):has(input):focus-within {
+  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
+  outline-offset: var(--db-border-width-xs);
+  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
+}
+@media screen and (prefers-reduced-motion: no-preference) {
+  .db-custom-button:not([data-disable-focus=true]):has(input):focus-within {
+    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
+  }
+}
+.db-custom-button:not([data-disable-focus=true]):not([type=radio], [role=switch]):has(input):focus-within {
+  border-radius: var(--db-border-radius-xs);
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-custom-button label, .db-custom-button button, .db-custom-button a {
+  font: var(--db-type-body-md);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-custom-button label, .db-custom-button button, .db-custom-button a {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-md);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-md);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
+  font: var(--db-type-body-sm);
+  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
+}
+@layer variables {
+  .db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
+    /* Those variables are only for components to calculate heights and change icons */
+    --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
+    --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
+  }
+}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+@layer variables {}
+
+.db-custom-button label, .db-custom-button button, .db-custom-button a {
+  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
+}
+
+.db-custom-button[data-variant=filled] label, .db-custom-button[data-variant=filled] button, .db-custom-button[data-variant=filled] a, .db-custom-button[data-variant=ghost] label, .db-custom-button[data-variant=ghost] button, .db-custom-button[data-variant=ghost] a {
+  border: var(--db-border-width-3xs) solid transparent;
+}
+
+.db-custom-button label, .db-custom-button button, .db-custom-button a {
+  border-radius: var(--db-border-radius-xs);
+}
+
+.db-custom-button label, .db-custom-button button, .db-custom-button a {
+  font-weight: 700;
+  overflow-wrap: break-word;
+  white-space: pre-line;
+  justify-content: center;
+  text-align: center;
+  align-items: center;
+  vertical-align: top;
+}
+.db-custom-button label:not([hidden]), .db-custom-button button:not([hidden]), .db-custom-button a:not([hidden]) {
+  display: inline-flex;
+}
+
+.db-custom-button[data-variant=outlined] label, .db-custom-button[data-variant=outlined] button, .db-custom-button[data-variant=outlined] a, .db-custom-button:not([data-variant]) label, .db-custom-button:not([data-variant]) button, .db-custom-button:not([data-variant]) a, .db-custom-button[data-variant=""] label, .db-custom-button[data-variant=""] button, .db-custom-button[data-variant=""] a, .db-custom-button[data-variant=ghost] label, .db-custom-button[data-variant=ghost] button, .db-custom-button[data-variant=ghost] a, .db-custom-button[data-variant=brand] label {
+  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-custom-button[data-variant=outlined] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
+}
+.db-custom-button[data-variant=outlined] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=outlined] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=brand] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-custom-button[data-variant=outlined] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button:not([data-variant]) a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=""] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=brand] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-full-pressed);
+}
+.db-custom-button[data-variant=outlined] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button:not([data-variant]) a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=""] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=brand] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=outlined] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button:not([data-variant]) a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=""] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=brand] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=outlined] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button:not([data-variant]) a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=""] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=brand] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=outlined] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=outlined] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button:not([data-variant]) a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=""] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=ghost] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=brand] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+
+.db-custom-button[data-variant=brand] :is(a, button) {
+  background-color: var(--db-brand-origin-default);
+  color: var(--db-brand-on-origin-default);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-custom-button[data-variant=brand] :hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(a, button) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-brand-origin-hovered);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+}
+.db-custom-button[data-variant=brand] :hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):is(a, button), .db-custom-button[data-variant=brand] :hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):is(a, button) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=brand] :hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):is(a, button), .db-custom-button[data-variant=brand] :hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):is(a, button) {
+  cursor: pointer;
+}
+.db-custom-button[data-variant=brand] :active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(a, button) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-brand-origin-pressed);
+  border-color: var(--db-brand-on-bg-basic-emphasis-70-default);
+}
+.db-custom-button[data-variant=brand] :active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea):is(a, button), .db-custom-button[data-variant=brand] :active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input):is(a, button) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=brand] :active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]):is(a, button), .db-custom-button[data-variant=brand] :active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)):is(a, button) {
+  cursor: pointer;
+}
+
+.db-custom-button {
+  position: relative;
+  max-inline-size: 100%;
+  inline-size: fit-content;
+}
+.db-custom-button label, .db-custom-button button, .db-custom-button a {
+  max-inline-size: 100%;
+  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
+  min-block-size: var(--db-sizing-md);
+  block-size: max-content;
+  inline-size: fit-content;
+  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-md);
+  text-decoration: none;
+}
+.db-custom-button[data-no-text=true] label, .db-custom-button[data-no-text=true] button, .db-custom-button[data-no-text=true] a {
+  padding: 0;
+  inline-size: var(--db-sizing-md);
+  block-size: var(--db-sizing-md);
+  font-size: 0 !important;
+  /* stylelint-disable-next-line at-rule-empty-line-before */
+}
+.db-custom-button[data-no-text=true] label::before, .db-custom-button[data-no-text=true] button::before, .db-custom-button[data-no-text=true] a::before {
+  --db-icon-margin-end: 0;
+}
+.db-custom-button[data-no-text=true] label::before, .db-custom-button[data-no-text=true] button::before, .db-custom-button[data-no-text=true] a::before {
+  margin: auto;
+}
+.db-custom-button[data-wrap=false] label, .db-custom-button[data-wrap=false] button, .db-custom-button[data-wrap=false] a {
+  white-space: nowrap;
+}
+.db-custom-button[data-size=small] label, .db-custom-button[data-size=small] button, .db-custom-button[data-size=small] a {
+  font-weight: 700;
+  min-block-size: var(--db-sizing-sm);
+}
+.db-custom-button[data-size=small] label:not([data-no-text=true]), .db-custom-button[data-size=small] button:not([data-no-text=true]), .db-custom-button[data-size=small] a:not([data-no-text=true]) {
+  padding: 1px var(--db-spacing-fixed-sm);
+}
+.db-custom-button[data-size=small] label:not([data-no-text=true])::before, .db-custom-button[data-size=small] button:not([data-no-text=true])::before, .db-custom-button[data-size=small] a:not([data-no-text=true])::before {
+  margin-inline-end: var(--db-spacing-fixed-2xs);
+}
+.db-custom-button[data-size=small] label[data-no-text=true], .db-custom-button[data-size=small] button[data-no-text=true], .db-custom-button[data-size=small] a[data-no-text=true] {
+  inline-size: var(--db-sizing-sm);
+  block-size: var(--db-sizing-sm);
+}
+.db-custom-button[data-width=full]:not([data-no-text=true]) label, .db-custom-button[data-width=full]:not([data-no-text=true]) button, .db-custom-button[data-width=full]:not([data-no-text=true]) a {
+  inline-size: 100%;
+}
+.db-custom-button[data-variant=filled] label, .db-custom-button[data-variant=filled] button, .db-custom-button[data-variant=filled] a {
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-custom-button[data-variant=filled] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-hovered);
+}
+.db-custom-button[data-variant=filled] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=filled] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] label:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] button:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] a:hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-custom-button[data-variant=filled] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=filled] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)), .db-custom-button[data-variant=filled] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-basic-transparent-semi-pressed);
+}
+.db-custom-button[data-variant=filled] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=filled] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input), .db-custom-button[data-variant=filled] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button[data-variant=filled] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button[data-variant=filled] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] label:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] button:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)), .db-custom-button[data-variant=filled] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button[data-variant=filled] a:active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false])::before, .db-custom-button[data-icon]:not([data-show-icon=false])::before {
+  position: absolute;
+  inset-block-start: calc(50% - 0.5em);
+  inset-inline-start: var(--db-spacing-fixed-sm);
+  pointer-events: none;
+  z-index: 1;
+}
+.db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) label, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) button, .db-custom-button[data-icon-leading]:not([data-show-icon-leading=false]) a, .db-custom-button[data-icon]:not([data-show-icon=false]) label, .db-custom-button[data-icon]:not([data-show-icon=false]) button, .db-custom-button[data-icon]:not([data-show-icon=false]) a {
+  --db-padding-inline-start: calc(
+  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
+  		var(--db-icon-font-size)
+  );
+  /* stylelint-disable-next-line db-ux/use-spacings */
+  padding-inline-start: var(--db-padding-inline-start);
+}
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false])::after {
+  position: absolute;
+  inset-block-start: calc(50% - 0.5em);
+  inset-inline-end: var(--db-spacing-fixed-sm);
+  pointer-events: none;
+  z-index: 1;
+}
+.db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) label, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) button, .db-custom-button[data-icon-trailing]:not([data-show-icon-trailing=false]) a {
+  padding-inline-end: calc(var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) + var(--db-icon-font-size));
+}
+.db-custom-button:has(:is(input, button):disabled, :is(input, button, a)[aria-disabled=true]) {
+  opacity: var(--db-opacity-md);
+}
+.db-custom-button label:has(input:checked) {
+  color: var(--db-adaptive-on-bg-inverted-default);
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-default);
+}
+.db-custom-button label:has(input[type=checkbox]:checked) {
+  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
+}
+.db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-hovered);
+}
+.db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button label:has(input[type=checkbox]:checked):hover:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)) {
+  cursor: var(--db-overwrite-cursor, pointer);
+  background-color: var(--db-adaptive-bg-inverted-contrast-max-pressed);
+}
+.db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(textarea), .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input) {
+  cursor: initial;
+}
+.db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=checkbox]), .db-custom-button label:has(input[type=checkbox]:checked):active:not(:disabled,
+[aria-disabled=true],
+[tabindex="-1"],
+:has(:disabled)):is(input[type=radio]:not(:checked)) {
+  cursor: pointer;
+}
+.db-custom-button a[tabindex="-1"] {
+  cursor: default;
+  pointer-events: none;
+}
+.db-custom-button[data-width=full] {
+  inline-size: 100%;
+}