@use '../abstracts/cds-vars' as vars;
@use '../abstracts/cds-mixins' as mixins;
@use '../abstracts/cds-config' as config;

//$_badge-border-radius: config.$config-global-border-radius !default;
$_cds-badge-border-radius: var(--cds-badge-br) !default;

.cds-badge {
    border-radius: $_cds-badge-border-radius;
    white-space: pre;
    width: fit-content;
    display: flex;
    align-items: center;

    /*DEFAULT*/
    padding-inline: vars.$cds-spacing-50;
    height: vars.$cds-size-100;
    min-height: vars.$cds-size-100;
    @include mixins.cds-accent;

    &__text {
        @include mixins.cds-paragraph-xs(bold);
    }

    //ALTERNATIVE MODIFIERS
    @for $i from 1 through 10 {
        &--color-#{$i} {
            border: 1px solid;
            @include mixins.cds-color-alternative(#{$i});
        }
    }

    //SIZE MODIFIERS
    &--medium {
        padding-inline: vars.$cds-spacing-50;
        height: vars.$cds-size-100;
        min-height: vars.$cds-size-100;

        .cds-badge__text {
            @include mixins.cds-paragraph-xs(bold);
        }
    }

    &--large {
        padding-inline: vars.$cds-spacing-75;
        height: vars.$cds-size-150;
        min-height: vars.$cds-size-150;

        .cds-badge__text {
            @include mixins.cds-paragraph-m;
        }
    }

    //VARIANT MODIFIERS
    &--accent {
        @include mixins.cds-accent;
    }

    &--primary {
        @include mixins.cds-primary;
    }

    &--secondary {
        @include mixins.cds-secondary;
    }

    &--inverse {
        @include mixins.cds-inverse;
    }
}