@use "sass:math";

// 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: 1rem;

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

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

    @include border-radius($score-border-radius);

    .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(math.div($score-padding-h, 2));
    }

    .max-score {
        position: relative;
        padding-left: floor(math.div($score-padding-h, 2));
        &:before {
            position: absolute;
            top: 0;
            left: -$separator-size;
            content: " ";
            display: block;
            bottom: 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;
        @include 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(math.div($score-padding-h-sm, 2));

            @include border-start-radius($score-border-radius-sm - 1);
        }

        .max-score {
            padding-left: floor(math.div($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;
        @include 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(math.div($score-padding-h-lg, 2));

            @include border-start-radius($score-border-radius-lg - 1);
        }

        .max-score {
            padding-left: floor(math.div($score-padding-h-lg, 2));

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