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' min-content
    'main' 1fr
    'footer' min-content / 100%;
  min-height: 100vh;
  overflow: hidden auto;

  @include breakpoints.sl-breakpoint--large {
    height: 100vh;
    overflow: hidden;
  }

  #main-content {
    display: inherit;
    overflow: inherit;
  }

  .site-footer {
    --sl-type-margin-block: var(--sl-gutter--quarter);

    p {
      padding-top: var(--sl-gutter--minus);
    }
  }
}

.sl-r-banner--playground-grid {
  align-items: center;
  display: grid;
  grid-template:
    'logo title copy' auto
    'alert alert alert' minmax(0, auto) / 1fr 1fr 1fr;

  @include breakpoints.sl-breakpoint--large {
    grid-template: 'logo title copy' auto / 1fr 1fr 1fr;
  }
}

// add padding to items in order for alert to be full width
.sl-r-banner--playground__brand {
  padding-left: var(--sl-gutter);

  @include breakpoints.sl-breakpoint--small {
    padding-left: var(--sl-gutter--double);
  }
}

.sl-l-section--playground {
  --container-inline-padding: 0;
  --container-inline-padding-large: 0;

  border-bottom: 1px solid var(--sl-color--iron);
  display: inherit;
  overflow: inherit;
  width: 100%;
}

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

// Playground banner actions area
.sl-r-banner__playground-actions {
  gap: var(--sl-gutter);
  display: contents;

  @include breakpoints.sl-breakpoint--large {
    display: grid;
    grid-template: 'alert copy' auto / minmax(0, auto) max-content;
  }
}

.sl-r-banner__playground-button {
  grid-area: copy;
  padding-right: var(--sl-gutter);
  text-align: right;

  @include breakpoints.sl-breakpoint--small {
    padding-right: var(--sl-gutter--double);
  }
}

// Playground banner actions alert message
.sl-r-banner__playground-alert {
  --alert-padding-block: 0;

  grid-area: alert;
  height: 0;
  opacity: 0;
  padding-left: var(--sl-gutter--half);
  padding-right: var(--sl-gutter--half);
  transition: opacity 0.3s 0.05s, visibility 0.3s;
  visibility: hidden;

  &.show {
    --alert-padding-block: var(--sl-gutter--minus);

    height: 100%;
    opacity: 1;
    visibility: visible;
  }
}

// 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 {
    // magic numbers, the layout is well balanced with these proportions
    grid-template:
      'sass css' minmax(20ex, 1fr)
      'sass debug' minmax(0, 40%) / 1fr 1fr;
    height: 100%;
    overflow: inherit;
  }
}

.sl-c-playground__panel {
  display: grid;
  overflow: inherit;
  grid-template:
    'editor-tabbar' min-content
    'editor-error' min-content
    'editor-code' 1fr / 1fr;
}

.sl-c-playground__panel-content {
  grid-area: editor-code;
  overflow: hidden auto;
}

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

[data-code='precompiled'] {
  --sl-color-editor-background: var(--sl-color--white);

  grid-area: sass;
}

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

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

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

  .cm-lineNumbers .cm-gutterElement {
    min-width: var(--sl-gutter--double);
  }

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

  .cm-scroller {
    overflow: unset;
  }

  .cm-line {
    padding-left: var(--sl-gutter);
  }

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

  .sl-code-is-precompiled & {
    cursor: text;
  }
}

// Compiled CSS error
.sl-c-playground__error {
  display: none;
  font-weight: typography.$sl-font-weight--bold;
  grid-area: editor-error;

  [data-compiler-has-error='true'] & {
    display: block;
  }
}

// Console specific styles
.sl-c-playground__console-wrapper {
  grid-area: debug;
}

.sl-c-playground__console {
  font-family: typography.$sl-font-family--code;
  height: 100%;
  margin: 0;

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

// Playground Tab Bar & Buttons
.sl-c-playground__editor-tabbar {
  background-color: var(--sl-color--code-background-darker);
  display: flex;
  grid-area: editor-tabbar;

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

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

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

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

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

  // align the code editor titles to the right of the panel header area
  .sl-c-playground__code-editor-wrapper & {
    margin-left: auto;
    text-align: right;
  }
}

.sl-c-footer-link-grid {
  align-items: center;
  display: grid;
  gap: var(--sl-gutter);
  grid-template-columns: minmax(var(--twitter-link-width), auto) 1fr;

  @include breakpoints.sl-breakpoint--large {
    grid-template-columns: minmax(var(--twitter-link-width), auto) minmax(
        var(--mac-stadium-icon-width),
        auto
      );
  }
}