<commit_before>// studio alerts and notifications
// ====================

// notifications
.wrapper-notification {
  @include clearfix();
  @include box-sizing(border-box);
  transition: bottom 1.0s ease-in-out 0.125s;
  -webkit-transition: bottom 1.0s ease-in-out 0.125s;
  @include box-shadow(0 -1px 3px $shadow);
  position: fixed;
  z-index: 1000;
  width: 100%;
  border-top: 4px solid $gray-l1;
  padding: ($baseline*0.75) ($baseline*2);
  background: $gray-d3;

  &.wrapper-notification-warning {
    border-top-color: $orange;

    .icon-warning {
      color: $orange;
    }

    &:hover {
      border-top-color: $orange-s2;

      .icon-warning {
        color: $orange-s2;
      }
    }
  }

  &.wrapper-notification-error {
    border-top-color: $red-l1;

    .icon-error {
      color: $red-l1;
    }

    &:hover {
      border-top-color: $red;

      .icon-error {
        color: $red;
      }
    }
  }

  &.wrapper-notification-confirmation {
    border-top-color: $green;

    .icon-error {
      color: $green;
    }

    &:hover {
      border-top-color: $green-s1;

      .icon-error {
        color: $green-s1;
      }
    }
  }

  // shorter/status notifications
  &.wrapper-notification-status {
    width: ($baseline*6);
    right: ($baseline);
    border-top-color: $pink;
    padding: ($baseline/2) $baseline;

    .notification {
      @include box-sizing(border-box);
      @include clearfix();
      width: 100%;
      max-width: none;
      min-width: none;

      .icon {
        width: $baseline;
        margin-right: ($baseline*0.75);
      }

      .copy {
        width: ($baseline*9);

        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
        }
      }
    }    
  }

  // shorter/status notifications
  &.wrapper-notification-help {
    width: ($baseline*14);
    right: ($baseline);
    padding: ($baseline/2) $baseline;

    .notification {
      @include box-sizing(border-box);
      @include clearfix();
      width: 100%;
      max-width: none;
      min-width: none;

      .icon-help {
        width: $baseline;
        margin-right: ($baseline*0.75);
      }

      .copy {
        width: ($baseline*11);
      }
    }    
  }
}

.notification {
  @include box-sizing(border-box);
  @include clearfix();
  margin: 0 auto;
  width: flex-grid(12);
  max-width: $fg-max-width;
  min-width: $fg-min-width;

  strong {
    font-weight: 700;
  }

  .icon, .copy {
    float: left;
  }

  .icon {
    @include transition (color 0.5s ease-in-out);
    @include font-size(22);
    width: flex-grid(1, 12);
    margin-right: flex-gutter();
    text-align: right;<commit_msg>studio - alerts: small styling tweaks for the close button on help notifications<commit_after>// studio alerts and notifications
// ====================

// notifications
.wrapper-notification {
  @include clearfix();
  @include box-sizing(border-box);
  transition: bottom 1.0s ease-in-out 0.125s;
  -webkit-transition: bottom 1.0s ease-in-out 0.125s;
  @include box-shadow(0 -1px 3px $shadow);
  position: fixed;
  z-index: 1000;
  width: 100%;
  border-top: 4px solid $gray-l1;
  padding: ($baseline*0.75) ($baseline*2);
  background: $gray-d3;

  &.wrapper-notification-warning {
    border-top-color: $orange;

    .icon-warning {
      color: $orange;
    }

    &:hover {
      border-top-color: $orange-s2;

      .icon-warning {
        color: $orange-s2;
      }
    }
  }

  &.wrapper-notification-error {
    border-top-color: $red-l1;

    .icon-error {
      color: $red-l1;
    }

    &:hover {
      border-top-color: $red;

      .icon-error {
        color: $red;
      }
    }
  }

  &.wrapper-notification-confirmation {
    border-top-color: $green;

    .icon-error {
      color: $green;
    }

    &:hover {
      border-top-color: $green-s1;

      .icon-error {
        color: $green-s1;
      }
    }
  }

  // shorter/status notifications
  &.wrapper-notification-status {
    width: ($baseline*6);
    right: ($baseline);
    border-top-color: $pink;
    padding: ($baseline/2) $baseline;

    .notification {
      @include box-sizing(border-box);
      @include clearfix();
      width: 100%;
      max-width: none;
      min-width: none;

      .icon {
        width: $baseline;
        margin-right: ($baseline*0.75);
      }

      .copy {
        width: ($baseline*9);

        p {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          width: 100%;
        }
      }
    }    
  }

  // shorter/status notifications
  &.wrapper-notification-help {
    width: ($baseline*14);
    right: ($baseline);
    padding: ($baseline/2) $baseline;

    .notification {
      @include box-sizing(border-box);
      @include clearfix();
      width: 100%;
      max-width: none;
      min-width: none;

      .icon-help {
        width: $baseline;
        margin-right: ($baseline*0.75);
      }

      .action-notification-close {
        right: 0;
      }

      .copy {
        width: ($baseline*10);
      }
    }    
  }
}

.notification {
  @include box-sizing(border-box);
  @include clearfix();
  margin: 0 auto;
  width: flex-grid(12);
  max-width: $fg-max-width;
  min-width: $fg-min-width;

  strong {
    font-weight: 700;
  }

  .icon, .copy {
    float: left;
  }

  .icon {
    @include transition (color 0.5s ease-in-out);
    @include font-size(22);
    width: flex-grid(1, 12);
    margin-right: flex-gutter();
    text-align: right;
{'fraction_non_alphanumeric': 0.15932572050027188, 'fraction_numerical': 0.02591988399492478, 'mean_word_length': 1.9843158464034614, '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': '4123478', 'n_tokens_mistral': 2069, 'n_tokens_neox': 1878, 'n_words': 377}