@layer clickui {@keyframes flyout-animation-width__LabkI {
  from {
    width: 0;
  }

  to {
    /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
       is the original animation target width */
    width: fit-content;
  }
}

.content__fwsoV {
  display: flex;
  top: 0;
  bottom: 0;
  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- `fit-content`
     is the original sizing keyword; the animation expands width to fit-content */
  width: fit-content;
  max-width: 100%;
  overflow: hidden;
  flex-direction: column;
  align-items: center;
  gap: 0;
  background: var(--click-flyout-color-background-default);
  animation: flyout-animation-width__LabkI 500ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.content_align_start__bXW3C {
  left: 0;
  border-right: 1px solid var(--click-flyout-color-stroke-default);
  box-shadow: var(--click-flyout-shadow-reverse);
}

.content_align_end__zF1Qd {
  right: 0;
  border-left: 1px solid var(--click-flyout-color-stroke-default);
  box-shadow: var(--click-flyout-shadow-default);
}

.content_no-shadow__jiMRV {
  box-shadow: none;
}

.content_type_default__F2-WU {
  padding: 0 var(--click-flyout-space-default-x);
}

.content_type_inline__mKVTA {
  padding: 0 var(--click-flyout-space-inline-x);
}

.content_strategy_relative__KVF6H {
  position: relative;
  height: 100%;
}

.content_strategy_absolute__6z1Tg {
  position: absolute;
  height: auto;
}

.content_strategy_fixed__Dtihd {
  position: fixed;
  height: auto;
}

/* stylelint-disable-next-line media-feature-range-notation -- prefix notation
   required for browser compatibility per .browserslistrc */
@media (max-width: 1024px) {
  .content__fwsoV {
    overflow: hidden;
    transition: 0.3s ease-in-out;
  }

  .content_strategy_relative__KVF6H {
    position: absolute !important;
  }

  .content_align_start__bXW3C {
    transform: translateX(calc(50px - 100%));
  }

  .content_align_end__zF1Qd {
    transform: translateX(calc(100% - 50px));
  }

  .content_align_start__bXW3C:hover,
  .content_align_start__bXW3C.active__VBaS3,
  .content_align_start__bXW3C:focus-within {
    right: auto;
    transform: translateX(0);
  }

  .content_align_end__zF1Qd:hover,
  .content_align_end__zF1Qd.active__VBaS3,
  .content_align_end__zF1Qd:focus-within {
    left: auto;
    transform: translateX(0);
  }
}

.container__QQcvn {
  display: flex;
  width: var(--flyout-width);
  max-width: 100%;
  gap: inherit;
  flex-flow: column nowrap;
}

.element__vbaHR {
  /* stylelint-disable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown -- the original
     used this same max-width fallback chain (100% → -webkit-fill-available →
     fill-available → stretch) so the element fills the available inline space. */
  max-width: 100%;
  max-width: -webkit-fill-available;
  max-width: fill-available;
  max-width: stretch;
  /* stylelint-enable plugin/no-unsupported-browser-features, declaration-property-value-no-unknown */
}

/* Doubled class: this element renders as a <Container>, whose base class also
   sets `padding`/`gap`. Doubling outranks the single-class Container base so the
   Flyout override wins regardless of CSS-module bundle order (matches the
   styled(Container) override semantics). */
.element_type_default__gEAPS.element_type_default__gEAPS {
  padding: 0 var(--click-flyout-space-default-content-x);
  gap: var(--click-flyout-space-default-gap);
}

.element_type_inline__3AK66.element_type_inline__3AK66 {
  padding: 0 var(--click-flyout-space-inline-content-x);
  gap: var(--click-flyout-space-inline-gap);
}

/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
.header__xoWbL {
}

.header_type_default__jnnp8.header_type_default__jnnp8 {
  padding: var(--click-flyout-space-default-y) var(--click-flyout-space-default-y)
    0 var(--click-flyout-space-default-y);
  gap: var(--click-flyout-space-default-content-row-gap)
    var(--click-flyout-space-default-content-column-gap);
}

.header_type_inline__ZwZwK.header_type_inline__ZwZwK {
  padding: var(--click-flyout-space-inline-y) var(--click-flyout-space-inline-y) 0
    var(--click-flyout-space-inline-y);
  gap: var(--click-flyout-space-inline-content-row-gap)
    var(--click-flyout-space-inline-content-column-gap);
}

.title__XWfvS {
  margin: 0;
  padding: 0;
  color: var(--click-flyout-color-title-default);
}

.title_type_default__RKLIT {
  font: var(--click-flyout-typography-default-title-default);
}

.title_type_inline__Gfz6L {
  font: var(--click-flyout-typography-inline-title-default);
}

.description__RQLMp {
  margin: 0;
  padding: 0;
  color: var(--click-flyout-color-description-default);
}

.description_type_default__-M3Et {
  font: var(--click-flyout-typography-default-description-default);
}

.description_type_inline__1lim3 {
  font: var(--click-flyout-typography-inline-description-default);
}

/* Doubled class: renders as a <Container> whose base sets `width`. */
.body__aKC9P.body__aKC9P {
  width: var(--flyout-width);
  max-width: 100%;
}

.body_align_default__u0bH8.body_align_default__u0bH8 {
  margin-top: 0;
}

.body_align_top__cSSni.body_align_top__cSSni {
  margin-top: -1rem;
}

/* Doubled class: renders as a <Container> whose base sets `width`. */
.footer-container__bzuJr.footer-container__bzuJr {
  width: var(--flyout-width);
  max-width: 100%;
}

/* stylelint-disable-next-line block-no-empty -- base element required by BEM */
.footer__EGRZo {
}

.footer_type_default__Fx8Bs.footer_type_default__Fx8Bs {
  padding: var(--click-flyout-space-default-y) var(--click-flyout-space-default-content-x);
  gap: var(--click-flyout-space-default-content-row-gap)
    var(--click-flyout-space-default-content-column-gap);
}

.footer_type_inline__2Xmxa.footer_type_inline__2Xmxa {
  padding: var(--click-flyout-space-inline-y) var(--click-flyout-space-inline-content-x);
  gap: var(--click-flyout-space-inline-content-row-gap)
    var(--click-flyout-space-inline-content-column-gap);
}

.code-block__Rb7dS {
  display: flex;
  height: 100%;
}

.code-block__Rb7dS pre {
  flex: 1;
  overflow-wrap: break-word;
}

.code-block__Rb7dS pre code {
  display: inline-block;
  max-width: calc(100% - 1rem);
}
}