@angular/material/_theming.scss

// File for which all imports are resolved and bundled. This is the entry-point for
// the `@angular/material` theming Sass bundle. See `//src/material:theming_bundle`.

// Import all the theming functionality.
// 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 !default;
$cdk-z-index-overlay: 1000 !default;
$cdk-z-index-overlay-backdrop: 1000 !default;

// Background color for all of the backdrops
$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.32) !default;

// 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;

    &:empty {
      // Hide the element when it doesn't have any child nodes. This doesn't
      // include overlays that have been detached, rather than disposed.
      display: none;
    }
  }

  // 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 {
    // Note: it's important for this one to start off `absolute`,
    // in order for us to be able to measure it correctly.
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    z-index: $cdk-z-index-overlay;

    // For connected-position overlays, we set `display: flex` in
    // order to force `max-width` and `max-height` to take effect.
    display: flex;
    max-width: 100%;
    max-height: 100%;
  }

  .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: 1;

      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because
      // this file will be copied to the top-level `cdk` package when putting together the files
      // for npm. Any relative import paths we use here will become invalid once the file is copied.
      .cdk-high-contrast-active & {
        // In high contrast mode the rgba background will become solid
        // so we need to fall back to making it opaque using `opacity`.
        opacity: 0.6;
      }
    }
  }

  .cdk-overlay-dark-backdrop {
    background: $cdk-overlay-dark-backdrop-background;
  }

  .cdk-overlay-transparent-backdrop {
    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from
    // capturing the user's mouse scroll events. Since we also can't use something like
    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at
    // all and using `opacity` to make the element transparent.
    &, &.cdk-overlay-backdrop-showing {
      opacity: 0;
    }
  }

  // Overlay parent element used with the connected position strategy. Used to constrain the
  // overlay element's size to fit within the viewport.
  .cdk-overlay-connected-position-bounding-box {
    position: absolute;
    z-index: $cdk-z-index-overlay;

    // We use `display: flex` on this element exclusively for centering connected overlays.
    // When *not* centering, a top/left/bottom/right will be set which overrides the normal
    // flex layout.
    display: flex;

    // We use the `column` direction here to avoid some flexbox issues in Edge
    // when using the "grow after open" options.
    flex-direction: column;

    // Add some dimensions so the element has an `innerText` which some people depend on in tests.
    min-width: 1px;
    min-height: 1px;
  }

  // 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;
  }
}

@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;

    // Avoid browsers rendering the focus ring in some cases.
    outline: 0;

    // Avoid some cases where the browser will still render the native controls (see #9049).
    -webkit-appearance: none;
    -moz-appearance: none;
  }
}

/// Emits the mixin's content nested under `$selector-context` if `$selector-context`
/// is non-empty.
/// @param selector-context The selector under which to nest the mixin's content.
@mixin _cdk-optionally-nest-content($selector-context) {
  @if ($selector-context == '') {
    @content;
  }
  @else {
    #{$selector-context} {
      @content;
    }
  }
}

/// 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.
///
/// @param target Which kind of high contrast setting to target. Defaults to `active`, can be
///    `white-on-black` or `black-on-white`.
/// @param encapsulation Whether to emit styles for view encapsulation. Values are:
///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`
///     * `off` - works for `None`
///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).
@mixin cdk-high-contrast($target: active, $encapsulation: 'any') {
  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {
    @error 'Unknown cdk-high-contrast value "#{$target}" provided. ' +
           'Allowed values are "active", "black-on-white", and "white-on-black"';
  }

  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {
    @error 'Unknown cdk-high-contrast encapsulation "#{$encapsulation}" provided. ' +
           'Allowed values are "on", "off", and "any"';
  }

  // If the selector context has multiple parts, such as `.section, .region`, just doing
  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the
  // context. We address this by nesting the selector context under .cdk-high-contrast.
  @at-root {
    $selector-context: #{&};

    @if ($encapsulation != 'on') {
      // Note that if this selector is updated, the same change has to be made inside
      // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.
      .cdk-high-contrast-#{$target} {
        @include _cdk-optionally-nest-content($selector-context) {
          @content;
        }
      }
    }

    @if ($encapsulation != 'off') {
      .cdk-high-contrast-#{$target} :host {
        @include _cdk-optionally-nest-content($selector-context) {
          @content;
        }
      }
    }
  }
}

// Core styles that enable monitoring autofill state of text fields.
@mixin cdk-text-field {
  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled
  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is
  // needed to prevent LibSass from stripping the keyframes out.
  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7
  @keyframes cdk-text-field-autofill-start {/*!*/}
  @keyframes cdk-text-field-autofill-end {/*!*/}

  .cdk-text-field-autofill-monitored:-webkit-autofill {
    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
    animation: cdk-text-field-autofill-start 0s 1ms;
  }

  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.
    animation: cdk-text-field-autofill-end 0s 1ms;
  }

  // Remove the resize handle on autosizing textareas, because whatever height
  // the user resized to will be overwritten once they start typing again.
  textarea.cdk-textarea-autosize {
    resize: none;
  }

  // This class is temporarily applied to the textarea when it is being measured. It is immediately
  // removed when measuring is complete. We use `!important` rules here to make sure user-specified
  // rules do not interfere with the measurement.
  textarea.cdk-textarea-autosize-measuring {
    @include _cdk-textarea-autosize-measuring-base;
    height: auto !important;
    overflow: hidden !important;
  }

  // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need
  // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's
  // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,
  // because the measurements there don't seem to be affected by the `height: 0`, whereas on other
  // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.
  // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784
  textarea.cdk-textarea-autosize-measuring-firefox {
    @include _cdk-textarea-autosize-measuring-base;
    height: 0 !important;
  }
}

@mixin _cdk-textarea-autosize-measuring-base {
  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect
  // measurement. We just have to account for it later and subtract it off the final result.
  padding: 2px 0 !important;
  box-sizing: content-box !important;
}

// Used to generate UIDs for keyframes used to change the text field autofill styles.
$cdk-text-field-autofill-color-frame-count: 0;

// Mixin used to apply custom background and foreground colors to an autofilled text field.
// Based on: https://stackoverflow.com/questions/2781549/
// removing-input-background-colour-for-chrome-autocomplete#answer-37432260
@mixin cdk-text-field-autofill-color($background, $foreground:'') {
  @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {
    to {
      background: $background;
      @if $foreground != '' { color: $foreground; }
    }
  }

  &:-webkit-autofill {
    animation: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
  }

  &.cdk-text-field-autofill-monitored:-webkit-autofill {
    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart
    // event won't fire.
    animation: cdk-text-field-autofill-start 0s 1ms,
               cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} both;
  }

  $cdk-text-field-autofill-color-frame-count:
      $cdk-text-field-autofill-color-frame-count + 1 !global;
}


// Core styles that can be used to apply material design treatments to any element.
// Media queries
// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,
$mat-xsmall: 'max-width: 599px';
$mat-small: 'max-width: 959px';

// 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://material.io/design/environment/elevation.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.

// 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.

@function _get-umbra-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.2), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 2px 1px -1px #{$shadow-color}',
    2: '0px 3px 1px -2px #{$shadow-color}',
    3: '0px 3px 3px -2px #{$shadow-color}',
    4: '0px 2px 4px -1px #{$shadow-color}',
    5: '0px 3px 5px -1px #{$shadow-color}',
    6: '0px 3px 5px -1px #{$shadow-color}',
    7: '0px 4px 5px -2px #{$shadow-color}',
    8: '0px 5px 5px -3px #{$shadow-color}',
    9: '0px 5px 6px -3px #{$shadow-color}',
    10: '0px 6px 6px -3px #{$shadow-color}',
    11: '0px 6px 7px -4px #{$shadow-color}',
    12: '0px 7px 8px -4px #{$shadow-color}',
    13: '0px 7px 8px -4px #{$shadow-color}',
    14: '0px 7px 9px -4px #{$shadow-color}',
    15: '0px 8px 9px -5px #{$shadow-color}',
    16: '0px 8px 10px -5px #{$shadow-color}',
    17: '0px 8px 11px -5px #{$shadow-color}',
    18: '0px 9px 11px -5px #{$shadow-color}',
    19: '0px 9px 12px -6px #{$shadow-color}',
    20: '0px 10px 13px -6px #{$shadow-color}',
    21: '0px 10px 13px -6px #{$shadow-color}',
    22: '0px 10px 14px -6px #{$shadow-color}',
    23: '0px 11px 14px -7px #{$shadow-color}',
    24: '0px 11px 15px -7px #{$shadow-color}'
  );
}

@function _get-penumbra-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.14), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 1px 1px 0px #{$shadow-color}',
    2: '0px 2px 2px 0px #{$shadow-color}',
    3: '0px 3px 4px 0px #{$shadow-color}',
    4: '0px 4px 5px 0px #{$shadow-color}',
    5: '0px 5px 8px 0px #{$shadow-color}',
    6: '0px 6px 10px 0px #{$shadow-color}',
    7: '0px 7px 10px 1px #{$shadow-color}',
    8: '0px 8px 10px 1px #{$shadow-color}',
    9: '0px 9px 12px 1px #{$shadow-color}',
    10: '0px 10px 14px 1px #{$shadow-color}',
    11: '0px 11px 15px 1px #{$shadow-color}',
    12: '0px 12px 17px 2px #{$shadow-color}',
    13: '0px 13px 19px 2px #{$shadow-color}',
    14: '0px 14px 21px 2px #{$shadow-color}',
    15: '0px 15px 22px 2px #{$shadow-color}',
    16: '0px 16px 24px 2px #{$shadow-color}',
    17: '0px 17px 26px 2px #{$shadow-color}',
    18: '0px 18px 28px 2px #{$shadow-color}',
    19: '0px 19px 29px 2px #{$shadow-color}',
    20: '0px 20px 31px 3px #{$shadow-color}',
    21: '0px 21px 33px 3px #{$shadow-color}',
    22: '0px 22px 35px 3px #{$shadow-color}',
    23: '0px 23px 36px 3px #{$shadow-color}',
    24: '0px 24px 38px 3px #{$shadow-color}'
  );
}

@function _get-ambient-map($color, $opacity) {
  $shadow-color: if(type-of($color) == color, rgba($color, $opacity * 0.12), $color);

  @return (
    0: '0px 0px 0px 0px #{$shadow-color}',
    1: '0px 1px 3px 0px #{$shadow-color}',
    2: '0px 1px 5px 0px #{$shadow-color}',
    3: '0px 1px 8px 0px #{$shadow-color}',
    4: '0px 1px 10px 0px #{$shadow-color}',
    5: '0px 1px 14px 0px #{$shadow-color}',
    6: '0px 1px 18px 0px #{$shadow-color}',
    7: '0px 2px 16px 1px #{$shadow-color}',
    8: '0px 3px 14px 2px #{$shadow-color}',
    9: '0px 3px 16px 2px #{$shadow-color}',
    10: '0px 4px 18px 3px #{$shadow-color}',
    11: '0px 4px 20px 3px #{$shadow-color}',
    12: '0px 5px 22px 4px #{$shadow-color}',
    13: '0px 5px 24px 4px #{$shadow-color}',
    14: '0px 5px 26px 4px #{$shadow-color}',
    15: '0px 6px 28px 5px #{$shadow-color}',
    16: '0px 6px 30px 5px #{$shadow-color}',
    17: '0px 6px 32px 5px #{$shadow-color}',
    18: '0px 7px 34px 6px #{$shadow-color}',
    19: '0px 7px 36px 6px #{$shadow-color}',
    20: '0px 8px 38px 7px #{$shadow-color}',
    21: '0px 8px 40px 7px #{$shadow-color}',
    22: '0px 8px 42px 7px #{$shadow-color}',
    23: '0px 9px 44px 8px #{$shadow-color}',
    24: '0px 9px 46px 8px #{$shadow-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;

// The default color for elevation shadows.
$mat-elevation-color: black !default;

// The default opacity scaling value for elevation shadows.
$mat-elevation-opacity: 1 !default;

// Prefix for elevation-related selectors.
$mat-elevation-prefix: 'mat-elevation-z';

// 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, $color: $mat-elevation-color, $opacity: $mat-elevation-opacity) {
  @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(_get-umbra-map($color, $opacity), $zValue)},
              #{map-get(_get-penumbra-map($color, $opacity), $zValue)},
              #{map-get(_get-ambient-map($color, $opacity), $zValue)};
}

// Applies the elevation to an element in a manner that allows
// consumers to override it via the Material elevation classes.
@mixin mat-overridable-elevation(
    $zValue,
    $color: $mat-elevation-color,
    $opacity: $mat-elevation-opacity) {
  &:not([class*='#{$mat-elevation-prefix}']) {
    @include mat-elevation($zValue, $color, $opacity);
  }
}

// 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);
}


@mixin mat-private-theme-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($config, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-elevation($zValue, $elevation-color-or-default, $opacity);
}

@mixin mat-private-theme-overridable-elevation($zValue, $config, $opacity: $mat-elevation-opacity) {
  $foreground: map-get($config, foreground);
  $elevation-color: map-get($foreground, elevation);
  $elevation-color-or-default: if($elevation-color == null, $mat-elevation-color, $elevation-color);

  @include mat-overridable-elevation($zValue, $elevation-color-or-default, $opacity);
}

// If the mat-animation-noop class is present on the components root element,
// prevent non css animations from running.
// NOTE: Currently this mixin should only be used with components that do not
// have any projected content.
@mixin mat-private-animation-noop() {
  // @at-root is used to steps outside of the hierarchy of the scss rules. This is
  // done to allow a class to be added to be added to base of the scss nesting
  // context.
  // For example:
  // .my-root {
  //   .my-subclass {
  //      @include mat-private-animation-noop();
  //    }
  // }
  // results in:
  // ._mat-animation-noopable.my-root .my-subclass { ... }
  @at-root ._mat-animation-noopable#{&} {
    transition: none;
    animation: none;
    @content;
  }
}

// Color palettes from the Material Design spec.
// See https://material.io/design/color/
//
// 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.


// @deprecated renamed to $dark-primary-text.
// @breaking-change 8.0.0
$black-87-opacity: rgba(black, 0.87);
// @deprecated renamed to $light-primary-text.
// @breaking-change 8.0.0
$white-87-opacity: rgba(white, 0.87);
// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$black-12-opacity: rgba(black, 0.12);
// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$white-12-opacity: rgba(white, 0.12);
// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$black-6-opacity: rgba(black, 0.06);
// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.
// @breaking-change 8.0.0
$white-6-opacity: rgba(white, 0.06);

$dark-primary-text: rgba(black, 0.87);
$dark-secondary-text: rgba(black, 0.54);
$dark-disabled-text: rgba(black, 0.38);
$dark-dividers: rgba(black, 0.12);
$dark-focused: rgba(black, 0.12);
$light-primary-text: white;
$light-secondary-text: rgba(white, 0.7);
$light-disabled-text: rgba(white, 0.5);
$light-dividers: rgba(white, 0.12);
$light-focused: rgba(white, 0.12);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $light-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $dark-primary-text,
    900: $dark-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $dark-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $dark-primary-text,
    700: $dark-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $light-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $dark-primary-text,
    500: $dark-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $dark-primary-text,
    A700: $light-primary-text,
  )
);

// Alias for alternate spelling.
$mat-gray: $mat-grey;

$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: $dark-primary-text,
    100: $dark-primary-text,
    200: $dark-primary-text,
    300: $dark-primary-text,
    400: $light-primary-text,
    500: $light-primary-text,
    600: $light-primary-text,
    700: $light-primary-text,
    800: $light-primary-text,
    900: $light-primary-text,
    A100: $dark-primary-text,
    A200: $dark-primary-text,
    A400: $light-primary-text,
    A700: $light-primary-text,
  )
);

