@use  '../../assets/styles/index' as *;

.root {
    :global(.uui-count) {
        font-family: var(--uui-badge-count-font);
        font-weight: var(--uui-badge-count-font-weight, normal);
        margin: auto;
        height: 18px;
        line-height: 18px;
        font-size: 12px;
        border-radius: 9px;
        padding-left: 6px;
        padding-right: 6px;
        min-width: 6px;
        text-align: center;
        flex-shrink: 0;
    }

    :global(.uui-count):not(:first-child) {
        margin-left: 6px;
    }

    :global(.uui-caption) {
        font-family: var(--uui-badge-font);
        font-weight: var(--uui-badge-font-weight, normal);
    }

    &:global(.uui-button-box) {
        border-width: 1px;

    }

    &.size-18 {
        min-width: 18px;
        min-height: 18px;
        padding-left: 3px;
        padding-right: 3px;
        border-radius: 9px;

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

        :global(.uui-count):not(:first-child) {
            margin-left: 3px;
        }

        :global(.uui-caption) {
            padding: 2px 3px;
            line-height: 12px;
            font-size: 12px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 8px;
            }

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

    &.size-24 {
        @include button-horizontal-layout(24px, 1px);
        border-radius: 12px;
        min-height: 24px;

        :global(.uui-caption) {
            padding-top: 2px;
            padding-bottom: 2px;
            line-height: 18px;
            font-size: 12px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 12px;
            }

            &::before {
                width: 12px;
                height: 12px;
                top: 5px;
                left: 2px;
            }
        }
    }

    &.size-30 {
        @include button-horizontal-layout(30px, 1px);
        border-radius: 15px;
        min-height: 30px;

        :global(.uui-caption) {
            padding-top: 5px;
            padding-bottom: 5px;
            line-height: 18px;
            font-size: 14px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 12px;
            }

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

    &.size-36 {
        @include button-horizontal-layout(36px, 1px);
        border-radius: 18px;
        min-height: 36px;

        :global(.uui-caption) {
            padding-top: 5px;
            padding-bottom: 5px;
            line-height: 24px;
            font-size: 14px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 12px;
            }

            &::before {
                width: 12px;
                height: 12px;
                top: 11px;
                left: 2px;
            }
        }
    }

    &.size-42 {
        @include button-horizontal-layout(42px, 1px);
        border-radius: 21px;
        min-height: 42px;

        :global(.uui-count) {
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            border-radius: 12px;
            min-width: 12px;
        }

        :global(.uui-caption) {
            padding-top: 8px;
            padding-bottom: 8px;
            line-height: 24px;
            font-size: 16px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 12px;
            }

            &::before {
                width: 16px;
                height: 16px;
                top: 12px;
                left: 3px;
            }
        }
    }

    &.size-48 {
        @include button-horizontal-layout(48px, 1px);
        border-radius: 24px;
        min-height: 48px;

        :global(.uui-count) {
            height: 24px;
            line-height: 24px;
            font-size: 14px;
            border-radius: 12px;
            min-width: 12px;
        }

        :global(.uui-caption) {
            padding-top: 11px;
            padding-bottom: 11px;
            line-height: 24px;
            font-size: 16px;
        }

        &.fill-transparent {
            :global(.uui-caption) {
                margin-left: 12px;
            }

            &::before {
                width: 16px;
                height: 16px;
                top: 15px;
                left: 3px;
            }
        }
    }

    &.fill-solid {
        background-color: var(--uui-badge-bg);
        color: var(--uui-badge-caption-solid);
        fill: var(--uui-badge-caption-solid);
        border-color: var(--uui-badge-bg);

        :global(.uui-count) {
            background-color: var(--uui-badge-count-bg);
            color: var(--uui-badge-count);
        }

        &:global(.-clickable) {
            &:hover {
                background-color: var(--uui-badge-bg-hover);
                border-color: var(--uui-badge-bg-hover);
                cursor: pointer;
            }
        }
    }

    &.fill-semitransparent {
        background-color: var(--uui-badge-bg-halftone);
        color: var(--uui-badge-caption-halftone);
        fill: var(--uui-badge-caption-halftone);
        border-color: var(--uui-badge-border-halftone);

        :global(.uui-count) {
            background-color: var(--uui-badge-count-bg);
            color: var(--uui-badge-count);
        }

        &:global(.-clickable) {
            &:hover {
                background-color: var(--uui-badge-bg-halftone-hover);
                color: var(--uui-badge-caption-halftone);
                fill: var(--uui-badge-caption-halftone);
                border-color: var(--uui-badge-border-halftone-hover);
                cursor: pointer;
            }
        }
    }

    &.fill-transparent {
        background-color: transparent;
        color: var(--uui-text-primary);
        fill: var(--uui-text-primary);
        border-color: transparent;

        &:global(.-clickable) {
            &:hover {
                fill: var(--uui-badge-bg-hover);
                cursor: pointer;
            }
        }

        &::before {
            position: absolute;
            content: '';
            border-radius: 50%;
            background-color: var(--uui-badge-bg);
        }
    }
}
