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

.root {
    --uui-tag-bg: var(--uui-color-50);
    --uui-tag-bg-hover: var(--uui-color-60);
    --uui-tag-border: var(--uui-color-50);
    --uui-tag-border-hover: var(--uui-color-60);
    --uui-tag-caption: var(--uui-color-contrast);
    --uui-tag-fill: var(--uui-color-contrast);

    // fonts
    --uui-tag-font: var(--uui-font);
    --uui-tag-font-weight: 400;

    // sizes
    --uui-tag-min-height: var(--uui-size);
    --uui-tag-min-width: var(--uui-size);
    --uui-tag-border-width: var(--uui-border-width);
    --uui-tag-border-radius: var(--uui-border-radius);
    --uui-tag-horizontal-padding: var(--uui-horizontal-padding);
    --uui-tag-vertical-padding: var(--uui-vertical-padding);
    --uui-tag-horizontal-gap: var(--uui-horizontal-gap);
    --uui-tag-caption-horizontal-padding: var(--uui-horizontal-gap);
    --uui-tag-caption-vertical-padding: calc((var(--uui-tag-min-height) - var(--uui-tag-line-height) - var(--uui-tag-border-width) * 2) / 2);
    --uui-tag-count_indicator-margin-end: var(--uui-horizontal-gap);
    --uui-tag-icon-height: var(--uui-icon-size);
    --uui-tag-line-height: var(--uui-line-height);
    --uui-tag-font-size: var(--uui-font-size);

    @include clickable-styles();

    & {
        min-height: var(--uui-tag-min-height);
        min-width: var(--uui-tag-min-width);
        column-gap: var(--uui-tag-horizontal-gap);
        padding-inline-start: calc(var(--uui-tag-horizontal-padding) - var(--uui-tag-border-width));
        padding-inline-end: calc(var(--uui-tag-horizontal-padding) - var(--uui-tag-border-width));
    }

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

    &:global(.uui-button-box) {
        :global(.uui-icon) {
            svg {
                height: var(--uui-tag-icon-height);
                width: inherit;
            }
        }
    }

    &:global(.uui-button-box) {
        border-radius: var(--uui-tag-border-radius);
        background-color: var(--uui-tag-bg);
        fill: var(--uui-tag-fill);
        border: var(--uui-tag-border-width) solid var(--uui-tag-border);

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

            &:focus-visible {
                @include focus-visible-effect();
            }
        }
    }

    &:global(.uui-fill-solid) {
        :global(.uui-count_indicator) {
            --uui-count_indicator-bg: color-mix(in srgb, var(--uui-neutral-0) 10%, transparent);
            --uui-count_indicator-border: var(--uui-neutral-30);
        }
    }

    &:global(.uui-fill-outline) {
        --uui-tag-bg: var(--uui-color-5);
        --uui-tag-bg-hover: var(--uui-color-10);
        --uui-tag-border: var(--uui-color-20);
        --uui-tag-border-hover: var(--uui-color-20);
        --uui-tag-caption: var(--uui-neutral-70);
        --uui-tag-fill: var(--uui-neutral-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);
        }
    }
}
