/* Use sizing's for fixed heights/widths e.g. the db-button has always a fixed height */
/* Use fixed spacings for all kind of distances (margin, padding, ...) */
/* The primary use-case for responsive spacings are
paddings/gaps in an application e.g. the <main> should have a responsive padding. */
/* Elevation */
/* Border */
/* Opacity */
/* Transitions */
/* Screen sizes */
/* Container sizes */
/* Variants for adaptive components like input, select, notification, ... */
@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 {}

/**
 * @mixin screen-min-max
 * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
 */
.db-card {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.db-card {
  /* stylelint-disable-next-line db-ux/use-border-radius */
  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
}

:is(a[href], button) {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
:is(a[href], button):has(.db-card) {
  text-decoration: unset;
  margin: unset;
  border: unset;
  background-color: transparent;
  padding: unset;
  font: inherit;
}
:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
}
:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > .db-card,
:is(a[href], button):hover:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
  background-color: var(--db-card-background-color-hovered);
}
:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
:is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
:is(a[href], button):active:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
}
:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > .db-card,
:is(a[href], button):active:not(:disabled, [aria-disabled=true]) > db-card > .db-card {
  background-color: var(--db-card-background-color-pressed);
}
:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(textarea), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
:is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), :is(a[href], button):active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}

.db-card {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-1-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-1-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-1-pressed);
  /* stylelint-disable-next-line at-rule-empty-line-before */
  flex-direction: column;
  background-color: var(--db-card-background-color-default);
}
.db-card:not([data-spacing]) {
  padding: var(--db-spacing-fixed-sm);
}
.db-card[data-spacing=large] {
  padding: var(--db-spacing-fixed-lg);
}
.db-card[data-spacing=medium] {
  padding: var(--db-spacing-fixed-md);
}
.db-card[data-spacing=small] {
  padding: var(--db-spacing-fixed-sm);
}
.db-card[data-spacing=none] {
  padding: 0;
}
.db-card:not([hidden]) {
  display: flex;
}
.db-card[data-behavior=interactive] {
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-card-background-color-hovered);
}
.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
  background-color: var(--db-card-background-color-pressed);
}
.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-card[data-behavior=interactive]:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-card[data-elevation-level="2"] {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-2-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-2-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-2-pressed);
}
.db-card[data-elevation-level="3"] {
  --db-card-background-color-default: var(--db-adaptive-bg-basic-level-3-default);
  --db-card-background-color-hovered: var(--db-adaptive-bg-basic-level-3-hovered);
  --db-card-background-color-pressed: var(--db-adaptive-bg-basic-level-3-pressed);
}
