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

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

        :global(.uui-count) {
            background-color: var(--uui-tag-count-bg);
            color: var(--uui-tag-count);
            font-family: var(--uui-tag-count-font);
            font-weight: var(--uui-tag-count-font-weight, normal);
            margin: auto;
            height: 18px;
            line-height: 18px;
            font-size: 12px;
            border-radius: 9px;
            padding-left: 6px;
            padding-right: 6px;
        }

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

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

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

        :global(.uui-caption) {
            text-transform: none;
            font-family: var(--uui-tag-font);
            font-weight: var(--uui-tag-font-weight, normal);
            color: var(--uui-tag-caption);
        }
    }

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

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

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

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

    &.size-24 {
        @include button-horizontal-layout(24px, 0);
        min-height: 24px;

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

    &.size-30 {
        @include button-horizontal-layout(30px, 0);
        min-height: 30px;

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

    &.size-36 {
        @include button-horizontal-layout(36px, 0);
        min-height: 36px;

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

    &.size-42 {
        @include button-horizontal-layout(42px, 0);
        min-height: 42px;

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

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

    &.size-48 {
        @include button-horizontal-layout(48px, 0);
        min-height: 48px;

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

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