/* 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%));
  }
}
dialog[data-variant], dialog[data-backdrop] {
  position: fixed;
  inset: 0;
  z-index: 9995;
}

dialog {
  padding: 0;
  margin: 0;
  border: 0;
  z-index: 9996;
  color: inherit;
}
dialog[data-variant=inside]:not([data-backdrop=none])::before {
  content: "";
  position: fixed;
  inset: 0;
}
dialog:not([data-backdrop=none])::backdrop, dialog:not([data-backdrop=none])::before {
  background-color: var(--db-adaptive-on-bg-basic-emphasis-100-default);
  opacity: 0.64;
}
dialog:not([data-backdrop=none])[data-backdrop=invisible]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=invisible]::before {
  opacity: 0;
}
dialog:not([data-backdrop=none])[data-backdrop=weak]::backdrop, dialog:not([data-backdrop=none])[data-backdrop=weak]::before {
  opacity: 0.32;
}

.db-drawer .db-drawer-container {
  inset-inline: auto 0;
}
.db-drawer [data-rounded=true].db-drawer-container {
  border-start-start-radius: var(--db-border-radius-sm);
  border-end-start-radius: var(--db-border-radius-sm);
}

.db-drawer .db-drawer-container[data-direction=left] {
  inset-inline: 0 auto;
}
.db-drawer [data-rounded=true].db-drawer-container[data-direction=left] {
  border-start-end-radius: var(--db-border-radius-sm);
  border-end-end-radius: var(--db-border-radius-sm);
}

.db-drawer .db-drawer-container[data-direction=down]:not([data-width=full]), .db-drawer .db-drawer-container[data-direction=up]:not([data-width=full]) {
  max-block-size: var(--db-drawer-max-height, calc(100% - var(--db-spacing-fixed-xl)));
  max-inline-size: none;
}

.db-drawer .db-drawer-container[data-direction=up] {
  inset: auto 0 0;
}
.db-drawer [data-rounded=true].db-drawer-container[data-direction=up] {
  border-start-end-radius: var(--db-border-radius-sm);
  border-start-start-radius: var(--db-border-radius-sm);
}

.db-drawer .db-drawer-container[data-direction=down] {
  inset: 0 0 auto;
}
.db-drawer [data-rounded=true].db-drawer-container[data-direction=down] {
  border-end-end-radius: var(--db-border-radius-sm);
  border-end-start-radius: var(--db-border-radius-sm);
}

.db-drawer .db-drawer-container {
  padding-block: var(--db-spacing-fixed-sm);
}
.db-drawer [data-spacing=small].db-drawer-container {
  padding-block: var(--db-spacing-fixed-xs);
}
.db-drawer [data-spacing=small].db-drawer-container .db-drawer-header {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-xs));
  padding-inline: var(--db-spacing-fixed-md);
}
.db-drawer [data-spacing=small].db-drawer-container .db-drawer-content {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-md));
  overflow-y: auto;
}
.db-drawer .db-drawer-container .db-drawer-header {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
  padding-inline: var(--db-spacing-fixed-lg);
}
.db-drawer .db-drawer-container .db-drawer-content {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
  overflow-y: auto;
}
.db-drawer [data-spacing=medium].db-drawer-container {
  padding-block: var(--db-spacing-fixed-sm);
}
.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-header {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-sm));
  padding-inline: var(--db-spacing-fixed-lg);
}
.db-drawer [data-spacing=medium].db-drawer-container .db-drawer-content {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-lg));
  overflow-y: auto;
}
.db-drawer [data-spacing=large].db-drawer-container {
  padding-block: var(--db-spacing-fixed-md);
}
.db-drawer [data-spacing=large].db-drawer-container .db-drawer-header {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-block-end: var(--db-drawer-header-padding-block-end, var(--db-spacing-fixed-md));
  padding-inline: var(--db-spacing-fixed-xl);
}
.db-drawer [data-spacing=large].db-drawer-container .db-drawer-content {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline: var(--db-drawer-content-padding-inline, var(--db-spacing-fixed-xl));
  overflow-y: auto;
}
.db-drawer [data-spacing=none].db-drawer-container {
  padding-block: 0;
}
.db-drawer [data-spacing=none].db-drawer-container .db-drawer-header {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-block-end: var(--db-drawer-header-padding-block-end, 0);
  padding-inline: 0;
}
.db-drawer [data-spacing=none].db-drawer-container .db-drawer-content {
  /* stylelint-disable-next-line db-ui/use-spacings */
  padding-inline: var(--db-drawer-content-padding-inline, 0);
  overflow-y: auto;
}

