// Custom components built on top of Primer

// Typography
.no-italic {
    font-style: normal !important;
}

.underline {
    @extend .text-underline;
    @extend .no-italic;
}

.block {
    display: block;
}

// Buttons and Labels
.btn {
    color: $text-color;
}

.RatingLabel {
    @extend .IssueLabel, .IssueLabel--big;
    color: white;
    font-family: $ui-font-family;
    font-weight: normal;
}

summary.RatingLabel:hover {
    box-shadow: 0px 0px 6px 0px slategray;
}

.RatingLabel-1 {
    @extend .RatingLabel;
    background-color: $danger-color;
}

.RatingLabel-2 {
    @extend .RatingLabel;
    background-color: slategray;
}

.RatingLabel-4 {
    @extend .RatingLabel;
    background-color: $banner-color;
}

.RatingLabel-5 {
    @extend .RatingLabel;
    background-color: #212385;
    font-family: $readable-font-family !important;
    font-size: 13px;
}

.RatingDetails {
    margin: -9px 9px 0px;
    border-radius: 6px;
    padding: 11px;
    border: 1px solid lightgray;
}

.TagLabel {
    @extend .Label, .Label--large;
    margin-right: 4px;
    margin-bottom: 4px;
    border-color: $brand-color;
    color: $brand-color !important;
}
