/* 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, ... */
/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-navigation-item, .db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button {
  /* Those variables are only for components to calculate heights and change icons */
  --db-icon-font-weight: var(--db-base-body-icon-weight-md);
  --db-icon-font-size: var(--db-base-body-icon-font-size-md);
  --db-base-line-height: var(--db-type-body-line-height-md);
  --db-base-font-size: var(--db-type-body-font-size-md);
  line-height: var(--db-type-body-line-height-md);
  font-size: var(--db-type-body-font-size-md);
}

@keyframes show-right-to-left {
  from {
    transform: translateX(110%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes hide-right-to-left {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(110%);
  }
}
@keyframes show-left-to-right {
  from {
    transform: translateX(-110%);
  }
  to {
    transform: translateX(0%);
  }
}
@keyframes hide-left-to-right {
  from {
    transform: translateX(0%);
  }
  to {
    transform: translateX(-110%);
  }
}
@keyframes show-bottom-to-top {
  from {
    transform: translateY(110%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes hide-bottom-to-top {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(110%);
  }
}
@keyframes show-top-to-bottom {
  from {
    transform: translateY(-110%);
  }
  to {
    transform: translateY(0%);
  }
}
@keyframes hide-top-to-bottom {
  from {
    transform: translateY(0%);
  }
  to {
    transform: translateY(-110%);
  }
}
@keyframes accordion-open {
  0% {
    opacity: 0;
    transform: translateY(-10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@keyframes popover-animation {
  0% {
    opacity: 0;
    transform: translate(var(--db-popover-center-x, var(--db-popover-translate-x, 0%)), var(--db-popover-center-y, var(--db-popover-translate-y, 0%)));
  }
  100% {
    opacity: 1;
    transform: translate(var(--db-popover-center-x, 0%), var(--db-popover-center-y, 0%));
  }
}
.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
.db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
  content: var(--db-icon, attr(data-icon));
  content: var(--db-icon, attr(data-icon))/"";
  -webkit-alt: "";
  alt: "";
  color: var(--db-icon-color, inherit);
  display: inline-block;
  /*** icon - placeholder ***/
  font-family: var(--db-icon-font-family, var(--db-icon-default-font-family, "db-ux-default")) !important;
  font-size: var(--db-icon-font-size, 1.5rem);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: var(--db-icon-font-weight, normal);
  line-height: 1;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  speak: none;
  /* stylelint-disable-next-line declaration-property-value-no-unknown */
  speak: never;
  text-transform: none;
  vertical-align: middle;
  block-size: var(--db-icon-font-size, 1.5rem);
  inline-size: var(--db-icon-font-size, 1.5rem);
}
@media aural {
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
    content: none;
  }
}
@media speech {
  .db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
    content: none;
  }
}

.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button {
  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
}

.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button {
  border: var(--db-border-height-3xs) solid transparent;
}

.db-navigation-item a, .db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button {
  border-radius: var(--db-border-radius-xs);
}

.db-navigation-item .db-navigation-item-expand-button:is(button),
.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-item .db-navigation-item-expand-button:not([data-force-mobile]):is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
  .db-navigation-item .db-navigation-item-expand-button > button:not([data-force-mobile]):is(:hover, :focus-visible) ~ .db-sub-navigation, .db-navigation-item [data-force-mobile=false].db-navigation-item-expand-button:is(:hover, :focus-visible):is(button) ~ .db-sub-navigation,
  .db-navigation-item .db-navigation-item-expand-button > button[data-force-mobile=false]:is(:hover, :focus-visible) ~ .db-sub-navigation {
    visibility: visible;
  }
}

.db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button, .db-navigation-item a {
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
  cursor: pointer;
  inline-size: 100%;
  display: inline-flex;
  border-radius: var(--db-border-radius-sm);
  padding: var(--db-spacing-fixed-xs) var(--db-spacing-fixed-sm);
  white-space: nowrap;
  text-align: center;
  align-items: center;
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]) {
  cursor: pointer;
  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
}
.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(textarea):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-navigation-item a:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]) {
  cursor: pointer;
  background-color: var(--db-adaptive-bg-basic-transparent-pressed);
}
.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(textarea):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(textarea), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-navigation-item .db-navigation-item-expand-button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)), .db-navigation-item a:active:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-navigation-item .db-navigation-item-expand-button:has(~ .db-sub-navigation:is(:hover, :focus)):is(button),
.db-navigation-item .db-navigation-item-expand-button > button:has(~ .db-sub-navigation:is(:hover, :focus)), .db-navigation-item a:has(~ .db-sub-navigation:is(:hover, :focus)) {
  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
}

