:root {
  --drawer-bg: #fff;
  --drawer-radius: 24px;
  --drawer-backdrop: #0006;
  --drawer-backdrop-blur: 4px;
  --drawer-max-height: 96dvh;
  --drawer-modal-width: fit-content;
  --drawer-modal-height: fit-content;
  --drawer-handle-bg: #ccc;
  --drawer-handle-bg-hover: #999;
  --drawer-handle-width: 48px;
  --drawer-handle-width-hover: 56px;
  --drawer-handle-height: 5px;
  --drawer-handle-padding-block: 1rem .5rem;
  --drawer-handle-padding-inline: 0;
  --drawer-shadow-bottom: 0 -10px 60px #0000001f, 0 -4px 20px #00000014;
  --drawer-shadow-top: 0 10px 60px #0000001f, 0 4px 20px #00000014;
  --drawer-shadow-right: -10px 0 60px #0000001f, -4px 0 20px #00000014;
  --drawer-shadow-left: 10px 0 60px #0000001f, 4px 0 20px #00000014;
  --drawer-shadow-modal: 0 25px 50px -12px #00000040;
  --drawer-duration: .5s;
  --drawer-duration-close: .35s;
  --drawer-ease: cubic-bezier(.32, .72, 0, 1);
  --drawer-nested-scale: .94;
  --drawer-nested-offset: 20px;
  --drawer-nested-brightness: .92;
  --drawer-nested-backdrop: #00000026;
}

@media (prefers-color-scheme: dark) {
  :root {
    --drawer-bg: #1f1f1f;
    --drawer-handle-bg: #595959;
    --drawer-handle-bg-hover: gray;
    --drawer-shadow-bottom: 0 -10px 60px #0006, 0 -4px 20px #0000004d;
    --drawer-shadow-top: 0 10px 60px #0006, 0 4px 20px #0000004d;
    --drawer-shadow-right: -10px 0 60px #0006, -4px 0 20px #0000004d;
    --drawer-shadow-left: 10px 0 60px #0006, 4px 0 20px #0000004d;
    --drawer-shadow-modal: 0 25px 50px -12px #00000080;
  }
}

body {
  transition: scale var(--drawer-duration) var(--drawer-ease), border-radius var(--drawer-duration) var(--drawer-ease);
  transform-origin: top;
}

body:has(.drawer[open]) {
  scale: var(--drawer-nested-scale);
  border-radius: var(--drawer-radius);
}

body:has(.drawer[open]:not([data-scroll-lock="false"])) {
  overflow: hidden;
}

.drawer {
  background: var(--drawer-bg);
  opacity: 0;
  max-width: 100%;
  max-height: 100%;
  transition: display var(--drawer-duration-close) allow-discrete,
    overlay var(--drawer-duration-close) allow-discrete,
    translate var(--drawer-duration-close) var(--drawer-ease),
    scale var(--drawer-duration-close) var(--drawer-ease),
    filter var(--drawer-duration-close) ease,
    opacity var(--drawer-duration-close) ease;
  --_translate-closed: 0 100%;
  --_border-radius: var(--drawer-radius) var(--drawer-radius) 0 0;
  margin: 0;
  width: var(--drawer-width, 100%);
  max-width: var(--drawer-max-width, none);
  height: var(--drawer-height, auto);
  max-height: var(--drawer-max-height, 96dvh);
  border-radius: var(--drawer-border-radius, var(--_border-radius));
  box-shadow: var(--drawer-shadow-bottom);
  translate: var(--_translate-closed);
  border: none;
  margin-inline: auto;
  padding: 0;
  position: fixed;
  inset: auto 0 0;
  overflow: hidden;
}

.drawer::backdrop {
  background: var(--drawer-backdrop);
  opacity: 0;
  -webkit-backdrop-filter: blur(var(--drawer-backdrop-blur));
  transition: display var(--drawer-duration-close) allow-discrete,
    overlay var(--drawer-duration-close) allow-discrete,
    opacity var(--drawer-duration-close) ease;
}

.drawer[open] {
  opacity: 1;
  transition: display var(--drawer-duration) allow-discrete,
    overlay var(--drawer-duration) allow-discrete,
    translate var(--drawer-duration) var(--drawer-ease),
    scale var(--drawer-duration) var(--drawer-ease),
    filter var(--drawer-duration) ease,
    opacity .15s ease;
  translate: 0;
}

.drawer[open]::backdrop {
  opacity: 1;
  transition: display var(--drawer-duration) allow-discrete, overlay var(--drawer-duration) allow-discrete, opacity .2s ease;
}

@starting-style {
  .drawer[open] {
    opacity: 0;
    translate: var(--_translate-closed);
  }

  .drawer[open]::backdrop {
    opacity: 0;
  }
}

