sass-site/source/assets/sass/components/_playground.scss

@use 'sass:color';
@use '../breakpoints';
@use '../config/color/brand';
@use '../visual-design/typography';

.playground {
  display: grid;
  grid-template:
    'header' auto
    'main' 1fr
    'footer' auto / 100%;
  min-height: 100vh;

  #main-content {
    display: grid;
    grid-template:
    'editor' 1fr
    'alert' min-content;
  }
}

// Use smaller sizes for condensed header
.sl-r-banner-playground {
  --h1-size: var(--sl-font-size--xx-large);
  --h1-size-lg: var(--sl-playground-heading);
}

.sl-l-section-playground {
  display: grid;
  width: 100%;
}

.playground-actions {
  flex-direction: row-reverse;
}

#playground-copied-alert {
  opacity: 0;
  transition: opacity 0.3s linear;

  &.show {
    opacity: 1;
  }
}

.playground-actions {
  gap: var(--sl-gutter--double);
}

.playground-alert {
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
}


// Playground Editor area
.sl-c-playground {
  --sl-c-callout--block-margin: 0;
  display: grid;
  gap: var(--sl-gutter);

  @include breakpoints.sl-breakpoint--medium {
    grid-template:
      'sass  css' 1fr
      'debug debug' minmax(0, auto) / 50% 50%;
  }
}

// Precompiled and Compiled code container
.sl-c-playground__code-editor-wrapper {
  background-color: var(--sl-color-editor-background);
  border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
  display: grid;
}

.sl-c-playground__console-wrapper {
  grid-area: debug;
  min-width: calc((100% - var(--sl-gutter)) / 2);
}

[data-code='precompiled'] {
  --sl-color-editor-background: var(--sl-color--white);
  grid-template-rows: min-content 1fr;
}

[data-code='compiled']  {
  --sl-color-editor-background: var(--sl-color--code-background);
  grid-template-rows: min-content minmax(0, auto) 1fr;
}


  .ͼ1 {
    height: 100%;
  }

#editor {
  cursor: text;

}

.console {
  font-family: typography.$sl-font-family--code;
  min-height: 2em;
  max-height: 500px;
  margin: 0;

  hr,
  p {
    margin: 0;
  }

  $console-type-colors: (
    'error': red,
    'warn': orange,
    'debug': green,
  );

  @each $name, $color in $console-type-colors {
    .console-type-#{$name} {
      color: $color;
    }
  }

  > div {
    display: flex;
  }

  .console-location {
    min-width: 7em;
  }
}



.sl-c-playground__editor-tabbar {
  background-color: var(--sl-color--code-background-darker);

  $sassoptions: 'scss', 'indented';
  @each $option in $sassoptions {
    &[data-active='#{$option}'] [data-value='#{$option}'] {
      --color-tab-bg: var(--sl-color--white);
      --color-button-text: var(--text, var(--sl-color--pale-sky));

      &:hover,
      &:focus {
        --color-tab-bg: var(--sl-color--white);
        --color-button-text: var(--text, var(--sl-color--pale-sky));
      }
    }
  }

  $cssoptions: 'expanded', 'compressed';
  @each $option in $cssoptions {
    &[data-active='#{$option}'] [data-value='#{$option}'] {
      --color-tab-bg: var(--sl-color--code-background);
      --color-button-text: var(--text, var(--sl-color--pale-sky));
    }
  }
}

#code-editor-error-alert {
  display: none;
  font-weight: typography.$sl-font-weight--bold;
}

[data-compiler-has-error='true'] {
  #code-editor-error-alert {
    display: block;
  }
}

[data-tabbar~='item'] {
  padding: var(--sl-gutter--half);
}