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

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


  button#playground-copy-url {
    float: right;
  }

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

    &.show {
      opacity: 1;
    }
  }
}

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

.code-editor-wrapper {
  // Duplicated from fun fact- should this be defined elsewhere?
  border: var(--sl-border--small) solid var(--sl-color--code-background-darker);
.playground-wrapper {
  display: flex;
  flex-flow: row wrap;
  gap: var(--sl-gutter);

    flex-grow: 1;
    min-width: calc((100% - var(--sl-gutter)) / 2);
  }

  #editor {
    --sl-color-editor-background: var(--sl-color--white);

    cursor: text;
  }

  #css-view {
    --sl-color-editor-background: var(--sl-color--code-background);
  }

  .console {
    font-family: 'Source Code Pro', 'SF Mono', monaco, inconsolata, 'Fira Mono',
      'Droid Sans Mono', monospace;
    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;
      }
    }
  }
}


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

  button {
    background-color: var(--sl-color--tab-bg, --sl-color--code-background);
    border: 0;
    color: var(--text, var(--sl-color--pale-sky));
    cursor: pointer;
    font-weight: typography.$sl-font-weight--bold;
    padding: var(--sl-gutter--half);

    &:hover {
      // TODO- add hover styles
    }
  }

  $sassoptions: 'scss', 'indented';

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

  $cssoptions: 'expanded', 'compressed';
  @each $option in $cssoptions {
    &[data-active='#{$option}'] [data-value='#{$option}'] {
      --sl-color--tab-bg: 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
  var(--sl-color--code-background);
  font-family: typography.$sl-font-family--code;


  // TODO Font weight bold not imported from Google Fonts
  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);
}