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

.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);
    --uui-badge-caption-hover: var(--uui-color-contrast);

    --uui-badge-font: var(--uui-font);
    --uui-badge-font-weight: 400;

    --uui-badge-min-height: var(--uui-size);
    --uui-badge-min-width: var(--uui-size);
    --uui-badge-dot-size: var(--uui-dot-size);
    --uui-badge-border-width: var(--uui-border-width);
    --uui-badge-border-border-radius: calc(var(--uui-badge-min-height) / 2);
    --uui-badge-horizontal-gap: var(--uui-horizontal-gap);
    --uui-badge-horizontal-padding: var(--uui-horizontal-padding);
    --uui-badge-caption-horizontal-padding: var(--uui-horizontal-gap);
    --uui-badge-caption-vertical-padding: calc((var(--uui-badge-min-height) - var(--uui-badge-line-height) - (var(--uui-badge-border-width) * 2)) / 2);
    --uui-badge-icon-height: var(--uui-icon-size);
    --uui-badge-line-height: var(--uui-line-height);
    --uui-badge-font-size: var(--uui-font-size);
    --uui-badge-indicator-padding: 6px;

    @include clickable-styles();

    & {
        background-color: var(--uui-badge-bg);
        color: var(--uui-badge-caption);
        fill: var(--uui-badge-caption); // ??? separate variable
        border-color: var(--uui-badge-border);
        justify-content: center;
        min-height: var(--uui-badge-min-height);
        min-width: var(--uui-badge-min-width);
        border-radius: var(--uui-badge-border-border-radius);
        padding-inline-start: calc(var(--uui-badge-horizontal-padding) - var(--uui-badge-border-width));
        padding-inline-end: calc(var(--uui-badge-horizontal-padding) - var(--uui-badge-border-width));
        column-gap: var(--uui-badge-horizontal-gap);
    }

    :global(.uui-icon) {
        svg {
            height: var(--uui-badge-icon-height);
            width: inherit;
        }
    }

    :global(.uui-indicator) {
        display: block;
        margin: auto 0;
        flex-shrink: 0;
        border-radius: 50%;
        background-color: var(--uui-badge-caption);
        width: var(--uui-badge-dot-size);
        height: var(--uui-badge-dot-size);
        margin-inline-start: var(--uui-badge-indicator-padding);
    }

    :global(.uui-caption) {
        padding-top: var(--uui-badge-caption-vertical-padding);
        padding-bottom: var(--uui-badge-caption-vertical-padding);
        padding-inline-start: var(--uui-badge-caption-horizontal-padding);
        padding-inline-end: var(--uui-badge-caption-horizontal-padding);
        line-height: var(--uui-badge-line-height);
        font-size: var(--uui-badge-font-size);
        font-family: var(--uui-badge-font);
        font-weight: var(--uui-badge-font-weight);
    }

    &: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-button-box) {
        border-width: var(--uui-badge-border-width);
        border-style: solid;
    }

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

    &:global(.uui-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);
        --uui-badge-caption-hover: var(--uui-color-contrast);

        :global(.uui-count_indicator) {
            --uui-count_indicator-bg: color-mix(in srgb, var(--uui-badge-caption) 8%, transparent);
            --uui-count_indicator-border: color-mix(in srgb, var(--uui-badge-caption) 40%, transparent);
        }
    }

    &:global(.uui-fill-outline) {
        --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);

        :global(.uui-count_indicator) {
            --uui-count_indicator-bg: var(--uui-neutral-0);
            --uui-count_indicator-border: var(--uui-neutral-40);
            --uui-count_indicator-caption: var(--uui-neutral-70);
        }
    }
}
