Generated by SassMeister.com.

input.scss

@mixin focus() {
  &.mdc-ripple-upgraded--background-focused,
  &:not(.mdc-ripple-upgraded):focus {
    @content;
  }
}

@mixin active() {
  &:active:active {
    @content;
  }
}

@mixin states-selector-before() {
  &:hover,
  &:active,
  &:not(.mdc-ripple-upgraded):focus,
  &.mdc-ripple-upgraded--background-focused {
    @content;
  }
}

@mixin states-selector-after() {
  &:hover {
    @content;
  }
  @include focus {
    @content;
  }
  @include active {
    @content;
  }
}

.mdc-foo-before {
    @include states-selector-before() {
        color: red;
        border: 1px solid red;
    }
}

.mdc-foo-after {
    @include states-selector-after() {
        color: red;
        border: 1px solid red;
    }
}

output.css

.mdc-foo-before:hover, .mdc-foo-before:active, .mdc-foo-before:not(.mdc-ripple-upgraded):focus, .mdc-foo-before.mdc-ripple-upgraded--background-focused {
  color: red;
  border: 1px solid red;
}

.mdc-foo-after:hover {
  color: red;
  border: 1px solid red;
}
.mdc-foo-after.mdc-ripple-upgraded--background-focused, .mdc-foo-after:not(.mdc-ripple-upgraded):focus {
  color: red;
  border: 1px solid red;
}
.mdc-foo-after:active:active {
  color: red;
  border: 1px solid red;
}

settings.json

{
  "sass": {
    "compiler": "dart-sass/1.26.11",
    "extensions": {},
    "syntax": "SCSS",
    "outputStyle": "expanded"
  },
  "autoprefixer": false
}