:host {
  --size: 320px;
  --border-radius: 0.375rem;
  --inset-gap: 1rem;
  --shadow: var(--l-shadow-lg);
}

/* Override dialog's opacity fade with a slide from the inline-start edge. */
dialog {
  inset: 0;
  margin: 0;
  width: min(var(--size), 100dvw);
  max-inline-size: 100dvw;
  height: 100dvh;
  max-block-size: 100dvh;
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
  opacity: 1;
  translate: -100% 0;
  transition-property: translate, display, overlay;
}

dialog[open] {
  translate: 0 0;
}

@starting-style {
  dialog[open] {
    translate: -100% 0;
  }
}

/* Inline-end edge */
:host([placement='end']) dialog {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
  margin-inline-start: auto;
  translate: 100% 0;
}

:host([placement='end']) dialog[open] {
  translate: 0 0;
}

@starting-style {
  :host([placement='end']) dialog[open] {
    translate: 100% 0;
  }
}

/* Block-end (bottom) edge */
:host([placement='bottom']) dialog {
  width: 100dvw;
  max-inline-size: 100dvw;
  height: min(var(--size), 100dvh);
  max-block-size: 100dvh;
  margin-block-start: auto;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  translate: 0 100%;
}

:host([placement='bottom']) dialog[open] {
  translate: 0 0;
}

@starting-style {
  :host([placement='bottom']) dialog[open] {
    translate: 0 100%;
  }
}

/* Block-start (top) edge */
:host([placement='top']) dialog {
  width: 100dvw;
  max-inline-size: 100dvw;
  height: min(var(--size), 100dvh);
  max-block-size: 100dvh;
  border-radius: 0 0 var(--border-radius) var(--border-radius);
  translate: 0 -100%;
}

:host([placement='top']) dialog[open] {
  translate: 0 0;
}

@starting-style {
  :host([placement='top']) dialog[open] {
    translate: 0 -100%;
  }
}

/* Inset: float the drawer away from the viewport edges with a uniform gap and
   round every corner. The off-screen translate grows by the gap so the panel
   still clears the viewport edge during the slide (it no longer sits flush). */
:host([inset]) dialog {
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
}

/* Inline-edge drawers (start/end): inset the block edges, shrink height to fit. */
:host([inset]:not([placement])) dialog,
:host([inset][placement='start']) dialog,
:host([inset][placement='end']) dialog {
  height: calc(100dvh - 2 * var(--inset-gap));
  inset-block: var(--inset-gap);
}

/* Block-edge drawers (top/bottom): inset the inline edges, shrink width to fit. */
:host([inset][placement='top']) dialog,
:host([inset][placement='bottom']) dialog {
  width: calc(100dvw - 2 * var(--inset-gap));
  inset-inline: var(--inset-gap);
}

/* Inline-start edge: gap on the start side. */
:host([inset]:not([placement])) dialog,
:host([inset][placement='start']) dialog {
  inset-inline-start: var(--inset-gap);
}

:host([inset]:not([placement])) dialog:not([open]),
:host([inset][placement='start']) dialog:not([open]) {
  translate: calc(-100% - var(--inset-gap)) 0;
}

@starting-style {
  :host([inset]:not([placement])) dialog[open],
  :host([inset][placement='start']) dialog[open] {
    translate: calc(-100% - var(--inset-gap)) 0;
  }
}

/* Inline-end edge: gap on the end side (override the base auto margin). */
:host([inset][placement='end']) dialog {
  inset-inline-start: auto;
  inset-inline-end: var(--inset-gap);
  margin-inline-start: 0;
}

:host([inset][placement='end']) dialog:not([open]) {
  translate: calc(100% + var(--inset-gap)) 0;
}

@starting-style {
  :host([inset][placement='end']) dialog[open] {
    translate: calc(100% + var(--inset-gap)) 0;
  }
}

/* Block-start (top) edge: gap on the top side. */
:host([inset][placement='top']) dialog {
  inset-block-start: var(--inset-gap);
}

:host([inset][placement='top']) dialog:not([open]) {
  translate: 0 calc(-100% - var(--inset-gap));
}

@starting-style {
  :host([inset][placement='top']) dialog[open] {
    translate: 0 calc(-100% - var(--inset-gap));
  }
}

/* Block-end (bottom) edge: gap on the bottom side (override the base auto margin). */
:host([inset][placement='bottom']) dialog {
  inset-block-start: auto;
  inset-block-end: var(--inset-gap);
  margin-block-start: 0;
}

:host([inset][placement='bottom']) dialog:not([open]) {
  translate: 0 calc(100% + var(--inset-gap));
}

@starting-style {
  :host([inset][placement='bottom']) dialog[open] {
    translate: 0 calc(100% + var(--inset-gap));
  }
}