// Alias for alternate spelling.
$mat-blue-gray: $mat-blue-grey;


// 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: rgba(black, 0.12),
  raised-button: white,
  focused-button: $dark-focused,
  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),
  tooltip: map-get($mat-grey, 700),
);

// 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: rgba(white, 0.12),
  raised-button: map-get($mat-grey, 800),
  focused-button: $light-focused,
  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,
  tooltip: map-get($mat-grey, 700),
);

// Foreground palette for light themes.
$mat-light-theme-foreground: (
  base:              black,
  divider:           $dark-dividers,
  dividers:          $dark-dividers,
  disabled:          $dark-disabled-text,
  disabled-button:   rgba(black, 0.26),
  disabled-text:     $dark-disabled-text,
  elevation:         black,
  hint-text:         $dark-disabled-text,
  secondary-text:    $dark-secondary-text,
  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:           $light-dividers,
  dividers:          $light-dividers,
  disabled:          $light-disabled-text,
  disabled-button:   rgba(white, 0.3),
  disabled-text:     $light-disabled-text,
  elevation:         black,
  hint-text:         $light-disabled-text,
  secondary-text:    $light-secondary-text,
  icon:              white,
  icons:             white,
  text:              white,
  slider-min:        white,
  slider-off:        rgba(white, 0.3),
  slider-off-active: rgba(white, 0.3),
);

// Note that this file is called `private`, because the APIs in it aren't public yet.
// Once they're made available, the code should be moved out into an `index.scss`.

// Taken from mat-density with small modifications to not rely on the new Sass module
// system, and to support arbitrary properties in a density configuration.
// https://github.com/material-components/material-components-web/blob/master/packages/mdc-density

$_mat-density-interval: 4px !default;
$_mat-density-minimum-scale: minimum !default;
$_mat-density-maximum-scale: maximum !default;
$_mat-density-supported-scales: (default, minimum, maximum) !default;
$_mat-density-default-scale: 0 !default;

// Whether density should be generated at root. This will be temporarily set to `true`
// whenever density styles for legacy themes are generated.
$mat-private-density-generate-at-root: false;
// Whether density styles should be generated. This will be temporarily set to `false` if
// duplicate density styles for a legacy theme would be generated. For legacy themes,
// we always generate the default density **only once** at root.
$mat-private-density-generate-styles: true;

// Mixin that can be used to wrap density styles of given components. The mixin will
// move the density styles to root if the `$mat-private-density-generate-at-root` global variable
// is set. If `$mat-private-density-generate-styles` is set to `false`, generation of density
// styles wrapped in this mixin is skipped. This mixin exists to improve backwards compatibility
// of the new theming API where density styles are included as part of themes. Previously,
// density styles of components were part of their base styles. With the new API, they are
// part of the theming system. The `<..>-theme` mixins generate density by default unless
// the density configuration is explicitly specified as per new API. This means, that projects
// using `<..>-theme` mixins for separate themes (like `.dark-theme`) will cause duplicate
// density styles. This is breaking as it increases specificity of density styles. This mixin
// provides an API to control generation of density styles so that we can ensure they are only
// created *once* and at root.
@mixin mat-private-density-legacy-compatibility() {
  @if $mat-private-density-generate-styles and $mat-private-density-generate-at-root {
    @at-root {
      @content;
    }
  }
  @else if $mat-private-density-generate-styles {
    @content;
  }
}

@function mat-private-density-prop-value($density-config, $density-scale, $property-name) {
  @if (type-of($density-scale) == 'string' and
      index($list: $_mat-density-supported-scales, $value: $density-scale) == null) {
    @error 'mat-density: Supported density scales #{$_mat-density-supported-scales}, '  +
      'but received #{$density-scale}.';
  }

  $value: null;
  $property-scale-map: map-get($density-config, $property-name);

  @if map-has-key($property-scale-map, $density-scale) {
    $value: map-get($property-scale-map, $density-scale);
  }
  @else {
    $value: map-get($property-scale-map, default) + $density-scale * $_mat-density-interval;
  }

  $min-value: map-get($property-scale-map, $_mat-density-minimum-scale);
  $max-value: map-get($property-scale-map, $_mat-density-maximum-scale);

  @if ($value < $min-value or $value > $max-value) {
    @error 'mat-density: #{$property-name} must be between #{$min-value} and ' +
      '#{$max-value} (inclusive), but received #{$value}.';
  }

  @return $value;
}


// Whether duplication warnings should be disabled. Warnings enabled by default.
$mat-theme-ignore-duplication-warnings: false !default;

// Whether density should be generated by default.
$_mat-theme-generate-default-density: true !default;

// Warning that will be printed if duplicated styles are generated by a theme.
$_mat-theme-duplicate-warning: 'Read more about how style duplication can be avoided in a ' +
  'dedicated guide. https://github.com/angular/components/blob/master/guides/duplicate-theming-styles.md';

// These variable are not intended to be overridden externally. They use `!default` to
// avoid being reset every time this file is imported.
$_mat-theme-emitted-color: () !default;
$_mat-theme-emitted-typography: () !default;
$_mat-theme-emitted-density: () !default;

// For a given hue in a palette, return the contrast color from the map of contrast palettes.
// @param $palette
// @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 $base-palette
// @param $default
// @param $lighter
// @param $darker
// @param $text
@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700, $text: $default) {
  $result: map-merge($base-palette, (
    default: map-get($base-palette, $default),
    lighter: map-get($base-palette, $lighter),
    darker: map-get($base-palette, $darker),
    text: map-get($base-palette, $text),

    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 $palette 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);

  @if (type-of($color) != color) {
    // If the $color resolved to something different from a color (e.g. a CSS variable),
    // we can't apply the opacity anyway so we return the value as is, otherwise Sass can
    // throw an error or output something invalid.
    @return $color;
  }

  @return rgba($color, if($opacity == null, opacity($color), $opacity));
}

// Validates the specified theme by ensuring that the optional color config defines
// a primary, accent and warn palette. Returns the theme if no failures were found.
@function _mat-validate-theme($theme) {
  @if map-get($theme, color) {
    $color: map-get($theme, color);
    @if not map-get($color, primary) {
      @error 'Theme does not define a valid "primary" palette.';
    }
    @else if not map-get($color, accent) {
      @error 'Theme does not define a valid "accent" palette.';
    }
    @else if not map-get($color, warn) {
      @error 'Theme does not define a valid "warn" palette.';
    }
  }
  @return $theme;
}

// Creates a light-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-light-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: false,
    foreground: $mat-light-theme-foreground,
    background: $mat-light-theme-background,
  );
}

// Creates a dark-themed color configuration from the specified
// primary, accent and warn palettes.
@function _mat-create-dark-color-config($primary, $accent, $warn: null) {
  @return (
    primary: $primary,
    accent: $accent,
    warn: if($warn != null, $warn, mat-palette($mat-red)),
    is-dark: true,
    foreground: $mat-dark-theme-foreground,
    background: $mat-dark-theme-background,
  );
}

// Creates a container object for a light theme to be given to individual component theme mixins.
// TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
// as it would break existing apps that set the parameter by name.
@function mat-light-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
  // This function creates a container object for the individual component theme mixins. Consumers
  // can construct such an object by calling this function, or by building the object manually.
  // There are two possible ways to invoke this function in order to create such an object:
  //
  //    (1) Passing in a map that holds optional configurations for individual parts of the
  //        theming system. For `color` configurations, the function only expects the palettes
  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
  //        as passing in a configuration map because only the `color` system can be configured.
  //
  // If the legacy pattern is used, we generate a container object only with a light-themed
  // configuration for the `color` theming part.
  @if $accent != null {
    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-light-color-config($primary, $accent, $warn),
    )));
  }
  // If the map pattern is used (1), we just pass-through the configurations for individual
  // parts of the theming system, but update the `color` configuration if set. As explained
  // above, the color shorthand will be expanded to an actual light-themed color configuration.
  $result: $primary;
  @if map-get($primary, color) {
    $color-settings: map-get($primary, color);
    $primary: map-get($color-settings, primary);
    $accent: map-get($color-settings, accent);
    $warn: map-get($color-settings, warn);
    $result: map-merge($result, (color: _mat-create-light-color-config($primary, $accent, $warn)));
  }
  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
}

// Creates a container object for a dark theme to be given to individual component theme mixins.
// TODO: Remove legacy API and rename `$primary` to `$config`. Currently it cannot be renamed
// as it would break existing apps that set the parameter by name.
@function mat-dark-theme($primary, $accent: null, $warn: mat-palette($mat-red)) {
  // This function creates a container object for the individual component theme mixins. Consumers
  // can construct such an object by calling this function, or by building the object manually.
  // There are two possible ways to invoke this function in order to create such an object:
  //
  //    (1) Passing in a map that holds optional configurations for individual parts of the
  //        theming system. For `color` configurations, the function only expects the palettes
  //        for `primary` and `accent` (and optionally `warn`). The function will expand the
  //        shorthand into an actual configuration that can be consumed in `-color` mixins.
  //    (2) Legacy pattern: Passing in the palettes as parameters. This is not as flexible
  //        as passing in a configuration map because only the `color` system can be configured.
  //
  // If the legacy pattern is used, we generate a container object only with a dark-themed
  // configuration for the `color` theming part.
  @if $accent != null {
    @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme((
      _is-legacy-theme: true,
      color: _mat-create-dark-color-config($primary, $accent, $warn),
    )));
  }
  // If the map pattern is used (1), we just pass-through the configurations for individual
  // parts of the theming system, but update the `color` configuration if set. As explained
  // above, the color shorthand will be expanded to an actual dark-themed color configuration.
  $result: $primary;
  @if map-get($primary, color) {
    $color-settings: map-get($primary, color);
    $primary: map-get($color-settings, primary);
    $accent: map-get($color-settings, accent);
    $warn: map-get($color-settings, warn);
    $result: map-merge($result, (color: _mat-create-dark-color-config($primary, $accent, $warn)));
  }
  @return mat-private-create-backwards-compatibility-theme(_mat-validate-theme($result));
}

/// Gets the color configuration from the given theme or configuration.
@function mat-get-color-config($theme, $default: null) {
  // If a configuration has been passed, return the config directly.
  @if not mat-private-is-theme-object($theme) {
    @return $theme;
  }
  // If the theme has been constructed through the legacy theming API, we use the theme object
  // as color configuration instead of the dedicated `color` property. We do this because for
  // backwards compatibility, we copied the color configuration from `$theme.color` to `$theme`.
  // Hence developers could customize the colors at top-level and want to respect these changes
  // TODO: Remove when legacy theming API is removed.
  @if mat-private-is-legacy-constructed-theme($theme) {
    @return $theme;
  }
  @if map-has-key($theme, color) {
    @return map-get($theme, color);
  }
  @return $default;
}

/// Gets the density configuration from the given theme or configuration.
@function mat-get-density-config($theme-or-config, $default: 0) {
  // If a configuration has been passed, return the config directly.
  @if not mat-private-is-theme-object($theme-or-config) {
    @return $theme-or-config;
  }
  // In case a theme has been passed, extract the configuration if present,
  // or fall back to the default density config.
  @if map-has-key($theme-or-config, density) {
    @return map-get($theme-or-config, density);
  }
  @return $default;
}

/// Gets the typography configuration from the given theme or configuration.
/// For backwards compatibility, typography is not included by default.
@function mat-get-typography-config($theme-or-config, $default: null) {
  // If a configuration has been passed, return the config directly.
  @if not mat-private-is-theme-object($theme-or-config) {
    @return $theme-or-config;
  }
  // In case a theme has been passed, extract the configuration if present,
  // or fall back to the default typography config.
  @if (map-has-key($theme-or-config, typography)) {
    @return map-get($theme-or-config, typography);
  }
  @return $default;
}


//
// Private APIs
//

// Checks if configurations that have been declared in the given theme have been generated
// before. If so, warnings will be reported. This should notify developers in case duplicate
// styles are accidentally generated due to wrong usage of the all-theme mixins.
//
// Additionally, this mixin controls the default value for the density configuration. By
// default, density styles are generated at scale zero. If the same density styles would be
// generated a second time though, the default value will change to avoid duplicate styles.
//
// The mixin keeps track of all configurations in a list that is scoped to the specified
// id. This is necessary because a given theme can be passed to multiple disjoint theme mixins
// (e.g. `angular-material-theme` and `angular-material-mdc-theme`) without causing any
// style duplication.
@mixin mat-private-check-duplicate-theme-styles($theme-or-color-config, $id) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  $color-config: mat-get-color-config($theme);
  $density-config: mat-get-density-config($theme);
  $typography-config: mat-get-typography-config($theme);
  // Lists of previous `color`, `density` and `typography` configurations.
  $previous-color: map-get($_mat-theme-emitted-color, $id) or ();
  $previous-typography: map-get($_mat-theme-emitted-typography, $id) or ();
  $previous-density: map-get($_mat-theme-emitted-density, $id) or ();
  // Whether duplicate legacy density styles would be generated.
  $duplicate-legacy-density: false;

  // Check if the color configuration has been generated before.
  @if $color-config != null {
    @if index($previous-color, $color-config) != null and
        not $mat-theme-ignore-duplication-warnings {
      @warn 'The same color styles are generated multiple times. ' +
          $_mat-theme-duplicate-warning;
    }
    $previous-color: append($previous-color, $color-config);
  }

  // Check if the typography configuration has been generated before.
  @if $typography-config != null {
    @if index($previous-typography, $typography-config) != null and
        not $mat-theme-ignore-duplication-warnings {
      @warn 'The same typography styles are generated multiple times. ' +
          $_mat-theme-duplicate-warning;
    }
    $previous-typography: append($previous-typography, $typography-config);
  }

  // Check if the density configuration has been generated before.
  @if $density-config != null {
    @if index($previous-density, $density-config) != null {
      // Only report a warning if density styles would be duplicated for non-legacy theme
      // definitions. For legacy themes, we have compatibility logic that avoids duplication
      // of default density styles. We don't want to report a warning in those cases.
      @if mat-private-is-legacy-constructed-theme($theme) {
        $duplicate-legacy-density: true;
      }
      @else if not $mat-theme-ignore-duplication-warnings {
        @warn 'The same density styles are generated multiple times. ' +
           $_mat-theme-duplicate-warning;
      }
    }
    $previous-density: append($previous-density, $density-config);
  }

  $_mat-theme-emitted-color: map-merge(
      $_mat-theme-emitted-color, ($id: $previous-color)) !global;
  $_mat-theme-emitted-density: map-merge(
      $_mat-theme-emitted-density, ($id: $previous-density)) !global;
  $_mat-theme-emitted-typography: map-merge(
      $_mat-theme-emitted-typography, ($id: $previous-typography)) !global;

  // Optionally, consumers of this mixin can wrap contents inside so that nested
  // duplicate style checks do not report another warning. e.g. if developers include
  // the `angular-material-theme` mixin twice, only the top-level duplicate styles check
  // should report a warning. Not all individual components should report a warning too.
  $orig-mat-theme-ignore-duplication-warnings: $mat-theme-ignore-duplication-warnings;
  $mat-theme-ignore-duplication-warnings: true !global;

  // If duplicate default density styles would be generated for a legacy constructed theme,
  // we adjust the density generation so that no density styles are generated by default.
  // If no default density styles have been generated yet, we ensure that the styles
  // are generated at root. For legacy themes our goal is to generate default density
  // styles **once** and at root. This matches the old behavior where density styles were
  // part of the base component styles (that did not use view encapsulation).
  // TODO: Remove this compatibility logic when the legacy theming API is removed.
  $mat-private-density-generate-at-root: mat-private-is-legacy-constructed-theme($theme) !global;
  $mat-private-density-generate-styles: not $duplicate-legacy-density !global;

  @content;
  $mat-theme-ignore-duplication-warnings: $orig-mat-theme-ignore-duplication-warnings !global;

  $mat-private-density-generate-at-root: false !global;
  $mat-private-density-generate-styles: true !global;
}

