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

.root {
    --uui-numeric-input-bg: var(--uui-control-bg);
    --uui-numeric-input-bg-disabled: var(--uui-control-bg-disabled);
    --uui-numeric-input-border: var(--uui-control-border);
    --uui-numeric-input-border-disabled: var(--uui-control-border-disabled);
    --uui-numeric-input-border-hover: var(--uui-control_textinput-border-hover);
    --uui-numeric-input-border-active: var(--uui-control-border-checked);
    --uui-numeric-input-border-error: var(--uui-error-50);
    --uui-numeric-input-placeholder: var(--uui-control-placeholder);
    --uui-numeric-input-text: var(--uui-control-text);
    --uui-numeric-input-text-disabled: var(--uui-control-text-disabled);
    --uui-numeric-input-icon-clickable: var(--uui-icon);
    --uui-numeric-input-icon-clickable-hover: var(--uui-icon-hover);

    --uui-numeric-input-border-radius: var(--uui-border-radius);
    //
    &:global(.uui-input-box) {
        padding-right: 0;
        min-width: 40px;

        &:global(.uui-numeric-input-without-arrows) {
            padding-right: 5px;
        }

        :global(.uui-numeric-input-up-button) {
            transform: rotate(180deg);

            &:hover {
                svg {
                    fill: var(--uui-numeric-input-icon-clickable-hover);
                }
            }
        }

        :global(.uui-numeric-input-down-button) {
            &:hover {
                svg {
                    fill: var(--uui-numeric-input-icon-clickable-hover);
                }
            }
        }

        :global(.uui-input.uui-value-in-placeholder) {
            &::placeholder {
                color: inherit;
            }
        }

        :global(.uui-icon) svg {
            margin-top: -2px;
        }

        &.size-24 {
            :global(.uui-numeric-input-button-group) {
                > * {
                    height: 12px;
                }
            }
        }

        &.size-30 {
            :global(.uui-numeric-input-button-group) {
                > * {
                    height: 15px;
                }
            }
        }

        &.size-36 {
            :global(.uui-numeric-input-button-group) {
                > * {
                    height: 17px;
                }
            }
        }

        &.size-42 {
            :global(.uui-numeric-input-button-group) {
                > * {
                    height: 21px;
                }
            }
        }

        &.size-48 {
            :global(.uui-numeric-input-button-group) {
                > * {
                    height: 23px;
                }
            }
        }
    }

    &:global(.uui-disabled) {
        :global(.uui-numeric-input-button-group) {
            > *:hover, > *:focus {
                cursor: default;
                background-color: transparent;
            }
        }
    }

    &:global(.uui-readonly) {
        @include readonly-input();
    }
}
