/* 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-icon {
  font-size: 0 !important;
  /* stylelint-disable-next-line at-rule-empty-line-before */
  /* Safari hack */
}
.db-icon::before {
  --db-icon-margin-end: 0;
}
@supports (-webkit-hyphens: none) {
  .db-icon:not([hidden]) {
    display: inline-block;
  }
  .db-icon::before {
    block-size: auto;
  }
}
