////
/// Attention
/// @description Boxes for highlighting important information or warnings.
///
/// @example[html] Default colored attention bar with little content
///   <div class="oui-attention oui-text--center">
///      This is a note.
///   </div>
/// @example[html] Default colored attention bar with long content
///   <div class="oui-attention">
///      This is a longer note adipisicing elit. Recusandae ipsum tenetur est quisquam beatae aliquam facere molestiae re endis aperiam molestias consequuntur voluptatum corporis voluptas laudantium dolor, nam quam laboriosam harum.
///   </div>
/// @example[html] Default colored attention bar with close button
///   <div class="oui-attention oui-text--center">
///     <svg class="oui-icon oui-attention__close">
///       <use xlink:href="#close-16"></use>
///     </svg>
///     This is a note.
///   </div>
/// @example[html] Brand colored attention bar
///   <div class="oui-attention oui-attention--brand oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Warning colored attention bar
///   <div class="oui-attention oui-attention--warning oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Success colored attention bar
///   <div class="oui-attention oui-attention--good-news oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Error colored attention bar
///   <div class="oui-attention oui-attention--bad-news oui-text--center">
///     This is a note.
///   </div>
////

%#{$namespace}attention,
.#{$namespace}attention,
.oui-attention {
    @extend %kill-last-child-margin;
    padding: spacer(1);
    border-radius: map-fetch($border, radius, base);
    border: 1px solid map-fetch($border, color, 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;
    }
}