// Checks whether the given value resolves to a theme object. Theme objects are always
// of type `map` and can optionally only specify `color`, `density` or `typography`.
@function mat-private-is-theme-object($value) {
  @return type-of($value) == 'map' and (
    map-has-key($value, color) or
    map-has-key($value, density) or
    map-has-key($value, typography) or
    length($value) == 0
  );
}

// Checks whether a given value corresponds to a legacy constructed theme.
@function mat-private-is-legacy-constructed-theme($value) {
  @return type-of($value) == 'map' and map-get($value, '_is-legacy-theme');
}

// Creates a backwards compatible theme. Previously in Angular Material, theme objects
// contained the color configuration directly. With the recent refactoring of the theming
// system to allow for density and typography configurations, this is no longer the case.
// To ensure that constructed themes which will be passed to custom theme mixins do not break,
// we copy the color configuration and put its properties at the top-level of the theme object.
// Here is an example of a pattern that should still work until it's officially marked as a
// breaking change:
//
//    @mixin my-custom-component-theme($theme) {
//      .my-comp {
//        background-color: mat-color(map-get($theme, primary));
//      }
//    }
//
// Note that the `$theme.primary` key does usually not exist since the color configuration
// is stored in `$theme.color` which contains a property for `primary`. This method copies
// the map from `$theme.color` to `$theme` for backwards compatibility.
@function mat-private-create-backwards-compatibility-theme($theme) {
  @if not map-get($theme, color) {
    @return $theme;
  }
  $color: map-get($theme, color);
  @return map-merge($theme, $color);
}

// Gets the theme from the given value that is either already a theme, or a color configuration.
// This handles the legacy case where developers pass a color configuration directly to the
// theme mixin. Before we introduced the new pattern for constructing a theme, developers passed
// the color configuration directly to the theme mixins. This can be still the case if developers
// construct a theme manually and pass it to a theme. We support this for backwards compatibility.
// TODO(devversion): remove this in the future. Constructing themes manually is rare,
// and the code can be easily updated to the new API.
@function mat-private-legacy-get-theme($theme-or-color-config) {
  @if mat-private-is-theme-object($theme-or-color-config) {
    @return $theme-or-color-config;
  }
  @return mat-private-create-backwards-compatibility-theme((
    _is-legacy-theme: true,
    color: $theme-or-color-config
  ));
}



$mat-ripple-color-opacity: 0.1;

@mixin mat-ripple() {

  // The host element of an mat-ripple directive should always have a position of "absolute" or
  // "relative" so that the ripples inside are correctly positioned relatively to the container.
  .mat-ripple {
    overflow: hidden;

    // By default, every ripple container should have position: relative in favor of creating an
    // easy API for developers using the MatRipple directive.
    position: relative;

    // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,
    // because we don't want all ripple containers to have their own layer since they're used in a
    // lot of places and the layer is only relevant while animating. Note that ideally we'd use
    // the `contain` property here (see #13175), because `:empty` can be broken by having extra
    // text inside the element, but it isn't very well supported yet.
    &:not(:empty) {
      transform: translateZ(0);
    }
  }

  .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);

    // In high contrast mode the ripple is opaque, causing it to obstruct the content.
    @include cdk-high-contrast(active, off) {
      display: none;
    }
  }
}

/* Colors for the ripple elements.*/
@mixin mat-ripple-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $foreground-base: map-get($foreground, base);

  .mat-ripple-element {
    // If the ripple color is resolves to a color *type*, we can use it directly, otherwise
    // (e.g. it resolves to a CSS variable) we fall back to using the color and setting an opacity.
    @if (type-of($foreground-base) == color) {
      background-color: rgba($foreground-base, $mat-ripple-color-opacity);
    }
    @else {
      background-color: $foreground-base;
      opacity: $mat-ripple-color-opacity;
    }
  }
}

@mixin mat-ripple-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-ripple') {
    $color: mat-get-color-config($theme);
    @if $color != null {
      @include mat-ripple-color($color);
    }
  }
}


// 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;
}


/// Mixin that turns on strong focus indicators.
///
/// @example
///   .my-app {
///     @include mat-strong-focus-indicators($config);
///   }
@mixin mat-strong-focus-indicators($config: ()) {
  // Default focus indicator config.
  $default-config: (
    border-style: solid,
    border-width: 3px,
    border-radius: 4px,
  );

  // Merge default config with user config.
  $config: map-merge($default-config, $config);
  $border-style: map-get($config, border-style);
  $border-width: map-get($config, border-width);
  $border-radius: map-get($config, border-radius);

  // Base styles for focus indicators.
  .mat-focus-indicator::before {
    @include mat-fill();
    box-sizing: border-box;
    pointer-events: none;
    border: $border-width $border-style transparent;
    border-radius: $border-radius;
  }

  // By default, all focus indicators are flush with the bounding box of their
  // host element. For particular elements (listed below), default inset/offset
  // values are necessary to ensure that the focus indicator is sufficiently
  // contrastive and renders appropriately.

  .mat-focus-indicator.mat-flat-button::before,
  .mat-focus-indicator.mat-raised-button::before,
  .mat-focus-indicator.mat-fab::before,
  .mat-focus-indicator.mat-mini-fab::before,
  .mat-focus-indicator.mat-chip::before,
  .mat-focus-indicator.mat-sort-header-container::before {
    margin: -($border-width + 2px);
  }

  .mat-focus-indicator.mat-stroked-button::before,
  .mat-focus-indicator.mat-calendar-body-cell-content::before {
    margin: -($border-width + 3px);
  }

  .mat-focus-indicator.mat-tab-link::before,
  .mat-focus-indicator.mat-tab-label::before {
    margin: 5px;
  }

  // Render the focus indicator on focus. Defining a pseudo element's
  // content will cause it to render.

  // Checkboxes, radios, and slide toggles render focus indicators when the
  // associated visually-hidden input is focused.
  .mat-checkbox-input:focus ~ .mat-focus-indicator::before,
  .mat-radio-input:focus ~ .mat-focus-indicator::before,
  .mat-slide-toggle-input:focus ~ .mat-slide-toggle-thumb-container .mat-focus-indicator::before,

  // For options, render the focus indicator when the class .mat-active
  // is present.
  .mat-focus-indicator.mat-option.mat-active::before,

  // For calendar cells, render the focus indicator when the parent cell is
  // focused.
  .mat-calendar-body-cell:focus .mat-focus-indicator::before,

  // For all other components, render the focus indicator on focus.
  .mat-focus-indicator:focus::before {
    content: '';
  }
}

// Mixin that applies the border color for the focus indicators.
@mixin _mat-strong-focus-indicators-border-color($color) {
  .mat-focus-indicator::before {
    border-color: $color;
  }
}

@mixin mat-strong-focus-indicators-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  @include _mat-strong-focus-indicators-border-color(mat-color(map-get($config, primary)));
}

/// Mixin that sets the color of the focus indicators.
///
/// @param {color|map} $theme-or-color
///   If theme, focus indicators are set to the primary color of the theme. If
///   color, focus indicators are set to that color.
///
/// @example
///   .demo-dark-theme {
///     @include mat-strong-focus-indicators-theme($dark-theme-map);
///   }
///
/// @example
///   .demo-red-theme {
///     @include mat-strong-focus-indicators-theme(#f00);
///   }
/* stylelint-disable-next-line material/theme-mixin-api */
@mixin mat-strong-focus-indicators-theme($theme-or-color) {
  @if type-of($theme-or-color) != 'map' {
    @include _mat-strong-focus-indicators-border-color($theme-or-color);
  }
  @else {
    $theme: mat-private-legacy-get-theme($theme-or-color);
    @include mat-private-check-duplicate-theme-styles($theme, 'mat-strong-focus-indicators') {
      $color: mat-get-color-config($theme);
      @if $color != null {
        @include mat-strong-focus-indicators-color($color);
      }
    }
  }
}

// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
// pseudo element within is positioned relative to the host. Private mixin included within
// `mat-core`.
@mixin mat-private-strong-focus-indicators-positioning() {
  .mat-focus-indicator {
    position: relative;
  }
}



// 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 letter spacing for a level inside a typography config.
@function mat-letter-spacing($config, $level) {
  @return _mat-get-type-value($config, $level, letter-spacing);
}

// 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);
  }

  // Guard against unquoting non-string values, because it's deprecated.
  @return if(type-of($font-family) == string, unquote($font-family), $font-family);
}

// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to
// the individual properties if a value that isn't allowed in the shorthand is passed in.
@mixin mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family) {
  // If any of the values are set to `inherit`, we can't use the shorthand
  // so we fall back to passing in the individual properties.
  @if ($font-size == inherit or
       $font-weight == inherit or
       $line-height == inherit or
       $font-family == inherit or
       $font-size == null or
       $font-weight == null or
       $line-height == null or
       $font-family == null) {

    font-size: $font-size;
    font-weight: $font-weight;
    line-height: $line-height;
    font-family: $font-family;
  }
  @else {
    // Otherwise use the shorthand `font`, because it's the least amount of bytes. Note
    // 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;
  }
}

// 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);

  @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);
  letter-spacing: mat-letter-spacing($config, $level);
}


@mixin mat-option-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-option {
    color: mat-color($foreground, text);

    &:hover:not(.mat-option-disabled),
    &:focus:not(.mat-option-disabled) {
      background: mat-color($background, hover);
    }

    // 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);
    }
  }

  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($primary, text);
  }

  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($accent, text);
  }

  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
    color: mat-color($warn, text);
  }
}

@mixin mat-option-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-option {
    font: {
      family: mat-font-family($config);
      size: mat-font-size($config, subheading-2);
    }
  }
}

@mixin _mat-option-density($config-or-theme) {}

@mixin mat-option-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-option') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-option-color($color);
    }
    @if $density != null {
      @include _mat-option-density($density);
    }
    @if $typography != null {
      @include mat-option-typography($typography);
    }
  }
}





@mixin mat-optgroup-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, 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-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-optgroup-label {
    @include mat-typography-level-to-styles($config, body-2);
  }
}

@mixin _mat-optgroup-density($config-or-theme) {}

@mixin mat-optgroup-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-optgroup') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-optgroup-color($color);
    }
    @if $density != null {
      @include _mat-optgroup-density($density);
    }
    @if $typography != null {
      @include mat-optgroup-typography($typography);
    }
  }
}



@mixin mat-pseudo-checkbox-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, 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($config, foreground), secondary-text);

    &::after {
      color: mat-color($background, background);
    }
  }

  .mat-pseudo-checkbox-disabled {
    color: $disabled-color;
  }

  .mat-primary .mat-pseudo-checkbox-checked,
  .mat-primary .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, primary));
  }

  // 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. Also note that this needs to be below `.mat-primary`
  // in order to allow for the color to be overwritten if the checkbox is inside a parent that
  // has `mat-accent` and is placed inside another parent that has `mat-primary`.
  .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($config, accent));
  }

  .mat-warn .mat-pseudo-checkbox-checked,
  .mat-warn .mat-pseudo-checkbox-indeterminate {
    background: mat-color(map-get($config, warn));
  }

  .mat-pseudo-checkbox-checked,
  .mat-pseudo-checkbox-indeterminate {
    &.mat-pseudo-checkbox-disabled {
      background: $disabled-color;
    }
  }
}

@mixin mat-pseudo-checkbox-typography($config-or-theme) {}

@mixin _mat-pseudo-checkbox-density($config-or-theme) {}

@mixin mat-pseudo-checkbox-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-pseudo-checkbox') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-pseudo-checkbox-color($color);
    }
    @if $density != null {
      @include _mat-pseudo-checkbox-density($density);
    }
    @if $typography != null {
      @include mat-pseudo-checkbox-typography($typography);
    }
  }
}



// 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,
  $letter-spacing: normal) {

  @return (
    font-size: $font-size,
    line-height: $line-height,
    font-weight: $font-weight,
    font-family: $font-family,
    letter-spacing: $letter-spacing
  );
}

// Represents a collection of typography levels.
// Defaults come from https://material.io/guidelines/style/typography.html
// Note: The spec doesn't mention letter spacing. The values here come from
// eyeballing it until it looked exactly like the spec examples.
@function mat-typography-config(
  $font-family:   'Roboto, "Helvetica Neue", sans-serif',
  $display-4:     mat-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $display-3:     mat-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $display-2:     mat-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $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(inherit, 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));
}

// Whether a config is for the Material Design 2018 typography system.
@function mat-private-typography-is-2018-config($config) {
  @return map-get($config, headline-1) != null;
}

// Whether a config is for the Material Design 2014 typography system.
@function mat-private-typography-is-2014-config($config) {
  @return map-get($config, headline) != null;
}

// Given a config for either the 2014 or 2018 Material Design typography system,
// produces a normalized typography config for the 2014 Material Design typography system.
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
@function mat-private-typography-to-2014-config($config) {
  @if mat-private-typography-is-2018-config($config) {
    @return mat-typography-config(
        $display-4: map-get($config, headline-1),
        $display-3: map-get($config, headline-2),
        $display-2: map-get($config, headline-3),
        $display-1: map-get($config, headline-4),
        $headline: map-get($config, headline-5),
        $title: map-get($config, headline-6),
        $subheading-2: map-get($config, subtitle-1),
        $subheading-1: map-get($config, subtitle-2),
        $body-2: map-get($config, body-1),
        $body-1: map-get($config, body-2),
        $button: map-get($config, button),
        $caption: map-get($config, caption),
    );
  }
  @return $config;
}

// Given a config for either the 2014 or 2018 Material Design typography system,
// produces a normalized typography config for the 2018 Material Design typography system.
// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles
// 2018 - https://material.io/design/typography/the-type-system.html#type-scale
@function mat-private-typography-to-2018-config($config) {
  @if mat-private-typography-is-2014-config($config) {
    @return (
        headline-1: map-get($config, display-4),
        headline-2: map-get($config, display-3),
        headline-3: map-get($config, display-2),
        headline-4: map-get($config, display-1),
        headline-5: map-get($config, headline),
        headline-6: map-get($config, title),
        subtitle-1: map-get($config, subheading-2),
        subtitle-2: map-get($config, subheading-1),
        body-1: map-get($config, body-2),
        body-2: map-get($config, body-1),
        button: map-get($config, button),
        caption: map-get($config, caption),
    );
  }
  @return $config;
}

// Adds the base typography styles, based on a config.
/* stylelint-disable-next-line material/theme-mixin-api */
@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 {
    @include mat-typography-font-shorthand(
       // calc is used here to support css variables
      calc(#{mat-font-size($config, body-1)} * 0.83),
      mat-font-weight($config, body-1),
      mat-line-height($config, body-1),
      mat-font-family($config, body-1)
    );

    margin: 0 0 12px;
  }

  .mat-h6, #{$selector} h6 {
    @include mat-typography-font-shorthand(
       // calc is used here to support css variables
      calc(#{mat-font-size($config, body-1)} * 0.67),
      mat-font-weight($config, body-1),
      mat-line-height($config, body-1),
      mat-font-family($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);
  }

  .mat-display-4, #{$selector} .mat-display-4 {
    @include mat-typography-level-to-styles($config, display-4);
    margin: 0 0 56px;
  }

  .mat-display-3, #{$selector} .mat-display-3 {
    @include mat-typography-level-to-styles($config, display-3);
    margin: 0 0 64px;
  }

  .mat-display-2, #{$selector} .mat-display-2 {
    @include mat-typography-level-to-styles($config, display-2);
    margin: 0 0 64px;
  }

  .mat-display-1, #{$selector} .mat-display-1 {
    @include mat-typography-level-to-styles($config, display-1);
    margin: 0 0 64px;
  }
}




