/* Guide 文件與寬版預覽的展示樣式，不屬於 Drawer 元件 CSS。 */
.guide-demo-drawer {
  background-color: var(--backgroundColor);
  color: var(--textColor);
}

.guide-demo-drawer__page {
  box-sizing: border-box;
  margin-inline: auto;
  max-inline-size: 72rem;
  padding: 1rem;
}

.guide-demo-drawer .drawer-layout__main > ol {
  display: grid;
  gap: 0.75rem;
  list-style: none;
  margin-block: 0 1rem;
  padding: 0;
}

.guide-demo-drawer .drawer-layout__main > ol > li {
  background-color: var(--backgroundColorLayer1);
  border: 1px solid var(--borderColor);
  border-radius: 0.45rem;
  padding: 0.75rem 1rem;
}

.guide-demo-drawer .drawer-layout__main > ol > li:first-child {
  background-color: var(--backgroundColorLayer2);
}

.guide-demo-drawer .drawer-layout__main > ol p:first-child,
.guide-demo-drawer .drawer__body li p:first-child,
.guide-demo-drawer .drawer-layout__main > p:last-child {
  margin-block-start: 0;
}

.guide-demo-drawer .drawer-layout__main > ol p:last-child,
.guide-demo-drawer .drawer__body li p:last-child,
.guide-demo-drawer .drawer-layout__main > p:last-child {
  margin-block-end: 0;
}

.guide-demo-drawer .drawer-layout__main > label {
  display: block;
  font-weight: 700;
  margin-block-end: 0.35rem;
}

.guide-demo-drawer .drawer-layout__main > textarea {
  margin-block-end: 0.5rem;
}