:root {
  --ws-code-editor--tooltip--MaxWidth: 16ch;
}

.ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
  --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
}

.ws-code-editor-control {
  --pf-v6-c-button--m-control--BackgroundColor: transparent;
  --pf-v6-c-button--m-control--active--BackgroundColor: transparent;
  --pf-v6-c-button--m-control--focus--BackgroundColor: transparent;
  --pf-v6-c-button--m-control--hover--BackgroundColor: transparent;
}

.ws-code-editor-control.pf-v6-c-button {
  --pf-v6-c-button--after--BorderWidth: 0;
}

.ws-preview__thumbnail-link {
  position: relative;
  line-height: 0;
  overflow: hidden;
  display: inline-block;
}

.ws-preview__thumbnail-link::before,
.ws-preview__thumbnail-link::after {
  position: absolute;
  z-index: var(--pf-t--global--z-index--sm);
  transition: .2s;
  opacity: 0;
}

.ws-preview__thumbnail-link:hover::before,
.ws-preview__thumbnail-link:hover::after {
  opacity: 1;
}

.ws-preview__thumbnail-link::before {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: '';
  background-color: rgba(0,0,0,.5);
}

.ws-preview__thumbnail-link::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
  font-size: 52px;
  color: rgba(255,255,255,.4);
}

.ws-preview__thumbnail-link::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: "Font Awesome 5 Free";
  content: "\f35d";
  font-size: 52px;
  color: rgba(255,255,255,.4);
}

.ws-prop-required {
  color: var(--pf-t--global--text--color--status--danger--default);
}

.ws-full-page-utils {
  position: fixed;
  inset-block-end: 0;
  padding: var(--pf-t--global--spacer--xl);
  z-index: var(--pf-t--global--z-index--2xl);
}

.ws-full-page-utils-position-btn {
  --ws-full-page-utils-btn--inset: var(--pf-t--global--spacer--xs);
  position: absolute;
}

:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-top-right {
  top: var(--ws-full-page-utils-btn--inset, 0);
  right: var(--ws-full-page-utils-btn--inset, 0);
  bottom: auto;
  left: auto;
}

:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-bottom-right {
  top: auto;
  right: var(--ws-full-page-utils-btn--inset, 0);
  bottom: var(--ws-full-page-utils-btn--inset, 0);
  left: auto;
}

:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-bottom-left {
  top: auto;
  right: auto;
  bottom: var(--ws-full-page-utils-btn--inset, 0);
  left: var(--ws-full-page-utils-btn--inset, 0);
}

:is(.ws-full-page-utils, .ws-full-page-utils-position-btn).pf-m-top-left {
  top: var(--ws-full-page-utils-btn--inset, 0);
  right: auto;
  bottom: auto;
  left: var(--ws-full-page-utils-btn--inset, 0);
}

.ws-full-page-utils-position-btn.pf-m-clicked {
  --pf-v6-c-button__icon--Color: var(--pf-t--global--text--color--regular);
}

.ws-full-page-utils::before {
  position: absolute;
  inset: 0;
  content: "";
  background-color: var(--pf-t--global--background--color--floating--default);
  opacity: 0.8;
  box-shadow: var(--pf-t--global--box-shadow--sm);
}