@mixin mat-autocomplete-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);

  .mat-autocomplete-panel {
    @include mat-private-theme-overridable-elevation(4, $config);
    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-or-theme) {}

@mixin _mat-autocomplete-density($config-or-theme) {}

@mixin mat-autocomplete-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-autocomplete') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-autocomplete-color($color);
    }
    @if $density != null {
      @include _mat-autocomplete-density($density);
    }
    @if $typography != null {
      @include mat-autocomplete-typography($typography);
    }
  }
}

// This contains all of the styles for the badge
// rather than just the color/theme because of
// no style sheet support for directives.





$mat-badge-font-size: 12px;
$mat-badge-font-weight: 600;
$mat-badge-default-size: 22px !default;
$mat-badge-small-size: $mat-badge-default-size - 6;
$mat-badge-large-size: $mat-badge-default-size + 6;

// Mixin for building offset given different sizes
@mixin _mat-badge-size($size) {
  .mat-badge-content {
    width: $size;
    height: $size;
    line-height: $size;
  }

  &.mat-badge-above {
    .mat-badge-content {
      top: -$size / 2;
    }
  }

  &.mat-badge-below {
    .mat-badge-content {
      bottom: -$size / 2;
    }
  }

  &.mat-badge-before {
    .mat-badge-content {
      left: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-before {
    .mat-badge-content {
      left: auto;
      right: -$size;
    }
  }

  &.mat-badge-after {
    .mat-badge-content {
      right: -$size;
    }
  }

  [dir='rtl'] &.mat-badge-after {
    .mat-badge-content {
      right: auto;
      left: -$size;
    }
  }

  &.mat-badge-overlap {
    &.mat-badge-before {
      .mat-badge-content {
        left: -$size / 2;
      }
    }

    [dir='rtl'] &.mat-badge-before {
      .mat-badge-content {
        left: auto;
        right: -$size / 2;
      }
    }

    &.mat-badge-after {
      .mat-badge-content {
        right: -$size / 2;
      }
    }

    [dir='rtl'] &.mat-badge-after {
      .mat-badge-content {
        right: auto;
        left: -$size / 2;
      }
    }
  }
}

@mixin mat-badge-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $primary: map-get($config, primary);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-badge-content {
    color: mat-color($primary, default-contrast);
    background: mat-color($primary);

    @include cdk-high-contrast(active, off) {
      outline: solid 1px;
      border-radius: 0;
    }
  }

  .mat-badge-accent {
    .mat-badge-content {
      background: mat-color($accent);
      color: mat-color($accent, default-contrast);
    }
  }

  .mat-badge-warn {
    .mat-badge-content {
      color: mat-color($warn, default-contrast);
      background: mat-color($warn);
    }
  }

  .mat-badge {
    position: relative;
  }

  .mat-badge-hidden {
    .mat-badge-content {
      display: none;
    }
  }

  .mat-badge-disabled {
    .mat-badge-content {
      $app-background: mat-color($background, 'background');
      $badge-color: mat-color($foreground, disabled-button);

      // The disabled color usually has some kind of opacity, but because the badge is overlayed
      // on top of something else, it won't look good if it's opaque. If it is a color *type*,
      // we convert it into a solid color by taking the opacity from the rgba value and using
      // the value to determine the percentage of the background to put into foreground when
      // mixing the colors together.
      @if (type-of($badge-color) == color and type-of($app-background) == color) {
        $badge-opacity: opacity($badge-color);
        background: mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);
      }
      @else {
        background: $badge-color;
      }

      color: mat-color($foreground, disabled-text);
    }
  }

  .mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform 200ms ease-in-out;
    transform: scale(0.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
  }

  .ng-animate-disabled .mat-badge-content,
  .mat-badge-content._mat-animation-noopable {
    transition: none;
  }

  // The active class is added after the element is added
  // so it can animate scale to default
  .mat-badge-content.mat-badge-active {
    // Scale to `none` instead of `1` to avoid blurry text in some browsers.
    transform: none;
  }

  .mat-badge-small {
    @include _mat-badge-size($mat-badge-small-size);
  }
  .mat-badge-medium {
    @include _mat-badge-size($mat-badge-default-size);
  }
  .mat-badge-large {
    @include _mat-badge-size($mat-badge-large-size);
  }
}

@mixin mat-badge-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-badge-content {
    font-weight: $mat-badge-font-weight;
    font-size: $mat-badge-font-size;
    font-family: mat-font-family($config);
  }

  .mat-badge-small .mat-badge-content {
    // Set the font size to 75% of the original.
    font-size: $mat-badge-font-size * 0.75;
  }

  .mat-badge-large .mat-badge-content {
    font-size: $mat-badge-font-size * 2;
  }
}

@mixin _mat-badge-density($config-or-theme) {}

@mixin mat-badge-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-badge') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-badge-color($color);
    }
    @if $density != null {
      @include _mat-badge-density($density);
    }
    @if $typography != null {
      @include mat-badge-typography($typography);
    }
  }
}






@mixin mat-bottom-sheet-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-bottom-sheet-container {
    @include mat-private-theme-elevation(16, $config);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-bottom-sheet-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-bottom-sheet-container {
    @include mat-typography-level-to-styles($config, body-1);
  }
}

@mixin _mat-bottom-sheet-density($config-or-theme) {}

@mixin mat-bottom-sheet-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-bottom-sheet-color($color);
    }
    @if $density != null {
      @include _mat-bottom-sheet-density($density);
    }
    @if $typography != null {
      @include mat-bottom-sheet-typography($typography);
    }
  }
}





$_mat-button-ripple-opacity: 0.1;

// Applies a focus style to an mat-button element for each of the supported palettes.
@mixin _mat-button-focus-overlay-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  &.mat-primary .mat-button-focus-overlay {
    background-color: mat-color($primary);
  }

  &.mat-accent .mat-button-focus-overlay {
    background-color: mat-color($accent);
  }

  &.mat-warn .mat-button-focus-overlay {
    background-color: mat-color($warn);
  }

  &.mat-button-disabled .mat-button-focus-overlay {
    background-color: transparent;
  }
}

// Applies the background color for a ripple. If the value provided is not a Sass color,
// we assume that we've been given a CSS variable. Since we can't perform alpha-blending
// on a CSS variable, we instead add the opacity directly to the ripple element.
@mixin _mat-button-ripple-background($palette, $hue, $opacity) {
  $background-color: mat-color($palette, $hue, $opacity);
  background-color: $background-color;
  @if (type-of($background-color) != color) {
    opacity: $opacity;
  }
}

@mixin _mat-button-ripple-color($theme, $hue, $opacity: $_mat-button-ripple-opacity) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);

  &.mat-primary .mat-ripple-element {
    @include _mat-button-ripple-background($primary, $hue, $opacity);
  }

  &.mat-accent .mat-ripple-element {
    @include _mat-button-ripple-background($accent, $hue, $opacity);
  }

  &.mat-warn .mat-ripple-element {
    @include _mat-button-ripple-background($warn, $hue, $opacity);
  }
}

// Applies a property to an mat-button element for each of the supported palettes.
@mixin _mat-button-theme-property($theme, $property, $hue) {
  $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, $hue);
  }
  &.mat-accent {
    #{$property}: mat-color($accent, $hue);
  }
  &.mat-warn {
    #{$property}: mat-color($warn, $hue);
  }

  &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {
    &.mat-button-disabled {
      $palette: if($property == 'color', $foreground, $background);
      #{$property}: mat-color($palette, disabled-button);
    }
  }
}

@mixin mat-button-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-button, .mat-icon-button, .mat-stroked-button {
    // Buttons without a background color should inherit the font color. This is necessary to
    // ensure that the button is readable on custom background colors. It's wrong to always assume
    // that those buttons are always placed inside of containers with the default background
    // color of the theme (e.g. themed toolbars).
    color: inherit;
    background: transparent;

    @include _mat-button-theme-property($config, 'color', text);
    @include _mat-button-focus-overlay-color($config);

    // Setup the ripple color to be based on the text color. This ensures that the ripples
    // are matching with the current theme palette and are in contrast to the background color
    // (e.g in themed toolbars).
    .mat-ripple-element {
      opacity: $_mat-button-ripple-opacity;
      background-color: currentColor;
    }
  }

  .mat-button-focus-overlay {
    background: map-get($foreground, base);
  }

  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion
  // order of the theme styles and the button reset may end up resetting this as well.
  .mat-stroked-button:not(.mat-button-disabled) {
    border-color: mat-color($foreground, divider);
  }

  .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
    // Default font and background color when not using any color palette.
    color: mat-color($foreground, text);
    background-color: mat-color($background, raised-button);

    @include _mat-button-theme-property($config, 'color', default-contrast);
    @include _mat-button-theme-property($config, 'background-color', default);
    @include _mat-button-ripple-color($config, default-contrast);
  }

  .mat-stroked-button, .mat-flat-button {
    @include mat-private-theme-overridable-elevation(0, $config);
  }

  .mat-raised-button {
    @include mat-private-theme-overridable-elevation(2, $config);

    &:not(.mat-button-disabled):active {
      @include mat-private-theme-overridable-elevation(8, $config);
    }

    &.mat-button-disabled {
      @include mat-private-theme-overridable-elevation(0, $config);
    }
  }

  .mat-fab, .mat-mini-fab {
    @include mat-private-theme-overridable-elevation(6, $config);

    &:not(.mat-button-disabled):active {
      @include mat-private-theme-overridable-elevation(12, $config);
    }

    &.mat-button-disabled {
      @include mat-private-theme-overridable-elevation(0, $config);
    }
  }
}

@mixin mat-button-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
  .mat-flat-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);
    }
  }
}

@mixin _mat-button-density($config-or-theme) {}

@mixin mat-button-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-button-color($color);
    }
    @if $density != null {
      @include _mat-button-density($density);
    }
    @if $typography != null {
      @include mat-button-typography($typography);
    }
  }
}







$mat-button-toggle-standard-height: 48px !default;
// Minimum height for highest density can vary based on the content that developers
// project into button-toggle's. We use a minimum of `24px` though because commonly
// icons or text are displayed. Icons by default have a size of `24px`.
$mat-button-toggle-standard-minimum-height: 24px !default;
$mat-button-toggle-standard-maximum-height: $mat-button-toggle-standard-height !default;

$mat-button-toggle-standard-density-config: (
  height: (
    default: $mat-button-toggle-standard-height,
    maximum: $mat-button-toggle-standard-maximum-height,
    minimum: $mat-button-toggle-standard-minimum-height,
  )
) !default;


@mixin mat-button-toggle-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $divider-color: mat-color($foreground, divider);

  .mat-button-toggle-standalone,
  .mat-button-toggle-group {
    @include mat-private-theme-elevation(2, $config);
  }

  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
  .mat-button-toggle-group-appearance-standard {
    box-shadow: none;
  }

  .mat-button-toggle {
    color: mat-color($foreground, hint-text);

    .mat-button-toggle-focus-overlay {
      background-color: mat-color($background, focused-button);
    }
  }

  .mat-button-toggle-appearance-standard {
    color: mat-color($foreground, text);
    background: mat-color($background, card);

    .mat-button-toggle-focus-overlay {
      background-color: mat-color($background, focused-button, 1);
    }
  }

  .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
    border-left: solid 1px $divider-color;
  }

  [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {
    border-left: none;
    border-right: solid 1px $divider-color;
  }

  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {
    .mat-button-toggle + .mat-button-toggle {
      border-left: none;
      border-right: none;
      border-top: solid 1px $divider-color;
    }
  }

  .mat-button-toggle-checked {
    background-color: mat-color($background, selected-button);
    color: mat-color($foreground, secondary-text);

    &.mat-button-toggle-appearance-standard {
      color: mat-color($foreground, text);
    }
  }

  .mat-button-toggle-disabled {
    color: mat-color($foreground, disabled-button);
    background-color: mat-color($background, disabled-button-toggle);

    &.mat-button-toggle-appearance-standard {
      background: mat-color($background, card);
    }

    &.mat-button-toggle-checked {
      background-color: mat-color($background, selected-disabled-button);
    }
  }

  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
  .mat-button-toggle-group-appearance-standard {
    border: solid 1px $divider-color;
  }
}

@mixin mat-button-toggle-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-button-toggle {
    font-family: mat-font-family($config);
  }
}

@mixin mat-button-toggle-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $standard-height: mat-private-density-prop-value(
      $mat-button-toggle-standard-density-config, $density-scale, height);

  @include mat-private-density-legacy-compatibility() {
    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
      line-height: $standard-height;
    }
  }
}

@mixin mat-button-toggle-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-button-toggle-color($color);
    }
    @if $density != null {
      @include mat-button-toggle-density($density);
    }
    @if $typography != null {
      @include mat-button-toggle-typography($typography);
    }
  }
}







@mixin mat-card-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-card {
    @include mat-private-theme-overridable-elevation(1, $config);
    background: mat-color($background, card);
    color: mat-color($foreground, text);

    // Needs extra specificity to be able to override the elevation selectors.
    &.mat-card-flat {
      @include mat-private-theme-overridable-elevation(0, $config);
    }
  }

  .mat-card-subtitle {
    color: mat-color($foreground, secondary-text);
  }
}

@mixin mat-card-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-card {
    font-family: mat-font-family($config);
  }

  .mat-card-title {
    font: {
      size: mat-font-size($config, headline);
      weight: mat-font-weight($config, title);
    }
  }

  .mat-card-header .mat-card-title {
    font-size: mat-font-size($config, title);
  }

  .mat-card-subtitle,
  .mat-card-content {
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-card-density($config-or-theme) {}

@mixin mat-card-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-card') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-card-color($color);
    }
    @if $density != null {
      @include _mat-card-density($density);
    }
    @if $typography != null {
      @include mat-card-typography($typography);
    }
  }
}





@mixin mat-checkbox-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);


  // 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($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: mat-color($foreground, secondary-text);
    }
  }

  // Switch this to a solid color since we're using `opacity`
  // to control how opaque the ripple should be.
  .mat-checkbox .mat-ripple-element {
    background-color: map-get(map-get($config, foreground), base);
  }

  .mat-checkbox-checked:not(.mat-checkbox-disabled),
  .mat-checkbox:active:not(.mat-checkbox-disabled) {
    &.mat-primary .mat-ripple-element {
      background: mat-color($primary);
    }

    &.mat-accent .mat-ripple-element {
      background: mat-color($accent);
    }

    &.mat-warn .mat-ripple-element {
      background: mat-color($warn);
    }
  }
}

@mixin mat-checkbox-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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);
  }
}

@mixin _mat-checkbox-density($config-or-theme) {}

@mixin mat-checkbox-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-checkbox') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-checkbox-color($color);
    }
    @if $density != null {
      @include _mat-checkbox-density($density);
    }
    @if $typography != null {
      @include mat-checkbox-typography($typography);
    }
  }
}






$mat-chip-remove-font-size: 18px;

@mixin _mat-chip-element-color($foreground, $background) {
  background-color: $background;
  color: $foreground;

  .mat-chip-remove {
    color: $foreground;
    opacity: 0.4;
  }
}


