fix(VSwitch): remove elevation with flat props

[SonTT19]

Description

fixes #19307

Markup:

<template>
  <v-app>
    <v-container>
      <v-switch />
      <v-switch flat />
    </v-container>
  </v-app>
</template>

<script setup></script>

[yuwu9145]

inset needs elevation to be 0 as well, can you try to combine flat "elevation 0" logic with inset together?

Something like

&:not(.v-switch--flat):not(.v-switch--inset)
    @include tools.elevation($switch-thumb-elevation)

[SonTT19]

inset needs elevation to be 0 as well, can you try to combine flat "elevation 0" logic with inset together?

Something like

&:not(.v-switch--flat):not(.v-switch--inset)
    @include tools.elevation($switch-thumb-elevation)

This is not working because .v-switch--inset is in parent DOM, not for .v-switch__thumb

And we already have the reset elevation for inset

https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/components/VSwitch/VSwitch.sass#L79

[yuwu9145]

@SonTT19 #19307 (comment)

[johnleider]

I made an update to how the colors are applied, and added surface-variant as default when using flat, which looks great.