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

.root {
    --uui-badge-bg: var(--uui-color-50);
    --uui-badge-bg-hover: var(--uui-color-60);
    --uui-badge-border: var(--uui-color-50);
    --uui-badge-border-hover: var(--uui-color-60);
    --uui-badge-caption: var(--uui-color-contrast-text);
    --uui-badge-caption-hover: var(--uui-color-contrast-text);
    --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

    --uui-badge-font: var(--font-regular);
    --uui-badge-count-font: var(--font-semibold);
    //
    background-color: var(--uui-badge-bg);
    color: var(--uui-badge-caption);
    fill: var(--uui-badge-caption); // ??? separate variable
    border-color: var(--uui-badge-border);

    :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-border-hover);
            color: var(--uui-badge-caption-hover);
            fill: var(--uui-badge-caption-hover); // ??? separate variable
            cursor: pointer;
        }
    }

    :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;
        border-style: solid;

    }

    &:global(.-clickable):focus-visible {
        @include focus-visible-effect(2px, null);
    }

    &.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;
        }

        &:global(.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;
        }

        &:global(.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;
        }

        &:global(.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;
        }

        &:global(.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;
        }

        &:global(.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;
        }

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

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

    &:global(.fill-solid) {
        --uui-badge-bg: var(--uui-color-50);
        --uui-badge-bg-hover: var(--uui-color-60);
        --uui-badge-border: var(--uui-color-50);
        --uui-badge-border-hover: var(--uui-color-60);
        --uui-badge-caption: var(--uui-color-contrast-text);
        --uui-badge-caption-hover: var(--uui-color-contrast-text);
        --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-semitransparent) {
        --uui-badge-bg: var(--uui-color-5);
        --uui-badge-bg-hover: var(--uui-color-10);
        --uui-badge-border: var(--uui-color-20);
        --uui-badge-border-hover: var(--uui-color-20);
        --uui-badge-caption: var(--uui-color-70);
        --uui-badge-caption-hover: var(--uui-color-70);
        --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-transparent) {
        --uui-badge-bg: transparent;
        --uui-badge-bg-hover: transparent;
        --uui-badge-border: transparent;
        --uui-badge-border-hover: transparent;
        --uui-badge-caption: var(--uui-text-primary);
        --uui-badge-caption-hover: var(--uui-text-primary);
        --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(.-clickable) {
            &:hover {
                fill: var(--uui-color-60);
                cursor: pointer;
            }
        }

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

    //&.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);
    //    }
    //}
}


//:global(.uui-badge) {
//    --uui-badge-bg: var(--uui-color-50);
//    --uui-badge-bg-hover: var(--uui-color-60);
//    --uui-badge-bg-halftone: var(--uui-color-10);
//    --uui-badge-bg-halftone-hover: var(--uui-color-20);
//    --uui-badge-border-halftone: var(--uui-color-20);
//    --uui-badge-border-halftone-hover: var(--uui-main);
//    --uui-badge-caption: var(--uui-color-contrast-text);
//    --uui-badge-caption-halftone: var(--uui-color-70);
//    --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
//}



