//-----------------------------
//
// Banners
//
// Example:
// <div class="c-banner">
//   This is a neutral banner
// </div>
//
// <div class="c-banner c-banner--warning">
//   This is a warning banner
// </div>
//
// <div class="c-banner c-banner--unpinned">
//   This is a free-floating banner
// </div>
//
//-----------------------------

$DBbanner-namespace: "c-banner" !default;

$DBbanner-background-neutral: color(gray, x-light) !default;
$DBbanner-background-success: color(green, x-light) !default;
$DBbanner-background-warning: color(yellow, x-light) !default;
$DBbanner-background-error: color(red, x-light) !default;

$DBbanner-text-neutral: color(gray) !default;
$DBbanner-text-success: color(green, x-dark) !default;
$DBbanner-text-warning: color(yellow, x-dark) !default;
$DBbanner-text-error: color(red, x-dark) !default;

/**
 * Banner component. Used to display messages to the user, typically pinned to
 * the top of the page.
 */
.#{$DBbanner-namespace} {
    @extend %u-l-isle;

    color: $DBbanner-text-neutral;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    border-color: color(gray, x-dark, 0.1);
    background-color: $DBbanner-background-neutral;

    &#{&}--success {
        color: $DBbanner-text-success;
        background-color: $DBbanner-background-success;
    }

    &#{&}--warning {
        color: $DBbanner-text-warning;
        background-color: $DBbanner-background-warning;
    }

    &#{&}--error {
        color: $DBbanner-text-error;
        background-color: $DBbanner-background-error;
    }

    // The default style for banners assumes that the banner is pinned to the top
    // edge of the page. The unpinned modifier treats the banner as a fixed or
    // relatively-positioned element.
    &#{&}--unpinned {
        border-width: 1px;
        border-style: solid;
        border-radius: 3px;
    }
}