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

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

/**
	Generates 3 types of placeholders, e.g:
	- %db-component-variables-md
	- %db-font-size-md
	- %db-overwrite-font-size-md
 */
.db-tab-item {
  position: relative;
  display: inline-flex;
  list-style-type: "";
  border-radius: var(--db-border-radius-sm);
}
.db-tab-item:has(input:disabled) {
  opacity: 0.4;
}
.db-tab-item label {
  background-color: var(--db-adaptive-bg-basic-transparent-full-default);
  padding: var(--db-spacing-fixed-xs);
  align-items: center;
  display: inline-block;
  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:hover:not(:disabled, [aria-disabled=true]) {
  cursor: pointer;
}
.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]):has(:not(input:disabled)) {
  background-color: var(--db-adaptive-bg-basic-transparent-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]) {
  cursor: pointer;
}
.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]):has(:not(input:disabled)) {
  background-color: var(--db-adaptive-bg-basic-transparent-hovered);
}
.db-tab-item label:hover:not(:disabled, [aria-disabled=true]):has(input:disabled) {
  cursor: initial;
}
.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) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
}
.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-after] {
  padding-inline-end: calc(var(--db-spacing-fixed-xs) + var(--db-spacing-fixed-sm) + calc(var(--db-base-font-size) * var(--db-base-line-height)));
}
.db-tab-item label[data-icon-after]::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) + calc(var(--db-base-font-size) * var(--db-base-line-height))) - var(--db-spacing-fixed-2xs));
  block-size: calc(calc(var(--db-base-font-size) * var(--db-base-line-height)) + 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;
}