// Applies the background color for a ripple element.
// If the color value provided is not a Sass color,
// we assume that we've been given a CSS variable.
// Since we can't perform alpha-blending on a CSS variable,
// we instead add the opacity directly to the ripple element.
@mixin _mat-chips-ripple-background($palette, $default-contrast, $opacity) {
  $background-color: mat-color($palette, $default-contrast, $opacity);
  background-color: $background-color;
  @if (type-of($background-color) != color) {
    opacity: $opacity;
  }
}

@mixin _mat-chip-theme-color($palette) {
  @include _mat-chip-element-color(mat-color($palette, default-contrast), mat-color($palette));

  .mat-ripple-element {
    @include _mat-chips-ripple-background($palette, default-contrast, 0.1);
  }
}

@mixin mat-chips-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  $unselected-background: mat-color($background, unselected-chip);
  $unselected-foreground: mat-color($foreground, text);

  .mat-chip.mat-standard-chip {
    @include _mat-chip-element-color($unselected-foreground, $unselected-background);

    &:not(.mat-chip-disabled) {
      &:active {
        @include mat-private-theme-elevation(3, $config);
      }

      .mat-chip-remove:hover {
        opacity: 0.54;
      }
    }

    &.mat-chip-disabled {
      opacity: 0.4;
    }

    &::after {
      background: map-get($foreground, base);
    }
  }

  .mat-chip.mat-standard-chip.mat-chip-selected {
    &.mat-primary {
      @include _mat-chip-theme-color($primary);
    }

    &.mat-warn {
      @include _mat-chip-theme-color($warn);
    }

    &.mat-accent {
      @include _mat-chip-theme-color($accent);
    }
  }
}

@mixin mat-chips-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-chip {
    font-size: mat-font-size($config, body-2);
    font-weight: mat-font-weight($config, body-2);

    .mat-chip-trailing-icon.mat-icon,
    .mat-chip-remove.mat-icon {
      font-size: $mat-chip-remove-font-size;
    }
  }
}

@mixin _mat-chips-density($config-or-theme) {}

@mixin mat-chips-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-chips') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-chips-color($color);
    }
    @if $density != null {
      @include _mat-chips-density($density);
    }
    @if $typography != null {
      @include mat-chips-typography($typography);
    }
  }
}






@mixin mat-divider-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);

  .mat-divider {
    border-top-color: mat-color($foreground, divider);
  }

  .mat-divider-vertical {
    border-right-color: mat-color($foreground, divider);
  }
}

@mixin mat-divider-typography($config-or-theme) {}

@mixin _mat-divider-density($config-or-theme) {}

@mixin mat-divider-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-divider') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-divider-color($color);
    }
    @if $density != null {
      @include _mat-divider-density($density);
    }
    @if $typography != null {
      @include mat-divider-typography($typography);
    }
  }
}





@mixin mat-table-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-table {
    background: mat-color($background, 'card');
  }

  .mat-table thead, .mat-table tbody, .mat-table tfoot,
  mat-header-row, mat-row, mat-footer-row,
  [mat-header-row], [mat-row], [mat-footer-row],
  .mat-table-sticky {
    background: inherit;
  }

  mat-row, mat-header-row, mat-footer-row,
  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
    border-bottom-color: mat-color($foreground, divider);
  }

  .mat-header-cell {
    color: mat-color($foreground, secondary-text);
  }

  .mat-cell, .mat-footer-cell {
    color: mat-color($foreground, text);
  }
}

@mixin mat-table-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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, .mat-footer-cell {
    font-size: mat-font-size($config, body-1);
  }
}

@mixin _mat-table-density($config-or-theme) {}

@mixin mat-table-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-table') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-table-color($color);
    }
    @if $density != null {
      @include _mat-table-density($density);
    }
    @if $typography != null {
      @include mat-table-typography($typography);
    }
  }
}







$mat-datepicker-selected-today-box-shadow-width: 1px;
$mat-datepicker-selected-fade-amount: 0.6;
$mat-datepicker-range-fade-amount: 0.2;
$mat-datepicker-today-fade-amount: 0.2;
$mat-calendar-body-font-size: 13px !default;
$mat-calendar-weekday-table-font-size: 11px !default;

@mixin _mat-datepicker-color($palette) {
  @include mat-date-range-colors(
    mat-color($palette, default, $mat-datepicker-range-fade-amount));

  .mat-calendar-body-selected {
    background-color: mat-color($palette);
    color: mat-color($palette, default-contrast);
  }

  .mat-calendar-body-disabled > .mat-calendar-body-selected {
    $background: mat-color($palette);

    @if (type-of($background) == color) {
      background-color: fade-out($background, $mat-datepicker-selected-fade-amount);
    }
    @else {
      // If we couldn't resolve to background to a color (e.g. it's a CSS variable),
      // fall back to fading the content out via `opacity`.
      opacity: $mat-datepicker-today-fade-amount;
    }
  }

  .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width
                mat-color($palette, default-contrast);
  }

  .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,
  .cdk-keyboard-focused .mat-calendar-body-active,
  .cdk-program-focused .mat-calendar-body-active {
    & > .mat-calendar-body-cell-content {
      @include _mat-datepicker-unselected-cell {
        background-color: mat-color($palette, 0.3);
      }
    }
  }
}

// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.
@mixin _mat-datepicker-unselected-cell {
  &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    @content;
  }
}

@mixin mat-datepicker-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $disabled-color: mat-color($foreground, disabled-text);

  .mat-calendar-arrow {
    border-top-color: mat-color($foreground, icon);
  }

  // The prev/next buttons need a bit more specificity to
  // avoid being overwritten by the .mat-icon-button.
  .mat-datepicker-toggle,
  .mat-datepicker-content .mat-calendar-next-button,
  .mat-datepicker-content .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,
  .mat-date-range-input-separator {
    color: mat-color($foreground, text);
    border-color: transparent;
  }

  .mat-calendar-body-disabled > .mat-calendar-body-cell-content {
    @include _mat-datepicker-unselected-cell {
      color: $disabled-color;
    }
  }

  .mat-form-field-disabled .mat-date-range-input-separator {
    color: $disabled-color;
  }

  .mat-calendar-body-in-preview {
    $divider-color: mat-color($foreground, divider);

    @if type-of($divider-color) == color {
      // The divider color is set under the assumption that it'll be used
      // for a solid border, but because we're using a dashed border for the
      // preview range, we need to bump its opacity to ensure that it's visible.
      color: rgba($divider-color, min(opacity($divider-color) * 2, 1));
    }
    @else {
      color: $divider-color;
    }
  }

  .mat-calendar-body-today {
    @include _mat-datepicker-unselected-cell {
      // 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-disabled > .mat-calendar-body-today {
    @include _mat-datepicker-unselected-cell {
      $color: mat-color($foreground, hint-text);

      @if (type-of($color) == color) {
        border-color: fade-out($color, $mat-datepicker-today-fade-amount);
      }
      @else {
        // If the color didn't resolve to a color value, but something like a CSS variable, we can't
        // fade it out so we fall back to reducing the element opacity. Note that we don't use the
        // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied
        // to it already and we don't want them to stack on top of each other.
        opacity: 0.5;
      }
    }
  }

  @include _mat-datepicker-color(map-get($config, primary));

  .mat-datepicker-content {
    @include mat-private-theme-elevation(4, $config);
    background-color: mat-color($background, card);
    color: mat-color($foreground, text);

    &.mat-accent {
      @include _mat-datepicker-color(map-get($config, accent));
    }

    &.mat-warn {
      @include _mat-datepicker-color(map-get($config, warn));
    }
  }

  .mat-datepicker-content-touch {
    @include mat-private-theme-elevation(0, $config);
  }

  .mat-datepicker-toggle-active {
    color: mat-color(map-get($config, primary), text);

    &.mat-accent {
      color: mat-color(map-get($config, accent), text);
    }

    &.mat-warn {
      color: mat-color(map-get($config, warn), text);
    }
  }

  .mat-date-range-input-inner[disabled] {
    color: mat-color($foreground, disabled-text);
  }
}

@mixin mat-datepicker-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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-date-range-colors(
  $range-color,
  $comparison-color: rgba(#f9ab00, $mat-datepicker-range-fade-amount),
  $overlap-color: #a8dab5,
  $overlap-selected-color: darken($overlap-color, 30%)) {

  .mat-calendar-body-in-range::before {
    background: $range-color;
  }

  .mat-calendar-body-comparison-identical,
  .mat-calendar-body-in-comparison-range::before {
    background: $comparison-color;
  }

  .mat-calendar-body-comparison-bridge-start::before,
  [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {
    background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);
  }

  .mat-calendar-body-comparison-bridge-end::before,
  [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {
    background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);
  }

  .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,
  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {
    background: $overlap-color;
  }

  .mat-calendar-body-comparison-identical.mat-calendar-body-selected,
  .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {
    background: $overlap-selected-color;
  }
}

@mixin _mat-datepicker-density($config-or-theme) {}

@mixin mat-datepicker-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-datepicker') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-datepicker-color($color);
    }
    @if $density != null {
      @include _mat-datepicker-density($density);
    }
    @if $typography != null {
      @include mat-datepicker-typography($typography);
    }
  }
}







@mixin mat-dialog-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-dialog-container {
    @include mat-private-theme-elevation(24, $config);
    background: mat-color($background, dialog);
    color: mat-color($foreground, text);
  }
}

@mixin mat-dialog-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-dialog-title {
    @include mat-typography-level-to-styles($config, title);
  }
}

@mixin _mat-dialog-density($config-or-theme) {}

@mixin mat-dialog-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-dialog') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-dialog-color($color);
    }
    @if $density != null {
      @include _mat-dialog-density($density);
    }
    @if $typography != null {
      @include mat-dialog-typography($typography);
    }
  }
}






// Default minimum and maximum height for collapsed panel headers.
$mat-expansion-panel-header-collapsed-height: 48px !default;
$mat-expansion-panel-header-collapsed-minimum-height: 36px !default;
$mat-expansion-panel-header-collapsed-maximum-height:
    $mat-expansion-panel-header-collapsed-height !default;

// Default minimum and maximum height for expanded panel headers.
$mat-expansion-panel-header-expanded-height: 64px !default;
$mat-expansion-panel-header-expanded-minimum-height: 48px !default;
$mat-expansion-panel-header-expanded-maximum-height:
    $mat-expansion-panel-header-expanded-height !default;

// Density configuration for the expansion panel. Captures the
// height for both expanded and collapsed panel headers.
$mat-expansion-panel-header-density-config: (
  collapsed-height: (
    default: $mat-expansion-panel-header-collapsed-height,
    maximum: $mat-expansion-panel-header-collapsed-maximum-height,
    minimum: $mat-expansion-panel-header-collapsed-minimum-height,
  ),
  expanded-height: (
    default: $mat-expansion-panel-header-expanded-height,
    maximum: $mat-expansion-panel-header-expanded-maximum-height,
    minimum: $mat-expansion-panel-header-expanded-minimum-height,
  )
) !default;

// Note: Keep this in sync with the animation timing for the toggle indicator
// and body expansion. These are animated using Angular animations.
$mat-expansion-panel-header-transition: 225ms cubic-bezier(0.4, 0, 0.2, 1);

@mixin mat-private-expansion-focus {
  .mat-expansion-panel {
    & .mat-expansion-panel-header.cdk-keyboard-focused,
    & .mat-expansion-panel-header.cdk-program-focused,
    &:not(.mat-expanded) .mat-expansion-panel-header:hover {
      &:not([aria-disabled='true']) {
        @content;
      }
    }
  }
}


@mixin mat-expansion-panel-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-expansion-panel {
    @include mat-private-theme-overridable-elevation(2, $config);
    background: mat-color($background, card);
    color: mat-color($foreground, text);
  }

  .mat-action-row {
    border-top-color: mat-color($foreground, divider);
  }

  @include mat-private-expansion-focus {
    background: mat-color($background, hover);
  }

  // Disable the hover on touch devices since it can appear like it is stuck. We can't use
  // `@media (hover)` above, because the desktop support browser support isn't great.
  @media (hover: none) {
    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])
      .mat-expansion-panel-header:hover {
      background: mat-color($background, card);
    }
  }

  .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-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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);
  }
}

@mixin mat-expansion-panel-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $expanded-height: mat-private-density-prop-value(
        $mat-expansion-panel-header-density-config, $density-scale, expanded-height);
  $collapsed-height: mat-private-density-prop-value(
      $mat-expansion-panel-header-density-config, $density-scale, collapsed-height);

  @include mat-private-density-legacy-compatibility() {
    .mat-expansion-panel-header {
      height: $collapsed-height;

      &.mat-expanded {
        height: $expanded-height;
      }
    }
  }
}

@mixin mat-expansion-panel-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-expansion-panel') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-expansion-panel-color($color);
    }
    @if $density != null {
      @include mat-expansion-panel-density($density);
    }
    @if $typography != null {
      @include mat-expansion-panel-typography($typography);
    }
  }
}




// 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;
  flex: auto;
  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;
  }
}



// Include this empty mixin for consistency with the other components.
@mixin mat-grid-list-color($config-or-theme) {}

@mixin mat-grid-list-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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);
  }
}

@mixin _mat-grid-list-density($config-or-theme) {}

@mixin mat-grid-list-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-grid-list') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-grid-list-color($color);
    }
    @if $density != null {
      @include _mat-grid-list-density($density);
    }
    @if $typography != null {
      @include mat-grid-list-typography($typography);
    }
  }
}



@mixin mat-icon-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-icon {
    &.mat-primary {
      color: mat-color($primary, text);
    }

    &.mat-accent {
      color: mat-color($accent, text);
    }

    &.mat-warn {
      color: mat-color($warn, text);
    }
  }
}

@mixin mat-icon-typography($config-or-theme) {}

@mixin _mat-icon-density($config-or-theme) {}

@mixin mat-icon-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-icon') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-icon-color($color);
    }
    @if $density != null {
      @include _mat-icon-density($density);
    }
    @if $typography != null {
      @include mat-icon-typography($typography);
    }
  }
}






// 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-private-control-disabled-underline($color) {
  background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);
  background-size: 4px 100%;
  background-repeat: repeat-x;
}

// Figures out the color of the placeholder for a form control.
// Used primarily to prevent the various form controls from
// becoming out of sync since these colors aren't in a palette.
@function mat-private-control-placeholder-color($config) {
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);
  @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));
}


/* stylelint-disable material/no-prefixes */
@mixin user-select($value) {
  -webkit-user-select: $value;
  -moz-user-select: $value;
  -ms-user-select: $value;
  user-select: $value;
}

@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;
}

@mixin position-sticky($important: false) {
  position: -webkit-sticky #{if($important, '!important', '')};
  position: sticky #{if($important, '!important', '')};
}
/* stylelint-enable */



@mixin mat-input-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $foreground: map-get($config, foreground);

  .mat-form-field-type-mat-native-select .mat-form-field-infix::after {
    color: mat-color($foreground, secondary-text);
  }

  .mat-input-element:disabled,
  .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
    color: mat-color($foreground, disabled-text);
  }

  .mat-input-element {
    caret-color: mat-color($primary, text);

    @include input-placeholder {
      color: mat-private-control-placeholder-color($config);
    }

    // On dark themes we set the native `select` color to some shade of white,
    // however the color propagates to all of the `option` elements, which are
    // always on a white background inside the dropdown, causing them to blend in.
    // Since we can't change background of the dropdown, we need to explicitly
    // reset the color of the options to something dark.
    @if (map-get($config, is-dark)) {
      option {
        color: $dark-primary-text;
      }

      option:disabled {
        color: $dark-disabled-text;
      }
    }
  }

  .mat-form-field.mat-accent .mat-input-element {
    caret-color: mat-color($accent, text);
  }

  .mat-form-field.mat-warn .mat-input-element,
  .mat-form-field-invalid .mat-input-element {
    caret-color: mat-color($warn, text);
  }

  .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
    color: mat-color($warn, text);
  }
}

