diff --git a/packages/mdc-drawer/_mixins.scss b/packages/mdc-drawer/_mixins.scss
index 0152b772b22..e21e425457c 100644
--- a/packages/mdc-drawer/_mixins.scss
+++ b/packages/mdc-drawer/_mixins.scss
@@ -20,29 +20,267 @@
 // THE SOFTWARE.
 //
 
+@import "@material/feature-targeting/functions";
+@import "@material/feature-targeting/mixins";
+@import "@material/animation/functions";
+@import "@material/animation/variables";
+@import "@material/rtl/mixins";
+@import "@material/typography/mixins";
+@import "@material/typography/variables";
 @import "@material/theme/mixins";
+@import "@material/theme/variables";
 @import "@material/list/mixins";
 @import "@material/ripple/mixins";
 @import "@material/shape/mixins";
+@import "@material/elevation/mixins";
 @import "./variables";
 
-@mixin mdc-drawer-activated-overlay-color($color) {
+//
+// Public
+//
+
+@mixin mdc-drawer-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  // postcss-bem-linter: define drawer
+  .mdc-drawer {
+    @include mdc-drawer-title-ink-color($mdc-drawer-title-ink-color, $query: $query);
+    @include mdc-drawer-subtitle-ink-color($mdc-drawer-subtitle-ink-color, $query: $query);
+    @include mdc-drawer-border-color($mdc-drawer-divider-color, $query: $query);
+    @include mdc-drawer-surface-fill-color($mdc-drawer-surface-fill-color, $query: $query);
+    @include mdc-drawer-item-icon-ink-color($mdc-drawer-item-inactive-ink-color, $query: $query);
+    @include mdc-drawer-item-text-ink-color($mdc-drawer-item-inactive-ink-color, $query: $query);
+    @include mdc-drawer-item-activated-icon-ink-color($mdc-drawer-item-activated-ink-color, $query: $query);
+    @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color, $query: $query);
+    @include mdc-drawer-shape-radius(large, $query: $query);
+    @include mdc-drawer-item-shape-radius(4px, $query: $query);
+    @include mdc-drawer-z-index($mdc-drawer-z-index, $query: $query);
+    @include mdc-drawer-width($mdc-drawer-width, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      display: flex;
+      flex-direction: column;
+      flex-shrink: 0;
+      box-sizing: border-box;
+      height: 100%;
+      /* @noflip */
+      border-right-width: 1px;
+      /* @noflip */
+      border-right-style: solid;
+      overflow: hidden;
+
+      @include mdc-rtl {
+        /* @noflip */
+        border-right-width: 0;
+        /* @noflip */
+        border-left-width: 1px;
+        /* @noflip */
+        border-right-style: none;
+        /* @noflip */
+        border-left-style: solid;
+      }
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition-property: transform;
+      transition-timing-function: $mdc-animation-standard-curve-timing-function;
+    }
+
+    @include mdc-drawer-list-item_($query);
+  }
+
+  .mdc-drawer--animate {
+    @include mdc-feature-targets($feat-structure) {
+      transform: translateX(-100%);
+
+      @include mdc-rtl {
+        transform: translateX(100%);
+      }
+    }
+  }
+
+  .mdc-drawer--opening {
+    @include mdc-feature-targets($feat-structure) {
+      transform: translateX(0);
+
+      // Required to level the specificity with animate class.
+      @include mdc-rtl {
+        transform: translateX(0);
+      }
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition-duration: $mdc-drawer-animation-enter;
+    }
+  }
+
+  .mdc-drawer--closing {
+    @include mdc-feature-targets($feat-structure) {
+      transform: translateX(-100%);
+
+      @include mdc-rtl {
+        transform: translateX(100%);
+      }
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition-duration: $mdc-drawer-animation-exit;
+    }
+  }
+
+  .mdc-drawer__header {
+    @include mdc-feature-targets($feat-structure) {
+      flex-shrink: 0;
+      box-sizing: border-box;
+      min-height: 64px; // same as $mdc-top-app-bar-row-height
+      padding: 0 $mdc-drawer-surface-padding 4px;
+    }
+  }
+
+  .mdc-drawer__title {
+    @include mdc-typography(headline6, $query: $query);
+    @include mdc-typography-baseline-top(36px, $query: $query);
+    @include mdc-typography-baseline-bottom(20px, $query: $query);
+  }
+
+  .mdc-drawer__subtitle {
+    @include mdc-typography(body2, $query: $query);
+    @include mdc-typography-baseline-top(20px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      margin-bottom: 0;
+    }
+  }
+
+  .mdc-drawer__content {
+    @include mdc-feature-targets($feat-structure) {
+      height: 100%;
+      overflow-y: auto;
+      -webkit-overflow-scrolling: touch;
+    }
+  }
+
+  // postcss-bem-linter: end
+}
+
+@mixin mdc-drawer--dismissible-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  .mdc-drawer--dismissible {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, 0);
+
+      display: none;
+      position: absolute;
+
+      &.mdc-drawer--open {
+        display: flex;
+      }
+    }
+  }
+
+  .mdc-drawer-app-content {
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-box(margin, left, 0);
+
+      position: relative;
+    }
+  }
+}
+
+@mixin mdc-drawer--modal-core-styles($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+  $feat-animation: mdc-feature-create-target($query, animation);
+
+  .mdc-drawer--modal {
+    @include mdc-drawer-scrim-fill-color($mdc-drawer-modal-scrim-color, $query: $query);
+    @include mdc-elevation($mdc-drawer-modal-elevation, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-position(left, 0);
+
+      display: none;
+      position: fixed;
+    }
+
+    &.mdc-drawer--open {
+      @include mdc-feature-targets($feat-structure) {
+        display: flex;
+      }
+    }
+  }
+
+  .mdc-drawer-scrim {
+    @include mdc-feature-targets($feat-structure) {
+      display: none;
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: $mdc-drawer-z-index - 1;
+    }
+
+    @include mdc-feature-targets($feat-animation) {
+      transition-property: opacity;
+      transition-timing-function: $mdc-animation-standard-curve-timing-function;
+    }
+
+    .mdc-drawer--open + & {
+      @include mdc-feature-targets($feat-structure) {
+        display: block;
+      }
+    }
+
+    .mdc-drawer--animate + & {
+      @include mdc-feature-targets($feat-structure) {
+        opacity: 0;
+      }
+    }
+
+    .mdc-drawer--opening + & {
+      @include mdc-feature-targets($feat-animation) {
+        transition-duration: $mdc-drawer-animation-enter;
+      }
+
+      @include mdc-feature-targets($feat-structure) {
+        opacity: 1;
+      }
+    }
+
+    .mdc-drawer--closing + & {
+      @include mdc-feature-targets($feat-animation) {
+        transition-duration: $mdc-drawer-animation-exit;
+      }
+
+      @include mdc-feature-targets($feat-structure) {
+        opacity: 0;
+      }
+    }
+  }
+}
+
+@mixin mdc-drawer-activated-overlay-color($color, $query: mdc-feature-all()) {
   :not(.mdc-list--non-interactive) > .mdc-list-item {
-    @include mdc-states-activated($color);
+    @include mdc-states-activated($color, $query: $query);
   }
 }
 
