@mixin disabled-input() {
    &:global(.uui-control-mode-form) {
        cursor: default;
        @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));

        &:hover, &:active, &:focus {
            box-shadow: none;
            @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled), var(--uui-control-placeholder-disabled));
        }
    }

    &:global(.uui-control-mode-cell) {
        cursor: default;
        @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));

        &:hover, &:active, &:focus {
            box-shadow: none;
            @include input-colors(transparent, var(--uui-control-text-disabled), transparent, var(--uui-control-placeholder-disabled));
        }
    }
}

@mixin readonly-input() {
    &:global(.uui-control-mode-form) {
        background-color: var(--uui-control-bg-disabled);
        border-color: var(--uui-control-border-disabled);

        &:hover {
            border-color: var(--uui-control-border-disabled);
        }

        :global(.uui-input) {
            &::placeholder {
                color: var(--uui-control-placeholder-disabled);
            }
        }
    }

    &:global(.uui-control-mode-cell) {
        background-color: transparent;
        border-color: transparent;

        &:hover {
            background-color: transparent;
            border-color: transparent;
        }

        :global(.uui-input) {
            &::placeholder {
                color: var(--uui-control-placeholder-disabled);
            }
        }
    }
}

@mixin input-colors($bg, $color, $border, $placeholder) {
    background-color: $bg;
    color: $color;
    fill: $color;
    border-color: $border;

    // override more selective selector on input tag in browsers stylesheets
    :global(.uui-input) {
        color: $color;

        &::placeholder {
            color: $placeholder;
        }
    }
}