.code-preview,.controls{--db-component-viewer-color-border: var(--qp-component-viewer-color-border)}.code-preview{--db-component-viewer-action-color-text-hover: var( --qp-component-viewer-action-color-text-hover );--db-component-viewer-action-color-text: var( --qp-component-viewer-action-color-text )}.code-preview__resizer{--db-component-viewer-resizer-color-background-hover: var( --qp-component-viewer-resizer-color-background-hover );--db-component-viewer-resizer-color-background: var( --qp-component-viewer-resizer-color-background );--db-component-viewer-resizer-color-border-hover: var( --qp-component-viewer-resizer-color-border-hover );--db-component-viewer-resizer-color-border: var( --qp-component-viewer-resizer-color-border );--db-component-viewer-resizer-color-fill: var( --qp-component-viewer-resizer-color-fill )}.controls{--db-component-viewer-controls-color-background: var( --qp-component-viewer-controls-color-background );--db-component-viewer-controls-color-border: var( --qp-component-viewer-controls-color-border );--db-component-viewer-controls-input-shadow: var( --qp-component-viewer-controls-input-shadow )}.controls__code{--db-component-viewer-controls-code-color-background: var( --qp-component-viewer-controls-code-color-background )}.controls__inputs{--db-component-viewer-controls-input-color-accent: var( --qp-component-viewer-controls-input-color-accent );--db-component-viewer-controls-input-color-border-hover: var( --qp-component-viewer-controls-input-color-border-hover );--db-component-viewer-controls-input-color-border: var( --qp-component-viewer-controls-input-color-border );--db-component-viewer-controls-input-color-text-placeholder: var( --qp-component-viewer-controls-input-color-text-placeholder );--db-component-viewer-controls-input-color-text: var( --qp-component-viewer-controls-input-color-text );--db-component-viewer-controls-input-font-family: var( --qp-component-viewer-controls-input-font-family );--db-component-viewer-controls-input-shadow-focus: var( --qp-component-viewer-controls-input-shadow-focus )}.code-preview__preview{background-color:var(--db-content-color-background)}.code-preview__scrollable{overflow-x:hidden;overflow-y:auto;position:relative;z-index:1}.controls__code{line-height:var(--db-content-code-block-line-height);overflow:hidden}.controls__code pre{overflow:hidden}.controls__code pre code{overflow:auto}.controls__preview>.code-preview__scrollable{background-color:var(--db-component-viewer-resizer-color-background);container-type:size;height:100%;width:100%}