/* 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 */
/* Transitions */
/* Variants for adaptive components like input, select, notification, ... */
.db-section {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-section:not([data-width]), .db-section[data-width=full] {
  padding-inline: var(--db-spacing-fixed-md);
}
.db-section[data-width=medium] {
  padding-inline: max(var(--db-spacing-fixed-md) + (100vw - 64em) / 2, var(--db-spacing-fixed-md));
}
.db-section[data-width=large] {
  padding-inline: max(var(--db-spacing-fixed-md) + (100vw - 90em) / 2, var(--db-spacing-fixed-md));
}
.db-section:not([data-spacing]) {
  padding-block: var(--db-spacing-responsive-md);
}
.db-section[data-spacing=large] {
  padding-block: var(--db-spacing-responsive-lg);
}
.db-section[data-spacing=medium] {
  padding-block: var(--db-spacing-responsive-md);
}
.db-section[data-spacing=small] {
  padding-block: var(--db-spacing-responsive-sm);
}
.db-section[data-spacing=none] {
  padding-block: 0;
}