@use "../../../assets/variables.scss" as vars;

.playground-code-block-wrapper {
  max-height: 650px;
  overflow-y: auto;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 18px;
  border-radius: var(--p-content-border-radius);
  border: 1px solid var(--p-surface-700);
}
@media (max-width: vars.$md) {
  .playground-code-block-wrapper {
    flex-direction: column;
  } 
}

// FT: Don't put inside class-code-editor it needs to be wrapped in parent component
.class-code-editor {
  background-color: var(--p-surface-900);
  border-radius: var(--p-content-border-radius);
  border: 1px solid var(--p-surface-700);
  height: fit-content; 
  position: sticky; 
  position: -webkit-sticky; 
  top: 0;
  width: 100%;
  padding: 18px;
  word-wrap: break-word;
  // overflow-x: auto; // FT HACK: If I add overflow-x: auto, overflow-y: auto is also added, which is bad, so for now I made a hack with word-wrap
}

.web-app {
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -webkit-transform: scale(1);
  transform: scale(1);
  background-color: var(--p-surface-800);
  border: 1px solid var(--p-surface-700);
  min-height: 500px;
  width: 100%;
  font-size: 90%;
  border-radius: var(--p-content-border-radius);
}

.control-error-border{
	outline: 1px solid var(--p-inputtext-invalid-border-color);
	border-radius: var(--p-form-field-border-radius);
}