/* 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, ... */
@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-popover > article {
  border: var(--db-border-height-3xs) solid var(--db-adaptive-on-bg-basic-emphasis-60-default);
}

.db-popover > article {
  /* stylelint-disable-next-line db-ui/use-border-radius */
  border-radius: var(--default-card-border-radius, var(--db-border-radius-sm));
}

.db-popover > article:not([data-placement]), .db-popover > article[data-placement=bottom]:not([data-outside-vy]), .db-popover > article[data-placement=top]:not([data-outside-vy]), .db-popover > article:is([data-outside-vy=bottom], [data-outside-vy=top]):not([data-outside-vx],
[data-placement$=end],
[data-placement$=start]) {
  --db-popover-center-x: -50%;
  inset-inline-start: 50%;
}
.db-popover > article[data-placement=left]:not([data-outside-vx]), .db-popover > article[data-placement=right]:not([data-outside-vx]), .db-popover > article[data-outside-vx=left]:not([data-placement$=end],
[data-placement$=start]), .db-popover > article[data-outside-vx=right]:not([data-placement$=end],
[data-placement$=start]) {
  --db-popover-center-y: -50%;
  inset-block-start: 50%;
}

.db-popover > article {
  --db-popover-distance: var(--db-spacing-fixed-2xs);
}
.db-popover > article::before {
  content: "";
  position: absolute;
}
.db-popover > article[data-gap=true] {
  --db-popover-gap: 1;
  --db-popover-distance: var(--db-spacing-fixed-md);
}
.db-popover > article:is(.db-tooltip) {
  --db-popover-distance: var(--db-spacing-fixed-sm);
}
.db-popover > article[data-placement^=bottom]:not([data-outside-vy])[data-placement$=end], .db-popover > article[data-placement^=top]:not([data-outside-vy])[data-placement$=end], .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-outside-vy=top]:not([data-outside-vx])[data-placement$=end] {
  inset-inline-end: 0;
}
.db-popover > article[data-placement^=bottom]:not([data-outside-vy])[data-placement$=start], .db-popover > article[data-placement^=top]:not([data-outside-vy])[data-placement$=start], .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-outside-vy=top]:not([data-outside-vx])[data-placement$=start] {
  inset-inline-start: 0;
}
.db-popover > article[data-placement^=left]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-placement^=right]:not([data-outside-vx])[data-placement$=end], .db-popover > article[data-outside-vx=left][data-placement$=end], .db-popover > article[data-outside-vx=right][data-placement$=end] {
  inset-block-end: 0;
}
.db-popover > article[data-placement^=left]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-placement^=right]:not([data-outside-vx])[data-placement$=start], .db-popover > article[data-outside-vx=left][data-placement$=start], .db-popover > article[data-outside-vx=right][data-placement$=start] {
  inset-block-start: 0;
}
.db-popover > article:not([data-placement], [data-outside-vy]), .db-popover > article[data-placement^=bottom]:not([data-outside-vy]), .db-popover > article[data-outside-vy=top]:not([data-outside-vx]) {
  inset-block-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-popover > article:not([data-placement], [data-outside-vy])::before, .db-popover > article[data-placement^=bottom]:not([data-outside-vy])::before, .db-popover > article[data-outside-vy=top]:not([data-outside-vx])::before {
  inset-inline-start: 0;
  inline-size: 100%;
  block-size: var(--db-popover-distance);
  inset-block-start: calc(-1 * var(--db-popover-distance));
}
.db-popover > article[data-placement^=top]:not([data-outside-vy]), .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx]) {
  inset-block-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-popover > article[data-placement^=top]:not([data-outside-vy])::before, .db-popover > article[data-outside-vy=bottom]:not([data-outside-vx])::before {
  inset-inline-end: 0;
  inline-size: 100%;
  block-size: var(--db-popover-distance);
  inset-block-end: calc(-1 * var(--db-popover-distance));
}
.db-popover > article[data-placement^=left]:not([data-outside-vx]), .db-popover > article[data-outside-vx=right] {
  inset-inline-end: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-popover > article[data-placement^=left]:not([data-outside-vx])::before, .db-popover > article[data-outside-vx=right]::before {
  inset-block-end: 0;
  block-size: 100%;
  inline-size: var(--db-popover-distance);
  inset-inline-end: calc(-1 * var(--db-popover-distance));
}
.db-popover > article[data-placement^=right]:not([data-outside-vx]), .db-popover > article[data-outside-vx=left] {
  inset-inline-start: calc(100% + var(--db-popover-distance) * var(--db-popover-gap, 0));
}
.db-popover > article[data-placement^=right]:not([data-outside-vx])::before, .db-popover > article[data-outside-vx=left]::before {
  inset-block-start: 0;
  block-size: 100%;
  inline-size: var(--db-popover-distance);
  inset-inline-start: calc(-1 * var(--db-popover-distance));
}

.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-open=false]), .db-popover > article[data-open=true] {
  display: revert;
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]) {
  --db-popover-translate-y: -25%;
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy])[data-animation=disabled], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy])[data-animation=disabled], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx])[data-animation=disabled] {
  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-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]):not([data-animation=disabled]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]):not([data-animation=disabled]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]):not([data-animation=disabled]) {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]):not([data-animation=disabled])[data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow] {
    animation-delay: var(--db-transition-duration-fast);
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article:not([data-placement], [data-outside-vy]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-open=true]:not([data-placement], [data-outside-vy]):not([data-animation=disabled])[data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=bottom]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=bottom][data-open=true]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=top]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vy=top][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast] {
    animation-delay: calc(var(--db-transition-duration-fast) / 2);
  }
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]) {
  --db-popover-translate-y: 25%;
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy])[data-animation=disabled], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx])[data-animation=disabled] {
  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-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]):not([data-animation=disabled]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]):not([data-animation=disabled]) {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow] {
    animation-delay: var(--db-transition-duration-fast);
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=top]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=top][data-open=true]:not([data-outside-vy]):not([data-animation=disabled])[data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vy=bottom]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vy=bottom][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast] {
    animation-delay: calc(var(--db-transition-duration-fast) / 2);
  }
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true] {
  --db-popover-translate-x: -25%;
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx])[data-animation=disabled], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left][data-animation=disabled]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-animation=disabled][data-open=true] {
  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-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]):not([data-animation=disabled]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true]:not([data-animation=disabled]) {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true]:not([data-animation=disabled])[data-delay=slow] {
    animation-delay: var(--db-transition-duration-fast);
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=right]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=right][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=left]:not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vx=left][data-open=true]:not([data-animation=disabled])[data-delay=fast] {
    animation-delay: calc(var(--db-transition-duration-fast) / 2);
  }
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true] {
  --db-popover-translate-x: 25%;
}
.db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx])[data-animation=disabled]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx])[data-animation=disabled], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right][data-animation=disabled]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-animation=disabled][data-open=true] {
  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-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]):not([data-animation=disabled]), .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-animation=disabled]):not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true]:not([data-animation=disabled]) {
    animation: popover-animation var(--db-transition-straight-emotional) normal both;
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=slow], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-animation=disabled])[data-delay=slow]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true]:not([data-animation=disabled])[data-delay=slow] {
    animation-delay: var(--db-transition-duration-fast);
  }
  .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-placement^=left]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-placement^=left][data-open=true]:not([data-outside-vx]):not([data-animation=disabled])[data-delay=fast], .db-popover:is([data-e2e-hover=true], :hover, :focus-within) > article[data-outside-vx=right]:not([data-animation=disabled])[data-delay=fast]:not([data-open=false]), .db-popover > article[data-outside-vx=right][data-open=true]:not([data-animation=disabled])[data-delay=fast] {
    animation-delay: calc(var(--db-transition-duration-fast) / 2);
  }
}

.db-popover > article {
  position: absolute;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  box-shadow: var(--db-elevation-md);
  display: none;
  z-index: 1;
  white-space: nowrap;
}
.db-popover > article[data-width=fixed] {
  inline-size: max-content;
  max-inline-size: var(--db-sizing-3xl);
  white-space: normal;
  text-align: initial;
}

.db-popover {
  position: relative;
}
.db-popover > article {
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
.db-popover > article:not([data-spacing]) {
  padding: var(--db-spacing-fixed-sm);
}
.db-popover > article[data-spacing=large] {
  padding: var(--db-spacing-fixed-lg);
}
.db-popover > article[data-spacing=medium] {
  padding: var(--db-spacing-fixed-md);
}
.db-popover > article[data-spacing=small] {
  padding: var(--db-spacing-fixed-sm);
}
.db-popover > article[data-spacing=none] {
  padding: 0;
}