.db-drawer .db-drawer-container {
  display: flex;
  flex-direction: column;
  background-color: var(--db-adaptive-bg-basic-level-1-default);
  block-size: 100%;
  inline-size: 100%;
  position: fixed;
  box-shadow: var(--db-elevation-md);
}
.db-drawer .db-drawer-container:not([data-width=full]) {
  max-inline-size: var(--db-drawer-max-width, calc(100% - var(--db-spacing-fixed-xl)));
}
.db-drawer .db-drawer-container[data-rounded=true] {
  box-shadow: var(--db-elevation-md);
}
.db-drawer .db-drawer-container .db-drawer-header {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-60-default);
  position: relative;
  display: none;
}
.db-drawer .db-drawer-container .db-drawer-header[data-emphasis=strong] {
  --db-divider-bg-color: var(--db-adaptive-on-bg-basic-emphasis-70-default);
}
.db-drawer .db-drawer-container .db-drawer-header::before {
  content: "";
  background-color: var(--db-divider-bg-color);
  position: absolute;
  block-size: var(--db-border-height-3xs);
  inset-block-end: 0;
  inset-inline: 0;
  /* stylelint-disable-next-line at-rule-empty-line-before */
}
@media (forced-colors: active) {
  .db-drawer .db-drawer-container .db-drawer-header {
    /* stylelint-disable-next-line db-ui/use-border-color */
    border: var(--db-border-height-3xs) solid var(--db-divider-bg-color);
  }
}
.db-drawer .db-drawer-container .db-drawer-header .db-drawer-header-text {
  margin-block: auto;
  font-weight: 700;
}
.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer {
  margin-inline-start: auto;
}
.db-drawer .db-drawer-container .db-drawer-header .button-close-drawer button {
  margin-inline-start: auto;
}
.db-drawer .db-drawer-container .db-drawer-header:has(.button-close-drawer), .db-drawer .db-drawer-container .db-drawer-header:has(:not(.db-drawer-header-text:empty)) {
  display: flex;
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-drawer[open] .db-drawer-container:not([data-direction]), .db-drawer[open] .db-drawer-container[data-direction=right] {
    animation: show-right-to-left var(--db-transition-straight-show);
  }
  .db-drawer[open] .db-drawer-container[data-direction=left] {
    animation: show-left-to-right var(--db-transition-straight-show);
  }
  .db-drawer[open] .db-drawer-container[data-direction=up] {
    animation: show-bottom-to-top var(--db-transition-straight-show);
  }
  .db-drawer[open] .db-drawer-container[data-direction=down] {
    animation: show-top-to-bottom var(--db-transition-straight-show);
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  .db-drawer[open] .db-drawer-container[hidden]:not([data-direction]), .db-drawer[open] .db-drawer-container[hidden][data-direction=right] {
    animation: hide-right-to-left var(--db-transition-straight-hide);
  }
  .db-drawer[open] .db-drawer-container[hidden][data-direction=left] {
    animation: hide-left-to-right var(--db-transition-straight-hide);
  }
  .db-drawer[open] .db-drawer-container[hidden][data-direction=up] {
    animation: hide-bottom-to-top var(--db-transition-straight-hide);
  }
  .db-drawer[open] .db-drawer-container[hidden][data-direction=down] {
    animation: hide-top-to-bottom var(--db-transition-straight-hide);
  }
}