What are the scss variables for modifying a Vuetify 3 v-text-field outline?

I have several v-text-field in a form. I want to modify the color of the outline that has been added through Vuetify's variant="outline" prop. I am trying to add the relevant scss variables in my main.scss file like so:

@use 'vuetify/settings' with (

  $input-outline-color: #E9DEFC,

  $input-outline-active-color: #CFBCFF,

  $input-outline-inactive-color: #E7DFF6

);



@use 'vuetify' as *;

@use 'vuetify/styles';

I have looked in Vuetify's API documentation for v-text-field, field and input. I cannot find the appropriate variable names, however. I expect to be able to add the relevant variable names to my main.scss file and modify the default colors for the outline in its native, active and passive states.

Haven't found any predefined scss variable either...

Adding a custom class .custom-outline on the v-text-field, and apply CSS below should work:

<v-text-field
    ...
    outlined
    class="custom-outline"
  ></v-text-field>

Styles:

<style lang="scss" scoped>
.custom-outline :deep(.v-field__outline__start) {
  border-color: red !important;
}

.custom-outline :deep(.v-field__outline__end) {
  border-color: red !important;
}

.custom-outline :deep(.v-field__outline__notch) {
  color: red !important;
}
</style>