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

.db-stack {
  gap: var(--db-spacing-fixed-sm);
  justify-content: flex-start;
  block-size: 100%;
  inline-size: 100%;
  overflow: auto;
}
.db-stack:not([hidden]) {
  display: flex;
}
.db-stack:is([data-direction=column], :not([data-direction])) {
  flex-direction: column;
}
.db-stack > .db-divider,
.db-stack > db-divider > .db-divider {
  margin: 0;
}
[data-direction=row].db-stack {
  flex-direction: row;
}
[data-wrap=true].db-stack {
  flex-wrap: wrap;
}
[data-alignment=stretch].db-stack {
  align-items: stretch;
}
[data-alignment=start].db-stack {
  align-items: flex-start;
}
[data-alignment=end].db-stack {
  align-items: flex-end;
}
[data-alignment=center].db-stack {
  align-items: center;
}
[data-justify-content=start].db-stack {
  justify-content: flex-start;
}
[data-justify-content=end].db-stack {
  justify-content: flex-end;
}
[data-justify-content=center].db-stack {
  justify-content: center;
}
[data-justify-content=space-between].db-stack {
  justify-content: space-between;
}
[data-gap="3x-small"].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-3xs);
}
[data-gap="2x-small"].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-2xs);
}
[data-gap=x-small].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-xs);
}
[data-gap=small].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-sm);
}
[data-gap=medium].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-md);
}
[data-gap=large].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-lg);
}
[data-gap=x-large].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-xl);
}
[data-gap="2x-large"].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-2xl);
}
[data-gap="3x-large"].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: var(--db-spacing-fixed-3xl);
}
[data-gap=none].db-stack {
  /* stylelint-disable-next-line db-ux/use-spacings */
  gap: 0;
}
