@import "vars";

.admin a, .admin {
    color: $color_primary100 !important;
    font-weight: bold !important;
}

.deleted-user, .deleted-user a {
    color: #999;
    font-weight: normal;
    text-decoration: line-through $color_primary100;
}

@mixin rate-svg-color($color) {
    circle {
        stroke: $color;
    }
    path {
        fill: $color;
    }
}

svg.rate-box {
    width: 1.2em;

    circle {
        fill: none;
        stroke-width: 2px;
    }

    &.rate-none {
        visibility: hidden;
    }

    &.rate-primary0 {
        @include rate-svg-color($color_primary0);
    }

    &.rate-newbie {
        @include rate-svg-color($color_rating_newbie);
    }

    &.rate-amateur {
        @include rate-svg-color($color_rating_amateur);
    }

    &.rate-expert {
        @include rate-svg-color($color_rating_expert);
    }

    &.rate-candidate-master {
        @include rate-svg-color($color_rating_candidate_master);
    }

    &.rate-master {
        @include rate-svg-color($color_rating_master);
    }

    &.rate-grandmaster, &.rate-target {
        @include rate-svg-color($color_rating_grandmaster);
    }

    &.rate-target {
        circle:last-child {
            stroke: none;
            fill: $color_rating_grandmaster;
        }
    }
}

.rating {
    font-weight: bold;

    a {
        display: inline-block;
    }
}

.rate-none, .rate-none a {
    color: $color_rating_none;
    font-weight: normal;
}

.rate-newbie, .rate-newbie a {
    color: $color_rating_newbie;
}

.rate-amateur, .rate-amateur a {
    color: $color_rating_amateur;
}

.rate-expert, .rate-expert a {
    color: $color_rating_expert;
}

.rate-candidate-master, .rate-candidate-master a {
    color: $color_rating_candidate_master;
}

.rate-master, .rate-master a {
    color: $color_rating_master;
}

.rate-grandmaster, .rate-grandmaster a, .rate-target, .rate-target a {
    color: $color_rating_grandmaster;
}

.rate-target a::first-letter {
    color: $color_rating_target;
}

.rate-group {
    white-space: nowrap;
    display: inline-block;
    color: black;

    .rating {
        display: inline-block;
        vertical-align: middle;
    }

    .rate-box {
        margin-right: 0.2em;
        vertical-align: middle;
    }
}