/*
Status tags

.status-tag--success - Success
.status-tag--warning - Warning
.status-tag--severe-warning - Severe warning
.status-tag--error - Error
.status-tag--info - Info

Markup:
<div class="status-tag {{modifier_class}}">status text</div>
<div class="form__vertical-spacer form__vertical-spacer--large"></div>
<div class="status-tag {{modifier_class}} status-tag--with-close">
    status text
    <button type="button" class="svgicon--btn status-tag__close">
        <span class="screen-reader-only">Close</span>
    </button>
</div>

Name: statusTag

Styleguide 2.3
*/

.status-tag {
    display: inline-block;
    position: relative;
    padding: 0 10px 0;
    line-height: 19px;
    border-radius: 100px;
    font-size: @font-size-status-tag;
    .text-bold;
    text-align: center;
    text-transform: uppercase;
    background-color: @color-status-default-background;
    border: 1px solid @color-status-default-border;
    color: @color-status-default-text;
}

.status-tag--error {
    background-color: @color-error-background;
    border-color: @color-error-border;
    color: @color-error-text;

    .status-tag__close {
        background-image: url("@{icons}delete-red.svg");
    }
}

.status-tag--warning {
    background-color: @color-warning-background;
    border-color: @color-warning-border;
    color: @color-warning-text;

    .status-tag__close {
        background-image: url("@{icons}delete-brown.svg");
    }
}

.status-tag--severe-warning {
    background-color: @color-severe-warning-background;
    border-color: @color-severe-warning;
    color: @color-severe-warning;

    .status-tag__close {
        background-image: url("@{icons}delete-orange.svg");
    }
}

.status-tag--success {
    background-color: @color-success-background;
    border-color: @color-success-border;
    color: @color-success-text;

    .status-tag__close {
        background-image: url("@{icons}delete-green.svg");
    }
}

.status-tag--info {
    background-color: @color-info-background;
    border-color: @color-info-border;
    color: @color-info-text;

    .status-tag__close {
        background-image: url("@{icons}delete-blue.svg");
    }
}

.status-tag--page-header {
    vertical-align: middle;
    margin-bottom: 4px;
}

.status-tag--with-close {
    padding-top: 1px;
    padding-bottom: 1px;
    padding-right: 27px;
}

.status-tag__close {
    position: absolute;
    top: 5px;
    right: 10px;
    width: 11px;
    height: 15px;
    cursor: pointer;
    opacity: 0.5;
    background-image: url("@{icons}delete-grey.svg");
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: top center !important;

    &:hover,
    &:focus {
        opacity: 1;
    }
}