////
/// ButterBar
/// @description Boxes for highlighting important information or warnings.
///
/// @example[html] Default colored butterbar with little content
///   <div class="oui-butterbar oui-text--center">
///      This is a note.
///   </div>
/// @example[html] Default colored butterbar with long content
///   <div class="oui-butterbar">
///      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 butterbar with close button
///   <div class="oui-butterbar oui-text--center">
///     <svg class="oui-icon oui-butterbar__close">
///       <use xlink:href="#close-16"></use>
///     </svg>
///     This is a note.
///   </div>
/// @example[html] Brand colored butterbar
///   <div class="oui-butterbar oui-butterbar--brand oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Warning colored butterbar
///   <div class="oui-butterbar oui-butterbar--warning oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Success colored butterbar
///   <div class="oui-butterbar oui-butterbar--good-news oui-text--center">
///     This is a note.
///   </div>
/// @example[html] Error colored butterbar
///   <div class="oui-butterbar oui-butterbar--bad-news oui-text--center">
///     This is a note.
///   </div>
////

%#{$namespace}butterbar,
.#{$namespace}butterbar,
.oui-butterbar {
    padding: spacer(0.5);
    border-bottom: 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;
    }
}