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

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

.playground {
  --sl-container-max-width: 100vw;

  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;
  }
}

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

  margin-bottom: 0;
  flex: 1;
}

// Playground banner actions area
.sl-r-banner__playground-actions {
  flex-direction: row-reverse;
  gap: var(--sl-gutter);
}

// Playground banner actions alert message
.sl-r-banner__playground-alert {
  padding-left: var(--sl-gutter);
  padding-right: var(--sl-gutter);
  position: var(--playground-alert-position, absolute);
  right: var(--playground-alert-right, 0);
  top: -50%;

  &.show {
    top: auto;
    right: auto;
  }

  @media screen and (width >= 1065px) {
    &.show {
      --playground-alert-position: relative;
    }
  }
}

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

  &.show {
    opacity: 1;
  }
}

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

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

  display: grid;
  gap: var(--sl-gutter);
  grid-template:
    'sass' 1fr
    'css' auto
    'debug' auto / 100%;

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

// 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;
}

// Codemirror overrides
.cm-editor {
  height: 100%;
  font-size: var(--sl-font-size--x-small);
  background-color: var(--sl-color-editor-background);
  color: var(--sl-color--code-base, var(--sl-color--code-text));

  &.cm-focused {
    // override focus style
  }

  .cm-gutters {
    background-color: var(--sl-color-editor-background);
    border-right: none;
  }

  .cm-content,
  .cm-tooltip-lint {
    font-family: typography.$sl-font-family--code;
  }

  .cm-scroller {
    overflow: auto;
  }

  .cm-activeLine {
    background-color: #cef4;
  }

  .cm-activeLineGutter {
    background-color: #e2f2ff;
  }
}

#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);
  display: flex;

  $sassoptions: 'scss', 'indented';

  @each $option in $sassoptions {
    &[data-active='#{$option}'] [data-value='#{$option}'] {
      --color-tab-background: 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-background: 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'] & {
    display: block;
  }
}

// Make sure all tab bar buttons and text get the same padding
[data-tabbar~='item'] {
  padding: var(--sl-gutter--half);
}

.sl-c-playground__tabbar-title {
  // For nested caps in tab title, reset a few styles
  .caps {
    --sl-font-size--caps: var(--sl-font-size--medium);
    font-weight: normal;
    letter-spacing: 0;
  }

  [data-code='compiled'] &:last-child {
    margin-left: auto;
    text-align: right;
  }
}