@use 'sass:math';
@use '../../assets/styles/scss/index'  as *;

.root {
    &.size-12 {
        min-width: 12px;
        padding: 0 2px;

        :global(.uui-count) {
            height: 10px;
            line-height: 10px;
            font-size: 8px;
            border-radius: 5px;
            padding-left: 3px;
            padding-right: 3px;

            &:not(:first-child) {
                margin-left: 3px;
            }
        }

        :global(.uui-caption), :global(.uui-input) {
            line-height: 10px;
            font-size: 10px;
            padding: 1px 3px;
        }

        &:global(.uui-button-box), &:global(.uui-input-box) {
            min-height: 12px;
            border-width: 1px;
        }

        :global(.uui-icon) {
            svg {
                height: 10px;
                max-width: 10px;
            }
        }

        &:global(.fill-transparent) {
            padding-left: 0;
            padding-right: 0;

            :global(.uui-caption) {
                margin-left: 17px;
                padding-right: 0;
                padding-left: 0;
            }

            &::before {
                width: 8px;
                height: 8px;
                top: 2px;
                left: 1px;
            }
        }
    }

    &.style-round {
        &.size-12 { border-radius: 7px; }
        &.size-18 { border-radius: 9px; }
        &.size-24 { border-radius: 12px; }
        &.size-30 { border-radius: 15px; }
        &.size-36 { border-radius: 18px; }
        &.size-42 { border-radius: 21px; }
        &.size-48 { border-radius: 24px; }
    }

    &.style-square {
        border-radius: var(--uui-border-radius);
    }

    &:global(.fill-white) {
        --uui-badge-bg: var(--white);
        --uui-badge-bg-hover: var(--night50);
        --uui-badge-border: var(--uui-color-50);
        --uui-badge-border-hover: var(--uui-color-50);
        --uui-badge-caption: var(--uui-color-50);
        --uui-badge-caption-hover: var(--uui-color-60);
        --uui-badge-count: var(--uui-text-secondary); // It should be a separate component
        --uui-badge-count-bg: var(--white); // It should be a separate component
    }

    &:global(.fill-none) {
        --uui-badge-bg: transparent;
        --uui-badge-bg-hover: transparent;
        --uui-badge-border: var(--uui-color-50);
        --uui-badge-border-hover: var(--uui-color-60);
        --uui-badge-caption: var(--uui-color-50);
        --uui-badge-caption-hover: var(--uui-color-60);
        --uui-badge-count: var(--uui-text-secondary); // It should be a separate component
        --uui-badge-count-bg: var(--white); // It should be a separate component
    }
}