-@mixin mdc-drawer-border-color($color) {
+@mixin mdc-drawer-border-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-divider-opacity);
 
-  @include mdc-theme-prop(border-color, $value);
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(border-color, $value);
+  }
 }
 
-@mixin mdc-drawer-item-shape-radius($radius, $rtl-reflexive: true) {
-  @include mdc-list-item-shape-radius($radius, $rtl-reflexive);
+@mixin mdc-drawer-item-shape-radius($radius, $rtl-reflexive: true, $query: mdc-feature-all()) {
+  @include mdc-list-item-shape-radius($radius, $rtl-reflexive, $query: $query);
 }
 
-@mixin mdc-drawer-shape-radius($radius) {
+@mixin mdc-drawer-shape-radius($radius, $query: mdc-feature-all()) {
   @if length($radius) > 2 {
     @error "Invalid radius: '#{$radius}' component doesn't allow customizing all corners";
   } @else if length($radius) == 2 {
@@ -51,95 +289,177 @@
     $radius: 0 $radius $radius 0;
   }
 
-  @include mdc-shape-radius($radius, $rtl-reflexive: true);
+  @include mdc-shape-radius($radius, $rtl-reflexive: true, $query: $query);
 }
 
-@mixin mdc-drawer-divider-color($color) {
+@mixin mdc-drawer-divider-color($color, $query: mdc-feature-all()) {
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-divider-opacity);
 
-  @include mdc-list-divider-color($value);
+  @include mdc-list-divider-color($value, $query: $query);
 }
 
-@mixin mdc-drawer-title-ink-color($color) {
+@mixin mdc-drawer-title-ink-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-title-ink-opacity);
 
   .mdc-drawer__title {
-    @include mdc-theme-prop(color, $value);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $value);
+    }
   }
 }
 
