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

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

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

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

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

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

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

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

    &.mode-cell {
        background-color: transparent;
        border-color: transparent;
        pointer-events: none;

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

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

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

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