/* 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-divider:is(:not([data-margin]), [data-margin=small]) {
  margin: var(--db-spacing-fixed-sm) 0;
}
.db-divider[data-margin=medium] {
  margin: var(--db-spacing-fixed-md) 0;
}
.db-divider[data-margin=large] {
  margin: var(--db-spacing-fixed-lg) 0;
}
.db-divider:not([data-variant=vertical]) {
  block-size: var(--db-border-width-3xs);
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider:not([data-variant=vertical])[data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider:not([data-variant=vertical])::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  block-size: var(--db-border-width-3xs);
  inset-block-start: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media (forced-colors: active) {
  .db-divider:not([data-variant=vertical]) {
    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider:not([data-variant=vertical])[data-width=full] {
  inline-size: 100%;
}
.db-divider[data-variant=vertical] {
  inline-size: var(--db-border-width-3xs);
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: var(--db-tooltip-parent-position, relative);
}
.db-divider[data-variant=vertical][data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-divider[data-variant=vertical]::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  inline-size: var(--db-border-width-3xs);
  inset-inline-start: 0;
  inset-block: 0;
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media (forced-colors: active) {
  .db-divider[data-variant=vertical] {
    /* stylelint-disable-next-line no-invalid-position-declaration, db-ux/use-border-color */
    border: var(--db-border-width-3xs) solid var(--db-divider-bg-color);
  }
}
.db-divider[data-variant=vertical]:is(:not([data-margin]), [data-margin=small]) {
  margin: 0 var(--db-spacing-fixed-sm);
}
.db-divider[data-variant=vertical][data-margin=medium] {
  margin: 0 var(--db-spacing-fixed-md);
}
.db-divider[data-variant=vertical][data-margin=large] {
  margin: 0 var(--db-spacing-fixed-lg);
}
.db-divider[data-variant=vertical][data-width=full] {
  block-size: 100%;
}
