<commit_before>.flash {
  cursor: pointer;

  .alert {
    .container {
      position: relative;
    }

    &.alert-success .full-width-container,
    &.alert-success .fixed-flash-inner {
      background: $dark-blue;
      color: white;
    }

    &.alert-danger .full-width-container,
    &.alert-danger .fixed-flash-inner {
      background: $red;
      color: white;
    }

    // regular flash message full-width-container, displayed full width
    // almost on top of the page
    .full-width-container {
      margin: 0 -10px 10px;
      padding: 5px 10px 5px 35px;
    }

    // fixed positioned flash message container, displayed at the very top of the page
    // as wide as the text, centered
    .fixed-flash {
      position: fixed;
      top: 0; left: 0; right: 0;
      text-align: center;

      .fixed-flash-inner {
        border-radius: 4px;
        cursor: pointer;
        display: inline-block;
        padding: 5px 20px;
        margin-top: 15px;

        @include fadeInDown(0.6s);

        p {
          margin: 5px 0;
        }
      }
    }
  }

  .close {
    left: -20px;
    position: absolute;
    top: -3px;
  }
}<commit_msg>Updates .alerts.scss to be closer to BEM. Currently blocked by ember-cli-flash who will provide class customization in their 2.0.0.<commit_after>.flash {
  cursor: pointer;
}

.alert {
  .container {
    position: relative;
  }

  // regular flash message full-width-container, displayed full width
  // almost on top of the page
  .full-width-container {
    margin: 0 -10px 10px;
    padding: 5px 10px 5px 35px;
  }

  // fixed positioned flash message container, displayed at the very top of the page
  // as wide as the text, centered
  .fixed-flash {
    position: fixed;
    top: 0; left: 0; right: 0;
    text-align: center;

    .fixed-flash-inner {
      border-radius: 4px;
      cursor: pointer;
      display: inline-block;
      padding: 5px 20px;
      margin-top: 15px;

      @include fadeInDown(0.6s);

      p {
        margin: 5px 0;
      }
    }
  }
}

// ember-cli-flash package doesn't currently support custom classes.
// but they will in their 2.0.0 release. https://github.com/poteto/ember-cli-flash/issues/99
// Once they do so, the following classes can be renamed after BEM standards  (ex: .alert--state-danger)
.alert-success {
  .full-width-container,
  .fixed-flash-inner {
    background: $dark-blue;
    color: white;
  }
}

.alert-danger {
  .full-width-container,
  .fixed-flash-inner {
    background: $red;
    color: white;
  }
}

.close {
  left: -20px;
  position: absolute;
  top: -3px;
}
{'fraction_non_alphanumeric': 0.11630602782071098, 'fraction_numerical': 0.023956723338485315, 'mean_word_length': 2.1268115942028984, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 1, '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': '7283945', 'n_tokens_mistral': 907, 'n_tokens_neox': 839, 'n_words': 248}