@use '../core/styles/common/tokens' as *;

@use './badge-theme' as *;

.kbq-badge {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    height: var(--kbq-badge-size-normal-height);
    min-height: var(--kbq-badge-size-normal-height);
    text-align: center;
    white-space: nowrap;

    border-style: solid;

    box-sizing: border-box;

    padding-right: var(--kbq-badge-size-normal-horizontal-padding);
    padding-left: var(--kbq-badge-size-normal-horizontal-padding);

    border: {
        width: var(--kbq-badge-size-normal-border-width);
        radius: var(--kbq-badge-size-normal-border-radius);
    }

    & .kbq-badge-caption {
        padding-left: var(--kbq-badge-size-normal-content-padding);
    }

    & .kbq-icon_left {
        margin-right: var(--kbq-badge-size-normal-icon-left-margin-right);
    }

    & .kbq-icon_right {
        margin-left: var(--kbq-badge-size-normal-icon-right-margin-left);
    }

    &.kbq-badge_compact {
        min-height: var(--kbq-badge-size-compact-height);
        height: var(--kbq-badge-size-compact-height);

        padding-right: var(--kbq-badge-size-compact-horizontal-padding);
        padding-left: var(--kbq-badge-size-compact-horizontal-padding);

        border: {
            width: var(--kbq-badge-size-compact-border-width);
            radius: var(--kbq-badge-size-compact-border-radius);
        }

        & .kbq-badge-caption {
            padding-left: var(--kbq-badge-size-compact-content-padding);
        }

        & .kbq-icon_left {
            margin-right: var(--kbq-badge-size-compact-icon-left-margin-right);
        }

        & .kbq-icon_right {
            margin-left: var(--kbq-badge-size-compact-icon-right-margin-left);
        }
    }
}

@include kbq-badge-theme();
@include kbq-badge-typography();