@mixin mat-input-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // 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-input-density($config-or-theme) {}

@mixin mat-input-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-input') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-input-color($color);
    }
    @if $density != null {
      @include _mat-input-density($density);
    }
    @if $typography != null {
      @include mat-input-typography($typography);
    }
  }
}







@mixin mat-list-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-list-base {
    .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-list-option,
  .mat-nav-list .mat-list-item,
  .mat-action-list .mat-list-item {
    &:hover, &:focus {
      background: mat-color($background, 'hover');
    }
  }

  .mat-list-single-selected-option {
    &, &:hover, &:focus {
      background: mat-color($background, hover, 0.12);
    }
  }
}

@mixin mat-list-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  $font-family: mat-font-family($config);

  .mat-list-item {
    font-family: $font-family;
  }

  .mat-list-option {
    font-family: $font-family;
  }

  // Default list
  .mat-list-base {
    .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-base[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-list-density($config-or-theme) {}

@mixin mat-list-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-list') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-list-color($color);
    }
    @if $density != null {
      @include _mat-list-density($density);
    }
    @if $typography != null {
      @include mat-list-typography($typography);
    }
  }
}







@mixin mat-menu-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-menu-panel {
    @include mat-private-theme-overridable-elevation(4, $config);
    background: mat-color($background, 'card');
  }

  .mat-menu-item {
    background: transparent;
    color: mat-color($foreground, 'text');

    &[disabled] {
      &,
      &::after,
      .mat-icon-no-color {
        color: mat-color($foreground, 'disabled');
      }
    }
  }

  .mat-menu-item .mat-icon-no-color,
  .mat-menu-item-submenu-trigger::after {
    color: mat-color($foreground, 'icon');
  }

  .mat-menu-item:hover,
  .mat-menu-item.cdk-program-focused,
  .mat-menu-item.cdk-keyboard-focused,
  .mat-menu-item-highlighted {
    &:not([disabled]) {
      background: mat-color($background, 'hover');
    }
  }
}

@mixin mat-menu-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-menu-item {
    font: {
      family: mat-font-family($config, body-1);
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    }
  }
}

@mixin _mat-menu-density($config-or-theme) {}

@mixin mat-menu-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-menu') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-menu-color($color);
    }
    @if $density != null {
      @include _mat-menu-density($density);
    }
    @if $typography != null {
      @include mat-menu-typography($typography);
    }
  }
}






$mat-paginator-height: 56px !default;
// Minimum height for paginator's in the highest density is determined based on how
// much the paginator can shrink until the content exceeds (i.e. navigation buttons).
$mat-paginator-minimum-height: 40px !default;
$mat-paginator-maximum-height: $mat-paginator-height !default;

$mat-paginator-density-config: (
  height: (
    default: $mat-paginator-height,
    maximum: $mat-paginator-maximum-height,
    minimum: $mat-paginator-minimum-height,
  )
) !default;


@mixin mat-paginator-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, 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-decrement,
  .mat-paginator-increment {
    border-top: 2px solid mat-color($foreground, 'icon');
    border-right: 2px solid mat-color($foreground, 'icon');
  }

  .mat-paginator-first,
  .mat-paginator-last {
    border-top: 2px solid mat-color($foreground, 'icon');
  }

  .mat-icon-button[disabled] {
    .mat-paginator-decrement,
    .mat-paginator-increment,
    .mat-paginator-first,
    .mat-paginator-last {
      border-color: mat-color($foreground, 'disabled');
    }
  }
}

@mixin mat-paginator-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-paginator,
  .mat-paginator-page-size .mat-select-trigger {
    font: {
      family: mat-font-family($config, caption);
      size: mat-font-size($config, caption);
    }
  }
}

@mixin mat-paginator-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: mat-private-density-prop-value($mat-paginator-density-config, $density-scale, height);

  @include mat-private-density-legacy-compatibility() {
    .mat-paginator-container {
      min-height: $height;
    }
  }
}

@mixin mat-paginator-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-paginator') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-paginator-color($color);
    }
    @if $density != null {
      @include mat-paginator-density($density);
    }
    @if $typography != null {
      @include mat-paginator-typography($typography);
    }
  }
}




@mixin mat-progress-bar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-progress-bar-background {
    fill: mat-color($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 {
      fill: mat-color($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 {
      fill: mat-color($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-or-theme) {}

@mixin _mat-progress-bar-density($config-or-theme) {}

@mixin mat-progress-bar-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-bar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-progress-bar-color($color);
    }
    @if $density != null {
      @include _mat-progress-bar-density($density);
    }
    @if $typography != null {
      @include mat-progress-bar-typography($typography);
    }
  }
}





@mixin mat-progress-spinner-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-progress-spinner, .mat-spinner {
    circle {
      stroke: mat-color($primary);
    }

    &.mat-accent circle {
      stroke: mat-color($accent);
    }

    &.mat-warn circle {
      stroke: mat-color($warn);
    }
  }
}

@mixin mat-progress-spinner-typography($config-or-theme) {}

@mixin _mat-progress-spinner-density($config-or-theme) {}

@mixin mat-progress-spinner-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-progress-spinner') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-progress-spinner-color($color);
    }
    @if $density != null {
      @include _mat-progress-spinner-density($density);
    }
    @if $typography != null {
      @include mat-progress-spinner-typography($typography);
    }
  }
}





@mixin _mat-radio-color($palette) {
  &.mat-radio-checked .mat-radio-outer-circle {
    border-color: mat-color($palette);
  }

  .mat-radio-inner-circle,
  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),
  &.mat-radio-checked .mat-radio-persistent-ripple,
  &:active .mat-radio-persistent-ripple {
    background-color: mat-color($palette);
  }
}

@mixin mat-radio-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-radio-outer-circle {
    border-color: mat-color($foreground, secondary-text);
  }

  .mat-radio-button {
    &.mat-primary {
      @include _mat-radio-color($primary);
    }

    &.mat-accent {
      @include _mat-radio-color($accent);
    }

    &.mat-warn {
      @include _mat-radio-color($warn);
    }

    // This needs extra specificity, because the classes above are combined
    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.
    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).
    &.mat-radio-disabled {
      &.mat-radio-checked .mat-radio-outer-circle,
      .mat-radio-outer-circle {
        border-color: mat-color($foreground, 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);
      }
    }

    // Switch this to a solid color since we're using `opacity`
    // to control how opaque the ripple should be.
    .mat-ripple-element {
      background-color: map-get($foreground, base);
    }
  }
}

@mixin mat-radio-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-radio-button {
    font-family: mat-font-family($config);
  }
}

@mixin _mat-radio-density($config-or-theme) {}

@mixin mat-radio-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-radio') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-radio-color($color);
    }
    @if $density != null {
      @include _mat-radio-density($density);
    }
    @if $typography != null {
      @include mat-radio-typography($typography);
    }
  }
}








@mixin mat-select-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-select-value {
    color: mat-color($foreground, text);
  }

  .mat-select-placeholder {
    color: mat-private-control-placeholder-color($config);
  }

  .mat-select-disabled .mat-select-value {
    color: mat-color($foreground, disabled-text);
  }

  .mat-select-arrow {
    color: mat-color($foreground, secondary-text);
  }

  .mat-select-panel {
    background: mat-color($background, card);
    @include mat-private-theme-overridable-elevation(4, $config);

    .mat-option.mat-selected:not(.mat-option-multiple) {
      background: mat-color($background, hover, 0.12);
    }
  }

  .mat-form-field {
    &.mat-focused {
      &.mat-primary .mat-select-arrow {
        color: mat-color($primary, text);
      }

      &.mat-accent .mat-select-arrow {
        color: mat-color($accent, text);
      }

      &.mat-warn .mat-select-arrow {
        color: mat-color($warn, text);
      }
    }

    .mat-select.mat-select-invalid .mat-select-arrow {
      color: mat-color($warn, text);
    }

    .mat-select.mat-select-disabled .mat-select-arrow {
      color: mat-color($foreground, disabled-text);
    }
  }
}

@mixin mat-select-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // The unit-less line-height from the font config.
  $line-height: mat-line-height($config, input);

  .mat-select {
    font-family: mat-font-family($config);
  }

  .mat-select-trigger {
    height: $line-height * 1em;
  }
}

@mixin _mat-select-density($config-or-theme) {}

@mixin mat-select-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-select') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-select-color($color);
    }
    @if $density != null {
      @include _mat-select-density($density);
    }
    @if $typography != null {
      @include mat-select-typography($typography);
    }
  }
}





@mixin mat-sidenav-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  $drawer-background-color: mat-color($background, dialog);
  $drawer-container-background-color:  mat-color($background, background);
  $drawer-push-background-color: mat-color($background, dialog);
  $drawer-side-border: solid 1px mat-color($foreground, divider);

  .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;
    }

    &:not(.mat-drawer-side) {
      // The elevation of z-16 is noted in the design specifications.
      // See https://material.io/design/components/navigation-drawer.html
      @include mat-private-theme-elevation(16, $config);
    }
  }

  .mat-drawer-side {
    border-right: $drawer-side-border;

    &.mat-drawer-end {
      border-left: $drawer-side-border;
      border-right: none;
    }
  }

  [dir='rtl'] .mat-drawer-side {
    border-left: $drawer-side-border;
    border-right: none;

    &.mat-drawer-end {
      border-left: none;
      border-right: $drawer-side-border;
    }
  }

  .mat-drawer-backdrop.mat-drawer-shown {
    $opacity: 0.6;
    $backdrop-color: mat-color($background, card, $opacity);

    @if (type-of($backdrop-color) == color) {
      // 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.
      background-color: invert($backdrop-color);
    }
    @else {
      // If we couldn't resolve the backdrop color to a color value, fall back to using
      // `opacity` to make it opaque since its end value could be a solid color.
      background-color: $backdrop-color;
      opacity: $opacity;
    }
  }
}

@mixin mat-sidenav-typography($config-or-theme) {}

@mixin _mat-sidenav-density($config-or-theme) {}

@mixin mat-sidenav-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sidenav') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-sidenav-color($color);
    }
    @if $density != null {
      @include _mat-sidenav-density($density);
    }
    @if $typography != null {
      @include mat-sidenav-typography($typography);
    }
  }
}






@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {
  &.mat-checked {
    .mat-slide-toggle-thumb {
      background-color: mat-color($palette, $thumb-checked-hue);
    }

    .mat-slide-toggle-bar {
      // Opacity is determined from the specs for the selection controls.
      // See: https://material.io/design/components/selection-controls.html#specs
      background-color: mat-color($palette, $thumb-checked-hue, 0.54);
    }

    .mat-ripple-element {
      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
      background-color: mat-color($palette, $thumb-checked-hue);
    }
  }
}

@mixin mat-slide-toggle-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark: map-get($config, is-dark);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  // Color hues are based on the specs which briefly show the hues that are applied to a switch.
  // The 2018 specs no longer describe how dark switches should look like. Due to the lack of
  // information for dark themed switches, we partially keep the old behavior that is based on
  // the previous specifications. For the checked color we always use the `default` hue because
  // that follows MDC and also makes it easier for people to create a custom theme without needing
  // to specify each hue individually.
  $thumb-unchecked-hue: if($is-dark, 400, 50);
  $thumb-checked-hue: default;

  $bar-unchecked-color: mat-color($foreground, disabled);
  $ripple-unchecked-color: mat-color($foreground, base);

  .mat-slide-toggle {
    @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);

    &.mat-primary {
      @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);
    }

    &.mat-warn {
      @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);
    }

    &:not(.mat-checked) .mat-ripple-element {
      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically
      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)
      background-color: $ripple-unchecked-color;
    }
  }

  .mat-slide-toggle-thumb {
    @include mat-private-theme-elevation(1, $config);
    background-color: mat-color($mat-grey, $thumb-unchecked-hue);
  }

  .mat-slide-toggle-bar {
    background-color: $bar-unchecked-color;
  }
}

@mixin mat-slide-toggle-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-slide-toggle-content {
    font-family: mat-font-family($config);
  }
}

@mixin _mat-slide-toggle-density($config-or-theme) {}

@mixin mat-slide-toggle-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-slide-toggle-color($color);
    }
    @if $density != null {
      @include _mat-slide-toggle-density($density);
    }
    @if $typography != null {
      @include mat-slide-toggle-typography($typography);
    }
  }
}






@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);
  }

  .mat-slider-focus-ring {
    $opacity: 0.2;
    $color: mat-color($palette, default, $opacity);
    background-color: $color;

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($color) != color) {
      opacity: $opacity;
    }
  }
}

@mixin mat-slider-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, 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-tick-opacity: 0.7;
  $mat-slider-tick-color: mat-color($foreground, base, $mat-slider-tick-opacity);
  $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: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 {
      $opacity: 0.12;
      $color: mat-color($foreground, base, $opacity);
      background-color: $color;

      // `mat-color` uses `rgba` for the opacity which won't work with
      // CSS variables so we need to use `opacity` as a fallback.
      @if (type-of($color) != color) {
        opacity: $opacity;
      }
    }

    &.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-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }

  .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-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }

  .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);

    // `mat-color` uses `rgba` for the opacity which won't work with
    // CSS variables so we need to use `opacity` as a fallback.
    @if (type-of($mat-slider-tick-color) != color) {
      opacity: $mat-slider-tick-opacity;
    }
  }
}

@mixin mat-slider-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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-slider-density($config-or-theme) {}

@mixin mat-slider-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-slider') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-slider-color($color);
    }
    @if $density != null {
      @include _mat-slider-density($density);
    }
    @if $typography != null {
      @include mat-slider-typography($typography);
    }
  }
}





$mat-stepper-header-height: 72px !default;
// Minimum height for highest density stepper's is determined based on how much
// stepper headers can shrink until the step icon or step label exceed. We can't use
// a value below `42px` because the optional label for steps would otherwise exceed.
$mat-stepper-header-minimum-height: 42px !default;
$mat-stepper-header-maximum-height: $mat-stepper-header-height !default;

$mat-stepper-density-config: (
  height: (
    default: $mat-stepper-header-height,
    maximum: $mat-stepper-header-maximum-height,
    minimum: $mat-stepper-header-minimum-height,
  )
) !default;

// Note: These variables are not denoted with `!default` because they are used in the non-theme
// component styles. Modifying these variables does not have the desired effect for consumers.
$mat-stepper-label-header-height: 24px;
$mat-stepper-label-position-bottom-top-gap: 16px;
$mat-stepper-label-min-width: 50px;

$mat-vertical-stepper-content-margin: 36px;

$mat-stepper-side-gap: 24px;
$mat-stepper-line-width: 1px;
$mat-stepper-line-gap: 8px;

$mat-step-sub-label-font-size: 12px;
$mat-step-header-icon-size: 16px;


