/// Global namespace for badge component
/// @access public
/// @group badge
/// @type string
$DBbadge-namespace: "c-badge" !default;

/// Global background color for badge component
/// @access public
/// @group badge
/// @type color
$DBbadge-background: color(white) !default;

/// Global text color for badge component
/// @access public
/// @group badge
/// @type color
$DBbadge-text-color: color(red, medium) !default;

/// Global border color for badge component
/// @access public
/// @group badge
/// @type color
$DBbadge-border-color: color(red, light) !default;

.#{$DBbadge-namespace} {
    // Repeat the box-sizing reset here in case this component is used without the reset stylesheet.
    box-sizing: border-box;

    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 1px 4px;

    font-size: 9px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    text-shadow: none;

    color: $DBbadge-text-color;
    background: $DBbadge-background;

    border: 1px solid $DBbadge-border-color;
    border-radius: 3px;

    &#{&}--top-right {
        position: absolute;
        z-index: 1;
        top: -1em;
        left: -1em;

        // Align the left edge relative to the right edge.
        margin-left: 100%;
    }
}