.drawer[data-direction="right"] {
  --_translate-closed: 100% 0;
  --_border-radius: var(--drawer-radius) 0 0 var(--drawer-radius);
  width: var(--drawer-width, 500px);
  max-width: var(--drawer-max-width, 90%);
  height: var(--drawer-height, 100dvh);
  max-height: 100dvh;
  box-shadow: var(--drawer-shadow-right);
  margin: 0;
  inset: 0 0 0 auto;
}

.drawer[data-direction="left"] {
  --_translate-closed: -100% 0;
  --_border-radius: 0 var(--drawer-radius) var(--drawer-radius) 0;
  width: var(--drawer-width, 500px);
  max-width: var(--drawer-max-width, 90%);
  height: var(--drawer-height, 100dvh);
  max-height: 100dvh;
  box-shadow: var(--drawer-shadow-left);
  margin: 0;
  inset: 0 auto 0 0;
}

.drawer[data-direction="top"] {
  --_translate-closed: 0 -100%;
  --_border-radius: 0 0 var(--drawer-radius) var(--drawer-radius);
  width: var(--drawer-width, 100%);
  max-width: var(--drawer-max-width, none);
  height: var(--drawer-height, auto);
  max-height: var(--drawer-max-height, 96dvh);
  box-shadow: var(--drawer-shadow-top);
  margin-inline: auto;
  inset: 0 0 auto;
}

.drawer[data-direction="modal"] {
  --_translate-closed: 0 0;
  --_border-radius: var(--drawer-radius);
  width: var(--drawer-modal-width, fit-content);
  max-width: var(--drawer-max-width, 90%);
  height: var(--drawer-modal-height, fit-content);
  max-height: var(--drawer-max-height, 96dvh);
  box-shadow: var(--drawer-shadow-modal);
  scale: var(--drawer-nested-scale);
  margin: auto;
  inset: 0;
}

.drawer[data-direction="modal"][open] {
  scale: 1;
}

@starting-style {
  .drawer[data-direction="modal"][open] {
    scale: var(--drawer-nested-scale);
  }
}

.drawer[open]:has( ~ .drawer[open]) {
  scale: var(--drawer-nested-scale);
  translate: 0 calc(-1 * var(--drawer-nested-offset));
  border-radius: var(--drawer-radius);
  filter: brightness(var(--drawer-nested-brightness));
  pointer-events: none;
}

.drawer[open]:has( ~ .drawer[open] ~ .drawer[open]) {
  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale));
  translate: 0 calc(-2 * var(--drawer-nested-offset));
  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
}

.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
  translate: 0 calc(-3 * var(--drawer-nested-offset));
  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
}

.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
  translate: 0 calc(-4 * var(--drawer-nested-offset));
  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
}

.drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
  scale: calc(var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale) * var(--drawer-nested-scale));
  translate: 0 calc(-5 * var(--drawer-nested-offset));
  filter: brightness(calc(var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness) * var(--drawer-nested-brightness)));
}

.drawer[open] ~ .drawer[open]::backdrop {
  background: var(--drawer-nested-backdrop);
  backdrop-filter: none;
}

.drawer-handle {
  padding-block: var(--drawer-handle-padding-block);
  padding-inline: var(--drawer-handle-padding-inline);
  cursor: grab;
  justify-content: center;
  display: flex;
}

.drawer-handle:before {
  content: "";
  width: var(--drawer-handle-width);
  height: var(--drawer-handle-height);
  background: var(--drawer-handle-bg);
  transition: width .2s var(--drawer-ease), height .2s var(--drawer-ease), background .2s ease;
  border-radius: 100px;
}

.drawer-handle:hover:before {
  width: var(--drawer-handle-width-hover);
  background: var(--drawer-handle-bg-hover);
}

.drawer[data-direction="left"] .drawer-handle, .drawer[data-direction="right"] .drawer-handle {
  padding-block: var(--drawer-handle-padding-inline);
  padding-inline: var(--drawer-handle-padding-block);
  writing-mode: vertical-lr;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  position: absolute;
  top: 0;
}

.drawer[data-direction="left"] .drawer-handle {
  right: 0;
}

.drawer[data-direction="right"] .drawer-handle {
  left: 0;
}

.drawer[data-direction="left"] .drawer-handle:before, .drawer[data-direction="right"] .drawer-handle:before {
  width: var(--drawer-handle-height);
  height: var(--drawer-handle-width);
}

.drawer[data-direction="left"] .drawer-handle:hover:before, .drawer[data-direction="right"] .drawer-handle:hover:before {
  width: var(--drawer-handle-height);
  height: var(--drawer-handle-width-hover);
}

.drawer-content {
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
  overflow: hidden auto;
}

.drawer[data-direction="left"] .drawer-content, .drawer[data-direction="right"] .drawer-content {
  height: 100%;
}

@media (prefers-reduced-motion: reduce) {
  *, :before, :after {
    transition-duration: .01ms !important;
  }

  body:has(.drawer[open]) {
    scale: 1;
  }

  .drawer[open]:has( ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]), .drawer[open]:has( ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open] ~ .drawer[open]) {
    filter: none;
    translate: 0;
    scale: 1;
  }
}