/* 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 */
.db-visually-hidden,
[data-visually-hidden=true] {
  clip: rect(0, 0, 0, 0) !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  font-size: 0 !important;
  all: initial;
  inset-block-start: 0 !important;
  block-size: 1px !important;
  position: absolute !important;
  inline-size: 1px !important;
  border-width: 0 !important;
  border-style: initial !important;
  border-color: initial !important;
  border-image: initial !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Variants for adaptive components like input, select, notification, ... */
/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-navigation > menu .db-navigation-item::after {
  content: "";
  position: absolute;
  border-radius: var(--db-border-radius-xs);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-navigation > menu .db-navigation-item::after {
    transition: height var(--db-transition-duration-fast) var(--db-transition-timing-emotional), width var(--db-transition-duration-fast) var(--db-transition-timing-emotional);
  }
}

.db-navigation > menu .db-navigation-item {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-navigation > menu .db-navigation-item::after {
  block-size: 0;
  inline-size: var(--db-border-height-xs);
  transform: translate(0, -50%);
  inset-block: 50% auto;
  background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
  inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
}
@media screen and (min-width: 64em) {
  .db-navigation > menu .db-navigation-item:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item::after {
    block-size: var(--db-border-height-xs);
    inline-size: 0;
    transform: translate(-50%, 0);
    inset-inline-start: 50%;
    background-color: var(--db-brand-on-bg-basic-emphasis-70-default);
    inset-block: auto calc(-1 * var(--db-spacing-fixed-xs));
  }
}

.db-navigation > menu .db-navigation-item:has([aria-current=page]), .db-navigation > menu .db-navigation-item:has([data-active=true]), .db-navigation > menu .db-navigation-item[aria-current=page], .db-navigation > menu .db-navigation-item[data-active=true] {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
  block-size: 100%;
  inline-size: var(--db-border-height-xs);
}
@media (forced-colors: active) {
  .db-navigation > menu .db-navigation-item:has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true]::after {
    border: calc(var(--db-border-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
  }
}
@media screen and (min-width: 64em) {
  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
    block-size: var(--db-border-height-xs);
    inline-size: 100%;
  }
}
@media screen and (min-width: 64em) and (forced-colors: active) {
  .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([aria-current=page])::after, .db-navigation > menu .db-navigation-item:not([data-force-mobile]):has([data-active=true])::after, .db-navigation > menu .db-navigation-item[aria-current=page]:not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item[data-active=true]:not([data-force-mobile])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([aria-current=page])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item:has([data-active=true])::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[aria-current=page]::after, .db-navigation > menu [data-force-mobile=false].db-navigation-item[data-active=true]::after {
    border: calc(var(--db-border-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
  }
}

.db-navigation {
  -webkit-tap-highlight-color: transparent; /* for removing the highlight */
  inline-size: 100%;
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 64em) {
  .db-navigation:not([data-force-mobile]), .db-navigation[data-force-mobile=false] {
    -webkit-tap-highlight-color: inherit;
    inline-size: auto;
  }
}
.db-navigation > menu {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  gap: var(--db-spacing-fixed-sm);
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 64em) {
  .db-navigation > menu:not([data-force-mobile]), .db-navigation > menu[data-force-mobile=false] {
    flex-direction: row;
  }
}
.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 64em) {
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
    --db-icon-margin-start: var(--db-spacing-fixed-sm);
    --db-icon-after: "chevron_down";
  }
}
@media screen and (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
    transition: transform var(--db-transition-straight-emotional);
  }
}
@media screen and (min-width: 64em) {
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after, .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after {
    transform: rotate(-180deg);
  }
}
.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button),
.db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 64em) {
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile])::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile])::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]::after {
    --db-icon-after: "chevron_right";
    --db-icon-margin-start: auto;
  }
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]):is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button):not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after, .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false]:is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button:is(button)[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button:not([data-force-mobile]) :has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible)::after,
  .db-navigation > menu .db-navigation-item > menu .db-navigation-item-expand-button > button[data-force-mobile=false] :has(~ .db-sub-navigation:is(:hover,
  :focus-visible,
  :focus-within))::after {
    transform: none;
  }
}
.db-navigation > menu .db-navigation-item:has([aria-current=page]) menu :has([aria-current=page])::after,
.db-navigation > menu .db-navigation-item:has([aria-current=page]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item:has([data-active=true]) menu :has([aria-current=page])::after,
.db-navigation > menu .db-navigation-item:has([data-active=true]) menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[aria-current=page] menu :has([aria-current=page])::after,
.db-navigation > menu .db-navigation-item[aria-current=page] menu [aria-current=page]::after, .db-navigation > menu .db-navigation-item[data-active=true] menu :has([aria-current=page])::after,
.db-navigation > menu .db-navigation-item[data-active=true] menu [aria-current=page]::after {
  display: none;
}
.db-navigation > menu .db-navigation-item .db-navigation-item::after {
  display: none;
}
.db-navigation[data-force-close=true] > menu menu {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media screen and (min-width: 64em) {
  .db-navigation[data-force-close=true] > menu menu:not([data-force-mobile]), .db-navigation[data-force-close=true] > menu menu[data-force-mobile=false] {
    display: none;
  }
}