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

@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-tab-item input:not([data-disable-focus=true]):focus-visible::before {
  outline: var(--db-border-width-2xs) solid var(--db-focus-outline-color, var(--db-informational-on-bg-basic-emphasis-70-default));
  outline-offset: var(--db-border-width-xs);
  box-shadow: 0 0 0 var(--db-border-width-xs) var(--db-focus-box-shadow-bg-color, transparent);
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-tab-item input:not([data-disable-focus=true]):focus-visible::before {
    transition: outline var(--db-transition-duration-extra-fast), box-shadow var(--db-transition-duration-extra-fast);
  }
}
.db-tab-item input:not([data-disable-focus=true]):not([type=radio], [role=switch]):focus-visible::before {
  border-radius: var(--db-border-radius-xs);
}

/**
 * @mixin screen-min-max
 * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
 */
/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
@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 {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

@layer variables {}

/* Use for body tags like <p> */
/* Use for headline tags like <h1> */
.db-tab-item {
  position: relative;
  list-style-type: "";
  border-radius: var(--db-border-radius-sm);
}
.db-tab-item:not([hidden]) {
  display: inline-flex;
}
.db-tab-item:has(input:disabled) {
  opacity: var(--db-opacity-md);
}
.db-tab-item label {
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
  padding: var(--db-spacing-fixed-xs);
  align-items: center;
  white-space: nowrap;
  border: 0;
  border-radius: var(--db-border-radius-sm);
  overflow: hidden;
  text-overflow: ellipsis;
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
  /* stylelint-disable-next-line a11y/selector-pseudo-class-focus */
}
.db-tab-item label:not([hidden]) {
  display: inline-block;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
  cursor: initial;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]) {
  cursor: var(--db-overwrite-cursor, pointer);
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(:not(input:disabled)) {
  background-color: var(--db-adaptive-bg-basic-transparent-full-hovered);
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
  cursor: initial;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(textarea), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input) {
  cursor: initial;
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=checkbox]), .db-tab-item label:hover:not(:disabled, [aria-disabled=true]):is(input[type=radio]:not(:checked)) {
  cursor: pointer;
}
.db-tab-item label:has(input:checked) {
  font-weight: 700;
}
.db-tab-item label[data-icon] {
  padding-inline-start: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
}
.db-tab-item label[data-icon]::before {
  position: absolute;
  transform: translateY(-50%);
  inset-block-start: 50%;
  inset-inline-start: calc(0% + var(--db-spacing-fixed-xs));
}
.db-tab-item label[data-icon-trailing] {
  padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size));
}
.db-tab-item label[data-icon-trailing]::after {
  position: absolute;
  transform: translateY(-50%);
  inset-block-start: 50%;
  inset-inline-end: calc(0% + var(--db-spacing-fixed-xs));
}
.db-tab-item label:is([data-no-text], [data-no-text=true]) {
  font-size: 0 !important;
  /* stylelint-disable-next-line at-rule-empty-line-before */
  padding: 0;
  inline-size: calc(calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + var(--db-icon-font-size)) - var(--db-spacing-fixed-2xs));
  block-size: calc(var(--db-icon-font-size) + var(--db-spacing-fixed-xs));
}
.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
  --db-icon-margin-end: 0;
}
.db-tab-item label:is([data-no-text], [data-no-text=true])::before {
  margin-inline-end: 0;
}
.db-tab-item input {
  position: absolute;
  appearance: none;
  inline-size: 100%;
  margin-inline-end: initial;
  inset: 0;
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
  border-radius: var(--db-border-radius-sm);
  z-index: -1;
  /*
  focus must be set on input:
  - parent label tag may use before AND after for displaying icons
  - placed on li.db-tab-item focus would get cut off partially by by overflow hidden (orientation vertical)
   */
}
.db-tab-item input:focus-visible:is(input[type=radio]) {
  outline: none;
  box-shadow: none;
}
.db-tab-item input:focus-visible::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--db-border-radius-sm);
  z-index: 10;
  pointer-events: none;
}