-@mixin mdc-drawer-subtitle-ink-color($color) {
+@mixin mdc-drawer-subtitle-ink-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-subtitle-ink-opacity);
 
-  @include mdc-list-group-subheader-ink-color($value);
+  @include mdc-list-group-subheader-ink-color($value, $query: $query);
 
   .mdc-drawer__subtitle {
-    @include mdc-theme-prop(color, $value);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(color, $value);
+    }
   }
 }
 
-@mixin mdc-drawer-fill-color-accessible($color) {
+@mixin mdc-drawer-fill-color-accessible($color, $query: mdc-feature-all()) {
   $accessibleColor: mdc-theme-accessible-ink-color($color);
 
-  @include mdc-drawer-title-ink-color($accessibleColor);
-  @include mdc-drawer-subtitle-ink-color($accessibleColor);
-  @include mdc-drawer-item-text-ink-color($accessibleColor);
-  @include mdc-drawer-item-icon-ink-color($accessibleColor);
-  @include mdc-drawer-surface-fill-color($color);
+  @include mdc-drawer-title-ink-color($accessibleColor, $query: $query);
+  @include mdc-drawer-subtitle-ink-color($accessibleColor, $query: $query);
+  @include mdc-drawer-item-text-ink-color($accessibleColor, $query: $query);
+  @include mdc-drawer-item-icon-ink-color($accessibleColor, $query: $query);
+  @include mdc-drawer-surface-fill-color($color, $query: $query);
 }
 
-@mixin mdc-drawer-item-icon-ink-color($color) {
+@mixin mdc-drawer-item-icon-ink-color($color, $query: mdc-feature-all()) {
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-inactive-icon-ink-opacity);
 
-  @include mdc-list-item-graphic-ink-color($value);
+  @include mdc-list-item-graphic-ink-color($value, $query: $query);
 }
 
-@mixin mdc-drawer-item-activated-icon-ink-color($color) {
+@mixin mdc-drawer-item-activated-icon-ink-color($color, $query: mdc-feature-all()) {
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-active-icon-ink-opacity);
 
   .mdc-list-item--activated {
-    @include mdc-list-item-graphic-ink-color($value);
+    @include mdc-list-item-graphic-ink-color($value, $query: $query);
   }
 }
 
-@mixin mdc-drawer-item-activated-text-ink-color($color) {
+@mixin mdc-drawer-item-activated-text-ink-color($color, $query: mdc-feature-all()) {
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-active-text-ink-opacity);
 
   .mdc-list-item--activated {
-    @include mdc-list-item-primary-text-ink-color($value);
+    @include mdc-list-item-primary-text-ink-color($value, $query: $query);
   }
 }
 
-@mixin mdc-drawer-item-text-ink-color($color) {
+@mixin mdc-drawer-item-text-ink-color($color, $query: mdc-feature-all()) {
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-item-inactive-text-ink-opacity);
 
   .mdc-list-item {
-    @include mdc-list-item-primary-text-ink-color($value);
+    @include mdc-list-item-primary-text-ink-color($value, $query: $query);
   }
 }
 
-@mixin mdc-drawer-surface-fill-color($color) {
+@mixin mdc-drawer-surface-fill-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
   $value: mdc-theme-prop-value($color);
 
-  @include mdc-theme-prop(background-color, $value);
+  @include mdc-feature-targets($feat-color) {
+    @include mdc-theme-prop(background-color, $value);
+  }
 }
 
-@mixin mdc-drawer-scrim-fill-color($color) {
+@mixin mdc-drawer-scrim-fill-color($color, $query: mdc-feature-all()) {
+  $feat-color: mdc-feature-create-target($query, color);
   $value: rgba(mdc-theme-prop-value($color), $mdc-drawer-modal-scrim-opacity);
 
   + .mdc-drawer-scrim {
-    @include mdc-theme-prop(background-color, $value);
+    @include mdc-feature-targets($feat-color) {
+      @include mdc-theme-prop(background-color, $value);
+    }
   }
 }
 
-@mixin mdc-drawer-z-index($value) {
-  z-index: $value;
+@mixin mdc-drawer-z-index($value, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    z-index: $value;
+  }
 }
 
-@mixin mdc-drawer-width($width) {
-  width: $width;
+@mixin mdc-drawer-width($width, $query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  @include mdc-feature-targets($feat-structure) {
+    width: $width;
+  }
 
   &.mdc-drawer--open:not(.mdc-drawer--closing) + .mdc-drawer-app-content {
-    @include mdc-rtl-reflexive-box(margin, left, $width);
+    @include mdc-feature-targets($feat-structure) {
+      @include mdc-rtl-reflexive-box(margin, left, $width);
+    }
+  }
+}
+
+//
+// Private
+//
+@mixin mdc-drawer-list-item_($query: mdc-feature-all()) {
+  $feat-structure: mdc-feature-create-target($query, structure);
+
+  // postcss-bem-linter: ignore
+  .mdc-list-item {
+    @include mdc-typography(subtitle2, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      height: calc(48px - 2 * #{$mdc-drawer-list-item-spacing});
+      // To accomodate margin conflict.
+      margin: ($mdc-drawer-list-item-spacing * 2) 8px;
+      padding: 0 $mdc-drawer-surface-padding / 2;
+    }
+  }
+
+  // postcss-bem-linter: ignore
+  .mdc-list-item:nth-child(1) {
+    @include mdc-feature-targets($feat-structure) {
+      margin-top: 2px;
+    }
+  }
+
+  // postcss-bem-linter: ignore
+  .mdc-list-item:nth-last-child(1) {
+    @include mdc-feature-targets($feat-structure) {
+      margin-bottom: 0;
+    }
+  }
+
+  // postcss-bem-linter: ignore
+  .mdc-list-group__subheader {
+    @include mdc-typography(body2, $query: $query);
+    @include mdc-typography-baseline-top(24px, $query: $query);
+
+    @include mdc-feature-targets($feat-structure) {
+      margin: 0;
+      padding: 0 $mdc-drawer-surface-padding;
+    }
+  }
+
+  // postcss-bem-linter: ignore
+  .mdc-list-divider {
+    @include mdc-feature-targets($feat-structure) {
+      margin: 3px 0 4px 0;
+    }
+  }
+
+  // Prevents list item children from being included in the click target.
+  // postcss-bem-linter: ignore
+  .mdc-list-item__text,
+  .mdc-list-item__graphic {
+    @include mdc-feature-targets($feat-structure) {
+      pointer-events: none;
+    }
   }
 }
diff --git a/packages/mdc-drawer/common.scss b/packages/mdc-drawer/common.scss
index fac2b00a857..c02d6acc779 100644
--- a/packages/mdc-drawer/common.scss
+++ b/packages/mdc-drawer/common.scss
@@ -20,149 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/functions";
-@import "@material/animation/variables";
-@import "@material/rtl/mixins";
-@import "@material/typography/mixins";
-@import "@material/typography/variables";
-@import "@material/theme/variables";
-@import "@material/theme/mixins";
-@import "./variables";
 @import "./mixins";
-
-// postcss-bem-linter: define drawer
-
-.mdc-drawer {
-  @include mdc-drawer-title-ink-color($mdc-drawer-title-ink-color);
-  @include mdc-drawer-subtitle-ink-color($mdc-drawer-subtitle-ink-color);
-  @include mdc-drawer-border-color($mdc-drawer-divider-color);
-  @include mdc-drawer-surface-fill-color($mdc-drawer-surface-fill-color);
-  @include mdc-drawer-item-icon-ink-color($mdc-drawer-item-inactive-ink-color);
-  @include mdc-drawer-item-text-ink-color($mdc-drawer-item-inactive-ink-color);
-  @include mdc-drawer-item-activated-icon-ink-color($mdc-drawer-item-activated-ink-color);
-  @include mdc-drawer-item-activated-text-ink-color($mdc-drawer-item-activated-ink-color);
-  @include mdc-drawer-shape-radius(large);
-  @include mdc-drawer-item-shape-radius(4px);
-  @include mdc-drawer-z-index($mdc-drawer-z-index);
-  @include mdc-drawer-width($mdc-drawer-width);
-
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  box-sizing: border-box;
-  height: 100%;
-  transition-property: transform;
-  transition-timing-function: $mdc-animation-standard-curve-timing-function;
-  /* @noflip */
-  border-right-width: 1px;
-  /* @noflip */
-  border-right-style: solid;
-  overflow: hidden;
-
-  @include mdc-rtl {
-    /* @noflip */
-    border-right-width: 0;
-    /* @noflip */
-    border-left-width: 1px;
-    /* @noflip */
-    border-right-style: none;
-    /* @noflip */
-    border-left-style: solid;
-  }
-
-  // postcss-bem-linter: ignore
-  .mdc-list-item {
-    @include mdc-typography(subtitle2);
-
-    height: calc(48px - 2 * #{$mdc-drawer-list-item-spacing});
-    // To accomodate margin conflict.
-    margin: ($mdc-drawer-list-item-spacing * 2) 8px;
-    padding: 0 $mdc-drawer-surface-padding / 2;
-  }
-
-  // postcss-bem-linter: ignore
-  .mdc-list-item:nth-child(1) {
-    margin-top: 2px;
-  }
-
-  // postcss-bem-linter: ignore
-  .mdc-list-item:nth-last-child(1) {
-    margin-bottom: 0;
-  }
-
-  // postcss-bem-linter: ignore
-  .mdc-list-group__subheader {
-    @include mdc-typography(body2);
-    @include mdc-typography-baseline-top(24px);
-
-    margin: 0;
-    padding: 0 $mdc-drawer-surface-padding;
-  }
-
-  // postcss-bem-linter: ignore
-  .mdc-list-divider {
-    margin: 3px 0 4px 0;
-  }
-
-  // Prevents list item children from being included in the click target.
-  // postcss-bem-linter: ignore
-  .mdc-list-item__text,
-  .mdc-list-item__graphic {
-    pointer-events: none;
-  }
-}
-
-.mdc-drawer--animate {
-  transform: translateX(-100%);
-
-  @include mdc-rtl {
-    transform: translateX(100%);
-  }
-}
-
-.mdc-drawer--opening {
-  transform: translateX(0);
-  transition-duration: $mdc-drawer-animation-enter;
-
-  // Required to level the specificity with animate class.
-  @include mdc-rtl {
-    transform: translateX(0);
-  }
-}
-
-.mdc-drawer--closing {
-  transform: translateX(-100%);
-  transition-duration: $mdc-drawer-animation-exit;
-
-  @include mdc-rtl {
-    transform: translateX(100%);
-  }
-}
-
-.mdc-drawer__header {
-  flex-shrink: 0;
-  box-sizing: border-box;
-  min-height: 64px; // same as $mdc-top-app-bar-row-height
-  padding: 0 $mdc-drawer-surface-padding 4px;
-}
-
-.mdc-drawer__title {
-  @include mdc-typography(headline6);
-  @include mdc-typography-baseline-top(36px);
-  @include mdc-typography-baseline-bottom(20px);
-}
-
-.mdc-drawer__subtitle {
-  @include mdc-typography(body2);
-  @include mdc-typography-baseline-top(20px);
-
-  margin-bottom: 0;
-}
-
-.mdc-drawer__content {
-  height: 100%;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
-
-// postcss-bem-linter: end
+@include mdc-drawer-core-styles;
diff --git a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
index c731b5f2d03..405352f8698 100644
--- a/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
+++ b/packages/mdc-drawer/dismissible/mdc-drawer-dismissible.scss
@@ -20,24 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/functions";
-@import "@material/rtl/mixins";
-@import "../variables";
 @import "../mixins";
-
-.mdc-drawer--dismissible {
-  @include mdc-rtl-reflexive-position(left, 0);
-
-  display: none;
-  position: absolute;
-
-  &.mdc-drawer--open {
-    display: flex;
-  }
-}
-
-.mdc-drawer-app-content {
-  @include mdc-rtl-reflexive-box(margin, left, 0);
-
-  position: relative;
-}
+@include mdc-drawer--dismissible-core-styles;
diff --git a/packages/mdc-drawer/modal/mdc-drawer-modal.scss b/packages/mdc-drawer/modal/mdc-drawer-modal.scss
index 7be35616a4c..2e80c401685 100644
--- a/packages/mdc-drawer/modal/mdc-drawer-modal.scss
+++ b/packages/mdc-drawer/modal/mdc-drawer-modal.scss
@@ -20,51 +20,5 @@
 // THE SOFTWARE.
 //
 
-@import "@material/animation/functions";
-@import "@material/elevation/mixins";
-@import "@material/rtl/mixins";
 @import "../mixins";
-@import "../variables";
-
-.mdc-drawer--modal {
-  @include mdc-drawer-scrim-fill-color($mdc-drawer-modal-scrim-color);
-  @include mdc-elevation($mdc-drawer-modal-elevation);
-  @include mdc-rtl-reflexive-position(left, 0);
-
-  display: none;
-  position: fixed;
-
-  &.mdc-drawer--open {
-    display: flex;
-  }
-}
-
-.mdc-drawer-scrim {
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  transition-property: opacity;
-  transition-timing-function: $mdc-animation-standard-curve-timing-function;
-  z-index: $mdc-drawer-z-index - 1;
-
-  .mdc-drawer--open + & {
-    display: block;
-  }
-
-  .mdc-drawer--animate + & {
-    opacity: 0;
-  }
-
-  .mdc-drawer--opening + & {
-    transition-duration: $mdc-drawer-animation-enter;
-    opacity: 1;
-  }
-
-  .mdc-drawer--closing + & {
-    transition-duration: $mdc-drawer-animation-exit;
-    opacity: 0;
-  }
-}
+@include mdc-drawer--modal-core-styles;
diff --git a/test/scss/_feature-targeting-test.scss b/test/scss/_feature-targeting-test.scss
index 3642a2b0d4b..05a8095c640 100644
--- a/test/scss/_feature-targeting-test.scss
+++ b/test/scss/_feature-targeting-test.scss
@@ -3,6 +3,7 @@
 @import "@material/checkbox/mixins";
 @import "@material/chips/mixins";
 @import "@material/dialog/mixins";
+@import "@material/drawer/mixins";
 @import "@material/elevation/mixins";
 @import "@material/fab/mixins";
 @import "@material/form-field/mixins";
@@ -93,6 +94,27 @@
     @include mdc-dialog-max-width(0, 0, $query: $query);
     @include mdc-dialog-max-height(0, 0, $query: $query);
 
+    // Drawer
+    @include mdc-drawer-core-styles($query: $query);
+    @include mdc-drawer--dismissible-core-styles($query: $query);
+    @include mdc-drawer--modal-core-styles($query: $query);
+    @include mdc-drawer-activated-overlay-color(red, $query: $query);
+    @include mdc-drawer-border-color(red, $query: $query);
+    @include mdc-drawer-item-shape-radius(42, $query: $query);
+    @include mdc-drawer-shape-radius(42, $query: $query);
+    @include mdc-drawer-divider-color(red, $query: $query);
+    @include mdc-drawer-title-ink-color(red, $query: $query);
+    @include mdc-drawer-subtitle-ink-color(red, $query: $query);
+    @include mdc-drawer-fill-color-accessible(red, $query: $query);
+    @include mdc-drawer-item-icon-ink-color(red, $query: $query);
+    @include mdc-drawer-item-activated-icon-ink-color(red, $query: $query);
+    @include mdc-drawer-item-activated-text-ink-color(red, $query: $query);
+    @include mdc-drawer-item-text-ink-color(red, $query: $query);
+    @include mdc-drawer-surface-fill-color(red, $query: $query);
+    @include mdc-drawer-scrim-fill-color(red, $query: $query);
+    @include mdc-drawer-z-index(1337, $query: $query);
+    @include mdc-drawer-width(1337px, $query: $query);
+
     // Elevation
     @include mdc-elevation-core-styles($query: $query);
     @include mdc-elevation(0, $query: $query);