:host {
  display: block;
}

docs-playground {
  --box-space: var(--bs-space-f-4);
  background-color: var(--bs-bg-invert-subtle);
  container-type: inline-size;
  display: block;
  padding: 1rem;
}
docs-playground .pg-layout,
docs-playground .pg-layout-no-props {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: auto;
  height: 100%;
}
docs-playground .pg-layout docs-prop-display,
docs-playground .pg-layout-no-props docs-prop-display {
  grid-area: props;
}
docs-playground .pg-layout docs-code-display,
docs-playground .pg-layout-no-props docs-code-display {
  grid-area: code;
}
docs-playground .pg-layout {
  grid-template-areas: "props" "component" "code";
  grid-template-rows: minmax(0px, min-content) minmax(200px, auto) minmax(0px, min-content);
}
@container (min-width: 957px) {
  docs-playground .pg-layout {
    grid-template-areas: "props component" "code code";
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto;
  }
}
docs-playground .pg-layout-no-props {
  grid-template-areas: "component" "code";
  grid-template-rows: minmax(200px, auto) minmax(0px, min-content);
}
docs-playground .pg-code-editor {
  background-color: var(--bs-navy-400);
  border-radius: var(--bs-space-1);
  padding: var(--bs-space-f-4);
}
docs-playground .pg-example-props label {
  color: var(--bs-white);
}
docs-playground .pg-example-container {
  align-items: center;
  background-color: var(--bs-bg-base);
  border-radius: var(--bs-space-1);
  color: var(--bs-ink-base);
  grid-area: component;
  padding: var(--bs-space-f-4);
}
@container (min-width: 957px) {
  docs-playground .pg-example-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}
docs-playground .pg-example-container :is(input, textarea, select):focus {
  --offset-color: var(--bs-bg-subtle);
}