@import '../root.css';
@import '../font_definitions.css';

.tag {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    font-style: normal;
    font-size: 14px;
}

.tag.project-type {
    color: var( --white-color );
    border: 1px solid var( --purple-highlight-color );
    background-color: var( --purple-light-color );
    padding: 4px 10px;
    text-transform: capitalize;
}

.tag.status {
    padding: 4px 10px;
    font-family: LatoBold, sans-serif;
    cursor: default;
}
.tag.status.scoring,
.tag.status.qa {
    color: var( --purple-dark-color);
    background-color: var( --white-color );
    border: 1px solid var( --gray-light-color );
}
.tag.status.uploaded, .tag.status.processed, .tag.status.processing {
    color: var( --purple-dark-color);
    background-color: var( --purple-lightest-color );
    border: 1px solid var( --purple-lightest-color );
}
.tag.status.completed {
    color: var( --white-color);
    background-color: var( --green-color );
    border: 1px solid var( --green-color );
}
.tag.status.failed,
.tag.status.rejected {
    color: var( --white-color);
    background-color: var( --red-color );
    border: 1px solid var( --red-color );
}

.tag.xray,
.tag.highlight {
    /*padding: 4px 8px;*/
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25), 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 18px rgba(0, 0, 0, 0.25);
    font-size: 14px;
}
.tag.xray.high {
    color: var( --white-color );
    background-color: var( --green-color );
    border: 2px solid var( --green-light-color );
}
.tag.xray.medium {
    color: var( --slate-color );
    background-color: var( --orange-color );
    border: 2px solid var( --yellow-color );
}
.tag.xray.low {
    color: var( --white-color );
    background-color: var( --red-color );
    border: 2px solid var( --light-red-color );
}

.tag.highlight.high {
    color: var( --white-color );
    background-color: rgba(85, 176, 102, .3);
    border: 2px solid var( --green-light-color );
}
.tag.highlight.medium {
    color: var( --white-color );
    background-color: rgba(244, 175, 55, .3);
    border: 2px solid var( --yellow-color );
}
.tag.highlight.low {
    color: var( --white-color );
    background-color: rgba(237, 89, 79, .3);
    border: 2px solid var( --light-red-color );
}