<commit_before>@import '~font-awesome/scss/variables';
@import '~font-awesome/scss/mixins';
@import '../vars';

/**
 * Creates a background that displays an opening square bracket using multiple linear gradients.
 */
@mixin square-bracket-bg($width, $stroke-color, $stroke-width, $top, $bottom) {
  $vertical-stroke: linear-gradient(to left, transparent $width - $stroke-width, $stroke-color $width - $stroke-width, $stroke-color $width, transparent $width);
  $top-stroke: linear-gradient(to bottom, $stroke-color $stroke-width, transparent $stroke-width);
  $bottom-stroke: linear-gradient(to top, $stroke-color $stroke-width, transparent $stroke-width);

  @if($top == true and $bottom == true) {
    background-image: $vertical-stroke, $top-stroke, $bottom-stroke;
  }
  @else if($top == true and $bottom == false) {
    background-image: $vertical-stroke, $top-stroke;
  }
  @else if($top == false and $bottom == true) {
    background-image: $vertical-stroke, $bottom-stroke;
  }
  @else {
    background-image: $vertical-stroke;
  }

  background-size: $width 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

[data-renderer=aggregate] {
  text-align: center;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, false, false);
}

[data-meta~=first] [data-renderer=aggregate] {
  cursor: pointer;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, true, false);

  &::before {
    @include fa-icon();

    content: $fa-var-caret-down;
    padding-right: $lu_aggregate_square_bracket_width;
  }
}

[data-meta~=last] [data-renderer=aggregate] {
  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, false, true);
}

[data-agg=group] [data-renderer=aggregate] {
  padding-right: $lu_aggregate_square_bracket_width;
  cursor: pointer;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, true, true);
}

[data-agg=group] [data-renderer=aggregate]::before {
  @include fa-icon();

  content: $fa-var-caret-right;
}
<commit_msg>fix aggregate group hints<commit_after>@import '~font-awesome/scss/variables';
@import '~font-awesome/scss/mixins';
@import '../vars';

/**
 * Creates a background that displays an opening square bracket using multiple linear gradients.
 */
@mixin square-bracket-bg($width, $stroke-color, $stroke-width, $top, $bottom) {
  $vertical-stroke: linear-gradient(to left, transparent $width - $stroke-width, $stroke-color $width - $stroke-width, $stroke-color $width, transparent $width);
  $top-stroke: linear-gradient(to bottom, $stroke-color $stroke-width, transparent $stroke-width);
  $bottom-stroke: linear-gradient(to top, $stroke-color $stroke-width, transparent $stroke-width);

  @if($top == true and $bottom == true) {
    background-image: $vertical-stroke, $top-stroke, $bottom-stroke;
  }
  @else if($top == true and $bottom == false) {
    background-image: $vertical-stroke, $top-stroke;
  }
  @else if($top == false and $bottom == true) {
    background-image: $vertical-stroke, $bottom-stroke;
  }
  @else {
    background-image: $vertical-stroke;
  }

  background-size: $width 100%;
  background-repeat: no-repeat;
  background-position: center right;
}

[data-renderer=aggregate] {
  text-align: center;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, false, false);
}

[data-meta~=first] [data-renderer=aggregate] {
  cursor: pointer;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, true, false);

  &::before {
    @include fa-icon();

    content: $fa-var-caret-down;
    padding-right: $lu_aggregate_square_bracket_width;
  }
}

[data-meta=last] [data-renderer=aggregate] {
  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, false, true);
}

[data-meta='first last'] [data-renderer=aggregate],
[data-agg=group] [data-renderer=aggregate] {
  padding-right: $lu_aggregate_square_bracket_width;
  cursor: pointer;

  @include square-bracket-bg($lu_aggregate_square_bracket_width, $lu_aggregate_square_bracket_stroke_color, $lu_aggregate_square_bracket_stroke_width, true, true);
}

[data-agg=group] [data-renderer=aggregate]::before {
  @include fa-icon();

  content: $fa-var-caret-right;
}

{'fraction_non_alphanumeric': 0.14049066890333403, 'fraction_numerical': 0.0012581253931641854, 'mean_word_length': 5.746817538896747, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5813528', 'n_tokens_mistral': 1680, 'n_tokens_neox': 1579, 'n_words': 290}