// horizontal size of the separator between user and max scores
// this is not exposed in the var file as it's just a dev utility
// and is not intended to be customized.
@separator-size: 10px;

// todo add mixin to generate size variant
// todo add a mixin to force it in a panel corner

.score-box {
    display: inline-block;
    border-radius: @score-border-radius;
    border: @score-border;
    color: @score-color;
    background: @score-bg;
    font-size: @score-font-size;
    line-height: 1;
    white-space: nowrap;

    .user-score,
    .max-score {
        display: inline-block;
        padding: @score-padding-v @score-padding-h;
    }

    .user-score {
        color: @score-bg;
        font-weight: bold;
        background: lighten(@score-bg, 50%);
        border-bottom-left-radius: @score-border-radius - 1;
        border-top-left-radius: @score-border-radius - 1;
        padding-right: @separator-size + floor(@score-padding-h / 2);
    }

    .max-score {
        position: relative;
        padding-left: floor(@score-padding-h / 2);
        &:before {
            position: absolute;
            top: 0;
            left: -@separator-size;
            content: " ";
            display: block;
            height: 0;
            border-bottom: (@score-font-size + @score-padding-v*2) solid @score-bg;
            border-left: @separator-size solid transparent;
        }
    }

    // small version of the box (for lists)
    &.score-box-sm {
        font-size: @score-font-size-sm;
        border-radius: @score-border-radius-sm;

        .user-score,
        .max-score {
            padding: @score-padding-v-sm @score-padding-h-sm;
        }

        .user-score {
            padding-right: @separator-size + floor(@score-padding-h-sm / 2);
            border-bottom-left-radius: @score-border-radius-sm - 1;
            border-top-left-radius: @score-border-radius-sm - 1;
        }

        .max-score {
            padding-left: floor(@score-padding-h-sm / 2);

            &:before {
                border-bottom-width: @score-font-size-sm + @score-padding-v-sm*2;
            }
        }
    }

    // large version of the box
    &.score-box-lg {
        font-size: @score-font-size-lg;
        border-radius: @score-border-radius-lg;

        .user-score,
        .max-score {
            padding: @score-padding-v-lg @score-padding-h-lg;
        }

        .user-score {
            padding-right: @separator-size + floor(@score-padding-h-lg / 2);
            border-bottom-left-radius: @score-border-radius-lg - 1;
            border-top-left-radius: @score-border-radius-lg - 1;
        }

        .max-score {
            padding-left: floor(@score-padding-h-lg / 2);

            &:before {
                border-bottom-width: @score-font-size-lg + @score-padding-v-lg*2;
            }
        }
    }
}