@use 'sass:color';
@use '../breakpoints';
@use '../config/color/brand';

// Use h2 sizes for condensed header
.sl-r-banner-playground h1 {
  @include breakpoints.sl-breakpoint--medium {
    --h1-size: var(--sl-font-size--xx-large);
  }

  @include breakpoints.sl-breakpoint--large {
    --h1-size: var(--sl-font-size--xxx-large);
  }
}

.playground-wrapper {
  display: flex;
  gap: var(--sl-gutter);

  > div {
    // Duplicated from fun fact- should this be defined elsewhere?
    border: var(--sl-border--small) solid
      color.adjust(brand.$sl-color--patina, $lightness: 32%);
    flex: 50%;
  }

  .code-editor-tabbar {
    background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);

    button {
      background-color: color.adjust(brand.$sl-color--patina, $lightness: 32%);
      font-weight: bold;
      color: var(--text, var(--sl-color--pale-sky));
      padding: var(--sl-gutter--half);
      border: 0;
    }

    $options: 'scss', 'indented', 'expanded', 'compressed';

    @each $option in $options {
      &[data-active='#{$option}'] [data-value='#{$option}'] {
        background-color: var(--sl-color--code-background);
      }
    }
  }

  #code-editor-error-alert {
    display: none;

    // From warning callout
    background: color.adjust(brand.$sl-color--hopbush, $lightness: 38%);
    border: var(--sl-border--small) solid
      color.adjust(brand.$sl-color--hopbush, $lightness: 27%);
    font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
      'Droid Sans Mono', monospace;
    font-size: var(--sl-font-size--x-small);
    padding: var(--sl-gutter--half);

    // TODO Font weight bold not imported from Google Fonts
    font-weight: bold;
  }

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