/* 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;
}

.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 (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);
}

.db-custom-button label, .db-custom-button button, .db-custom-button a {
  font: var(--db-type-body-md);
  /* 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);
}

.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);
  /* 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);
}

.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-icon-passing-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)) + 1lh
  );
  /* 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[data-no-text=true] {
  --db-icon-margin-end: 0;
  --db-icon-passing-inline-start: calc(50% - 0.5em);
}
.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%;
}
