@layer clickui {.codeblock__pRWOC {
  position: relative;
  width: 100%;
  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
     styled-components rule used this same width fallback chain (100% →
     -webkit-fill-available → fill-available → stretch) so the block fills the
     available inline space. */
  width: -webkit-fill-available;
  width: fill-available;
  width: stretch;
  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
  color: var(--codeblock-numbers);
}

/* This class is applied alongside the IconButton module classes on the same
   <button>. `color`, `padding`, and `border` are set by both; the
   styled-components original won them via source order. Double the class so
   those three win regardless of CSS-module bundle order, matching the
   pre-migration rendering. */
.codeblock__button__YDCMe.codeblock__button__YDCMe {
  /* Reset so a copied/error state on one button can't inherit into another via
     the custom property (custom properties inherit by default). The copied/error
     colors are set inline per state via --codeblock-button, matching the
     --codeblock-numbers pattern so both track the ThemeProvider runtime. */
  --codeblock-button: initial;
  /* assign context to be above pseudo-element 
     can be cleaned up when background is a regular color variable with alpha */
  z-index: 1;
  padding: 0;
  border: 0;
  color: var(--codeblock-button, inherit); 
}

.codeblock__highlighter__t4Xol {
  margin: 0;
  padding: 0;
  background: transparent;
}

.codeblock__content__WKNWr {
  color: inherit;
  font-family: inherit;
}

.codeblock__button-container__D6yob {
  display: flex;
  opacity: 0;
  position: absolute;
  top: var(--click-codeblock-space-y);
  right: var(--click-codeblock-space-x);
  padding: var(--spaces-1);
  gap: var(--spaces-1);
  pointer-events: none;
  transition: opacity 200ms ease-in-out;
}

.codeblock__pRWOC:hover .codeblock__button-container__D6yob,
.codeblock__pRWOC:focus-within .codeblock__button-container__D6yob {
  opacity: 1;
  pointer-events: auto;
  transition-duration: 150ms;
}

/* this element can be refactored to a color var with alpha when available */
.codeblock__button-container__D6yob::before {
  content: "";
  opacity: 0.85;
  position: absolute;  
  z-index: 0;
  inset: 0;
  border-radius: var(--spaces-1); 
}

/* custom conditional theming can be later replaced with semantic color tokens */
[data-cui-theme="light"] .codeblock__button-container__D6yob::before {
  background: var(--palette-indigo-100);
}

[data-cui-theme="dark"] .codeblock__button-container__D6yob::before {
  background: var(--palette-neutral-900);
}
}