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

/// Neutral background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-neutral: color(gray, x-light) !default;

/// Warning background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-warning: color(yellow, x-light) !default;

/// Error background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-error: color(red, x-light) !default;

/// Selected neutral background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-neutral-selected: color(gray, medium) !default;

/// Selected warning background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-warning-selected: color(yellow, dark) !default;

/// Selected error background color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-background-error-selected: color(red, dark) !default;

/// Neutral text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-neutral: color(gray) !default;

/// Warning text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-warning: color(yellow, x-dark) !default;

/// Error text color for token component
/// @access public
/// @group token
/// @type color
$DBtoken-text-error: color(red, x-dark) !default;

// Tokens component
// @example html
// <div class="c-token [modifier]">
//   [avatar/icon]
//   <span class="c-token__name">{{Name/email}}</span>
//   <i class="c-token__delete">&times;</i>
// </div>
.#{$DBtoken-namespace} {
    display: inline-block;
    // We want tokens to always remain on one line
    white-space: nowrap;
    padding: 4px;

    line-height: 1;

    color: $DBtoken-text-neutral;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.1);
    background-color: $DBtoken-background-neutral;

    cursor: default;

    &:hover {
        box-shadow: inset 0 0 0 1px color(gray, x-dark, 0.3);
    }

    > * {
        vertical-align: middle;
        margin-left: 0.25em;

        &:first-child {
            margin-left: 0;
        }
    }
}

// Warning state
// (Out-of-org, non-blocking)
.#{$DBtoken-namespace}--warning {
    color: $DBtoken-text-warning;
    background-color: $DBtoken-background-warning;
}

// Invalid state
// (Out-of-org, suspended)
.#{$DBtoken-namespace}--invalid {
    color: $DBtoken-text-error;
    background-color: $DBtoken-background-error;
}

// Pending state
// Transient state while actual state is determined
.#{$DBtoken-namespace}--pending {
    opacity: 0.5;
}

// Selected state
.#{$DBtoken-namespace}.is-selected, .#{$DBtoken-namespace}.is-selected:hover {
    color: color(white);
    background-color: $DBtoken-background-neutral-selected;

    &.#{$DBtoken-namespace}--warning {
        background-color: $DBtoken-background-warning-selected;
    }

    &.#{$DBtoken-namespace}--invalid {
        background-color: $DBtoken-background-error-selected;
    }
}


// User name or email
.#{$DBtoken-namespace}__name {
    // Open Sans' line-height needs some manual correction
    top: 1px;
    margin-left: 0.25em;
}

// Delete token glyph
.#{$DBtoken-namespace}__delete {
    margin-right: 0.15em;
    margin-left: 0.25em;

    font-size: 1.25em;

    color: currentColor;
    opacity: 0.7;

    cursor: pointer;
}

