How can I disable v-text-field focused effect?

I have following v-text-field which has following defaults

// defaults.ts (used by Vuetify)

const INPUT_DEFAULTS = {
  color: '#8AB8E5',
  baseColor: '#8AB8E5',
  bgColor: '#E8F1FA',
  rounded: 't-lg',
  persistentHint: true
}

const defaults = {
  VTextField: INPUT_DEFAULTS
}

and these are the CSS rules inside my base.css related to the component

.v-input:not(.v-input--error) .v-label,
.v-input:not(.v-input--error) .v-messages {
  color: rgb(var(--v-theme-secondary-text)) !important;
}

#app .v-field__outline {
  --v-field-border-opacity: 1;
}

.v-field.v-field--focused .v-field__outline {
  --v-field-border-width: 3px;
}

this is how it looks like when focused As you can see its color changed to some kind of gray. How can I fix this issue? How can I disable the styles applied when the component is focused?

Thanks to @yoduh insights I managed to find a solution that worked for me. My main goal was to get rid of the hover effect without using any CSS, but only "Vuetify's power".

The CSS rule which applies the hover effect is this one

.v-field--variant-filled.v-field--focused .v-field__overlay {
    opacity: calc((0.04 + var(--v-focus-opacity))* var(--v-theme-overlay-multiplier));
}

First of all, we have to get rid of that 0.04. I updated my settings.scss file

@use 'vuetify/settings' with (
  ...
  $field-overlay-filled-opacity: 0
);

Now we have to change --v-focus-opacity value so that the multiplication gives us 0. I updated my theme.ts file

import type { ThemeDefinition } from 'vuetify'

const lightTheme: ThemeDefinition = {
  dark: false,
  colors: {
    // colors
  },
  variables: {
    ...
    'focus-opacity': 0
  }
}

const theme = {
  defaultTheme: 'lightTheme',
  themes: {
    lightTheme
  }
}

export default theme

And that's it, now the result of calc is 0.

Resources:

• How to create a Vuetify theme
• How to use Vuetify SASS variables