Unable to Change Border Color of Mantine PasswordInput Field in Focus

Question

I'm currently working on a project using the Mantine library, and I've encountered an issue while customizing the CSS of a PasswordInput component. Specifically, I'm trying to change the border color of the PasswordInput field when it's in focus. However, despite successfully overriding other properties using the class name .mantine-PasswordInput-input, I'm unable to change the border color in focus state.

Here's the CSS code I've used for customization:

.mantine-PasswordInput-input {
    &:focus {
        border-color: #60bc3e; /* Desired border color change */
    }
}

I've verified that other properties like padding, background color, etc., are being applied correctly, but the border color change upon focus isn't taking effect.

Any insights or suggestions on how to resolve this issue would be greatly appreciated. Thanks in advance!