.db-navigation-item {
  --db-has-before: 0;
  display: inline-flex;
  position: relative;
  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 */
}
.db-navigation-item[data-icon]::before {
  position: absolute;
  inset-block-start: calc(50% - 0.5em);
  inset-inline-start: var(--db-spacing-fixed-sm);
  pointer-events: none;
  z-index: 1;
}
.db-navigation-item[data-icon] a,
.db-navigation-item[data-icon] button,
.db-navigation-item[data-icon] label {
  --db-padding-inline-start: calc(
  	var(--db-spacing-fixed-sm) + var(--db-icon-margin-end, var(--db-spacing-fixed-xs)) +
  		var(--db-base-font-size) * var(--db-base-line-height)
  );
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline-start: var(--db-padding-inline-start);
}
.db-navigation-item[data-force-mobile=true]:not([data-width=full]) .db-navigation-item-expand-button::after {
  --db-icon-margin-start: auto;
}
@media screen and (max-width: 63.9375em) {
  .db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
    --db-icon-margin-start: auto;
  }
}
.db-navigation-item a {
  text-decoration: none;
}
.db-navigation-item a:focus-visible {
  z-index: 1;
}
.db-navigation-item .db-navigation-item-expand-button {
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
}
.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
  visibility: visible;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation {
    transition: visibility 0ms linear 0ms;
    animation: show-right-to-left var(--db-transition-straight-show);
  }
}
.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
  inset-block: 0;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true]:not(.db-navigation-item .db-navigation-item-expand-button[data-force-mobile=true][aria-expanded=true]) ~ .db-sub-navigation {
    transition: visibility 0ms linear 410ms;
    animation: hide-right-to-left var(--db-transition-straight-hide);
  }
}
@media screen and (max-width: 63.9375em) {
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
    visibility: visible;
  }
}
@media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation {
    transition: visibility 0ms linear 0ms;
    animation: show-right-to-left var(--db-transition-straight-show);
  }
}
@media screen and (max-width: 63.9375em) {
  .db-navigation-item .db-navigation-item-expand-button[aria-expanded=true] ~ .db-sub-navigation .db-sub-navigation {
    inset-block: 0;
  }
}
@media screen and (max-width: 63.9375em) and (prefers-reduced-motion: no-preference) {
  .db-navigation-item .db-navigation-item-expand-button:not(.db-navigation-item .db-navigation-item-expand-button[aria-expanded=true]) ~ .db-sub-navigation {
    transition: visibility 0ms linear 410ms;
    animation: hide-right-to-left var(--db-transition-straight-hide);
  }
}
.db-navigation-item .db-navigation-item-expand-button:is(button),
.db-navigation-item .db-navigation-item-expand-button > button {
  font-weight: inherit;
}
.db-navigation-item .db-navigation-item-expand-button:is(button):not([data-hide-icon-after=true])::after,
.db-navigation-item .db-navigation-item-expand-button > button:not([data-hide-icon-after=true])::after {
  --db-icon-after: "chevron_right";
  content: var(--db-icon-after, attr(data-icon-after));
  content: var(--db-icon-after, attr(data-icon-after))/"";
  margin-inline-start: var(--db-icon-margin-start, var(--db-spacing-fixed-xs));
}
.db-navigation-item:has([aria-current=page]) > :is(a, button), .db-navigation-item:has([data-active=true]) > :is(a, button), .db-navigation-item[aria-current=page] > :is(a, button), .db-navigation-item[data-active=true] > :is(a, button) {
  font-weight: 700;
}
.db-navigation-item:not([data-width=full]) .db-navigation-item-expand-button::after {
  --db-icon-margin-start: var(--db-spacing-fixed-sm);
}
.db-navigation-item[data-width=full] {
  inline-size: 100%;
}
.db-navigation-item[data-width=full] .db-navigation-item-expand-button::after {
  --db-icon-margin-start: auto;
}
.db-navigation-item[aria-disabled=true] {
  opacity: 0.4;
  pointer-events: none;
}

