Environment

Vuetify Version: 2.6.6
Vue Version: 2.6.14
Browsers: Google Chrome
OS: Linux

Steps to reproduce

Whilst validating our vue application using vuetify 2.6.6 we found multiple css errors created by the generated sass from vuetify on a page where we use v-chip, v-expansion-panels, v-skeleton-loader and a single button.

Expected Behavior

No css validation error should occur, and don't really know since the css is broken so this might impact current styling.

Actual Behavior

Style are not applied

Reproduction Link

https://codepen.io/majs-majs/pen/xxYNGLo

Other comments

The generated code looks like this

1. .v-btn--block has max-width auto

   .v-btn--block {
       display: flex;
       flex: 1 0 auto;
       min-width: 100% !important;
       max-width: auto;
   }

   And the cause of this error seems to be in https://github.com/vuetifyjs/vuetify/blob/v2.6.6/packages/vuetify/src/components/VBtn/VBtn.sass#L165

2. .v-chip--pill .v-chip__filter has a incorrect assigned margin-right

   .v-chip--pill .v-chip__filter {
       margin-right: 0 16px 0 0;
   }

   And the origin of this error is in the file https://github.com/vuetifyjs/vuetify/blob/v2.6.6/packages/vuetify/src/components/VChip/_variables.scss#L16

3. .v-skeleton-loader__image has ::first-child and ::last-child not :first-child and :last-child

   .v-skeleton-loader__image::first-child, .v-skeleton-loader__image::last-child {
       border-radius: inherit;
   }

   Which I guess was a mistak in https://github.com/vuetifyjs/vuetify/blob/v2.6.6/packages/vuetify/src/components/VSkeletonLoader/VSkeletonLoader.sass#L212

4. .v-expansion-panel-header has the incorrect state :hover--active

   .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:hover::before, .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active::before {
       opacity: 0.12;
   }
   .theme--light.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:focus::before {
       opacity: 0.16;
   }
   [...]
   .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:hover::before, .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active::before {
       opacity: 0.24;
   }
   .theme--dark.v-expansion-panels.v-expansion-panels--hover > .v-expansion-panel > .v-expansion-panel-header:hover--active:focus::before {
       opacity: 0.32;
   }

   which is seems to be a mixin problem when
   https://github.com/vuetifyjs/vuetify/blob/v2.6.6/packages/vuetify/src/components/VExpansionPanel/VExpansionPanel.sass#L28 and https://github.com/vuetifyjs/vuetify/blob/v2.6.6/packages/vuetify/src/styles/tools/_states.sass#L9 interact