// ---
// title: Attention
// description: Boxes for highlighting important information or warnings.
// ---

// ### Default
// For general notifications using the default color.

// <div class="example html">
//   <div class="lego-attention text--center push-double--bottom">
//      This is a note.
//   </div>
//
//   <div class="lego-attention">
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// ### Default With Close
// For general notifications using the default color.

// <div class="example html">
//   <div class="lego-attention text--center push-double--bottom">
//       <svg class="lego-icon lego-attention__close">
//         <use xlink:href="#close"></use>
//       </svg>
//       This is a note.
//   </div>
//
//   <div class="lego-attention">
//       <svg class="lego-icon lego-attention__close">
//         <use xlink:href="#close"></use>
//       </svg>
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// ### Brand
// For general notifications using the brand color.

// <div class="example html">
//   <div class="lego-attention lego-attention--brand text--center push-double--bottom">
//      This is a note.
//   </div>
//
//   <div class="lego-attention lego-attention--brand">
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// ### Warning
// For alterting a user to information that's important.

// <div class="example html">
//   <div class="lego-attention lego-attention--warning text--center push-double--bottom">
//      This is a note.
//   </div>
//
//   <div class="lego-attention lego-attention--warning">
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// ### Good News
// For alterting a user to information that's good.

// <div class="example html">
//   <div class="lego-attention lego-attention--good-news text--center push-double--bottom">
//      This is a note.
//   </div>
//
//   <div class="lego-attention lego-attention--good-news">
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// ### Error
// For bad-news states or bad news.

// <div class="example html">
//   <div class="lego-attention lego-attention--bad-news text--center push-double--bottom">
//      This is a note.
//   </div>
//
//   <div class="lego-attention lego-attention--bad-news">
//     <p>This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae reiciendis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.</p>
//   </div>
// </div>

// [---]


%#{$namespace}attention,
.#{$namespace}attention {
  @extend %kill-last-child-margin;
  padding: spacer(1);
  border-radius: map-fetch($border-radius, base);
  border: 1px solid map-fetch($color, ui base);
  background: map-fetch($color, background faint);

  &--brand {
    border-color: map-fetch($color, ui brand-light);
    background-color: map-fetch($color, background brand-light);
  }

  &--warning {
    border-color: map-fetch($color, ui warning);
    background-color: map-fetch($color, background warning);
  }

  &--good-news {
    border-color: map-fetch($color, ui good-news);
    background-color: map-fetch($color, background good-news);
  }

  &--bad-news {
    border-color: map-fetch($color, ui bad-news);
    background-color: map-fetch($color, background bad-news);
  }

  &__close {
    float: right;
    margin-left: spacer(1);
    cursor: pointer;
  }
}