<commit_before>/*
Flag

To create a flag to highlight content to a user

Markup:
<p> Example content for the flag component in the component library.
  <span class="flag {{modifier_class}}">Example flag text.</span>
</p>

.flag--soon           - A flag to indicate action needed soon
.flag--urgent         - A flag to indicate urgent action
.flag--on-right-side  - A flag positioned on the right of content

Styleguide Flag
*/

.flag {
  display: inline-block;
  color: $white;
  padding: em(7) em(8) em(5);
  @include core-16();
  line-height: em(16);
  text-decoration: none;

  @include ie-lte(7) {
    zoom: 1;
  }

  &.flag--soon {
    background-color: $grey-1;
  }

  &.flag--urgent {
    background-color: $red;
  }

  &.flag--on-right-side {
    margin-left: em(6);
  }

  /*
  Flag on left

  A flag positioned on the left of content

  Markup:
  <p>
    <span class="flag flag--on-left-side">Example flag text.</span>
    Example content for the flag component in the component library.
  </p>

  Styleguide Flag.left
  */
  &.flag--on-left-side {
    margin-right: em(6);
  }
}

.highlight-block--red {
  display: inline-block;
  color: $white;
  padding: em(7) em(8) em(5);
  @include core-16();
  line-height: em(16);
  text-decoration: none;
  background-color: $red;

  @include ie-lte(7) {
    zoom: 1;<commit_msg>split flag right out to its own modifier and added background: dark to right and left flag examples fixes #566<commit_after>/*
Flag

To create a flag to highlight content to a user

Markup:
<p> Example content for the flag component in the component library.
  <span class="flag {{modifier_class}}">Example flag text.</span>
</p>

.flag--soon           - A flag to indicate action needed soon
.flag--urgent         - A flag to indicate urgent action

Styleguide Flag
*/

.flag {
  display: inline-block;
  color: $white;
  padding: em(7) em(8) em(5);
  @include core-16();
  line-height: em(16);
  text-decoration: none;

  @include ie-lte(7) {
    zoom: 1;
  }

  &.flag--soon {
    background-color: $grey-1;
  }

  &.flag--urgent {
    background-color: $red;
  }

  /*
  Flag on right

  A flag positioned on the right of content

  Markup:
  <p> Example content for the flag component in the component library.
    <span class="flag flag--on-right-side">Example flag text.</span>
  </p>

  Background: dark

  Styleguide Flag.right
  */

  &.flag--on-right-side {
    margin-left: em(6);
  }

  /*
  Flag on left

  A flag positioned on the left of content

  Markup:
  <p>
    <span class="flag flag--on-left-side">Example flag text.</span>
    Example content for the flag component in the component library.
  </p>

  Background: dark

  Styleguide Flag.left
  */
  &.flag--on-left-side {
    margin-right: em(6);
  }
}

.highlight-block--red {
  display: inline-block;
  color: $white;
  padding: em(7) em(8) em(5);
  @include core-16();
  line-height: em(16);
  text-decoration: none;
  background-color: $red;

  @include ie-lte(7) {
    zoom: 1;
{'fraction_non_alphanumeric': 0.13755020080321284, 'fraction_numerical': 0.015060240963855422, 'mean_word_length': 2.7503136762860727, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 23, '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': '1987174', 'n_tokens_mistral': 1081, 'n_tokens_neox': 1037, 'n_words': 322}