.db-sub-navigation {
  margin: 0;
  display: flex;
  flex-direction: column;
  z-index: 70;
  inset-inline-start: 0;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  visibility: hidden;
  /* stylelint-disable at-rule-empty-line-before */
  /* stylelint-enable at-rule-empty-line-before */
  /* stylelint-disable-next-line media-query-no-invalid */
  /* 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 */
  /* 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-sub-navigation[data-force-mobile=true] {
  padding: var(--db-spacing-fixed-md);
  inline-size: 100%;
  position: fixed;
  overflow: hidden auto;
  inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
}
@media screen and (max-width: 63.9375em) {
  .db-sub-navigation {
    padding: var(--db-spacing-fixed-md);
    inline-size: 100%;
    position: fixed;
    overflow: hidden auto;
    inset-block: calc(calc(var(--db-sizing-md) + 2 * var(--db-spacing-fixed-xs)) + var(--db-spacing-fixed-3xs)) calc(var(--db-sizing-md) + var(--db-spacing-fixed-xs) * 2 + var(--db-spacing-fixed-3xs));
  }
}
@media screen and (min-width: 64em) {
  .db-sub-navigation:not([data-force-mobile]) .db-mobile-navigation-back, .db-sub-navigation[data-force-mobile=false] .db-mobile-navigation-back {
    display: none;
  }
}
@media screen and (min-width: 64em) {
  .db-sub-navigation:not([data-force-mobile]), .db-sub-navigation[data-force-mobile=false] {
    border-radius: var(--db-border-radius-sm);
    box-shadow: var(--db-elevation-md);
    padding: var(--db-spacing-fixed-sm);
    position: absolute;
    min-inline-size: 328px;
    inset-block-start: calc(100% + var(--db-spacing-fixed-md));
    transition: visibility 1ms linear;
  }
  .db-sub-navigation:not([data-force-mobile])[data-outside-vx=true], .db-sub-navigation[data-force-mobile=false][data-outside-vx=true] {
    transform: translateX(-100%);
    inset-inline-start: 100%;
  }
  .db-sub-navigation:not([data-force-mobile]):is(:hover, :focus-within), .db-sub-navigation[data-force-mobile=false]:is(:hover, :focus-within) {
    visibility: visible;
  }
  .db-sub-navigation:not([data-force-mobile])::before, .db-sub-navigation[data-force-mobile=false]::before {
    content: "";
    position: absolute;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: calc(var(--db-spacing-fixed-3xs) + var(--db-spacing-fixed-md));
    inset-block-start: calc(-1 * var(--db-spacing-fixed-md) - var(--db-spacing-fixed-3xs));
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation {
    inset-block-start: calc(-50% + var(--db-spacing-fixed-xs) + 1px);
    inset-inline-start: calc(100% + var(--db-spacing-fixed-xs));
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vy=bottom], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vy=bottom] {
    inset-block-start: calc(100% + var(--db-spacing-fixed-md));
    transform: translateY(-100%);
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right] {
    transform: translateX(-100%);
    inset-inline-start: calc(-1 * var(--db-spacing-fixed-xs));
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right][data-outside-vy=bottom], .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right][data-outside-vy=bottom] {
    transform: translate(-100%, -100%);
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation[data-outside-vx=right]::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation[data-outside-vx=right]::before {
    inset-block: auto 0;
    transform: translateX(100%) scaleX(-1);
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation::before, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    block-size: 100%;
    inline-size: var(--db-navigation-item-inline-size, 100%);
    background: transparent;
    transform: translateX(-100%);
    clip-path: var(--db-navigation-item-clip-path, polygon(10% 30px, 100% 0, 100% 100%));
  }
  .db-sub-navigation:not([data-force-mobile]) .db-sub-navigation::after, .db-sub-navigation[data-force-mobile=false] .db-sub-navigation::after {
    content: "";
    position: absolute;
    padding: var(--db-spacing-fixed-xs);
    inset-block-start: var(--db-spacing-fixed-3xs);
    inset-inline-end: calc(-1 * var(--db-spacing-fixed-xs));
    block-size: 100%;
    inline-size: var(--db-spacing-fixed-xs);
  }
}
.db-sub-navigation:empty {
  display: none;
}
.db-sub-navigation .db-navigation-item {
  inline-size: 100%;
}
.db-sub-navigation .db-navigation-item::after {
  margin-inline-start: auto;
}

.db-mobile-navigation-back {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: relative;
  display: flex;
  font-weight: normal;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  padding-block-end: var(--db-spacing-fixed-md);
  margin-block-end: var(--db-spacing-fixed-md);
}
.db-mobile-navigation-back[data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-mobile-navigation-back::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  block-size: var(--db-border-height-3xs);
  inset-block-end: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media (forced-colors: active) {
  .db-mobile-navigation-back {
    /* stylelint-disable-next-line db-ui/use-border-color */
    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
  }
}