/**
 * Tag
 * --
 * A piece of text highlighted with a background colour used to indicate a the
 * current state.
 */


.mh-tag {
    background-color: $color-alert;
    border-radius: $corner-radius;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    display: inline-block;
    margin: 0 10px;
    padding: 5px 10px;
    text-shadow: 0 1px rgba(0, 0, 0, 0.1);
    @include type(standard, $color: #fff, $font-weight: 400, $line-height: 100%);

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

    &:last-child {
        margin-right: 0;
    }

    & + .mh-tag {
        margin-left: 0;
    }

    &--error {
        background-color: $color-alert-error;
    }

    &--warning {
        background-color: $color-alert-warning;
    }

    &--success {
        background-color: $color-alert-success;
    }

    &--small {
        @include type(small, $color: #fff, $font-weight: 400, $line-height: 100%);
    }

    &--large {
        @include type(large, $color: #fff, $font-weight: 400, $line-height: 100%);
    }

    &--in-results {
        margin: 5px 0;
    }

    // -- User invites --

    &--invite-accepted {
        background-color: $color-alert-success;
    }

    &--invited {
        background-color: $color-alert-warning;
    }

    &--not-invited {
        background-color: #99acb5;
    }

    &--locked-out {
        background-color: $color-alert-error;
    }
}