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

    :global(.uui-input) {
        color: $color;

        &::placeholder {
            color: var(--night500);
        }
    }
}

.theme-dark {
    :global(.uui-input-label) {
        color: var(--gray5);
    }

    &:global(.uui-disabled) {
        cursor: default;
        background: none;

        :global(.uui-checkbox), :global(.uui-checkbox):global(.uui-checked) {
            @include input-colors(var(--gray60), var(--gray50), var(--gray50), var(--gray60));

            &:hover, &:active, &:focus-within {
                @include input-colors(var(--gray60), var(--gray50), var(--gray50), var(--gray60));
            }
        }

        :global(.uui-input-label) {
            color: var(--gray50);
        }
    }
}