@mixin mat-stepper-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $background: map-get($config, background);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);

  .mat-step-header {
    &.cdk-keyboard-focused,
    &.cdk-program-focused,
    &:hover {
      background-color: mat-color($background, hover);
    }

    // On touch devices the :hover state will linger on the element after a tap.
    // Reset it via `@media` after the declaration, because the media query isn't
    // supported by all browsers yet.
    @media (hover: none) {
      &:hover {
        background: none;
      }
    }

    .mat-step-label,
    .mat-step-optional {
      // TODO(josephperrott): Update to using a corrected disabled-text contrast
      // instead of secondary-text.
      color: mat-color($foreground, secondary-text);
    }

    .mat-step-icon {
      // TODO(josephperrott): Update to using a corrected disabled-text contrast
      // instead of secondary-text.
      background-color: mat-color($foreground, secondary-text);
      color: mat-color($primary, default-contrast);
    }

    .mat-step-icon-selected,
    .mat-step-icon-state-done,
    .mat-step-icon-state-edit {
      background-color: mat-color($primary);
      color: mat-color($primary, default-contrast);
    }

    &.mat-accent {
      .mat-step-icon {
        color: mat-color($accent, default-contrast);
      }

      .mat-step-icon-selected,
      .mat-step-icon-state-done,
      .mat-step-icon-state-edit {
        background-color: mat-color($accent);
        color: mat-color($accent, default-contrast);
      }
    }

    &.mat-warn {
      .mat-step-icon {
        color: mat-color($warn, default-contrast);
      }

      .mat-step-icon-selected,
      .mat-step-icon-state-done,
      .mat-step-icon-state-edit {
        background-color: mat-color($warn);
        color: mat-color($warn, default-contrast);
      }
    }

    .mat-step-icon-state-error {
      background-color: transparent;
      color: mat-color($warn, text);
    }

    .mat-step-label.mat-step-label-active {
      color: mat-color($foreground, text);
    }

    .mat-step-label.mat-step-label-error {
      color: mat-color($warn, 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-horizontal-stepper-header::before,
  .mat-horizontal-stepper-header::after,
  .mat-stepper-horizontal-line {
    border-top-color: mat-color($foreground, divider);
  }
}

@mixin mat-stepper-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-stepper-vertical, .mat-stepper-horizontal {
    font-family: mat-font-family($config);
  }

  .mat-step-label {
    font: {
      size: mat-font-size($config, body-1);
      weight: mat-font-weight($config, body-1);
    };
  }

  .mat-step-sub-label-error {
    font-weight: normal;
  }

  .mat-step-label-error {
    font-size: mat-font-size($config, body-2);
  }

  .mat-step-label-selected {
    font: {
      size: mat-font-size($config, body-2);
      weight: mat-font-weight($config, body-2);
    };
  }
}

@mixin mat-stepper-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: mat-private-density-prop-value($mat-stepper-density-config, $density-scale, height);
  $vertical-padding: ($height - $mat-stepper-label-header-height) / 2;

  @include mat-private-density-legacy-compatibility() {
    .mat-horizontal-stepper-header {
      height: $height;
    }

    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,
    .mat-vertical-stepper-header {
      padding: $vertical-padding $mat-stepper-side-gap;
    }

    // Ensures that the vertical lines for the step content exceed into the step
    // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.
    .mat-stepper-vertical-line::before {
      top: $mat-stepper-line-gap - $vertical-padding;
      bottom: $mat-stepper-line-gap - $vertical-padding;
    }

    // Ensures that the horizontal lines for the step header are centered vertically.
    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
      &::after, &::before {
        top: $vertical-padding + $mat-stepper-label-header-height / 2;
      }
    }

    // Ensures that the horizontal line for the step content is aligned centered vertically.
    .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
      top: $vertical-padding + $mat-stepper-label-header-height / 2;
    }
  }
}

@mixin mat-stepper-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-stepper') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-stepper-color($color);
    }
    @if $density != null {
      @include mat-stepper-density($density);
    }
    @if $typography != null {
      @include mat-stepper-typography($typography);
    }
  }
}



@mixin mat-sort-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-sort-header-arrow {
    $table-background: mat-color($background, 'card');
    $text-color: mat-color($foreground, secondary-text);

    // Because the arrow is made up of multiple elements that are stacked on top of each other,
    // we can't use the semi-transparent color from the theme directly. If the value is a color
    // *type*, we convert it into a solid color by taking the opacity from the rgba value and
    // using the value to determine the percentage of the background to put into foreground
    // when mixing the colors together. Otherwise, if it resolves to something different
    // (e.g. it resolves to a CSS variable), we use the color directly.
    @if (type-of($table-background) == color and type-of($text-color) == color) {
      $text-opacity: opacity($text-color);
      color: mix($table-background, rgba($text-color, 1), (1 - $text-opacity) * 100%);
    }
    @else {
      color: $text-color;
    }
  }
}

@mixin mat-sort-typography($config-or-theme) {}

@mixin _mat-sort-density($config-or-theme) {}

@mixin mat-sort-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-sort') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-sort-color($color);
    }
    @if $density != null {
      @include _mat-sort-density($density);
    }
    @if $typography != null {
      @include mat-sort-typography($typography);
    }
  }
}





@mixin mat-tabs-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, 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} {
          > .mat-tab-header, > .mat-tab-link-container {
            @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,
  .mat-tab-link {
    &.cdk-keyboard-focused,
    &.cdk-program-focused {
      &:not(.mat-tab-disabled) {
        background-color: mat-color($tab-focus-color, lighter, 0.3);
      }
    }
  }
}

@mixin _mat-tabs-background($background-color) {
  // Note that these selectors target direct descendants so
  // that the styles don't apply to any nested tab groups.

  // Set background color for the tab group
  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {
    background-color: mat-color($background-color);
  }

  // Set labels to contrast against background
  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .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 .mat-tab-header-pagination-chevron,
  > .mat-tab-links .mat-focus-indicator::before,
  > .mat-tab-header .mat-focus-indicator::before {
    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);
  }

  // Set ripples color to be the contrast color of the new background. Otherwise the ripple
  // color will be based on the app background color.
  > .mat-tab-header .mat-ripple-element,
  > .mat-tab-link-container .mat-ripple-element {
    background-color: mat-color($background-color, default-contrast, 0.12);
  }
}

@mixin mat-tabs-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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-tabs-density($config-or-theme) {}

@mixin mat-tabs-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tabs') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tabs-color($color);
    }
    @if $density != null {
      @include _mat-tabs-density($density);
    }
    @if $typography != null {
      @include mat-tabs-typography($typography);
    }
  }
}






// Minimum height for toolbar's in the highest density is difficult to determine because
// developers can project arbitrary content. We use a minimum value that ensures that most
// common content (e.g. icon buttons) does not exceed the row boundaries in highest density.
$mat-toolbar-minimum-height: 44px !default;

$mat-toolbar-height-desktop: 64px !default;
$mat-toolbar-maximum-height-desktop: $mat-toolbar-height-desktop !default;
$mat-toolbar-minimum-height-desktop: $mat-toolbar-minimum-height !default;

$mat-toolbar-height-mobile: 56px !default;
$mat-toolbar-maximum-height-mobile: $mat-toolbar-height-mobile !default;
$mat-toolbar-minimum-height-mobile: $mat-toolbar-minimum-height !default;

$mat-toolbar-desktop-density-config: (
  height: (
    default: $mat-toolbar-height-desktop,
    maximum: $mat-toolbar-maximum-height-desktop,
    minimum: $mat-toolbar-minimum-height-desktop,
  )
) !default;

$mat-toolbar-mobile-density-config: (
  height: (
    default: $mat-toolbar-height-mobile,
    maximum: $mat-toolbar-maximum-height-mobile,
    minimum: $mat-toolbar-minimum-height-mobile,
  )
) !default;


@mixin _mat-toolbar-height($height) {
  .mat-toolbar-multiple-rows {
    min-height: $height;
  }
  .mat-toolbar-row, .mat-toolbar-single-row {
    height: $height;
  }
}

@mixin _mat-toolbar-color($palette) {
  background: mat-color($palette);
  color: mat-color($palette, default-contrast);
}

@mixin _mat-toolbar-form-field-overrides {
  .mat-form-field-underline,
  .mat-form-field-ripple,
  .mat-focused .mat-form-field-ripple {
    background-color: currentColor;
  }

  .mat-form-field-label,
  .mat-focused .mat-form-field-label,
  .mat-select-value,
  .mat-select-arrow,
  .mat-form-field.mat-focused .mat-select-arrow {
    color: inherit;
  }

  .mat-input-element {
    caret-color: currentColor;
  }
}

@mixin mat-toolbar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, 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);
    }

    @include _mat-toolbar-form-field-overrides;
  }
}

@mixin mat-toolbar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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;
  }
}

@mixin mat-toolbar-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height-desktop: mat-private-density-prop-value(
      $mat-toolbar-desktop-density-config, $density-scale, height);
  $height-mobile: mat-private-density-prop-value(
      $mat-toolbar-mobile-density-config, $density-scale, height);

  @include mat-private-density-legacy-compatibility() {
    // Set the default height for the toolbar.
    @include _mat-toolbar-height($height-desktop);

    // As per specs, toolbars should have a different height in mobile devices. This has been
    // specified in the old guidelines and is still observable in the new specifications by
    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy
    @media ($mat-xsmall) {
      @include _mat-toolbar-height($height-mobile);
    }
  }
}

@mixin mat-toolbar-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-toolbar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-toolbar-color($color);
    }
    @if $density != null {
      @include mat-toolbar-density($density);
    }
    @if $typography != null {
      @include mat-toolbar-typography($typography);
    }
  }
}





$mat-tooltip-target-height: 22px;
$mat-tooltip-font-size: 10px;
$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;

$mat-tooltip-handset-target-height: 30px;
$mat-tooltip-handset-font-size: 14px;
$mat-tooltip-handset-vertical-padding:
    ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;

@mixin mat-tooltip-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);

  .mat-tooltip {
    background: mat-color($background, tooltip, 0.9);
  }
}

@mixin mat-tooltip-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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;
  }

  .mat-tooltip-handset {
    font-size: $mat-tooltip-handset-font-size;
    padding-top: $mat-tooltip-handset-vertical-padding;
    padding-bottom: $mat-tooltip-handset-vertical-padding;
  }
}

@mixin _mat-tooltip-density($config-or-theme) {}

@mixin mat-tooltip-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tooltip') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tooltip-color($color);
    }
    @if $density != null {
      @include _mat-tooltip-density($density);
    }
    @if $typography != null {
      @include mat-tooltip-typography($typography);
    }
  }
}







@mixin mat-snack-bar-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $is-dark-theme: map-get($config, is-dark);
  $accent: map-get($config, accent);

  .mat-snack-bar-container {
    // Use the primary text on the dark theme, even though the lighter one uses
    // a secondary, because the contrast on the light primary text is poor.
    color: if($is-dark-theme, $dark-primary-text, $light-secondary-text);
    background: if($is-dark-theme, map-get($mat-grey, 50), #323232);

    @include mat-private-theme-elevation(6, $config);
  }

  .mat-simple-snackbar-action {
    color: if($is-dark-theme, inherit, mat-color($accent, text));
  }
}

@mixin mat-snack-bar-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .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-snack-bar-density($config-or-theme) {}

@mixin mat-snack-bar-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-snack-bar-color($color);
    }
    @if $density != null {
      @include _mat-snack-bar-density($density);
    }
    @if $typography != null {
      @include mat-snack-bar-typography($typography);
    }
  }
}














// Theme styles that only apply to the fill appearance of the form-field.

@mixin mat-form-field-fill-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));
  $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));
  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));
  $label-disabled-color: mat-color($foreground, disabled-text);

  .mat-form-field-appearance-fill {
    .mat-form-field-flex {
      background-color: $fill-background;
    }

    &.mat-form-field-disabled .mat-form-field-flex {
      background-color: $fill-disabled-background;
    }

    .mat-form-field-underline::before {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled {
      .mat-form-field-label {
        color: $label-disabled-color;
      }

      .mat-form-field-underline::before {
        background-color: transparent;
      }
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-fill-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)
             scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-fill-dedupe;

  $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;
}

@mixin mat-form-field-fill-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // 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 padding on top of the infix.
  $infix-padding-top: 0.25em;
  // The padding below the infix.
  $infix-padding-bottom: 0.75em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // The amount we offset the label from the input text in the fill appearance.
  $fill-appearance-label-offset: -0.5em;

  .mat-form-field-appearance-fill {
    .mat-form-field-infix {
      padding: $infix-padding-top 0 $infix-padding-bottom 0;
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding-top;
      margin-top: $fill-appearance-label-offset;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-fill-label-floating(
                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-fill-label-floating(
                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,
                $infix-margin-top);
      }
    }
  }
}

@mixin mat-private-form-field-fill-density($config-or-theme) {}

@mixin mat-form-field-fill-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-fill-color($color);
    }
    @if $density != null {
      @include mat-private-form-field-fill-density($density);
    }
    @if $typography != null {
      @include mat-form-field-fill-typography($typography);
    }
  }
}







// Theme styles that only apply to the legacy appearance of the form-field.

@mixin mat-form-field-legacy-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $label-color: mat-color($foreground, secondary-text);
  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));

  .mat-form-field-appearance-legacy {
    .mat-form-field-label {
      color: $label-color;
    }

    .mat-hint {
      color: $label-color;
    }

    .mat-form-field-underline {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled .mat-form-field-underline {
      @include mat-private-control-disabled-underline($underline-color);
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-legacy-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-legacy-label-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 + $mat-form-field-legacy-dedupe);
  // 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 + $mat-form-field-legacy-dedupe)
                  scale($font-scale);

  width: 100% / $font-scale + $mat-form-field-legacy-dedupe;

  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

// Same as mixin above, but omits the translateZ for printing purposes.
@mixin _mat-form-field-legacy-label-floating-print($font-scale, $infix-padding, $infix-margin-top) {
  // This results in a small jitter after the label floats on Firefox, which the
  // translateZ fixes.
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)
                  scale($font-scale);
  // 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.
  $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;
}

@mixin mat-form-field-legacy-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // 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 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;
  // 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-appearance-legacy {
    .mat-form-field-wrapper {
      padding-bottom: $wrapper-padding-bottom;
    }

    .mat-form-field-infix {
      padding: $infix-padding 0;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }

      // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-legacy-label-floating(
                $subscript-font-scale, $infix-padding, $infix-margin-top);
      }
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding;
    }

    .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 {
      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});
    }
  }

  // translateZ causes the label to not appear while printing, so we override it to not
  // apply translateZ while printing
  @media print {
    .mat-form-field-appearance-legacy {
      &.mat-form-field-can-float {
        &.mat-form-field-should-float .mat-form-field-label,
        .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }

        // @breaking-change 8.0.0 will rely on AutofillMonitor instead.
        .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper
        .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }

        // Server-side rendered matInput with a label attribute but label not shown
        // (used as a pure CSS stand-in for mat-form-field-should-float).
        .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
        .mat-form-field-label {
          @include _mat-form-field-legacy-label-floating-print(
                  $subscript-font-scale, $infix-padding, $infix-margin-top);
        }
      }
    }
  }
}

@mixin mat-private-form-field-legacy-density($config-or-theme) {}

@mixin mat-form-field-legacy-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-legacy-color($color);
    }
    @if $density != null {
      @include mat-private-form-field-legacy-density($density);
    }
    @if $typography != null {
      @include mat-form-field-legacy-typography($typography);
    }
  }
}







// Theme styles that only apply to the outline appearance of the form-field.

@mixin mat-form-field-outline-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $label-disabled-color: mat-color($foreground, disabled-text);
  $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));
  $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
  $outline-color-primary: mat-color($primary);
  $outline-color-accent: mat-color($accent);
  $outline-color-warn: mat-color($warn);
  $outline-color-disabled: mat-color($foreground, divider, if($is-dark-theme, 0.15, 0.06));

  .mat-form-field-appearance-outline {
    .mat-form-field-outline {
      color: $outline-color;
    }

    .mat-form-field-outline-thick {
      color: $outline-color-hover;
    }

    &.mat-focused {
      .mat-form-field-outline-thick {
        color: $outline-color-primary;
      }

      &.mat-accent .mat-form-field-outline-thick {
        color: $outline-color-accent;
      }

      &.mat-warn .mat-form-field-outline-thick {
        color: $outline-color-warn;
      }
    }

    // Class repeated so that rule is specific enough to override focused accent color case.
    &.mat-form-field-invalid.mat-form-field-invalid {
      .mat-form-field-outline-thick {
        color: $outline-color-warn;
      }
    }

    &.mat-form-field-disabled {
      .mat-form-field-label {
        color: $label-disabled-color;
      }

      .mat-form-field-outline {
        color: $outline-color-disabled;
      }
    }
  }
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-outline-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)
  scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-outline-dedupe;

  $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;
}

