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

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

.db-tooltip {
  font: var(--db-type-body-sm);
  /* stylelint-disable-next-line at-rule-prelude-no-invalid,layer-name-pattern */
}
@layer variables {
  .db-tooltip {
    /* Those variables are only for components to calculate heights and change icons */
    --db-icon-font-weight: var(--db-base-body-icon-weight-sm);
    --db-icon-font-size: var(--db-base-body-icon-font-size-sm);
  }
}

@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> */
@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 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%));
  }
}
@keyframes rotate {
  100% {
    transform: rotate(1turn);
  }
}
/**
 * @mixin screen-min-max
 * @param $data an object like (min:"sm", max:"lg") or (min: "sm")
 */
.db-tooltip[data-show-arrow=true]::after, .db-tooltip {
  border: var(--db-border-width-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.db-tooltip {
  /* stylelint-disable-next-line db-ux/use-border-radius */
  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
}

.db-tooltip:not([data-placement], [data-corrected-placement]), [data-placement=bottom].db-tooltip:not([data-corrected-placement]), [data-placement=top].db-tooltip:not([data-corrected-placement]), [data-corrected-placement=bottom].db-tooltip, [data-corrected-placement=top].db-tooltip {
  --db-popover-center-x: -50%;
  inset-inline-start: 50%;
}
[data-corrected-placement=left].db-tooltip, [data-corrected-placement=right].db-tooltip, [data-placement=left].db-tooltip:not([data-corrected-placement]), [data-placement=right].db-tooltip:not([data-corrected-placement]) {
  --db-popover-center-y: -50%;
  inset-block-start: 50%;
}

.db-tooltip {
  --db-popover-distance: var(--db-spacing-fixed-2xs);
  /* This is for pure html css without using JS */
}
.db-tooltip::before {
  content: "";
  position: absolute;
}
.db-tooltip:not([data-placement], [data-corrected-placement])::before, [data-placement^=bottom].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=bottom].db-tooltip::before {
  inset-block-end: 100%;
  inset-inline: 0;
  block-size: var(--db-popover-distance);
}
[data-placement^=top].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=top].db-tooltip::before {
  inset-block-start: 100%;
  inset-inline: 0;
  block-size: var(--db-popover-distance);
}
[data-placement^=right].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=right].db-tooltip::before {
  inset-inline-end: 100%;
  inset-block: 0;
  inline-size: var(--db-popover-distance);
}
[data-placement^=left].db-tooltip:not([data-corrected-placement])::before, [data-corrected-placement^=left].db-tooltip::before {
  inset-inline-start: 100%;
  inset-block: 0;
  inline-size: var(--db-popover-distance);
}
[data-gap=true].db-tooltip {
  --db-popover-gap: 1;
  --db-popover-distance: var(--db-spacing-fixed-md);
}
.db-tooltip:is(.db-tooltip) {
  --db-popover-distance: var(--db-spacing-fixed-sm);
}
.db-tooltip:not([data-corrected-placement])[data-placement^=bottom][data-placement$=end], .db-tooltip:not([data-corrected-placement])[data-placement^=top][data-placement$=end] {
  inset-inline-end: 0;
}
.db-tooltip:not([data-corrected-placement])[data-placement^=bottom][data-placement$=start], .db-tooltip:not([data-corrected-placement])[data-placement^=top][data-placement$=start] {
  inset-inline-start: 0;
}
.db-tooltip:not([data-corrected-placement])[data-placement^=left][data-placement$=end], .db-tooltip:not([data-corrected-placement])[data-placement^=right][data-placement$=end] {
  inset-block-end: 0;
}
.db-tooltip:not([data-corrected-placement])[data-placement^=left][data-placement$=start], .db-tooltip:not([data-corrected-placement])[data-placement^=right][data-placement$=start] {
  inset-block-start: 0;
}
.db-tooltip:not([data-corrected-placement]):not([data-placement]), .db-tooltip:not([data-corrected-placement])[data-placement^=bottom] {
  inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-tooltip:not([data-corrected-placement]):not([data-placement])::before, .db-tooltip:not([data-corrected-placement])[data-placement^=bottom]::before {
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--db-popover-distance);
  inset-block-start: calc(-1 * var(--db-popover-distance));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=top] {
  inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=top]::before {
  inset-inline-end: 0;
  inline-size: 100%;
  block-size: var(--db-popover-distance);
  inset-block-end: calc(-1 * var(--db-popover-distance));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=left] {
  inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=left]::before {
  inset-block-end: 0;
  block-size: 100%;
  inline-size: var(--db-popover-distance);
  inset-inline-end: calc(-1 * var(--db-popover-distance));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=right] {
  inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-tooltip:not([data-corrected-placement])[data-placement^=right]::before {
  inset-block-start: 0;
  block-size: 100%;
  inline-size: var(--db-popover-distance);
  inset-inline-start: calc(-1 * var(--db-popover-distance));
}

.db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover .db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:first-of-type {
  visibility: var(--db-show-popover-visibility, visible);
}
.db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:first-of-type {
  --db-popover-translate-y: -25%;
}
.db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement]):not([data-animation]):first-of-type, .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=false]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=bottom].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=bottom][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=false].db-tooltip:first-of-type {
  opacity: 1;
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:first-of-type {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
    /* stylelint-disable-next-line media-query-no-invalid */
    /* stylelint-disable-next-line at-rule-empty-line-before */
  }
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-extra-slow);
  }
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
  .db-tooltip[data-e2e-hover=true]:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible .db-tooltip:not([data-placement], [data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-placement^=bottom].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=bottom].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=bottom][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=bottom][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
[data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:first-of-type {
  --db-popover-translate-y: 25%;
}
[data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=top].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=top][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=false].db-tooltip:first-of-type {
  opacity: 1;
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:first-of-type {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
    /* stylelint-disable-next-line media-query-no-invalid */
    /* stylelint-disable-next-line at-rule-empty-line-before */
  }
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-extra-slow);
  }
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
  [data-placement^=top].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=top].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=top][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=top][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
[data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:first-of-type {
  --db-popover-translate-x: -25%;
}
[data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=right].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=right][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=false].db-tooltip:first-of-type {
  opacity: 1;
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:first-of-type {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
    /* stylelint-disable-next-line media-query-no-invalid */
    /* stylelint-disable-next-line at-rule-empty-line-before */
  }
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-extra-slow);
  }
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
  [data-placement^=right].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=right].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=right][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=right][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
[data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:first-of-type {
  --db-popover-translate-x: 25%;
}
[data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement]):not([data-animation]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement]):not([data-animation]):first-of-type, [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=false], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=false]:first-of-type, [data-corrected-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-animation]), [data-has-tooltip=true]:hover [data-corrected-placement^=left].db-tooltip:not([data-animation]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left].db-tooltip:not([data-animation]):first-of-type, [data-corrected-placement^=left][data-animation=false].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=false].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=false].db-tooltip:first-of-type {
  opacity: 1;
  transform: translate(var(--db-popover-center-x, 0), var(--db-popover-center-y, 0));
}
@media screen and (prefers-reduced-motion: no-preference) {
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:first-of-type {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
    /* stylelint-disable-next-line media-query-no-invalid */
    /* stylelint-disable-next-line at-rule-empty-line-before */
  }
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=slow], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=slow]:first-of-type, [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true][data-delay=slow].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-extra-slow);
  }
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true][data-delay=fast], [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true][data-delay=fast]:first-of-type, [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip[data-e2e-hover=true], [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true][data-delay=fast].db-tooltip:first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}
@media screen and (prefers-reduced-motion: no-preference) and (width <= 64em) {
  [data-placement^=left].db-tooltip[data-e2e-hover=true]:not([data-corrected-placement])[data-animation=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-placement^=left].db-tooltip:not([data-corrected-placement])[data-animation=true]:not([data-delay]):first-of-type, [data-corrected-placement^=left][data-animation=true].db-tooltip[data-e2e-hover=true]:not([data-delay]), [data-has-tooltip=true]:hover [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type, [data-has-tooltip=true]:focus-visible [data-corrected-placement^=left][data-animation=true].db-tooltip:not([data-delay]):first-of-type {
    animation-delay: var(--db-transition-duration-medium);
  }
}

.db-tooltip {
  position: absolute;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  box-shadow: var(--db-elevation-md);
  visibility: hidden;
  z-index: 1337;
  white-space: normal;
  max-inline-size: min(var(--db-container-xs), 100vw - 2 * var(--db-spacing-fixed-md));
  block-size: fit-content;
  inline-size: fit-content;
}
[data-width=fixed].db-tooltip {
  inline-size: max-content;
  text-align: initial;
}

.db-tooltip {
  --default-card-elevation: var(--db-elevation-sm);
  --default-card-border-radius: var(--db-border-radius-xs);
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  font-style: normal;
  font-weight: initial;
  padding: var(--db-spacing-fixed-2xs) var(--db-spacing-fixed-xs);
}
.db-tooltip::after {
  background-color: var(--db-adaptive-bg-basic-level-1-default);
}
.db-tooltip[data-show-arrow=true]::after {
  content: "";
  box-shadow: var(--db-elevation-md);
  position: absolute;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  inline-size: var(--db-sizing-2xs);
  block-size: var(--db-sizing-2xs);
  clip-path: polygon(calc(var(--db-sizing-2xs) * -1) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(var(--db-sizing-2xs) * -1), calc(100% + var(--db-sizing-2xs)) calc(100% + var(--db-sizing-2xs)));
  /* stylelint-disable-next-line db-ux/use-border-radius */
  border-radius: 0 2px;
  transform: skew(-8deg, -8deg);
}
.db-tooltip:not([data-placement], [data-corrected-placement])::after, .db-tooltip[data-placement^=bottom]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=bottom]::after {
  inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
  inset-block-start: 0;
  translate: -50% -50%;
  rotate: 315deg;
}
.db-tooltip[data-placement^=top]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=top]::after {
  inset-inline-start: var(--db-tooltip-arrow-inline-start, 50%);
  inset-block-end: 0;
  translate: -50% 50%;
  rotate: 135deg;
}
.db-tooltip[data-placement^=right]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=right]::after {
  inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
  inset-inline-start: 0;
  translate: -50% -50%;
  rotate: 225deg;
}
.db-tooltip[data-placement^=left]:not([data-corrected-placement])::after, .db-tooltip[data-corrected-placement^=left]::after {
  inset-block-start: var(--db-tooltip-arrow-block-start, 50%);
  inset-inline-end: 0;
  translate: 50% -50%;
  rotate: 45deg;
}
.db-tooltip[data-emphasis=strong] {
  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
  color: var(--db-adaptive-on-bg-inverted-default);
}
.db-tooltip[data-emphasis=strong]::before {
  --db-icon-color: var(--db-adaptive-on-bg-inverted-default);
}
.db-tooltip[data-emphasis=strong]::after {
  background-color: var(--db-adaptive-bg-inverted-contrast-high-default);
}

[data-has-tooltip=true] {
  position: var(--db-tooltip-parent-position, relative);
}
