/* 学年の色分け */
.GradeBadge {
    padding: 3px 2px 3px 4px;
    border-radius: 3px;

    /* 以下、バッジの色分けを適用する設定だが、ベタ塗りのため無効化 */
    /* background-color: var(--GradeBadgeBackgroundColor, #999); */
    /* border: 1px solid var(--GradeBadgeBorderColor, #555); */
    /* color: var(--GradeBadgeTextColor, #333); */
    
    /* 学生行のベタ塗り表示のため、学年バッジを白に統一する */
    background-color: transparent;
    /* border: 1px solid #fff; */
    color: #fff;

    /* --GradeBadge_Green: #287a46; */
    /* --GradeBadge_Red: #a33544; */

    --GradeBadge_Blue:  #32329c;
    --GradeBadge_Green: #329c32;
    --GradeBadge_Red:   #9c3232;    

    --GradeBadge_LightBlue:  color-mix(in srgb, var(--GradeBadge_Blue)  25%, white);
    --GradeBadge_LightGreen: color-mix(in srgb, var(--GradeBadge_Green) 25%, white);
    --GradeBadge_LightRed:   color-mix(in srgb, var(--GradeBadge_Red)   25%, white);

    &.Grade1 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Blue);
        --GradeBadgeTextColor:       var(--GradeBadge_Blue);
    }

    &.Grade2 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Blue);
        --GradeBadgeTextColor:       var(--GradeBadge_Blue);
    }

    &.Grade3 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Green);
        --GradeBadgeTextColor:       var(--GradeBadge_Green);
    }

    &.Grade4 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Green);
        --GradeBadgeTextColor:       var(--GradeBadge_Green);
    }

    &.Grade5 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Red);
        --GradeBadgeTextColor:       var(--GradeBadge_Red);
    }

    &.Grade6 {
        --GradeBadgeBackgroundColor: transparent;
        --GradeBadgeBorderColor:     var(--GradeBadge_Red);
        --GradeBadgeTextColor:       var(--GradeBadge_Red);
    }

    &.Grade7 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_LightBlue);
        --GradeBadgeBorderColor:     var(--GradeBadge_Blue);
        --GradeBadgeTextColor:       var(--GradeBadge_Blue);
    }

    &.Grade8 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_LightGreen);
        --GradeBadgeBorderColor:     var(--GradeBadge_Green);
        --GradeBadgeTextColor:       var(--GradeBadge_Green);
    }

    &.Grade9 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_LightRed);
        --GradeBadgeBorderColor:     var(--GradeBadge_Red);
        --GradeBadgeTextColor:       var(--GradeBadge_Red);
    }

    &.Grade10 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_Blue);
        --GradeBadgeBorderColor:     var(--GradeBadge_Blue);
        --GradeBadgeTextColor:       #fff;
    }

    &.Grade11 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_Green);
        --GradeBadgeBorderColor:     var(--GradeBadge_Green);
        --GradeBadgeTextColor:       #fff;
    }

    &.Grade12 {
        --GradeBadgeBackgroundColor: var(--GradeBadge_Red);
        --GradeBadgeBorderColor:     var(--GradeBadge_Red);
        --GradeBadgeTextColor:       #fff;
    }
}