@mixin mat-form-field-outline-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // 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 padding above and below the infix.
  $infix-padding: 1em;
  // The margin applied to the form-field-infix to reserve space for the floating label.
  $infix-margin-top: 1em * $line-height * $subscript-font-scale;
  // 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.
  $subscript-margin-top: 0.5em / $subscript-font-scale;
  // 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;
  // The amount we offset the label from the input text in the outline appearance.
  $outline-appearance-label-offset: -0.25em;

  .mat-form-field-appearance-outline {
    .mat-form-field-infix {
      padding: $infix-padding 0 $infix-padding 0;
    }

    .mat-form-field-label {
      top: $infix-margin-top + $infix-padding;
      margin-top: $outline-appearance-label-offset;
    }

    &.mat-form-field-can-float {
      &.mat-form-field-should-float .mat-form-field-label,
      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }

      // Server-side rendered matInput with a label attribute but label not shown
      // (used as a pure CSS stand-in for mat-form-field-should-float).
      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
      .mat-form-field-label {
        @include _mat-form-field-outline-label-floating(
                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,
                $infix-margin-top);
      }
    }
  }
}

@mixin mat-private-form-field-outline-density($config-or-theme) {}

@mixin mat-form-field-outline-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-outline-color($color);
    }
    @if $density != null {
      @include mat-private-form-field-outline-density($density);
    }
    @if $typography != null {
      @include mat-form-field-outline-typography($typography);
    }
  }
}








// Theme styles that only apply to the standard appearance of the form-field.

@mixin mat-form-field-standard-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));

  .mat-form-field-appearance-standard {
    .mat-form-field-underline {
      background-color: $underline-color;
    }

    &.mat-form-field-disabled .mat-form-field-underline {
      @include mat-private-control-disabled-underline($underline-color);
    }
  }
}

@mixin mat-form-field-standard-typography($config-or-theme) {}

@mixin mat-private-form-field-standard-density($config-or-theme) {}

@mixin mat-form-field-standard-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field-standard') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-standard-color($color);
    }
    @if $density != null {
      @include mat-private-form-field-standard-density($density);
    }
    @if $typography != null {
      @include mat-form-field-standard-typography($typography);
    }
  }
}


// Color styles that apply to all appearances of the form-field.
@mixin mat-form-field-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $primary: map-get($config, primary);
  $accent: map-get($config, accent);
  $warn: map-get($config, warn);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);
  $is-dark-theme: map-get($config, is-dark);

  // Label colors. Required is used for the `*` star shown in the label.
  $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));
  $focused-label-color: mat-color($primary, text);
  $required-label-color: mat-color($accent, text);

  // Underline colors.
  $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));
  $underline-color-accent: mat-color($accent, text);
  $underline-color-warn: mat-color($warn, text);
  $underline-focused-color: mat-color($primary, text);

  .mat-form-field-label {
    color: $label-color;
  }

  .mat-hint {
    color: $label-color;
  }

  .mat-form-field.mat-focused .mat-form-field-label {
    color: $focused-label-color;

    &.mat-accent {
      color: $underline-color-accent;
    }

    &.mat-warn {
      color: $underline-color-warn;
    }
  }

  .mat-focused .mat-form-field-required-marker {
    color: $required-label-color;
  }

  .mat-form-field-ripple {
    background-color: $underline-color-base;
  }

  .mat-form-field.mat-focused {
    .mat-form-field-ripple {
      background-color: $underline-focused-color;

      &.mat-accent {
        background-color: $underline-color-accent;
      }

      &.mat-warn {
        background-color: $underline-color-warn;
      }
    }
  }

  .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {
    .mat-form-field-infix::after {
      color: $underline-focused-color;
    }

    &.mat-accent .mat-form-field-infix::after {
      color: $underline-color-accent;
    }

    &.mat-warn .mat-form-field-infix::after {
      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.mat-form-field-invalid {
    .mat-form-field-label {
      color: $underline-color-warn;

      &.mat-accent,
      .mat-form-field-required-marker {
        color: $underline-color-warn;
      }
    }

    .mat-form-field-ripple,
    .mat-form-field-ripple.mat-accent {
      background-color: $underline-color-warn;
    }
  }

  .mat-error {
    color: $underline-color-warn;
  }

  @include mat-form-field-legacy-color($config);
  @include mat-form-field-standard-color($config);
  @include mat-form-field-fill-color($config);
  @include mat-form-field-outline-color($config);
}

// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,
// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some
// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters
// an unknown pseudo-class it will discard the entire rule set.
$mat-form-field-dedupe: 0;

// Applies a floating label above the form field control itself.
@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {
  transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)
             scale($font-scale);
  width: 100% / $font-scale + $mat-form-field-dedupe;

  $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;
}

@mixin mat-form-field-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  // 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 padding on the infix. Mocks show half of the text size.
  $infix-padding: 0.5em;
  // 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.
  $subscript-margin-top: 0.5em / $subscript-font-scale;
  // 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 {
    @include mat-typography-level-to-styles($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-can-float {
    &.mat-form-field-should-float .mat-form-field-label,
    .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
      @include _mat-form-field-label-floating(
              $subscript-font-scale, $infix-padding, $infix-margin-top);
    }

    // Server-side rendered matInput with a label attribute but label not shown
    // (used as a pure CSS stand-in for mat-form-field-should-float).
    .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper
        .mat-form-field-label {
      @include _mat-form-field-label-floating(
              $subscript-font-scale, $infix-padding, $infix-margin-top);
    }
  }

  .mat-form-field-label-wrapper {
    top: -$infix-margin-top;
    padding-top: $infix-margin-top;
  }

  .mat-form-field-label {
    top: $infix-margin-top + $infix-padding;
  }

  .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});
  }

  @include mat-form-field-legacy-typography($config);
  @include mat-form-field-standard-typography($config);
  @include mat-form-field-fill-typography($config);
  @include mat-form-field-outline-typography($config);
}

@mixin mat-form-field-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  @include mat-private-form-field-legacy-density($density-scale);
  @include mat-private-form-field-standard-density($density-scale);
  @include mat-private-form-field-fill-density($density-scale);
  @include mat-private-form-field-outline-density($density-scale);
}

@mixin mat-form-field-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-form-field') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-form-field-color($color);
    }
    @if $density != null {
      @include mat-form-field-density($density);
    }
    @if $typography != null {
      @include mat-form-field-typography($typography);
    }
  }
}





$mat-tree-node-height: 48px !default;
// Minimum height for tree nodes in highest density is difficult to determine as
// developers can display arbitrary content. We use a minimum height which ensures
// that common content placed in tree nodes does not exceed (e.g. icons, checkboxes).
$mat-tree-node-minimum-height: 24px !default;
$mat-tree-node-maximum-height: $mat-tree-node-height !default;

$mat-tree-density-config: (
  height: (
    default: $mat-tree-node-height,
    maximum: $mat-tree-node-maximum-height,
    minimum: $mat-tree-node-minimum-height,
  )
) !default;


@mixin mat-tree-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  $background: map-get($config, background);
  $foreground: map-get($config, foreground);

  .mat-tree {
    background: mat-color($background, 'card');
  }

  .mat-tree-node,
  .mat-nested-tree-node {
    color: mat-color($foreground, text);
  }
}

@mixin mat-tree-typography($config-or-theme) {
  $config: mat-get-typography-config($config-or-theme);
  .mat-tree {
    font-family: mat-font-family($config);
  }

  .mat-tree-node,
  .mat-nested-tree-node {
    font-weight: mat-font-weight($config, body-1);
    font-size: mat-font-size($config, body-1);
  }
}

@mixin mat-tree-density($config-or-theme) {
  $density-scale: mat-get-density-config($config-or-theme);
  $height: mat-private-density-prop-value($mat-tree-density-config, $density-scale, height);

  @include mat-private-density-legacy-compatibility() {
    .mat-tree-node {
      min-height: $height;
    }
  }
}

@mixin mat-tree-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-tree') {
    $color: mat-get-color-config($theme);
    $density: mat-get-density-config($theme);
    $typography: mat-get-typography-config($theme);

    @if $color != null {
      @include mat-tree-color($color);
    }
    @if $density != null {
      @include mat-tree-density($density);
    }
    @if $typography != null {
      @include mat-tree-typography($typography);
    }
  }
}




// Includes all of the typographic styles.
@mixin angular-material-typography($config-or-theme: null) {
  $config: if(mat-private-is-theme-object($config-or-theme),
      mat-get-typography-config($config-or-theme), $config-or-theme);

  // If no actual color configuration has been specified, create a default one.
  @if not $config {
    $config: mat-typography-config();
  }

  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
  // specify a `typography` config while setting `color` and `density` to `null`. This is currently
  // not possible as it would introduce a circular dependency for typography because the `mat-core`
  // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which
  // would then load `all-theme` again. This ultimately results a circular dependency.

  @include mat-badge-typography($config);
  @include mat-base-typography($config);
  @include mat-autocomplete-typography($config);
  @include mat-bottom-sheet-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-divider-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-sort-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);
  @include mat-tree-typography($config);
}


// Mixin that renders all of the core styles that are not theme-dependent.
@mixin mat-core($typography-config: null) {
  @include angular-material-typography($typography-config);
  @include mat-ripple();
  @include cdk-a11y();
  @include cdk-overlay();
  @include cdk-text-field();

  @include mat-private-strong-focus-indicators-positioning();
  @include _mat-mdc-core();
}

@mixin mat-core-color($config-or-theme) {
  $config: mat-get-color-config($config-or-theme);
  // Wrapper element that provides the theme background when the user's content isn't
  // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand
  // selector in case the mixin is included at the top level.
  .mat-app-background#{if(&, ', &.mat-app-background', '')} {
    $background: map-get($config, background);
    $foreground: map-get($config, foreground);

    background-color: mat-color($background, background);
    color: mat-color($foreground, text);
  }

  // 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-prefix}#{$zValue} {
      @include mat-private-theme-elevation($zValue, $config);
    }
  }

  // Marker that is used to determine whether the user has added a theme to their page.
  @at-root {
    .mat-theme-loaded-marker {
      display: none;
    }
  }
}

// Mixin that renders all of the core styles that depend on the theme.
@mixin mat-core-theme($theme-or-color-config) {
  $theme: mat-private-legacy-get-theme($theme-or-color-config);
  // Wrap the sub-theme includes in the duplicate theme styles mixin. This ensures that
  // there won't be multiple warnings. e.g. if `mat-core-theme` reports a warning, then
  // the imported themes (such as `mat-ripple-theme`) should not report again.
  @include mat-private-check-duplicate-theme-styles($theme, 'mat-core') {
    @include mat-ripple-theme($theme);
    @include mat-option-theme($theme);
    @include mat-optgroup-theme($theme);
    @include mat-pseudo-checkbox-theme($theme);

    $color: mat-get-color-config($theme);
    @if $color != null {
      @include mat-core-color($color);
    }
  }
}

// Mixin that renders all of the core MDC styles. Private mixin included with `mat-core`.
@mixin _mat-mdc-core() {
  @include _mat-mdc-strong-focus-indicators-positioning();
}

// Mixin that ensures focus indicator host elements are positioned so that the focus indicator
// pseudo element within is positioned relative to the host. Private mixin included within
// `_mat-mdc-core`.
@mixin _mat-mdc-strong-focus-indicators-positioning() {
  .mat-mdc-focus-indicator {
    position: relative;
  }
}





































// Create a theme.
@mixin angular-material-theme($theme-or-color-config) {
  $dedupe-key: 'angular-material-theme';
  @include mat-private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) {
    @include mat-core-theme($theme-or-color-config);
    @include mat-autocomplete-theme($theme-or-color-config);
    @include mat-badge-theme($theme-or-color-config);
    @include mat-bottom-sheet-theme($theme-or-color-config);
    @include mat-button-theme($theme-or-color-config);
    @include mat-button-toggle-theme($theme-or-color-config);
    @include mat-card-theme($theme-or-color-config);
    @include mat-checkbox-theme($theme-or-color-config);
    @include mat-chips-theme($theme-or-color-config);
    @include mat-table-theme($theme-or-color-config);
    @include mat-datepicker-theme($theme-or-color-config);
    @include mat-dialog-theme($theme-or-color-config);
    @include mat-divider-theme($theme-or-color-config);
    @include mat-expansion-panel-theme($theme-or-color-config);
    @include mat-form-field-theme($theme-or-color-config);
    @include mat-grid-list-theme($theme-or-color-config);
    @include mat-icon-theme($theme-or-color-config);
    @include mat-input-theme($theme-or-color-config);
    @include mat-list-theme($theme-or-color-config);
    @include mat-menu-theme($theme-or-color-config);
    @include mat-paginator-theme($theme-or-color-config);
    @include mat-progress-bar-theme($theme-or-color-config);
    @include mat-progress-spinner-theme($theme-or-color-config);
    @include mat-radio-theme($theme-or-color-config);
    @include mat-select-theme($theme-or-color-config);
    @include mat-sidenav-theme($theme-or-color-config);
    @include mat-slide-toggle-theme($theme-or-color-config);
    @include mat-slider-theme($theme-or-color-config);
    @include mat-stepper-theme($theme-or-color-config);
    @include mat-sort-theme($theme-or-color-config);
    @include mat-tabs-theme($theme-or-color-config);
    @include mat-toolbar-theme($theme-or-color-config);
    @include mat-tooltip-theme($theme-or-color-config);
    @include mat-tree-theme($theme-or-color-config);
    @include mat-snack-bar-theme($theme-or-color-config);
  }
}



// Includes all of the color styles.
@mixin angular-material-color($config-or-theme) {
  // In case a theme object has been passed instead of a configuration for
  // the color system, extract the color config from the theme object.
  $config: if(mat-private-is-theme-object($config-or-theme),
      mat-get-color-config($config-or-theme), $config-or-theme);

  @if $config == null {
    @error 'No color configuration specified.';
  }

  @include angular-material-theme((
    color: $config,
    typography: null,
    density: null,
  ));
}










// Includes all of the density styles.
@mixin angular-material-density($config-or-theme) {
  // In case a theme object has been passed instead of a configuration for
  // the density system, extract the density config from the theme object.
  $config: if(mat-private-is-theme-object($config-or-theme),
      mat-get-density-config($config-or-theme), $config-or-theme);

  @if $config == null {
    @error 'No density configuration specified.';
  }

  // TODO: COMP-309: Do not use individual mixins. Instead, use the all-theme mixin and only
  // specify a `density` config while setting `color` and `typography` to `null`. This is currently
  // not possible as it would introduce a circular dependency for density because the `mat-core`
  // mixin that is transitively loaded by the `all-theme` file, imports `all-density` which
  // would then load `all-theme` again. This ultimately results a circular dependency.

  @include mat-expansion-panel-density($config);
  @include mat-stepper-density($config);
  @include mat-toolbar-density($config);
  @include mat-tree-density($config);
  @include mat-paginator-density($config);
  @include mat-form-field-density($config);
  @include mat-button-toggle-density($config);
}