/* 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-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;
}

/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-tabs .db-tab-item::after {
  content: "";
  position: absolute;
  border-radius: var(--db-border-radius-xs);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-tabs .db-tab-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-tabs db-tab-list:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0],
.db-tabs db-tab-list:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0],
.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ dbtabpanel > [id$=-tab-panel-0],
.db-tabs dbtablist:has([id$=-tab-0]:checked) ~ db-tab-panel > [id$=-tab-panel-0] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
.db-tabs db-tab-list:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1],
.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ dbtabpanel > [id$=-tab-panel-1],
.db-tabs dbtablist:has([id$=-tab-1]:checked) ~ db-tab-panel > [id$=-tab-panel-1] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
.db-tabs db-tab-list:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2],
.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ dbtabpanel > [id$=-tab-panel-2],
.db-tabs dbtablist:has([id$=-tab-2]:checked) ~ db-tab-panel > [id$=-tab-panel-2] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
.db-tabs db-tab-list:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3],
.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ dbtabpanel > [id$=-tab-panel-3],
.db-tabs dbtablist:has([id$=-tab-3]:checked) ~ db-tab-panel > [id$=-tab-panel-3] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
.db-tabs db-tab-list:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4],
.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ dbtabpanel > [id$=-tab-panel-4],
.db-tabs dbtablist:has([id$=-tab-4]:checked) ~ db-tab-panel > [id$=-tab-panel-4] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
.db-tabs db-tab-list:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5],
.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ dbtabpanel > [id$=-tab-panel-5],
.db-tabs dbtablist:has([id$=-tab-5]:checked) ~ db-tab-panel > [id$=-tab-panel-5] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
.db-tabs db-tab-list:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6],
.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ dbtabpanel > [id$=-tab-panel-6],
.db-tabs dbtablist:has([id$=-tab-6]:checked) ~ db-tab-panel > [id$=-tab-panel-6] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
.db-tabs db-tab-list:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7],
.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ dbtabpanel > [id$=-tab-panel-7],
.db-tabs dbtablist:has([id$=-tab-7]:checked) ~ db-tab-panel > [id$=-tab-panel-7] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
.db-tabs db-tab-list:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8],
.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ dbtabpanel > [id$=-tab-panel-8],
.db-tabs dbtablist:has([id$=-tab-8]:checked) ~ db-tab-panel > [id$=-tab-panel-8] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
.db-tabs db-tab-list:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9],
.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ dbtabpanel > [id$=-tab-panel-9],
.db-tabs dbtablist:has([id$=-tab-9]:checked) ~ db-tab-panel > [id$=-tab-panel-9] {
  display: block;
}
.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
.db-tabs db-tab-list:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10],
.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ dbtabpanel > [id$=-tab-panel-10],
.db-tabs dbtablist:has([id$=-tab-10]:checked) ~ db-tab-panel > [id$=-tab-panel-10] {
  display: block;
}

.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-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-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
  block-size: var(--db-border-height-xs);
  inline-size: 100%;
}
@media (forced-colors: active) {
  .db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
    border: calc(var(--db-border-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
  }
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item:has(input:checked)::after {
  inset-block-end: calc(-1 * (var(--db-spacing-fixed-2xs) + var(--db-border-height-xs)));
}

.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-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));
}
.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item::after {
  inset-inline-start: 0;
  z-index: -2;
}
.db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
  block-size: 100%;
  inline-size: var(--db-border-height-xs);
}
@media (forced-colors: active) {
  .db-tabs[data-orientation=vertical] .db-tab-list > ul .db-tab-item:has(input:checked)::after {
    border: calc(var(--db-border-height-xs) - 1px) solid var(--db-adaptive-on-bg-basic-emphasis-100-default);
  }
}

.db-tabs[data-orientation=vertical] .db-tab-list::before, .db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
  background-color: var(--db-adaptive-bg-basic-transparent-semi-default);
  content: "";
  border-radius: var(--db-border-radius-xs);
  position: absolute;
}

.db-tabs {
  display: flex;
  inline-size: 100%;
  position: relative;
  /*
  Variant Orientation HORIZONTAL
  	*/
  /*
  Variant Orientation VERTICAL
   */
}
.db-tabs .db-tab-panel {
  padding: 0 var(--db-spacing-fixed-xs);
}
.db-tabs .db-tab-list {
  max-inline-size: 100%;
  z-index: 20;
}
.db-tabs .db-tab-list:has([id$=-tab-0]:checked) ~ [id$=-tab-panel-0] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-1]:checked) ~ [id$=-tab-panel-1] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-2]:checked) ~ [id$=-tab-panel-2] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-3]:checked) ~ [id$=-tab-panel-3] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-4]:checked) ~ [id$=-tab-panel-4] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-5]:checked) ~ [id$=-tab-panel-5] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-6]:checked) ~ [id$=-tab-panel-6] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-7]:checked) ~ [id$=-tab-panel-7] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-8]:checked) ~ [id$=-tab-panel-8] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-9]:checked) ~ [id$=-tab-panel-9] {
  display: block;
}
.db-tabs .db-tab-list:has([id$=-tab-10]:checked) ~ [id$=-tab-panel-10] {
  display: block;
}
.db-tabs:not([data-orientation=vertical]) {
  flex-flow: column wrap;
}
.db-tabs:not([data-orientation=vertical]) .db-tab-panel {
  inline-size: 100%;
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list {
  /* horizontal track for pulse */
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list::before {
  block-size: var(--db-border-height-xs);
  inset-inline: var(--db-spacing-fixed-xs);
  /* top position equals sum of: margin xs + padding xs + line-height + padding xs + margin 2xs */
  inset-block-start: calc(3 * var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-2xs) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul {
  overflow: auto hidden;
  inline-size: 100%;
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul .db-tab-item {
  margin-block: var(--db-spacing-fixed-xs) calc(2 * var(--db-spacing-fixed-2xs) + var(--db-border-height-xs));
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:first-of-type .db-tab-item,
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:first-of-type .db-tab-item {
  margin-inline-start: var(--db-spacing-fixed-xs);
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul db-tab-item:last-of-type .db-tab-item,
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul dbtabitem:last-of-type .db-tab-item {
  margin-inline-end: var(--db-spacing-fixed-xs);
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
  margin-inline-start: var(--db-spacing-fixed-xs);
}
.db-tabs:not([data-orientation=vertical]) .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
  margin-inline-end: var(--db-spacing-fixed-xs);
}
.db-tabs[data-orientation=vertical] {
  flex-direction: row;
}
.db-tabs[data-orientation=vertical] .db-tab-panel {
  padding: var(--db-spacing-fixed-xs) 0;
}
.db-tabs[data-orientation=vertical] .db-tab-list {
  /*
  min and nominal size must both be set to ensure
  - min-inline-size: tab-list is not displayed narrower than defined
  - max-inline-size: tab-list is not displayed wider than defined
   */
  min-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
  max-inline-size: var(--db-tab-list-vertical-width, var(--db-sizing-3xl));
  /* horizontal space to the tab panels */
  padding-inline-end: var(--db-spacing-fixed-xs);
  /* ensures that tab-list (track) is only as high as all the tab-items together if open tab-panel is higher */
  margin-block-end: auto;
  /* vertical track for pulse */
}
.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item label {
  position: relative;
}
.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible), .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover {
  inline-size: fit-content;
}
.db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:has(input:focus-visible) label, .db-tabs[data-orientation=vertical] .db-tab-list .db-tab-item:hover label {
  overflow: visible;
}
.db-tabs[data-orientation=vertical] .db-tab-list::before {
  inline-size: var(--db-border-height-xs);
  inset-block: var(--db-spacing-fixed-xs);
  inset-inline-start: 0;
}
.db-tabs[data-orientation=vertical] .db-tab-list > ul {
  flex-direction: column;
  block-size: 100%;
}
.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:first-of-type {
  margin-block-start: var(--db-spacing-fixed-xs);
}
.db-tabs[data-orientation=vertical] .db-tab-list > ul:not(:has(db-tab-item, dbtabitem)) .db-tab-item:last-of-type {
  margin-block-end: var(--db-spacing-fixed-xs);
}
.db-tabs[data-orientation=vertical] .db-tab-item {
  padding-inline-start: calc(var(--db-border-height-xs) + var(--db-spacing-fixed-2xs));
}
.db-tabs[data-orientation=vertical] .db-tab-item input {
  padding-inline-start: calc(var(--db-border-height-xs) + var(--db-spacing-fixed-2xs));
}
.db-tabs[data-orientation=vertical] db-tab-item:first-of-type .db-tab-item,
.db-tabs[data-orientation=vertical] dbtabitem:first-of-type .db-tab-item {
  margin-block-start: var(--db-spacing-fixed-xs);
}
.db-tabs[data-orientation=vertical] db-tab-item:last-of-type .db-tab-item,
.db-tabs[data-orientation=vertical] dbtabitem:last-of-type .db-tab-item {
  margin-block-end: var(--db-spacing-fixed-xs);
}
.db-tabs[data-width=full] .db-tab-list {
  inline-size: 100%;
}
.db-tabs[data-width=full] .db-tab-item,
.db-tabs[data-width=full] .db-tab-item label {
  inline-size: 100%;
}
.db-tabs[data-width=full][data-alignment=center] .db-tab-item label {
  text-align: center;
  justify-content: center;
}
.db-tabs[data-scroll-behaviour=arrows] {
  /*
   * Scroll left / right buttons
   */
}
.db-tabs[data-scroll-behaviour=arrows] .db-tab-list > ul::-webkit-scrollbar {
  display: none;
}
.db-tabs[data-scroll-behaviour=arrows]:has(.tabs-scroll-left)::before {
  content: "";
}
.db-tabs[data-scroll-behaviour=arrows]:has(.tabs-scroll-right)::after {
  content: "";
}
.db-tabs[data-scroll-behaviour=arrows]:has(.db-button)::before, .db-tabs[data-scroll-behaviour=arrows]:has(.db-button)::after {
  position: absolute;
  z-index: 21;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  inline-size: var(--db-sizing-md);
  block-size: calc(var(--db-spacing-fixed-sm) + var(--db-sizing-md));
  flex: 0 0 auto;
}
.db-tabs[data-scroll-behaviour=arrows]:has(.db-button)::before {
  inset-inline-start: 0;
}
.db-tabs[data-scroll-behaviour=arrows]:has(.db-button)::after {
  inset-inline-end: 0;
}
.db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-left:is(.db-button) {
  inset-inline-start: 0;
}
.db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-right > .db-button, .db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-right:is(.db-button) {
  inset-inline-end: 0;
}
.db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-left > .db-button, .db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-left:is(.db-button),
.db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-right > .db-button,
.db-tabs[data-scroll-behaviour=arrows] .tabs-scroll-right:is(.db-button) {
  position: absolute;
  z-index: 22;
  inset-block: var(--db-spacing-fixed-xs);
}