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

@mixin button-colors($bg, $fg, $brd) {
    background-color: $bg;
    color: $fg;
    fill: $fg;
    border-color: $brd;
}

@mixin control-size($size, $borderWidth) {
    $padding: math.div($size, 6) - $borderWidth;
    min-width: $size;
    padding-left: $padding;
    padding-right: $padding;
}

@mixin control-horizontal-layout($size, $borderWidth) {
    $paddingStep: math.div($size, 6);
    @include control-size($size, $borderWidth);

    :global(.uui-caption), :global(.uui-input) {
        padding-left: $paddingStep;
        padding-right: $paddingStep;
    }
}

.root {
    &.size-12 {
        @include control-horizontal-layout(12px, 1px);
        padding: 0 2px;

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

            &:not(:first-child) {
                margin-left: 3px;
            }
        }

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

        &:global(.uui-button-box), &:global(.uui-input-box) {
            min-height: 12px;
            border-width: 1px;
        }

        :global(.uui-icon) {
            svg {
                height: 10px;
                max-width: 10px;
            }
        }

        &.fill-transparent {
            padding-left: 0;
            padding-right: 0;

            :global(.uui-caption) {
                margin-left: 17px;
                padding-right: 0;
                padding-left: 0;
            }

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

    &.fill-white {
        @include button-colors(var(--white), var(--uui-badge-bg), var(--uui-badge-bg));

        &:hover {
            @include button-colors(var(--night50), var(--uui-badge-bg-hover), var(--uui-badge-bg));
        }
    }

    &.fill-none {
        @include button-colors(transparent, var(--uui-badge-bg), var(--uui-badge-bg));

        &:hover {
            @include button-colors(transparent, var(--uui-badge-bg-hover), var(--uui-badge-bg-hover));
        }
    }

    &.style-round {
        &.size-12 { border-radius: 7px; }
        &.size-18 { border-radius: 9px; }
        &.size-24 { border-radius: 12px; }
        &.size-30 { border-radius: 15px; }
        &.size-36 { border-radius: 18px; }
        &.size-42 { border-radius: 21px; }
        &.size-48 { border-radius: 24px; }
    }

    &.style-square {
        border-radius: var(--uui-border-radius);
    }
}
