@use '@mskcc/themes/tokens' as tk;
@use '@carbon/styles/scss/config' as *;
@use '@mskcc/fundamentals/src/_variables.scss' as v;
@use '@mskcc/fundamentals/src/_mixins.scss' as m;
@use '@mskcc/colors' as c;
@use '@carbon/styles/scss/components/number-input';

@mixin msk-number-input {
    @include number-input.number-input;

    .#{$prefix}--number input[type='number'] {
        @include m.msk-input-default;

        font-family: v.$msk--global-font-family;
    }

    .#{$prefix}--number__control-btn {
        @include m.msk-edge-input-focus;
        --#{$prefix}-icon-primary: #{tk.$msk--color-content-action};
        block-size: calc(100% - 2px);
        border-block-end: none;

        &.up-icon {
            border-top-right-radius: m.msk-rem(3px);
            border-bottom-right-radius: m.msk-rem(3px);
        }
        &::before,
        &::after {
            display: none;
        }

        &:hover {
            --#{$prefix}-field-hover: #{tk.$msk--color-bg-action-hover};
            --#{$prefix}-icon-primary: #{tk.$msk--color-content-action-hover};
        }
        &:focus {
            outline-color: tk.$msk--color-border-focus-outer;
        }
    }

    .#{$prefix}--number__controls {
        inset-inline-end: 1px;
    }

    .#{$prefix}--number__rule-divider {
        --#{$prefix}-border-subtle: #{tk.$msk--color-border};
        block-size: auto;
        inline-size: 1px;
        top: m.msk-rem(4px);
        bottom: m.msk-rem(4px);
    }
}