@angular/material 2.0.0-alpha.9-3 → 2.0.0-beta.11

package/_theming.scss

@@ -0,0 +1,3872 @@
+// Import all the theming functionality.
+// We can use relative imports for imports from the cdk because we bundle everything
+// up into a single flat scss file for material.
+// We want overlays to always appear over user content, so set a baseline
+// very high z-index for the overlay container, which is where we create the new
+// stacking context for all overlays.
+$cdk-z-index-overlay-container: 1000;
+$cdk-z-index-overlay: 1000;
+$cdk-z-index-overlay-backdrop: 1000;
+
+// Background color for all of the backdrops
+$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.6);
+
+// Default backdrop animation is based on the Material Design swift-ease-out.
+$backdrop-animation-duration: 400ms !default;
+$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+
+
+@mixin cdk-overlay() {
+  .cdk-overlay-container, .cdk-global-overlay-wrapper {
+    // Disable events from being captured on the overlay container.
+    pointer-events: none;
+
+    // The container should be the size of the viewport.
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+  }
+
+  // The overlay-container is an invisible element which contains all individual overlays.
+  .cdk-overlay-container {
+    position: fixed;
+    z-index: $cdk-z-index-overlay-container;
+  }
+
+  // We use an extra wrapper element in order to use make the overlay itself a flex item.
+  // This makes centering the overlay easy without running into the subpixel rendering
+  // problems tied to using `transform` and without interfering with the other position
+  // strategies.
+  .cdk-global-overlay-wrapper {
+    display: flex;
+    position: absolute;
+    z-index: $cdk-z-index-overlay;
+  }
+
+  // A single overlay pane.
+  .cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    box-sizing: border-box;
+    z-index: $cdk-z-index-overlay;
+  }
+
+  .cdk-overlay-backdrop {
+    // TODO(jelbourn): reuse sidenav fullscreen mixin.
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    z-index: $cdk-z-index-overlay-backdrop;
+    pointer-events: auto;
+    -webkit-tap-highlight-color: transparent;
+    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;
+    opacity: 0;
+
+    &.cdk-overlay-backdrop-showing {
+      opacity: 0.48;
+    }
+  }
+
+  .cdk-overlay-dark-backdrop {
+    background: $cdk-overlay-dark-backdrop-background;
+  }
+
+  .cdk-overlay-transparent-backdrop {
+    background: none;
+  }
+
+  // Used when disabling global scrolling.
+  .cdk-global-scrollblock {
+    position: fixed;
+
+    // Necessary for the content not to lose its width. Note that we're using 100%, instead of
+    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width
+    // that the element had before we made it `fixed`.
+    width: 100%;
+
+    // Note: this will always add a scrollbar to whatever element it is on, which can
+    // potentially result in double scrollbars. It shouldn't be an issue, because we won't
+    // block scrolling on a page that doesn't have a scrollbar in the first place.
+    overflow-y: scroll;
+  }
+}
+
+
+// Core styles that can be used to apply material design treatments to any element.
+@mixin cdk-a11y {
+  .cdk-visually-hidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+}
+
+/**
+ * Applies styles for users in high contrast mode. Note that this only applies
+ * to Microsoft browsers. Chrome can be included by checking for the `html[hc]`
+ * attribute, however Chrome handles high contrast differently.
+ */
+@mixin cdk-high-contrast {
+  @media screen and (-ms-high-contrast: active) {
+    @content;
+  }
+}
+
+// Media queries
+// TODO: Find a way to respect media query ranges.
+// TODO: For example the xs-breakpoint should not interfere with the sm-breakpoint.
+$mat-xsmall: 'max-width: 600px';
+$mat-small: 'max-width: 960px';
+
+// TODO(crisbeto): this isn't being used anywhere within Material. keeping for backwards compat.
+$mat-font-family: Roboto, 'Helvetica Neue', sans-serif !default;
+
+// TODO: Revisit all z-indices before beta
+// z-index master list
+
+$z-index-fab: 20 !default;
+$z-index-drawer: 100 !default;
+
+// Global constants
+$pi: 3.14159265;
+
+// Padding between input toggles and their labels
+$mat-toggle-padding: 8px !default;
+// Width and height of input toggles
+$mat-toggle-size: 20px !default;
+
+// Easing Curves
+// TODO(jelbourn): all of these need to be revisited
+
+// The default animation curves used by material design.
+$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;
+$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;
+$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;
+
+$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;
+
+$swift-ease-out-duration: 400ms !default;
+$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;
+$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;
+
+$swift-ease-in-duration: 300ms !default;
+$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;
+$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;
+
+$swift-ease-in-out-duration: 500ms !default;
+$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;
+$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;
+
+$swift-linear-duration: 80ms !default;
+$swift-linear-timing-function: linear !default;
+$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;
+
+
+
+// A collection of mixins and CSS classes that can be used to apply elevation to a material
+// element.
+// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html
+// Examples:
+//
+//
+// .mat-foo {
+//   @include $mat-elevation(2);
+//
+//   &:active {
+//     @include $mat-elevation(8);
+//   }
+// }
+//
+// <div id="external-card" class="mat-elevation-z2"><p>Some content</p></div>
+//
+// For an explanation of the design behind how elevation is implemented, see the design doc at
+// https://goo.gl/Kq0k9Z.
+
+// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation
+// level is created using a set of 3 shadow values, one for umbra (the shadow representing the
+// space completely obscured by an object relative to its light source), one for penumbra (the
+// space partially obscured by an object), and one for ambient (the space which contains the object
+// itself). For a further explanation of these terms and their meanings, see
+// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.
+
+$_umbra-color: rgba(black, 0.2);
+$_penumbra-color: rgba(black, 0.14);
+$_ambient-color: rgba(black, 0.12);
+
+// Maps for the different shadow sets and their values within each z-space. These values were
+// created by taking a few reference shadow sets created by Google's Designers and interpolating
+// all of the values between them.
+
+$_umbra-elevation-map: (
+  0: '0px 0px 0px 0px #{$_umbra-color}',
+  1: '0px 2px 1px -1px #{$_umbra-color}',
+  2: '0px 3px 1px -2px #{$_umbra-color}',
+  3: '0px 3px 3px -2px #{$_umbra-color}',
+  4: '0px 2px 4px -1px #{$_umbra-color}',
+  5: '0px 3px 5px -1px #{$_umbra-color}',
+  6: '0px 3px 5px -1px #{$_umbra-color}',
+  7: '0px 4px 5px -2px #{$_umbra-color}',
+  8: '0px 5px 5px -3px #{$_umbra-color}',
+  9: '0px 5px 6px -3px #{$_umbra-color}',
+  10: '0px 6px 6px -3px #{$_umbra-color}',
+  11: '0px 6px 7px -4px #{$_umbra-color}',
+  12: '0px 7px 8px -4px #{$_umbra-color}',
+  13: '0px 7px 8px -4px #{$_umbra-color}',
+  14: '0px 7px 9px -4px #{$_umbra-color}',
+  15: '0px 8px 9px -5px #{$_umbra-color}',
+  16: '0px 8px 10px -5px #{$_umbra-color}',
+  17: '0px 8px 11px -5px #{$_umbra-color}',
+  18: '0px 9px 11px -5px #{$_umbra-color}',
+  19: '0px 9px 12px -6px #{$_umbra-color}',
+  20: '0px 10px 13px -6px #{$_umbra-color}',
+  21: '0px 10px 13px -6px #{$_umbra-color}',
+  22: '0px 10px 14px -6px #{$_umbra-color}',
+  23: '0px 11px 14px -7px #{$_umbra-color}',
+  24: '0px 11px 15px -7px #{$_umbra-color}'
+);
+
+$_penumbra-elevation-map: (
+  0: '0px 0px 0px 0px #{$_penumbra-color}',
+  1: '0px 1px 1px 0px #{$_penumbra-color}',
+  2: '0px 2px 2px 0px #{$_penumbra-color}',
+  3: '0px 3px 4px 0px #{$_penumbra-color}',
+  4: '0px 4px 5px 0px #{$_penumbra-color}',
+  5: '0px 5px 8px 0px #{$_penumbra-color}',
+  6: '0px 6px 10px 0px #{$_penumbra-color}',
+  7: '0px 7px 10px 1px #{$_penumbra-color}',
+  8: '0px 8px 10px 1px #{$_penumbra-color}',
+  9: '0px 9px 12px 1px #{$_penumbra-color}',
+  10: '0px 10px 14px 1px #{$_penumbra-color}',
+  11: '0px 11px 15px 1px #{$_penumbra-color}',
+  12: '0px 12px 17px 2px #{$_penumbra-color}',
+  13: '0px 13px 19px 2px #{$_penumbra-color}',
+  14: '0px 14px 21px 2px #{$_penumbra-color}',
+  15: '0px 15px 22px 2px #{$_penumbra-color}',
+  16: '0px 16px 24px 2px #{$_penumbra-color}',
+  17: '0px 17px 26px 2px #{$_penumbra-color}',
+  18: '0px 18px 28px 2px #{$_penumbra-color}',
+  19: '0px 19px 29px 2px #{$_penumbra-color}',
+  20: '0px 20px 31px 3px #{$_penumbra-color}',
+  21: '0px 21px 33px 3px #{$_penumbra-color}',
+  22: '0px 22px 35px 3px #{$_penumbra-color}',
+  23: '0px 23px 36px 3px #{$_penumbra-color}',
+  24: '0px 24px 38px 3px #{$_penumbra-color}'
+);
+
+$_ambient-elevation-map: (
+  0: '0px 0px 0px 0px #{$_ambient-color}',
+  1: '0px 1px 3px 0px #{$_ambient-color}',
+  2: '0px 1px 5px 0px #{$_ambient-color}',
+  3: '0px 1px 8px 0px #{$_ambient-color}',
+  4: '0px 1px 10px 0px #{$_ambient-color}',
+  5: '0px 1px 14px 0px #{$_ambient-color}',
+  6: '0px 1px 18px 0px #{$_ambient-color}',
+  7: '0px 2px 16px 1px #{$_ambient-color}',
+  8: '0px 3px 14px 2px #{$_ambient-color}',
+  9: '0px 3px 16px 2px #{$_ambient-color}',
+  10: '0px 4px 18px 3px #{$_ambient-color}',
+  11: '0px 4px 20px 3px #{$_ambient-color}',
+  12: '0px 5px 22px 4px #{$_ambient-color}',
+  13: '0px 5px 24px 4px #{$_ambient-color}',
+  14: '0px 5px 26px 4px #{$_ambient-color}',
+  15: '0px 6px 28px 5px #{$_ambient-color}',
+  16: '0px 6px 30px 5px #{$_ambient-color}',
+  17: '0px 6px 32px 5px #{$_ambient-color}',
+  18: '0px 7px 34px 6px #{$_ambient-color}',
+  19: '0px 7px 36px 6px #{$_ambient-color}',
+  20: '0px 8px 38px 7px #{$_ambient-color}',
+  21: '0px 8px 40px 7px #{$_ambient-color}',
+  22: '0px 8px 42px 7px #{$_ambient-color}',
+  23: '0px 9px 44px 8px #{$_ambient-color}',
+  24: '0px 9px 46px 8px #{$_ambient-color}'
+);
+
+
+// The default duration value for elevation transitions.
+$mat-elevation-transition-duration: 280ms !default;
+
+// The default easing value for elevation transitions.
+$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;
+
+// Applies the correct css rules to an element to give it the elevation specified by $zValue.
+// The $zValue must be between 0 and 24.
+@mixin mat-elevation($zValue) {
+  @if type-of($zValue) != number or not unitless($zValue) {
+    @error '$zValue must be a unitless number';
+  }
+  @if $zValue < 0 or $zValue > 24 {
+    @error '$zValue must be between 0 and 24';
+  }
+
+  box-shadow: #{map-get($_umbra-elevation-map, $zValue)},
+              #{map-get($_penumbra-elevation-map, $zValue)},
+              #{map-get($_ambient-elevation-map, $zValue)};
+}
+
+// Returns a string that can be used as the value for a transition property for elevation.
+// Calling this function directly is useful in situations where a component needs to transition
+// more than one property.
+//
+// .foo {
+//   transition: mat-elevation-transition-property-value(), opacity 100ms ease;
+// }
+@function mat-elevation-transition-property-value(
+    $duration: $mat-elevation-transition-duration,
+    $easing: $mat-elevation-transition-timing-function) {
+  @return box-shadow #{$duration} #{$easing};
+}
+
+// Applies the correct css rules needed to have an element transition between elevations.
+// This mixin should be applied to elements whose elevation values will change depending on their
+// context (e.g. when active or disabled).
+//
+// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can
+// be used in the same way by clients.
+@mixin mat-elevation-transition(
+    $duration: $mat-elevation-transition-duration,
+    $easing: $mat-elevation-transition-timing-function) {
+  transition: mat-elevation-transition-property-value($duration, $easing);
+}
+
+// Color palettes from the Material Design spec.
+// See https://www.google.com/design/spec/style/color.html
+//
+// Contrast colors are hard-coded because it is too difficult (probably impossible) to
+// calculate them. These contrast colors are pulled from the public Material Design spec swatches.
+// While the contrast colors in the spec are not prescriptive, we use them for convenience.
+
+
+$black-87-opacity: rgba(black, 0.87);
+$white-87-opacity: rgba(white, 0.87);
+$black-12-opacity: rgba(black, 0.12);
+$white-12-opacity: rgba(white, 0.12);
+$black-6-opacity: rgba(black, 0.06);
+$white-6-opacity: rgba(white, 0.06);
+
+$mat-red: (
+  50: #ffebee,
+  100: #ffcdd2,
+  200: #ef9a9a,
+  300: #e57373,
+  400: #ef5350,
+  500: #f44336,
+  600: #e53935,
+  700: #d32f2f,
+  800: #c62828,
+  900: #b71c1c,
+  A100: #ff8a80,
+  A200: #ff5252,
+  A400: #ff1744,
+  A700: #d50000,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
+);
+
+$mat-pink: (
+  50: #fce4ec,
+  100: #f8bbd0,
+  200: #f48fb1,
+  300: #f06292,
+  400: #ec407a,
+  500: #e91e63,
+  600: #d81b60,
+  700: #c2185b,
+  800: #ad1457,
+  900: #880e4f,
+  A100: #ff80ab,
+  A200: #ff4081,
+  A400: #f50057,
+  A700: #c51162,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
+);
+
+$mat-purple: (
+  50: #f3e5f5,
+  100: #e1bee7,
+  200: #ce93d8,
+  300: #ba68c8,
+  400: #ab47bc,
+  500: #9c27b0,
+  600: #8e24aa,
+  700: #7b1fa2,
+  800: #6a1b9a,
+  900: #4a148c,
+  A100: #ea80fc,
+  A200: #e040fb,
+  A400: #d500f9,
+  A700: #aa00ff,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
+);
+
+$mat-deep-purple: (
+  50: #ede7f6,
+  100: #d1c4e9,
+  200: #b39ddb,
+  300: #9575cd,
+  400: #7e57c2,
+  500: #673ab7,
+  600: #5e35b1,
+  700: #512da8,
+  800: #4527a0,
+  900: #311b92,
+  A100: #b388ff,
+  A200: #7c4dff,
+  A400: #651fff,
+  A700: #6200ea,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: $white-87-opacity,
+    A700: $white-87-opacity,
+  )
+);
+
+$mat-indigo: (
+  50: #e8eaf6,
+  100: #c5cae9,
+  200: #9fa8da,
+  300: #7986cb,
+  400: #5c6bc0,
+  500: #3f51b5,
+  600: #3949ab,
+  700: #303f9f,
+  800: #283593,
+  900: #1a237e,
+  A100: #8c9eff,
+  A200: #536dfe,
+  A400: #3d5afe,
+  A700: #304ffe,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: $white-87-opacity,
+  )
+);
+
+$mat-blue: (
+  50: #e3f2fd,
+  100: #bbdefb,
+  200: #90caf9,
+  300: #64b5f6,
+  400: #42a5f5,
+  500: #2196f3,
+  600: #1e88e5,
+  700: #1976d2,
+  800: #1565c0,
+  900: #0d47a1,
+  A100: #82b1ff,
+  A200: #448aff,
+  A400: #2979ff,
+  A700: #2962ff,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: white,
+    A400: white,
+    A700: white,
+  )
+);
+
+$mat-light-blue: (
+  50: #e1f5fe,
+  100: #b3e5fc,
+  200: #81d4fa,
+  300: #4fc3f7,
+  400: #29b6f6,
+  500: #03a9f4,
+  600: #039be5,
+  700: #0288d1,
+  800: #0277bd,
+  900: #01579b,
+  A100: #80d8ff,
+  A200: #40c4ff,
+  A400: #00b0ff,
+  A700: #0091ea,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: white,
+  )
+);
+
+$mat-cyan: (
+  50: #e0f7fa,
+  100: #b2ebf2,
+  200: #80deea,
+  300: #4dd0e1,
+  400: #26c6da,
+  500: #00bcd4,
+  600: #00acc1,
+  700: #0097a7,
+  800: #00838f,
+  900: #006064,
+  A100: #84ffff,
+  A200: #18ffff,
+  A400: #00e5ff,
+  A700: #00b8d4,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-teal: (
+  50: #e0f2f1,
+  100: #b2dfdb,
+  200: #80cbc4,
+  300: #4db6ac,
+  400: #26a69a,
+  500: #009688,
+  600: #00897b,
+  700: #00796b,
+  800: #00695c,
+  900: #004d40,
+  A100: #a7ffeb,
+  A200: #64ffda,
+  A400: #1de9b6,
+  A700: #00bfa5,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-green: (
+  50: #e8f5e9,
+  100: #c8e6c9,
+  200: #a5d6a7,
+  300: #81c784,
+  400: #66bb6a,
+  500: #4caf50,
+  600: #43a047,
+  700: #388e3c,
+  800: #2e7d32,
+  900: #1b5e20,
+  A100: #b9f6ca,
+  A200: #69f0ae,
+  A400: #00e676,
+  A700: #00c853,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-light-green: (
+  50: #f1f8e9,
+  100: #dcedc8,
+  200: #c5e1a5,
+  300: #aed581,
+  400: #9ccc65,
+  500: #8bc34a,
+  600: #7cb342,
+  700: #689f38,
+  800: #558b2f,
+  900: #33691e,
+  A100: #ccff90,
+  A200: #b2ff59,
+  A400: #76ff03,
+  A700: #64dd17,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: white,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-lime: (
+  50: #f9fbe7,
+  100: #f0f4c3,
+  200: #e6ee9c,
+  300: #dce775,
+  400: #d4e157,
+  500: #cddc39,
+  600: #c0ca33,
+  700: #afb42b,
+  800: #9e9d24,
+  900: #827717,
+  A100: #f4ff81,
+  A200: #eeff41,
+  A400: #c6ff00,
+  A700: #aeea00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-yellow: (
+  50: #fffde7,
+  100: #fff9c4,
+  200: #fff59d,
+  300: #fff176,
+  400: #ffee58,
+  500: #ffeb3b,
+  600: #fdd835,
+  700: #fbc02d,
+  800: #f9a825,
+  900: #f57f17,
+  A100: #ffff8d,
+  A200: #ffff00,
+  A400: #ffea00,
+  A700: #ffd600,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: $black-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-amber: (
+  50: #fff8e1,
+  100: #ffecb3,
+  200: #ffe082,
+  300: #ffd54f,
+  400: #ffca28,
+  500: #ffc107,
+  600: #ffb300,
+  700: #ffa000,
+  800: #ff8f00,
+  900: #ff6f00,
+  A100: #ffe57f,
+  A200: #ffd740,
+  A400: #ffc400,
+  A700: #ffab00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: $black-87-opacity,
+    900: $black-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $black-87-opacity,
+  )
+);
+
+$mat-orange: (
+  50: #fff3e0,
+  100: #ffe0b2,
+  200: #ffcc80,
+  300: #ffb74d,
+  400: #ffa726,
+  500: #ff9800,
+  600: #fb8c00,
+  700: #f57c00,
+  800: #ef6c00,
+  900: #e65100,
+  A100: #ffd180,
+  A200: #ffab40,
+  A400: #ff9100,
+  A700: #ff6d00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $black-87-opacity,
+    700: $black-87-opacity,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: black,
+  )
+);
+
+$mat-deep-orange: (
+  50: #fbe9e7,
+  100: #ffccbc,
+  200: #ffab91,
+  300: #ff8a65,
+  400: #ff7043,
+  500: #ff5722,
+  600: #f4511e,
+  700: #e64a19,
+  800: #d84315,
+  900: #bf360c,
+  A100: #ff9e80,
+  A200: #ff6e40,
+  A400: #ff3d00,
+  A700: #dd2c00,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: white,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: white,
+  )
+);
+
+$mat-brown: (
+  50: #efebe9,
+  100: #d7ccc8,
+  200: #bcaaa4,
+  300: #a1887f,
+  400: #8d6e63,
+  500: #795548,
+  600: #6d4c41,
+  700: #5d4037,
+  800: #4e342e,
+  900: #3e2723,
+  A100: #d7ccc8,
+  A200: #bcaaa4,
+  A400: #8d6e63,
+  A700: #5d4037,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: white,
+    400: white,
+    500: $white-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: $white-87-opacity,
+  )
+);
+
+$mat-grey: (
+  50: #fafafa,
+  100: #f5f5f5,
+  200: #eeeeee,
+  300: #e0e0e0,
+  400: #bdbdbd,
+  500: #9e9e9e,
+  600: #757575,
+  700: #616161,
+  800: #424242,
+  900: #212121,
+  A100: #ffffff,
+  A200: #eeeeee,
+  A400: #bdbdbd,
+  A700: #616161,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: $black-87-opacity,
+    500: $black-87-opacity,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: $black-87-opacity,
+    A700: $white-87-opacity,
+  )
+);
+
+$mat-blue-grey: (
+  50: #eceff1,
+  100: #cfd8dc,
+  200: #b0bec5,
+  300: #90a4ae,
+  400: #78909c,
+  500: #607d8b,
+  600: #546e7a,
+  700: #455a64,
+  800: #37474f,
+  900: #263238,
+  A100: #cfd8dc,
+  A200: #b0bec5,
+  A400: #78909c,
+  A700: #455a64,
+  contrast: (
+    50: $black-87-opacity,
+    100: $black-87-opacity,
+    200: $black-87-opacity,
+    300: $black-87-opacity,
+    400: white,
+    500: white,
+    600: $white-87-opacity,
+    700: $white-87-opacity,
+    800: $white-87-opacity,
+    900: $white-87-opacity,
+    A100: $black-87-opacity,
+    A200: $black-87-opacity,
+    A400: white,
+    A700: $white-87-opacity,
+  )
+);
+
+
+// Background palette for light themes.
+$mat-light-theme-background: (
+  status-bar: map_get($mat-grey, 300),
+  app-bar:    map_get($mat-grey, 100),
+  background: map_get($mat-grey, 50),
+  hover:      rgba(black, 0.04), // TODO(kara): check style with Material Design UX
+  card:       white,
+  dialog:     white,
+  disabled-button: $black-12-opacity,
+  raised-button: white,
+  focused-button: $black-6-opacity,
+  selected-button: map_get($mat-grey, 300),
+  selected-disabled-button: map_get($mat-grey, 400),
+  disabled-button-toggle: map_get($mat-grey, 200),
+  unselected-chip: map_get($mat-grey, 300),
+  disabled-list-option: map_get($mat-grey, 200),
+);
+
+// Background palette for dark themes.
+$mat-dark-theme-background: (
+  status-bar: black,
+  app-bar:    map_get($mat-grey, 900),
+  background: #303030,
+  hover:      rgba(white, 0.04), // TODO(kara): check style with Material Design UX
+  card:       map_get($mat-grey, 800),
+  dialog:     map_get($mat-grey, 800),
+  disabled-button: $white-12-opacity,
+  raised-button: map-get($mat-grey, 800),
+  focused-button: $white-6-opacity,
+  selected-button: map_get($mat-grey, 900),
+  selected-disabled-button: map_get($mat-grey, 800),
+  disabled-button-toggle: black,
+  unselected-chip: map_get($mat-grey, 700),
+  disabled-list-option: black,
+);
+
+// Foreground palette for light themes.
+$mat-light-theme-foreground: (
+  base:              black,
+  divider:           $black-12-opacity,
+  dividers:          $black-12-opacity,
+  disabled:          rgba(black, 0.38),
+  disabled-button:   rgba(black, 0.38),
+  disabled-text:     rgba(black, 0.38),
+  hint-text:         rgba(black, 0.38),
+  secondary-text:    rgba(black, 0.54),
+  icon:              rgba(black, 0.54),
+  icons:             rgba(black, 0.54),
+  text:              rgba(black, 0.87),
+  slider-min:        rgba(black, 0.87),
+  slider-off:        rgba(black, 0.26),
+  slider-off-active: rgba(black, 0.38),
+);
+
+// Foreground palette for dark themes.
+$mat-dark-theme-foreground: (
+  base:              white,
+  divider:           $white-12-opacity,
+  dividers:          $white-12-opacity,
+  disabled:          rgba(white, 0.3),
+  disabled-button:   rgba(white, 0.3),
+  disabled-text:     rgba(white, 0.3),
+  hint-text:         rgba(white, 0.3),
+  secondary-text:    rgba(white, 0.7),
+  icon:              white,
+  icons:             white,
+  text:              white,
+  slider-min:        white,
+  slider-off:        rgba(white, 0.3),
+  slider-off-active: rgba(white, 0.3),
+);
+
+
+
+// For a given hue in a palette, return the contrast color from the map of contrast palettes.
+// @param $color-map
+// @param $hue
+@function mat-contrast($palette, $hue) {
+  @return map-get(map-get($palette, contrast), $hue);
+}
+
+
+// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms
+// of the Material Design hues.
+// @param $color-map
+// @param $primary
+// @param $lighter
+@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {
+  $result: map_merge($base-palette, (
+    default: map-get($base-palette, $default),
+    lighter: map-get($base-palette, $lighter),
+    darker: map-get($base-palette, $darker),
+
+    default-contrast: mat-contrast($base-palette, $default),
+    lighter-contrast: mat-contrast($base-palette, $lighter),
+    darker-contrast: mat-contrast($base-palette, $darker)
+  ));
+
+  // For each hue in the palette, add a "-contrast" color to the map.
+  @each $hue, $color in $base-palette {
+    $result: map_merge($result, (
+      '#{$hue}-contrast': mat-contrast($base-palette, $hue)
+    ));
+  }
+
+  @return $result;
+}
+
+
+// Gets a color from a theme palette (the output of mat-palette).
+// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured
+// hues (default, lighter, darker), or any of the aforementioned prefixed with "-contrast".
+//
+// @param $color-map The theme palette (output of mat-palette).
+// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will
+//     be treated as opacity.
+// @param $opacity The alpha channel value for the color.
+@function mat-color($palette, $hue: default, $opacity: null) {
+  // If hueKey is a number between zero and one, then it actually contains an
+  // opacity value, so recall this function with the default hue and that given opacity.
+  @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {
+    @return mat-color($palette, default, $hue);
+  }
+
+  $color: map-get($palette, $hue);
+  $opacity: if($opacity == null, opacity($color), $opacity);
+
+  @return rgba($color, $opacity);
+}
+
+
+// Creates a container object for a light theme to be given to individual component theme mixins.
+@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+    is-dark: false,
+    foreground: $mat-light-theme-foreground,
+    background: $mat-light-theme-background,
+  );
+}
+
+
+// Creates a container object for a dark theme to be given to individual component theme mixins.
+@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+    is-dark: true,
+    foreground: $mat-dark-theme-foreground,
+    background: $mat-dark-theme-background,
+  );
+}
+
+
+
+$mat-ripple-color-opacity: 0.1;
+
+@mixin mat-ripple() {
+  // The host element of an md-ripple directive should always have a position of "absolute" or
+  // "relative" so that the ripple divs it creates inside itself are correctly positioned.
+  .mat-ripple {
+    overflow: hidden;
+
+    // In high contrast mode the ripple is opaque, causing it to obstruct the content.
+    @include cdk-high-contrast {
+      display: none;
+    }
+  }
+
+  .mat-ripple.mat-ripple-unbounded {
+    overflow: visible;
+  }
+
+  .mat-ripple-element {
+    position: absolute;
+    border-radius: 50%;
+    pointer-events: none;
+
+    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
+    transform: scale(0);
+  }
+}
+
+/* Theme for the ripple elements.*/
+@mixin mat-ripple-theme($theme) {
+  $foreground: map_get($theme, foreground);
+  $foreground-base: map_get($foreground, base);
+
+  .mat-ripple-element {
+    background-color: rgba($foreground-base, $mat-ripple-color-opacity);
+  }
+}
+
+
+
+// This mixin will ensure that lines that overflow the container will hide the overflow and
+// truncate neatly with an ellipsis.
+@mixin mat-truncate-line() {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+// Mixin to provide all mat-line styles, changing secondary font size based on whether the list
+// is in dense mode.
+@mixin mat-line-base($secondary-font-size) {
+  .mat-line {
+    @include mat-truncate-line();
+    display: block;
+    box-sizing: border-box;
+
+    // all lines but the top line should have smaller text
+    &:nth-child(n+2) {
+      font-size: $secondary-font-size;
+    }
+  }
+}
+
+// This mixin normalizes default element styles, e.g. font weight for heading text.
+@mixin mat-normalize-text() {
+  & > * {
+    margin: 0;
+    padding: 0;
+    font-weight: normal;
+    font-size: inherit;
+  }
+}
+
+// This mixin provides base styles for the wrapper around mat-line elements in a list.
+@mixin mat-line-wrapper-base() {
+  @include mat-normalize-text();
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  overflow: hidden;
+
+  // Must remove wrapper when lines are empty or it takes up horizontal
+  // space and pushes other elements to the right.
+  &:empty {
+    display: none;
+  }
+}
+
+
+/** The mixins below are shared between md-menu and md-select */
+
+// menu width must be a multiple of 56px
+$mat-menu-overlay-min-width: 112px !default;   // 56 * 2
+$mat-menu-overlay-max-width: 280px !default;   // 56 * 5
+
+$mat-menu-item-height: 48px !default;
+$mat-menu-side-padding: 16px !default;
+$mat-menu-icon-margin: 16px !default;
+
+
+@mixin mat-menu-base($default-elevation) {
+  min-width: $mat-menu-overlay-min-width;
+  max-width: $mat-menu-overlay-max-width;
+
+  // Allow elevation to be overwritten.
+  &:not([class*='mat-elevation-z']) {
+    @include mat-elevation($default-elevation);
+  }
+
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;   // for momentum scroll on mobile
+}
+
+@mixin mat-menu-item-base() {
+  @include mat-truncate-line();
+
+  // Needs to be a block for the ellipsis to work.
+  display: block;
+  line-height: $mat-menu-item-height;
+  height: $mat-menu-item-height;
+  padding: 0 $mat-menu-side-padding;
+
+  text-align: left;
+  text-decoration: none;   // necessary to reset anchor tags
+
+  &[disabled] {
+    cursor: default;
+  }
+
+  [dir='rtl'] & {
+    text-align: right;
+  }
+
+  .mat-icon {
+    margin-right: $mat-menu-icon-margin;
+
+    [dir='rtl'] & {
+      margin-left: $mat-menu-icon-margin;
+      margin-right: 0;
+    }
+  }
+}
+
+/**
+ * This mixin adds the correct panel transform styles based
+ * on the direction that the menu panel opens.
+ */
+@mixin mat-menu-positions() {
+  &.mat-menu-after.mat-menu-below {
+    transform-origin: left top;
+  }
+
+  &.mat-menu-after.mat-menu-above {
+    transform-origin: left bottom;
+  }
+
+  &.mat-menu-before.mat-menu-below {
+    transform-origin: right top;
+  }
+
+  &.mat-menu-before.mat-menu-above {
+    transform-origin: right bottom;
+  }
+
+  [dir='rtl'] & {
+    &.mat-menu-after.mat-menu-below {
+      transform-origin: right top;
+    }
+
+    &.mat-menu-after.mat-menu-above {
+      transform-origin: right bottom;
+    }
+
+    &.mat-menu-before.mat-menu-below {
+      transform-origin: left top;
+    }
+
+    &.mat-menu-before.mat-menu-above {
+      transform-origin: left bottom;
+    }
+  }
+}
+
+/* stylelint-disable material/no-prefixes */
+@mixin user-select($value) {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+@mixin input-placeholder {
+  &::placeholder {
+    @content;
+  }
+
+  &::-moz-placeholder {
+    @content;
+  }
+
+  &::-webkit-input-placeholder {
+    @content;
+  }
+
+  &:-ms-input-placeholder {
+    @content;
+  }
+}
+
+@mixin cursor-grab {
+  cursor: -webkit-grab;
+  cursor: grab;
+}
+
+@mixin cursor-grabbing {
+  cursor: -webkit-grabbing;
+  cursor: grabbing;
+}
+
+@mixin backface-visibility($value) {
+  -webkit-backface-visibility: $value;
+  backface-visibility: $value;
+}
+/* stylelint-enable */
+
+
+// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.
+@mixin mat-fill {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  position: absolute;
+}
+
+
+/**
+ * This mixin contains shared option styles between the select and
+ * autocomplete components.
+ */
+@mixin mat-option() {
+  .mat-option {
+    @include mat-menu-item-base();
+    position: relative;
+    cursor: pointer;
+    outline: none;
+
+    &[aria-disabled='true'] {
+      @include user-select(none);
+      cursor: default;
+    }
+
+    .mat-optgroup &:not(.mat-option-multiple) {
+      padding-left: $mat-menu-side-padding * 2;
+
+      [dir='rtl'] & {
+        padding-left: $mat-menu-side-padding;
+        padding-right: $mat-menu-side-padding * 2;
+      }
+    }
+  }
+
+  .mat-option-ripple {
+    @include mat-fill;
+
+    // Disable pointer events for the ripple container because the container will overlay the
+    // user content and we don't want to disable mouse events on the user content.
+    // Pointer events can be safely disabled because the ripple trigger element is the host element.
+    pointer-events: none;
+
+    // Prevents the ripple from completely covering the option in high contrast mode.
+    @include cdk-high-contrast {
+      opacity: 0.5;
+    }
+  }
+
+  .mat-option-pseudo-checkbox {
+    $margin: $mat-menu-side-padding / 2;
+    margin-right: $margin;
+
+    [dir='rtl'] & {
+      margin-left: $margin;
+      margin-right: 0;
+    }
+  }
+}
+
+
+
+
+// Utility for fetching a nested value from a typography config.
+@function _mat-get-type-value($config, $level, $name) {
+  @return map-get(map-get($config, $level), $name);
+}
+
+// Gets the font size for a level inside a typography config.
+@function mat-font-size($config, $level) {
+  @return _mat-get-type-value($config, $level, font-size);
+}
+
+// Gets the line height for a level inside a typography config.
+@function mat-line-height($config, $level) {
+  @return _mat-get-type-value($config, $level, line-height);
+}
+
+// Gets the font weight for a level inside a typography config.
+@function mat-font-weight($config, $level) {
+  @return _mat-get-type-value($config, $level, font-weight);
+}
+
+// Gets the font-family from a typography config and removes the quotes around it.
+@function mat-font-family($config, $level: null) {
+  $font-family: map-get($config, font-family);
+
+  @if $level != null {
+    $font-family: _mat-get-type-value($config, $level, font-family);
+  }
+
+  @return unquote($font-family);
+}
+
+// Converts a typography level into CSS styles.
+@mixin mat-typography-level-to-styles($config, $level) {
+  $font-size: mat-font-size($config, $level);
+  $font-weight: mat-font-weight($config, $level);
+  $line-height: mat-line-height($config, $level);
+  $font-family: mat-font-family($config, $level);
+
+  // Use the shorthand `font` to represent a typography level, because it's the shortest. Notes that
+  // we need to use interpolation for `font-size/line-height` in order to prevent SASS from dividing
+  // the two values.
+  font: $font-weight #{$font-size}/#{$line-height} $font-family;
+}
+
+
+@mixin mat-option-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .mat-option {
+    color: mat-color($foreground, text);
+
+    &:hover:not(.mat-option-disabled),
+    &:focus:not(.mat-option-disabled) {
+      background: mat-color($background, hover);
+    }
+
+    .mat-primary &.mat-selected:not(.mat-option-disabled) {
+      color: mat-color($primary);
+    }
+
+    .mat-accent &.mat-selected:not(.mat-option-disabled) {
+      color: mat-color($accent);
+    }
+
+    .mat-warn &.mat-selected:not(.mat-option-disabled) {
+      color: mat-color($warn);
+    }
+
+    // In multiple mode there is a checkbox to show that the option is selected.
+    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
+      background: mat-color($background, hover);
+    }
+
+    &.mat-active {
+      background: mat-color($background, hover);
+      color: mat-color($foreground, text);
+    }
+
+    &.mat-option-disabled {
+      color: mat-color($foreground, hint-text);
+    }
+  }
+}
+
+@mixin mat-option-typography($config) {
+  .mat-option {
+    font: {
+      family: mat-font-family($config, subheading-2);
+      size: mat-font-size($config, subheading-2);
+    }
+  }
+}
+
+
+
+
+@mixin mat-optgroup() {
+  .mat-optgroup-label {
+    @include mat-menu-item-base();
+    @include user-select(none);
+    cursor: default;
+  }
+}
+
+
+
+
+
+@mixin mat-optgroup-theme($theme) {
+  $foreground: map-get($theme, foreground);
+
+  .mat-optgroup-label {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-optgroup-disabled .mat-optgroup-label {
+    color: mat-color($foreground, hint-text);
+  }
+}
+
+@mixin mat-optgroup-typography($config) {
+  .mat-optgroup-label {
+    @include mat-typography-level-to-styles($config, body-2);
+  }
+}
+
+
+
+@mixin mat-pseudo-checkbox-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+
+  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
+  // this does not work well with elements layered on top of one another. To get around this we
+  // blend the colors together based on the base color and the theme background.
+  $white-30pct-opacity-on-dark: #686868;
+  $black-26pct-opacity-on-light: #b0b0b0;
+  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
+  $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';
+
+  .mat-pseudo-checkbox {
+    color: mat-color(map-get($theme, foreground), secondary-text);
+
+    &::after {
+      color: mat-color($background, background);
+    }
+  }
+
+  // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the
+  // theme from their parent, rather than implementing their own theming, which is why we
+  // don't attach to the `mat-*` classes.
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate,
+  .mat-accent .mat-pseudo-checkbox-checked,
+  .mat-accent .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, accent));
+  }
+
+  .mat-primary .mat-pseudo-checkbox-checked,
+  .mat-primary .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, primary));
+  }
+
+  .mat-warn .mat-pseudo-checkbox-checked,
+  .mat-warn .mat-pseudo-checkbox-indeterminate {
+    background: mat-color(map-get($theme, warn));
+  }
+
+  .mat-pseudo-checkbox-checked,
+  .mat-pseudo-checkbox-indeterminate {
+    &.mat-pseudo-checkbox-disabled {
+      background: $disabled-color;
+    }
+  }
+}
+
+
+
+// Represents a typography level from the Material design spec.
+@function mat-typography-level(
+  $font-size,
+  $line-height: $font-size,
+  $font-weight: 400,
+  $font-family: null) {
+
+  @return (
+    font-size: $font-size,
+    line-height: $line-height,
+    font-weight: $font-weight,
+    font-family: $font-family
+  );
+}
+
+// Represents a collection of typography levels.
+// Defaults come from https://material.io/guidelines/style/typography.html
+@function mat-typography-config(
+  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
+  $display-4:     mat-typography-level(112px, 112px, 300),
+  $display-3:     mat-typography-level(56px, 56px, 400),
+  $display-2:     mat-typography-level(45px, 48px, 400),
+  $display-1:     mat-typography-level(34px, 40px, 400),
+  $headline:      mat-typography-level(24px, 32px, 400),
+  $title:         mat-typography-level(20px, 32px, 500),
+  $subheading-2:  mat-typography-level(16px, 28px, 400),
+  $subheading-1:  mat-typography-level(15px, 24px, 400),
+  $body-2:        mat-typography-level(14px, 24px, 500),
+  $body-1:        mat-typography-level(14px, 20px, 400),
+  $caption:       mat-typography-level(12px, 20px, 400),
+  $button:        mat-typography-level(14px, 14px, 500),
+  // Line-height must be unit-less fraction of the font-size.
+  $input:         mat-typography-level(16px, 1.125, 400)
+) {
+
+  // Declare an initial map with all of the levels.
+  $config: (
+    display-4:      $display-4,
+    display-3:      $display-3,
+    display-2:      $display-2,
+    display-1:      $display-1,
+    headline:       $headline,
+    title:          $title,
+    subheading-2:   $subheading-2,
+    subheading-1:   $subheading-1,
+    body-2:         $body-2,
+    body-1:         $body-1,
+    caption:        $caption,
+    button:         $button,
+    input:          $input,
+  );
+
+  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.
+  // Note that SASS can't modify maps in place, which means that we need to merge and re-assign.
+  @each $key, $level in $config {
+    @if map-get($level, font-family) == null {
+      $new-level: map-merge($level, (font-family: $font-family));
+      $config: map-merge($config, ($key: $new-level));
+    }
+  }
+
+  // Add the base font family to the config.
+  @return map-merge($config, (font-family: $font-family));
+}
+
+// Adds the base typography styles, based on a config.
+@mixin mat-base-typography($config, $selector: '.mat-typography') {
+  .mat-h1, .mat-headline, #{$selector} h1 {
+    @include mat-typography-level-to-styles($config, headline);
+    margin: 0 0 16px;
+  }
+
+  .mat-h2, .mat-title, #{$selector} h2 {
+    @include mat-typography-level-to-styles($config, title);
+    margin: 0 0 16px;
+  }
+
+  .mat-h3, .mat-subheading-2, #{$selector} h3 {
+    @include mat-typography-level-to-styles($config, subheading-2);
+    margin: 0 0 16px;
+  }
+
+  .mat-h4, .mat-subheading-1, #{$selector} h4 {
+    @include mat-typography-level-to-styles($config, subheading-1);
+    margin: 0 0 16px;
+  }
+
+  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for
+  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em
+  // and h6 at 0.67em.
+  .mat-h5, #{$selector} h5 {
+    font-size: mat-font-size($config, body-1) * 0.83;
+    font-weight: mat-font-weight($config, body-1);
+    font-family: mat-font-family($config, body-1);
+    line-height: mat-line-height($config, body-1);
+    margin: 0 0 12px;
+  }
+
+  .mat-h6, #{$selector} h6 {
+    font-size: mat-font-size($config, body-1) * 0.67;
+    font-weight: mat-font-weight($config, body-1);
+    font-family: mat-font-family($config, body-1);
+    line-height: mat-line-height($config, body-1);
+    margin: 0 0 12px;
+  }
+
+  .mat-body-strong, .mat-body-2 {
+    @include mat-typography-level-to-styles($config, body-2);
+  }
+
+  .mat-body, .mat-body-1, #{$selector} {
+    @include mat-typography-level-to-styles($config, body-1);
+
+    p {
+      margin: 0 0 12px;
+    }
+  }
+
+  .mat-small, .mat-caption {
+    @include mat-typography-level-to-styles($config, caption);
+  }
+
+  // Note: The spec doesn't mention letter spacing. The value comes from
+  // eyeballing it until it looked exactly like the spec examples.
+  .mat-display-4, #{$selector} .mat-display-4 {
+    @include mat-typography-level-to-styles($config, display-4);
+    margin: 0 0 56px;
+    letter-spacing: -0.05em;
+  }
+
+  .mat-display-3, #{$selector} .mat-display-3 {
+    @include mat-typography-level-to-styles($config, display-3);
+    margin: 0 0 64px;
+    letter-spacing: -0.02em;
+  }
+
+  .mat-display-2, #{$selector} .mat-display-2 {
+    @include mat-typography-level-to-styles($config, display-2);
+    margin: 0 0 64px;
+    letter-spacing: -0.005em;
+  }
+
+  .mat-display-1, #{$selector} .mat-display-1 {
+    @include mat-typography-level-to-styles($config, display-1);
+    margin: 0 0 64px;
+  }
+}
+
+
+
+@mixin mat-autocomplete-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .mat-autocomplete-panel {
+    background: mat-color($background, card);
+    color: mat-color($foreground, text);
+
+    // Selected options in autocompletes should not be gray, but we
+    // only want to override the background for selected options if
+    // they are *not* in hover or focus state. This change has to be
+    // made here because base option styles are shared between the
+    // autocomplete and the select.
+    .mat-option.mat-selected:not(.mat-active):not(:hover) {
+      background: mat-color($background, card);
+
+      &:not(.mat-option-disabled) {
+        color: mat-color($foreground, text);
+      }
+    }
+  }
+
+}
+
+@mixin mat-autocomplete-typography($config) { }
+
+
+
+
+// Applies a focus style to an md-button element for each of the supported palettes.
+@mixin _mat-button-focus-color($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  &.mat-primary .mat-button-focus-overlay {
+    background-color: mat-color($primary, 0.12);
+  }
+
+  &.mat-accent .mat-button-focus-overlay {
+    background-color: mat-color($accent, 0.12);
+  }
+
+  &.mat-warn .mat-button-focus-overlay {
+    background-color: mat-color($warn, 0.12);
+  }
+
+  &[disabled] .mat-button-focus-overlay {
+    background-color: transparent;
+  }
+}
+
+@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.2) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  &.mat-primary .mat-ripple-element {
+    background-color: mat-color($primary, $hue, $opacity);
+  }
+
+  &.mat-accent .mat-ripple-element {
+    background-color: mat-color($accent, $hue, $opacity);
+  }
+
+  &.mat-warn .mat-ripple-element {
+    background-color: mat-color($warn, $hue, $opacity);
+  }
+}
+
+// Applies a property to an md-button element for each of the supported palettes.
+@mixin _mat-button-theme-color($theme, $property, $color: 'default') {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  &.mat-primary {
+    #{$property}: mat-color($primary, $color);
+  }
+  &.mat-accent {
+    #{$property}: mat-color($accent, $color);
+  }
+  &.mat-warn {
+    #{$property}: mat-color($warn, $color);
+  }
+
+  &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {
+    &[disabled] {
+      $palette: if($property == 'color', $foreground, $background);
+      #{$property}: mat-color($palette, disabled-button);
+    }
+  }
+}
+
+@mixin mat-button-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-button, .mat-icon-button {
+    background: transparent;
+
+    @include _mat-button-focus-color($theme);
+    @include _mat-button-theme-color($theme, 'color');
+  }
+
+  .mat-raised-button, .mat-fab, .mat-mini-fab {
+    // Default properties when not using any [color] value.
+    color: mat-color($foreground, text);
+    background-color: mat-color($background, raised-button);
+
+    @include _mat-button-theme-color($theme, 'color', default-contrast);
+    @include _mat-button-theme-color($theme, 'background-color');
+
+    // Add ripple effect with contrast color to buttons that don't have a focus overlay.
+    @include _mat-button-ripple-color($theme, default-contrast);
+  }
+
+  // Add ripple effect with default color to flat buttons, which also have a focus overlay.
+  .mat-button {
+    @include _mat-button-ripple-color($theme, default, 0.1);
+  }
+
+  // Add ripple effect with default color to the icon button. Ripple color needs to be stronger
+  // since the icon button doesn't have a focus overlay.
+  .mat-icon-button {
+    @include _mat-button-ripple-color($theme, default);
+  }
+}
+
+@mixin mat-button-typography($config) {
+  .mat-button, .mat-raised-button, .mat-icon-button, .mat-fab, .mat-mini-fab {
+    font: {
+      family: mat-font-family($config, button);
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+}
+
+
+
+
+
+// Applies a focus style to an md-button-toggle element for each of the supported palettes.
+@mixin _mat-button-toggle-focus-color($theme) {
+  $background: map-get($theme, background);
+
+  .mat-button-toggle-focus-overlay {
+    background-color: mat-color($background, focused-button);
+  }
+}
+
+@mixin mat-button-toggle-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .mat-button-toggle {
+    color: mat-color($foreground, hint-text);
+
+    &.cdk-focused {
+      @include _mat-button-toggle-focus-color($theme);
+    }
+  }
+
+  .mat-button-toggle-checked {
+    background-color: mat-color($background, selected-button);
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-button-toggle-disabled {
+    background-color: mat-color($background, disabled-button-toggle);
+    color: mat-color($foreground, disabled-button);
+
+    &.mat-button-toggle-checked {
+      background-color: mat-color($background, selected-disabled-button);
+    }
+  }
+}
+
+@mixin mat-button-toggle-typography($config) {
+  .mat-button-toggle {
+    font-family: mat-font-family($config);
+  }
+}
+
+
+
+
+
+
+@mixin mat-card-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-card {
+    background: mat-color($background, card);
+    color: mat-color($foreground, text);
+  }
+
+  .mat-card-subtitle {
+    color: mat-color($foreground, secondary-text);
+  }
+}
+
+@mixin mat-card-typography($config) {
+  .mat-card {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-card-title {
+    font: {
+      size: mat-font-size($config, headline);
+      weight: mat-font-weight($config, headline);
+    }
+  }
+
+  .mat-card-subtitle,
+  .mat-card-content,
+  .mat-card-header .mat-card-title {
+    font-size: mat-font-size($config, body-1);
+  }
+}
+
+
+
+
+
+@mixin mat-checkbox-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+
+
+  // The color of the checkbox's checkmark / mixedmark.
+  $checkbox-mark-color: mat-color($background, background);
+
+  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,
+  // this does not work well with elements layered on top of one another. To get around this we
+  // blend the colors together based on the base color and the theme background.
+  $white-30pct-opacity-on-dark: #686868;
+  $black-26pct-opacity-on-light: #b0b0b0;
+  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);
+
+  .mat-checkbox-frame {
+    border-color: mat-color(map-get($theme, foreground), secondary-text);
+  }
+
+  .mat-checkbox-checkmark {
+    fill: $checkbox-mark-color;
+  }
+
+  .mat-checkbox-checkmark-path {
+    // !important is needed here because a stroke must be set as an attribute on the SVG in order
+    // for line animation to work properly.
+    stroke: $checkbox-mark-color !important;
+  }
+
+  .mat-checkbox-mixedmark {
+    background-color: $checkbox-mark-color;
+  }
+
+  .mat-checkbox-indeterminate, .mat-checkbox-checked {
+    &.mat-primary .mat-checkbox-background {
+      background-color: mat-color($primary);
+    }
+
+    &.mat-accent .mat-checkbox-background {
+      background-color: mat-color($accent);
+    }
+
+    &.mat-warn .mat-checkbox-background {
+      background-color: mat-color($warn);
+    }
+  }
+
+  .mat-checkbox-disabled {
+    &.mat-checkbox-checked, &.mat-checkbox-indeterminate {
+      .mat-checkbox-background {
+        background-color: $disabled-color;
+      }
+    }
+
+    &:not(.mat-checkbox-checked) {
+      .mat-checkbox-frame {
+        border-color: $disabled-color;
+      }
+    }
+
+    .mat-checkbox-label {
+      color: $disabled-color;
+    }
+  }
+
+  .mat-checkbox:not(.mat-checkbox-disabled) {
+    &.mat-primary .mat-checkbox-ripple .mat-ripple-element {
+      background-color: mat-color($primary, 0.26);
+    }
+
+    &.mat-accent .mat-checkbox-ripple .mat-ripple-element {
+      background-color: mat-color($accent, 0.26);
+    }
+
+    &.mat-warn .mat-checkbox-ripple .mat-ripple-element {
+      background-color: mat-color($warn, 0.26);
+    }
+  }
+}
+
+@mixin mat-checkbox-typography($config) {
+  .mat-checkbox {
+    font-family: mat-font-family($config);
+  }
+
+  // TODO(kara): Remove this style when fixing vertical baseline
+  .mat-checkbox-layout .mat-checkbox-label {
+    line-height: mat-line-height($config, body-2);
+  }
+}
+
+
+
+
+
+// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.
+$mat-chip-font-size: 13px;
+$mat-chip-line-height: 18px;
+$mat-chip-remove-font-size: 18px;
+
+@mixin mat-chips-theme-color($color) {
+  @include mat-chips-color(mat-color($color, default-contrast), mat-color($color));
+}
+
+@mixin mat-chips-color($foreground, $background) {
+  background-color: $background;
+  color: $foreground;
+
+  .mat-chip-remove {
+    color: $foreground;
+    opacity: 0.4;
+  }
+
+  .mat-chip-remove:hover {
+    opacity: 0.54;
+  }
+}
+
+@mixin mat-chips-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  $unselected-background: mat-color($background, unselected-chip);
+  $unselected-foreground: mat-color($foreground, text);
+
+
+  .mat-chip:not(.mat-basic-chip) {
+    @include mat-chips-color($unselected-foreground, $unselected-background);
+  }
+
+  .mat-chip.mat-chip-selected {
+
+    &.mat-primary {
+      @include mat-chips-theme-color($primary);
+    }
+
+    &.mat-warn {
+      @include mat-chips-theme-color($warn);
+    }
+
+    &.mat-accent {
+      @include mat-chips-theme-color($accent);
+    }
+  }
+}
+
+@mixin mat-chips-typography($config) {
+  .mat-chip {
+    font-size: $mat-chip-font-size;
+    line-height: $mat-chip-line-height;
+
+    .mat-chip-remove.mat-icon {
+      font-size: $mat-chip-remove-font-size;
+    }
+  }
+}
+
+
+
+
+
+@mixin mat-table-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-table {
+    background: mat-color($background, 'card');
+  }
+
+  .mat-row, .mat-header-row {
+    border-bottom-color: mat-color($foreground, divider);
+  }
+
+  .mat-header-cell {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-cell {
+    color: mat-color($foreground, text);
+  }
+}
+
+@mixin mat-table-typography($config) {
+  .mat-table {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-header-cell {
+    font-size: mat-font-size($config, caption);
+    font-weight: mat-font-weight($config, body-2);
+  }
+
+  .mat-cell {
+    font-size: mat-font-size($config, body-1);
+  }
+}
+
+
+
+
+
+
+$mat-calendar-body-font-size: 13px !default;
+$mat-calendar-weekday-table-font-size: 11px !default;
+
+
+@mixin mat-datepicker-theme($theme) {
+  $primary: map-get($theme, primary);
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  $mat-datepicker-selected-today-box-shadow-width: 1px;
+  $mat-datepicker-selected-fade-amount: 0.6;
+  $mat-datepicker-today-fade-amount: 0.2;
+
+  .mat-datepicker-content {
+    background-color: mat-color($background, card);
+    color: mat-color($foreground, text);
+  }
+
+  .mat-calendar-arrow {
+    border-top-color: mat-color($foreground, icon);
+  }
+
+  .mat-calendar-next-button,
+  .mat-calendar-previous-button {
+    color: mat-color($foreground, icon);
+  }
+
+  .mat-calendar-table-header {
+    color: mat-color($foreground, hint-text);
+  }
+
+  .mat-calendar-table-header-divider::after {
+    background: mat-color($foreground, divider);
+  }
+
+  .mat-calendar-body-label {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-calendar-body-cell-content {
+    color: mat-color($foreground, text);
+    border-color: transparent;
+
+    .mat-calendar-body-disabled > &:not(.mat-calendar-body-selected) {
+      color: mat-color($foreground, disabled-text);
+    }
+  }
+
+  :not(.mat-calendar-body-disabled):hover,
+  .cdk-keyboard-focused .mat-calendar-body-active {
+    & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {
+      background-color: mat-color($background, hover);
+    }
+  }
+
+  .mat-calendar-body-selected {
+    background-color: mat-color($primary);
+    color: mat-color($primary, default-contrast);
+  }
+
+  .mat-calendar-body-disabled > .mat-calendar-body-selected {
+    background-color: fade-out(mat-color($primary), $mat-datepicker-selected-fade-amount);
+  }
+
+  .mat-calendar-body-today {
+    &:not(.mat-calendar-body-selected) {
+      // Note: though it's not text, the border is a hint about the fact that this is today's date,
+      // so we use the hint color.
+      border-color: mat-color($foreground, hint-text);
+    }
+
+    &.mat-calendar-body-selected {
+      box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
+                  mat-color($primary, default-contrast);
+    }
+  }
+
+  .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {
+    border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);
+  }
+}
+
+@mixin mat-datepicker-typography($config) {
+  .mat-calendar {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-calendar-body {
+    font-size: $mat-calendar-body-font-size;
+  }
+
+  .mat-calendar-body-label,
+  .mat-calendar-period-button {
+    font: {
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+
+  .mat-calendar-table-header th {
+    font: {
+      size: $mat-calendar-weekday-table-font-size;
+      weight: mat-font-weight($config, body-1);
+    }
+  }
+}
+
+
+
+
+
+
+@mixin mat-dialog-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-dialog-container {
+    background: mat-color($background, dialog);
+    color: mat-color($foreground, text);
+  }
+}
+
+@mixin mat-dialog-typography($config) {
+  .mat-dialog-title {
+    @include mat-typography-level-to-styles($config, title);
+  }
+}
+
+
+
+
+
+@mixin mat-expansion-panel-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-expansion-panel {
+    background: mat-color($background, card);
+    color: mat-color($foreground, text);
+  }
+
+  .mat-action-row {
+    border-top-color: mat-color($foreground, divider);
+  }
+
+  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {
+    &:not([aria-disabled='true']) {
+      &.cdk-keyboard-focused,
+      &.cdk-program-focused,
+      &:hover {
+        background: mat-color($background, hover);
+      }
+    }
+  }
+
+  .mat-expansion-panel-header-title {
+    color: mat-color($foreground, text);
+  }
+
+  .mat-expansion-panel-header-description,
+  .mat-expansion-indicator::after {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-expansion-panel-header[aria-disabled='true'] {
+    color: mat-color($foreground, disabled-button);
+
+    .mat-expansion-panel-header-title,
+    .mat-expansion-panel-header-description {
+      color: inherit;
+    }
+  }
+}
+
+@mixin mat-expansion-panel-typography($config) {
+  .mat-expansion-panel-header {
+    font: {
+      family: mat-font-family($config, subheading-1);
+      size: mat-font-size($config, subheading-1);
+      weight: mat-font-weight($config, subheading-1);
+    }
+  }
+
+  .mat-expansion-panel-content {
+    @include mat-typography-level-to-styles($config, body-1);
+  }
+}
+
+
+
+
+
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin mat-grid-list-theme($theme) { }
+
+@mixin mat-grid-list-typography($config) {
+  .mat-grid-tile-header,
+  .mat-grid-tile-footer {
+    @include mat-line-base(mat-font-size($config, caption));
+    font-size: mat-font-size($config, body-1);
+  }
+}
+
+
+
+
+// Include this empty mixin for consistency with the other components.
+@mixin mat-icon-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-icon {
+    &.mat-primary {
+      color: mat-color($primary);
+    }
+
+    &.mat-accent {
+      color: mat-color($accent);
+    }
+
+    &.mat-warn {
+      color: mat-color($warn);
+    }
+  }
+}
+
+@mixin mat-icon-typography($config) { }
+
+
+
+// Renders a gradient for showing the dashed line when the input is disabled.
+// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line
+// to match the Material Design spec.
+@mixin mat-control-disabled-underline($color) {
+  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
+  background-size: 4px 1px;
+  background-repeat: repeat-x;
+}
+
+
+
+
+@mixin mat-input-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  .mat-input-element:disabled {
+    color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.42));
+  }
+}
+
+@mixin mat-input-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+
+  // The amount of space between the top of the line and the top of the actual text
+  // (as a fraction of the font-size).
+  $line-spacing: ($line-height - 1) / 2;
+
+  // <input> elements seem to have their height set slightly too large on Safari causing the text to
+  // be misaligned w.r.t. the placeholder. Adding this margin corrects it.
+  input.mat-input-element {
+    margin-top: -$line-spacing * 1em;
+  }
+}
+
+
+
+
+
+
+
+@mixin mat-list-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-list, .mat-nav-list, .mat-selection-list {
+    .mat-list-item {
+      color: mat-color($foreground, text);
+    }
+
+    .mat-list-option {
+      color: mat-color($foreground, text);
+    }
+
+    .mat-subheader {
+      color: mat-color($foreground, secondary-text);
+    }
+  }
+
+  .mat-list-item-disabled {
+    background-color: mat-color($background, disabled-list-option);
+  }
+
+  .mat-divider {
+    border-top-color: mat-color($foreground, divider);
+  }
+
+  .mat-nav-list .mat-list-item {
+    outline: none;
+
+    &:hover, &.mat-list-item-focus {
+      background: mat-color($background, 'hover');
+    }
+  }
+
+  .mat-list-option {
+    outline: none;
+
+    &:hover, &.mat-list-item-focus {
+      background: mat-color($background, 'hover');
+    }
+  }
+}
+
+@mixin mat-list-typography($config) {
+  $font-family: mat-font-family($config);
+
+  .mat-list-item {
+    font-family: $font-family;
+  }
+
+  .mat-list-option {
+    font-family: $font-family;
+  }
+
+  // Default list
+  .mat-list, .mat-nav-list, .mat-selection-list {
+    .mat-list-item {
+      font-size: mat-font-size($config, subheading-2);
+      @include mat-line-base(mat-font-size($config, body-1));
+    }
+
+    .mat-list-option {
+      font-size: mat-font-size($config, subheading-2);
+      @include mat-line-base(mat-font-size($config, body-1));
+    }
+
+    .mat-subheader {
+      font-family: mat-font-family($config, body-2);
+      font-size: mat-font-size($config, body-2);
+      font-weight: mat-font-weight($config, body-2);
+    }
+  }
+
+  // Dense list
+  .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {
+    .mat-list-item {
+      font-size: mat-font-size($config, caption);
+      @include mat-line-base(mat-font-size($config, caption));
+    }
+
+    .mat-list-option {
+      font-size: mat-font-size($config, caption);
+      @include mat-line-base(mat-font-size($config, caption));
+    }
+
+    .mat-subheader {
+      font-family: $font-family;
+      font-size: mat-font-size($config, caption);
+      font-weight: mat-font-weight($config, body-2);
+    }
+  }
+}
+
+
+
+
+
+
+@mixin mat-menu-theme($theme) {
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-menu-panel {
+    background: mat-color($background, 'card');
+  }
+
+  .mat-menu-item {
+    background: transparent;
+    color: mat-color($foreground, 'text');
+
+    &[disabled] {
+      color: mat-color($foreground, 'disabled');
+    }
+  }
+
+  .mat-menu-item .mat-icon,
+  .mat-menu-item-submenu-trigger::after {
+    color: mat-color($foreground, 'icon');
+  }
+
+  .mat-menu-item:hover,
+  .mat-menu-item:focus,
+  .mat-menu-item-highlighted {
+    &:not([disabled]) {
+      background: mat-color($background, 'hover');
+    }
+  }
+}
+
+@mixin mat-menu-typography($config) {
+  .mat-menu-item {
+    font: {
+      family: mat-font-family($config, subheading-2);
+      size: mat-font-size($config, subheading-2);
+    }
+  }
+}
+
+
+
+
+
+
+@mixin mat-paginator-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+
+  .mat-paginator {
+    background: mat-color($background, 'card');
+  }
+
+  .mat-paginator,
+  .mat-paginator-page-size .mat-select-trigger {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-paginator-increment,
+  .mat-paginator-decrement {
+    border-top: 2px solid mat-color($foreground, 'icon');
+    border-right: 2px solid mat-color($foreground, 'icon');
+  }
+
+  .mat-icon-button[disabled] {
+    .mat-paginator-increment,
+    .mat-paginator-decrement {
+      border-color: mat-color($foreground, 'disabled');
+    }
+  }
+}
+
+@mixin mat-paginator-typography($config) {
+  .mat-paginator,
+  .mat-paginator-page-size .mat-select-trigger {
+    font: {
+      family: mat-font-family($config, caption);
+      size: mat-font-size($config, caption);
+    }
+  }
+}
+
+
+
+
+
+@mixin mat-progress-bar-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .mat-progress-bar-background {
+    background-image: #{_mat-progress-bar-buffer($primary, lighter)};
+  }
+
+  .mat-progress-bar-buffer {
+    background-color: mat-color($primary, lighter);
+  }
+
+  .mat-progress-bar-fill::after {
+    background-color: mat-color($primary);
+  }
+
+  .mat-progress-bar.mat-accent {
+    .mat-progress-bar-background {
+      background-image: #{_mat-progress-bar-buffer($accent, lighter)};
+    }
+
+    .mat-progress-bar-buffer {
+      background-color: mat-color($accent, lighter);
+    }
+
+    .mat-progress-bar-fill::after {
+      background-color: mat-color($accent);
+    }
+  }
+
+  .mat-progress-bar.mat-warn {
+    .mat-progress-bar-background {
+      background-image: #{_mat-progress-bar-buffer($warn, lighter)};
+    }
+
+    .mat-progress-bar-buffer {
+      background-color: mat-color($warn, lighter);
+    }
+
+    .mat-progress-bar-fill::after {
+      background-color: mat-color($warn);
+    }
+  }
+}
+
+@mixin mat-progress-bar-typography($config) { }
+
+// TODO(josephperrott): Find better way to inline svgs.
+// In buffer mode a repeated SVG object is used as a background.
+// Each of the following defines the SVG object for each of the class defined colors.
+//
+// The string is a URL encoded version of:
+//
+// <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
+//      version="1.1" x="0px" y="0px" enable-background="new 0 0 5 2"
+//      xml:space="preserve" viewBox="0 0 5 2" preserveAspectRatio="none slice">
+//   <circle cx="1" cy="1" r="1" fill="{INJECTED_COLOR}"/>
+// </svg>
+@function _mat-progress-bar-buffer($palette, $hue) {
+  $color: mat-color($palette, $hue) + '';
+
+  // We also need to escape the hash in hex colors,
+  // otherwise IE will throw an XML error.
+  @if str-index($color, '#') == 1 {
+    $color: '%23' + str-slice($color, 2);
+  }
+
+  $result: '' +
+    'data:image/svg+xml;charset=UTF-8,%3Csvg%20version%3D%271.1%27%20xmlns%3D%27http%3A%2F%2F' +
+    'www.w3.org%2F2000%2Fsvg%27%20xmlns%3Axlink%3D%27http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%2' +
+    '7%20x%3D%270px%27%20y%3D%270px%27%20enable-background%3D%27new%200%200%205%202%27%20xml%' +
+    '3Aspace%3D%27preserve%27%20viewBox%3D%270%200%205%202%27%20preserveAspectRatio%3D%27none' +
+    '%20slice%27%3E%3Ccircle%20cx%3D%271%27%20cy%3D%271%27%20r%3D%271%27%20fill%3D%27' +
+    $color + '%27%2F%3E%3C%2Fsvg%3E';
+
+  @return url($result);
+}
+
+
+
+
+
+@mixin mat-progress-spinner-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+
+  .mat-progress-spinner, .mat-spinner {
+    path {
+      stroke: mat-color($primary);
+    }
+
+    &.mat-accent path {
+      stroke: mat-color($accent);
+    }
+
+    &.mat-warn path {
+      stroke: mat-color($warn);
+    }
+  }
+}
+
+@mixin mat-progress-spinner-typography($config) { }
+
+
+
+
+
+@mixin mat-radio-color($palette) {
+  &.mat-radio-checked .mat-radio-outer-circle {
+    border-color: mat-color($palette);
+  }
+
+  .mat-radio-inner-circle {
+    background-color: mat-color($palette);
+  }
+
+  .mat-radio-ripple .mat-ripple-element {
+    background-color: mat-color($palette, 0.26);
+  }
+}
+
+@mixin mat-radio-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-radio-outer-circle {
+    border-color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-radio-disabled .mat-radio-outer-circle {
+    border-color: mat-color($foreground, disabled);
+  }
+
+  .mat-radio-disabled {
+    .mat-radio-ripple .mat-ripple-element, .mat-radio-inner-circle {
+      background-color: mat-color($foreground, disabled);
+    }
+
+    .mat-radio-label-content {
+      color: mat-color($foreground, disabled);
+    }
+  }
+
+  .mat-radio-button {
+    &.mat-primary {
+      @include mat-radio-color($primary);
+    }
+
+    &.mat-accent {
+      @include mat-radio-color($accent);
+    }
+
+    &.mat-warn {
+      @include mat-radio-color($warn);
+    }
+  }
+}
+
+@mixin mat-radio-typography($config) {
+  .mat-radio-button {
+    font-family: mat-font-family($config);
+  }
+}
+
+
+
+
+
+
+@mixin _mat-select-inner-content-theme($palette) {
+  $color: mat-color($palette);
+
+  .mat-select-trigger, .mat-select-arrow {
+    color: $color;
+  }
+
+  .mat-select-underline {
+    background-color: $color;
+  }
+}
+
+@mixin mat-select-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $is-dark-theme: map-get($theme, is-dark);
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+
+  .mat-select-trigger,
+  .mat-select-arrow {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-select-underline {
+    background-color: $underline-color;
+  }
+
+  [aria-disabled='true'] .mat-select-underline {
+    // Since this is a dotted line, we need to make it slightly darker to get it to stand out.
+    @include mat-control-disabled-underline($underline-color);
+  }
+
+  .mat-select-disabled .mat-select-value,
+  .mat-select-arrow,
+  .mat-select-trigger {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-select-content, .mat-select-panel-done-animating {
+    background: mat-color($background, card);
+  }
+
+  .mat-select-value {
+    color: mat-color($foreground, text);
+  }
+
+  .mat-select-panel {
+    .mat-option.mat-selected:not(.mat-option-multiple) {
+      background: mat-color($background, hover, 0.12);
+    }
+  }
+
+  .mat-select:focus:not(.mat-select-disabled) {
+    &.mat-primary {
+      @include _mat-select-inner-content-theme($primary);
+    }
+
+    &.mat-accent {
+      @include _mat-select-inner-content-theme($accent);
+    }
+
+    &.mat-select-required .mat-select-placeholder::after {
+      color: mat-color($warn);
+    }
+  }
+
+  .mat-select:focus:not(.mat-select-disabled).mat-warn, .mat-select-invalid {
+    @include _mat-select-inner-content-theme($warn);
+  }
+}
+
+@mixin mat-select-typography($config) {
+  $trigger-font-size: mat-font-size($config, subheading-2);
+
+  .mat-select {
+    // Reserve enough space for the floating placeholder.
+    padding-top: $trigger-font-size;
+    font-family: mat-font-family($config);
+  }
+
+  .mat-select-trigger {
+    font-size: $trigger-font-size;
+  }
+}
+
+
+
+
+
+@mixin mat-sidenav-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  // We use invert() here to have the darken the background color expected to be used. If the
+  // background is light, we use a dark backdrop. If the background is dark,
+  // we use a light backdrop.
+  $drawer-backdrop-color: invert(mat-color($background, card, 0.6)) !default;
+  $drawer-background-color: mat-color($background, dialog) !default;
+  $drawer-container-background-color:  mat-color($background, background) !default;
+  $drawer-push-background-color: mat-color($background, dialog) !default;
+
+  .mat-drawer-container {
+    background-color: $drawer-container-background-color;
+    color: mat-color($foreground, text);
+  }
+
+  .mat-drawer {
+    background-color: $drawer-background-color;
+    color: mat-color($foreground, text);
+
+    &.mat-drawer-push {
+      background-color: $drawer-push-background-color;
+    }
+  }
+
+  .mat-drawer-backdrop.mat-drawer-shown {
+    background-color: $drawer-backdrop-color;
+  }
+}
+
+@mixin mat-sidenav-typography($config) { }
+
+
+
+
+
+@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
+  // Do not apply the checked colors if the toggle is disabled, because the
+  // specificity would be to high for the disabled styles.
+  &.mat-checked:not(.mat-disabled) {
+    .mat-slide-toggle-thumb {
+      background-color: mat-color($palette, $thumb-checked-hue);
+    }
+
+    .mat-slide-toggle-bar {
+      background-color: mat-color($palette, $thumb-checked-hue, 0.5);
+    }
+  }
+}
+
+// Applies the specified colors to the slide-toggle ripple elements.
+@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {
+  &:not(.mat-checked) .mat-ripple-element {
+    background-color: $ripple-unchecked-color;
+  }
+  .mat-ripple-element {
+    background-color: $ripple-checked-color;
+  }
+}
+
+@mixin mat-slide-toggle-theme($theme) {
+  $is-dark: map_get($theme, is-dark);
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  // Color hues based on the specs, which prescribe different hues for dark and light themes
+  // https://material.google.com/components/selection-controls.html#selection-controls-switch
+  $thumb-normal-hue: if($is-dark, 400, 50);
+  $thumb-checked-hue: if($is-dark, 200, 500);
+  $thumb-disabled-hue: if($is-dark, 800, 400);
+
+  $bar-normal-color: mat-color($foreground, disabled);
+  $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));
+
+  // Ripple colors are based on the current palette and the state of the slide-toggle.
+  // See https://material.google.com/components/selection-controls.html#selection-controls-switch
+  $ripple-checked-opacity: 0.12;
+  $ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06));
+  $ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity);
+  $ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity);
+  $ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity);
+
+  .mat-slide-toggle {
+    @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);
+    @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);
+
+    &.mat-primary {
+      @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
+      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);
+    }
+
+    &.mat-warn {
+      @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
+      @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);
+    }
+
+  }
+
+  .mat-disabled {
+    .mat-slide-toggle-thumb {
+      // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark
+      // or light themes. Since this is very specific to the slide-toggle component, we're not
+      // providing it in the background palette.
+      background-color: mat-color($mat-grey, $thumb-disabled-hue);
+    }
+    .mat-slide-toggle-bar {
+      background-color: $bar-disabled-color;
+    }
+  }
+
+  .mat-slide-toggle-thumb {
+    background-color: mat-color($mat-grey, $thumb-normal-hue);
+  }
+
+  .mat-slide-toggle-bar {
+    background-color: $bar-normal-color;
+  }
+}
+
+@mixin mat-slide-toggle-typography($config) {
+  .mat-slide-toggle-content {
+    @include mat-typography-level-to-styles($config, body-1);
+  }
+}
+
+
+
+
+
+@mixin _mat-slider-inner-content-theme($palette) {
+  .mat-slider-track-fill,
+  .mat-slider-thumb,
+  .mat-slider-thumb-label {
+    background-color: mat-color($palette);
+  }
+
+  .mat-slider-thumb-label-text {
+    color: mat-color($palette, default-contrast);
+  }
+}
+
+@mixin mat-slider-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  $mat-slider-off-color: mat-color($foreground, slider-off);
+  $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);
+  $mat-slider-disabled-color: mat-color($foreground, slider-off);
+  $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);
+  $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);
+  $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);
+  $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);
+  $mat-slider-tick-color: mat-color($foreground, base, 0.7);
+  $mat-slider-tick-size: 2px;
+
+  .mat-slider-track-background {
+    background-color: $mat-slider-off-color;
+  }
+
+  .mat-primary {
+    @include _mat-slider-inner-content-theme($primary);
+  }
+
+  .mat-accent {
+    @include _mat-slider-inner-content-theme($accent);
+  }
+
+  .mat-warn {
+    @include _mat-slider-inner-content-theme($warn);
+  }
+
+  .mat-slider-focus-ring {
+    background-color: $mat-slider-focus-ring-color;
+  }
+
+  .mat-slider:hover,
+  .cdk-focused {
+    .mat-slider-track-background {
+      background-color: $mat-slider-off-focused-color;
+    }
+  }
+
+  .mat-slider-disabled {
+    .mat-slider-track-background,
+    .mat-slider-track-fill,
+    .mat-slider-thumb {
+      background-color: $mat-slider-disabled-color;
+    }
+
+    &:hover {
+      .mat-slider-track-background {
+        background-color: $mat-slider-disabled-color;
+      }
+    }
+  }
+
+  .mat-slider-min-value {
+    .mat-slider-focus-ring {
+      background-color: $mat-slider-focus-ring-min-value-color;
+    }
+
+    &.mat-slider-thumb-label-showing {
+      .mat-slider-thumb,
+      .mat-slider-thumb-label {
+        background-color: $mat-slider-labeled-min-value-thumb-color;
+      }
+
+      &.cdk-focused {
+        .mat-slider-thumb,
+        .mat-slider-thumb-label {
+          background-color: $mat-slider-labeled-min-value-thumb-label-color;
+        }
+      }
+    }
+
+    &:not(.mat-slider-thumb-label-showing) {
+      .mat-slider-thumb {
+        border-color: $mat-slider-off-color;
+        background-color: transparent;
+      }
+
+      &:hover,
+      &.cdk-focused {
+        .mat-slider-thumb {
+          border-color: $mat-slider-off-focused-color;
+        }
+
+        &.mat-slider-disabled .mat-slider-thumb {
+          border-color: $mat-slider-disabled-color;
+        }
+      }
+    }
+  }
+
+  .mat-slider-has-ticks .mat-slider-wrapper::after {
+    border-color: $mat-slider-tick-color;
+  }
+
+  .mat-slider-horizontal .mat-slider-ticks {
+    background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+    // Firefox doesn't draw the gradient correctly with 'to right'
+    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).
+    background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+  }
+
+  .mat-slider-vertical .mat-slider-ticks {
+    background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,
+        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);
+  }
+}
+
+@mixin mat-slider-typography($config) {
+  .mat-slider-thumb-label-text {
+    font: {
+      family: mat-font-family($config);
+      size: mat-font-size($config, caption);
+      weight: mat-font-weight($config, body-2);
+    }
+  }
+}
+
+
+
+
+
+@mixin mat-stepper-theme($theme) {
+  $foreground: map-get($theme, foreground);
+  $background: map-get($theme, background);
+  $primary: map-get($theme, primary);
+
+  .mat-step-header {
+    &:focus,
+    &:hover {
+      background-color: mat-color($background, hover);
+    }
+
+    .mat-step-label,
+    .mat-step-optional {
+      color: mat-color($foreground, disabled-text);
+    }
+
+    .mat-step-icon {
+      background-color: mat-color($primary);
+      color: mat-color($primary, default-contrast);
+    }
+
+    .mat-step-icon-not-touched {
+      background-color: mat-color($foreground, disabled-text);
+      color: mat-color($primary, default-contrast);
+    }
+
+    .mat-step-label.mat-step-label-active {
+      color: mat-color($foreground, text);
+    }
+  }
+
+  .mat-stepper-horizontal, .mat-stepper-vertical {
+    background-color: mat-color($background, card);
+  }
+
+  .mat-stepper-vertical-line::before {
+    border-left-color: mat-color($foreground, divider);
+  }
+
+  .mat-stepper-horizontal-line {
+    border-top-color: mat-color($foreground, divider);
+  }
+}
+
+@mixin mat-stepper-typography($config) {
+  .mat-stepper-vertical, .mat-stepper-horizontal {
+    font-family: mat-font-family($config);
+  }
+}
+
+
+
+
+
+@mixin mat-tabs-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $header-border: 1px solid mat-color($foreground, divider);
+
+  .mat-tab-nav-bar,
+  .mat-tab-header {
+    border-bottom: $header-border;
+  }
+
+  .mat-tab-group-inverted-header {
+    .mat-tab-nav-bar,
+    .mat-tab-header {
+      border-top: $header-border;
+      border-bottom: none;
+    }
+  }
+
+  .mat-tab-label, .mat-tab-link {
+    color: mat-color($foreground, text);
+
+    &.mat-tab-disabled {
+      color: mat-color($foreground, disabled-text);
+    }
+  }
+
+  .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, text);
+  }
+
+  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+    border-color: mat-color($foreground, disabled-text);
+  }
+
+  // Remove header border when there is a background color
+  .mat-tab-group[class*='mat-background-'] .mat-tab-header,
+  .mat-tab-nav-bar[class*='mat-background-'] {
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .mat-tab-group, .mat-tab-nav-bar {
+    $theme-colors: (
+      primary: $primary,
+      accent: $accent,
+      warn: $warn
+    );
+
+    @each $name, $color in $theme-colors {
+      // Set the foreground color of the tabs
+      &.mat-#{$name} {
+        @include _mat-tab-label-focus($color);
+        @include _mat-ink-bar($color);
+
+        // Override ink bar when background color is the same
+        &.mat-background-#{$name} {
+          @include _mat-ink-bar($color, default-contrast);
+        }
+      }
+    }
+
+    @each $name, $color in $theme-colors {
+      // Set background color of the tabs and override focus color
+      &.mat-background-#{$name} {
+        @include _mat-tab-label-focus($color);
+        @include _mat-tabs-background($color);
+      }
+    }
+  }
+}
+
+@mixin _mat-ink-bar($color, $hue: default) {
+  .mat-ink-bar {
+    background-color: mat-color($color, $hue);
+  }
+}
+
+@mixin _mat-tab-label-focus($tab-focus-color) {
+  .mat-tab-label:focus, .mat-tab-link:focus {
+    background-color: mat-color($tab-focus-color, lighter, 0.3);
+  }
+}
+
+@mixin _mat-tabs-background($background-color) {
+  // Set background color for the tab group
+  .mat-tab-header, .mat-tab-links {
+    background-color: mat-color($background-color);
+  }
+
+  // Set labels to contrast against background
+  .mat-tab-label, .mat-tab-link {
+    color: mat-color($background-color, default-contrast);
+
+    &.mat-tab-disabled {
+      color: mat-color($background-color, default-contrast, 0.4);
+    }
+  }
+
+  // Set pagination chevrons to contrast background
+  .mat-tab-header-pagination-chevron {
+    border-color: mat-color($background-color, default-contrast);
+  }
+
+  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
+    border-color: mat-color($background-color, default-contrast, 0.4);
+  }
+}
+
+@mixin mat-tabs-typography($config) {
+  .mat-tab-group {
+    font-family: mat-font-family($config);
+  }
+
+  .mat-tab-label, .mat-tab-link {
+    font: {
+      family: mat-font-family($config, button);
+      size: mat-font-size($config, button);
+      weight: mat-font-weight($config, button);
+    }
+  }
+}
+
+
+
+
+
+
+@mixin _mat-toolbar-color($palette) {
+  background: mat-color($palette);
+  color: mat-color($palette, default-contrast);
+}
+
+@mixin mat-toolbar-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+
+  .mat-toolbar {
+    background: mat-color($background, app-bar);
+    color: mat-color($foreground, text);
+
+    &.mat-primary {
+      @include _mat-toolbar-color($primary);
+    }
+
+    &.mat-accent {
+      @include _mat-toolbar-color($accent);
+    }
+
+    &.mat-warn {
+      @include _mat-toolbar-color($warn);
+    }
+  }
+}
+
+@mixin mat-toolbar-typography($config) {
+  .mat-toolbar,
+  .mat-toolbar h1,
+  .mat-toolbar h2,
+  .mat-toolbar h3,
+  .mat-toolbar h4,
+  .mat-toolbar h5,
+  .mat-toolbar h6 {
+    @include mat-typography-level-to-styles($config, title);
+    margin: 0;
+  }
+}
+
+
+
+
+
+// TODO(crisbeto): these doesn't correspond to any typography levels
+// and the width/height appear to be off from the spec.
+$mat-tooltip-target-height: 22px;
+$mat-tooltip-font-size: 10px;
+$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;
+
+@mixin mat-tooltip-theme($theme) {
+  .mat-tooltip {
+    background: mat-color($mat-grey, 700, 0.9);
+  }
+}
+
+@mixin mat-tooltip-typography($config) {
+  .mat-tooltip {
+    font-family: mat-font-family($config);
+    font-size: $mat-tooltip-font-size;
+    padding-top: $mat-tooltip-vertical-padding;
+    padding-bottom: $mat-tooltip-vertical-padding;
+  }
+}
+
+
+
+
+@mixin mat-snack-bar-theme($theme) {
+  $is-dark-theme: map-get($theme, is-dark);
+  $accent: map-get($theme, accent);
+
+  .mat-snack-bar-container {
+    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);
+    color: if($is-dark-theme, $black-87-opacity, white);
+  }
+
+  .mat-simple-snackbar-action {
+    color: if($is-dark-theme, inherit, mat-color($accent));
+  }
+}
+
+@mixin mat-snack-bar-typography($config) {
+  .mat-simple-snackbar {
+    font: {
+      family: mat-font-family($config, body-1);
+      size: mat-font-size($config, body-1);
+    }
+  }
+
+  .mat-simple-snackbar-action {
+    line-height: 1;
+    font: {
+      family: inherit;
+      size: inherit;
+      weight: mat-font-weight($config, button);
+    }
+  }
+}
+
+
+
+
+
+
+
+
+
+@mixin mat-form-field-theme($theme) {
+  $primary: map-get($theme, primary);
+  $accent: map-get($theme, accent);
+  $warn: map-get($theme, warn);
+  $background: map-get($theme, background);
+  $foreground: map-get($theme, foreground);
+  $is-dark-theme: map-get($theme, is-dark);
+
+  // Placeholder colors. Required is used for the `*` star shown in the placeholder.
+  $placeholder-color: mat-color($foreground, secondary-text);
+  $floating-placeholder-color: mat-color($primary);
+  $required-placeholder-color: mat-color($accent);
+
+  // Underline colors.
+  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));
+  $underline-color-accent: mat-color($accent);
+  $underline-color-warn: mat-color($warn);
+  $underline-focused-color: mat-color($primary);
+
+  // Define the width here so that it is easier for users to override with one css class worth
+  // of specificity.
+  .mat-form-field {
+    width: 200px;
+  }
+
+  .mat-form-field-placeholder {
+    color: $placeholder-color;
+  }
+
+  .mat-hint {
+    color: mat-color($foreground, secondary-text);
+  }
+
+  .mat-focused .mat-form-field-placeholder {
+    color: $floating-placeholder-color;
+
+    &.mat-accent {
+      color: $underline-color-accent;
+    }
+
+    &.mat-warn {
+      color: $underline-color-warn;
+    }
+  }
+
+  .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-placeholder,
+  .mat-focused .mat-form-field-placeholder.mat-form-field-float {
+    .mat-form-field-required-marker {
+      color: $required-placeholder-color;
+    }
+  }
+
+  .mat-form-field-underline {
+    background-color: $underline-color;
+
+    &.mat-disabled {
+      @include mat-control-disabled-underline($underline-color);
+    }
+  }
+
+  .mat-form-field-ripple {
+    background-color: $underline-focused-color;
+
+    &.mat-accent {
+      background-color: $underline-color-accent;
+    }
+
+    &.mat-warn {
+      background-color: $underline-color-warn;
+    }
+  }
+
+  // Styling for the error state of the form field. Note that while the same can be
+  // achieved with the ng-* classes, we use this approach in order to ensure that the same
+  // logic is used to style the error state and to show the error messages.
+  .mat-form-field-invalid {
+    .mat-form-field-placeholder {
+      color: $underline-color-warn;
+
+      &.mat-accent,
+      &.mat-form-field-float .mat-form-field-required-marker {
+        color: $underline-color-warn;
+      }
+    }
+
+    .mat-form-field-ripple {
+      background-color: $underline-color-warn;
+    }
+  }
+
+  .mat-error {
+    color: $underline-color-warn;
+  }
+}
+
+// Applies a floating placeholder above the form field control itself.
+@mixin _mat-form-field-placeholder-floating($font-scale, $infix-padding, $infix-margin-top) {
+  // We use perspective to fix the text blurriness as described here:
+  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/
+  // This results in a small jitter after the label floats on Firefox, which the
+  // translateZ fixes.
+  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)
+             translateZ(0.001px);
+  // The tricks above used to smooth out the animation on chrome and firefox actually make things
+  // worse on IE, so we don't include them in the IE version.
+  -ms-transform: translateY(-$infix-margin-top - $infix-padding)
+  scale($font-scale);
+
+  width: 100% / $font-scale;
+}
+
+@mixin mat-form-field-typography($config) {
+  // The unit-less line-height from the font config.
+  $line-height: mat-line-height($config, input);
+
+  // The amount to scale the font for the floating label and subscript.
+  $subscript-font-scale: 0.75;
+  // The amount to scale the font for the prefix and suffix icons.
+  $prefix-suffix-icon-font-scale: 1.5;
+
+  // The amount of space between the top of the line and the top of the actual text
+  // (as a fraction of the font-size).
+  $line-spacing: ($line-height - 1) / 2;
+  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge
+  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.
+  $infix-padding: 0.5em - $line-spacing;
+  // The margin applied to the form-field-infix to reserve space for the floating label.
+  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
+  // Font size to use for the label and subscript text.
+  $subscript-font-size: $subscript-font-scale * 100%;
+  // Font size to use for the for the prefix and suffix icons.
+  $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;
+  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.
+  // Mocks show half of the text size, but this margin is applied to an element with the subscript
+  // text font size, so we need to divide by the scale factor to make it half of the original text
+  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the
+  // text, not the  edge of the line.
+  $subscript-margin-top: 0.5em / $subscript-font-scale - ($line-spacing * 2);
+  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's
+  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we
+  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.
+  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;
+
+  .mat-form-field {
+    font-family: mat-font-family($config);
+    font-size: inherit;
+    font-weight: mat-font-weight($config, input);
+    line-height: mat-line-height($config, input);
+  }
+
+  .mat-form-field-wrapper {
+    padding-bottom: $wrapper-padding-bottom;
+  }
+
+  .mat-form-field-prefix,
+  .mat-form-field-suffix {
+    // Allow icons in a prefix or suffix to adapt to the correct size.
+    .mat-icon {
+      font-size: $prefix-suffix-icon-font-size;
+      line-height: $line-height;
+    }
+
+    // Allow icon buttons in a prefix or suffix to adapt to the correct size.
+    .mat-icon-button {
+      height: $prefix-suffix-icon-font-scale * 1em;
+      width: $prefix-suffix-icon-font-scale * 1em;
+
+      .mat-icon {
+        height: $line-height * 1em;
+        line-height: $line-height;
+      }
+    }
+  }
+
+  .mat-form-field-infix {
+    padding: $infix-padding 0;
+    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.
+    border-top: $infix-margin-top solid transparent;
+  }
+
+  .mat-form-field-autofill-control {
+    &:-webkit-autofill + .mat-form-field-placeholder-wrapper .mat-form-field-float {
+      @include _mat-form-field-placeholder-floating(
+          $subscript-font-scale, $infix-padding, $infix-margin-top);
+    }
+  }
+
+  .mat-form-field-placeholder-wrapper {
+    top: -$infix-margin-top;
+    padding-top: $infix-margin-top;
+  }
+
+  .mat-form-field-placeholder {
+    top: $infix-margin-top + $infix-padding;
+
+    // Show the placeholder above the control when it's not empty, or focused.
+    &.mat-form-field-float:not(.mat-form-field-empty),
+    .mat-focused &.mat-form-field-float {
+      @include _mat-form-field-placeholder-floating($subscript-font-scale,
+          $infix-padding, $infix-margin-top);
+    }
+  }
+
+  .mat-form-field-underline {
+    // We want the underline to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount.
+    bottom: $wrapper-padding-bottom;
+  }
+
+  .mat-form-field-subscript-wrapper {
+    font-size: $subscript-font-size;
+    margin-top: $subscript-margin-top;
+
+    // We want the subscript to start at the end of the content box, not the padding box,
+    // so we move it up by the padding amount (adjusted for the smaller font size);
+    top: calc(100% - #{$wrapper-padding-bottom / $subscript-font-scale});
+  }
+}
+
+
+
+// Includes all of the typographic styles.
+@mixin angular-material-typography($config: null) {
+  @if $config == null {
+    $config: mat-typography-config();
+  }
+
+  @include mat-base-typography($config);
+  @include mat-autocomplete-typography($config);
+  @include mat-button-typography($config);
+  @include mat-button-toggle-typography($config);
+  @include mat-card-typography($config);
+  @include mat-checkbox-typography($config);
+  @include mat-chips-typography($config);
+  @include mat-table-typography($config);
+  @include mat-datepicker-typography($config);
+  @include mat-dialog-typography($config);
+  @include mat-expansion-panel-typography($config);
+  @include mat-form-field-typography($config);
+  @include mat-grid-list-typography($config);
+  @include mat-icon-typography($config);
+  @include mat-input-typography($config);
+  @include mat-menu-typography($config);
+  @include mat-paginator-typography($config);
+  @include mat-progress-bar-typography($config);
+  @include mat-progress-spinner-typography($config);
+  @include mat-radio-typography($config);
+  @include mat-select-typography($config);
+  @include mat-sidenav-typography($config);
+  @include mat-slide-toggle-typography($config);
+  @include mat-slider-typography($config);
+  @include mat-stepper-typography($config);
+  @include mat-tabs-typography($config);
+  @include mat-toolbar-typography($config);
+  @include mat-tooltip-typography($config);
+  @include mat-list-typography($config);
+  @include mat-option-typography($config);
+  @include mat-optgroup-typography($config);
+  @include mat-snack-bar-typography($config);
+}
+
+
+// Mixin that renders all of the core styles that are not theme-dependent.
+@mixin mat-core($typography-config: null) {
+  // Provides external CSS classes for each elevation value. Each CSS class is formatted as
+  // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is
+  // elevated.
+  @for $zValue from 0 through 24 {
+    .mat-elevation-z#{$zValue} {
+      @include mat-elevation($zValue);
+    }
+  }
+
+  @include angular-material-typography($typography-config);
+  @include mat-ripple();
+  @include mat-option();
+  @include mat-optgroup();
+  @include cdk-a11y();
+  @include cdk-overlay();
+}
+
+// Mixin that renders all of the core styles that depend on the theme.
+@mixin mat-core-theme($theme) {
+  @include mat-ripple-theme($theme);
+  @include mat-option-theme($theme);
+  @include mat-optgroup-theme($theme);
+  @include mat-pseudo-checkbox-theme($theme);
+
+  // Wrapper element that provides the theme background when the
+  // user's content isn't inside of a `md-sidenav-container`.
+  .mat-app-background {
+    $background: map-get($theme, background);
+    background-color: mat-color($background, background);
+  }
+
+  // Marker that is used to determine whether the user has added a theme to their page.
+  .mat-theme-loaded-marker {
+    display: none;
+  }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// Create a theme.
+@mixin angular-material-theme($theme) {
+  @include mat-core-theme($theme);
+  @include mat-autocomplete-theme($theme);
+  @include mat-button-theme($theme);
+  @include mat-button-toggle-theme($theme);
+  @include mat-card-theme($theme);
+  @include mat-checkbox-theme($theme);
+  @include mat-chips-theme($theme);
+  @include mat-table-theme($theme);
+  @include mat-datepicker-theme($theme);
+  @include mat-dialog-theme($theme);
+  @include mat-expansion-panel-theme($theme);
+  @include mat-form-field-theme($theme);
+  @include mat-grid-list-theme($theme);
+  @include mat-icon-theme($theme);
+  @include mat-input-theme($theme);
+  @include mat-list-theme($theme);
+  @include mat-menu-theme($theme);
+  @include mat-paginator-theme($theme);
+  @include mat-progress-bar-theme($theme);
+  @include mat-progress-spinner-theme($theme);
+  @include mat-radio-theme($theme);
+  @include mat-select-theme($theme);
+  @include mat-sidenav-theme($theme);
+  @include mat-slide-toggle-theme($theme);
+  @include mat-slider-theme($theme);
+  @include mat-stepper-theme($theme);
+  @include mat-tabs-theme($theme);
+  @include mat-toolbar-theme($theme);
+  @include mat-tooltip-theme($theme);
+  @include mat-snack-bar-theme($theme);
+}