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:
    'editor-tabbar' min-content
    'editor-error' min-content
    'editor-code' 1fr / 1fr;
}

.sl-code-is-compiled {
  grid-area: editor-code;
}

// 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-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-activeLineGutter,
  .cm-activeLine {
    background-color: var(--sl-color--highlight-blush);

    [data-code='compiled'] & {
      background-color: var(--sl-color--code-background);
    }
  }

  &.cm-focused {
    [data-code='precompiled'] & {
      outline: 1px solid var(--sl-color--border-blush);
    }

    [data-code='compiled'] & {
      outline: 0;
    }
  }
}

#editor {
  cursor: text;
}

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

  .console-line {
    display: grid;
    gap: var(--sl-gutter);
    grid-template:
      'location message' auto / 10ch 1fr;
  }

  .console-message {
    display: grid;
  }

  $console-type-colors: (
    'error': var(--sl-color--error),
    'warn': var(--sl-color--warn),
    'debug': var(--sl-color--success),
  );

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

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

  [data-active='true'] {
    --color-button-tab-active: var(--text, var(--sl-color--pale-sky));
    --color-tab-focus: var(--color-button-tab-active);
  }

  [data-code='precompiled'] & {
    [data-active='true'] {
      --color-tab-background: var(--sl-color--white);
      --color-tab-background-hover: var(--sl-color--white);
    }
  }

  [data-code='compiled'] & {
    [data-active='true'] {
      --color-tab-background: var(--sl-color--code-background);
      --color-tab-background-hover: var(--sl-color--code-background);
    }
  }
}

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