@ixon-cdk/simulator 1.1.0-next.6 → 1.1.0-next.9

package/dist/styles.5e5857c3faa6ae37.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["./apps/simulator/src/styles.scss","./node_modules/tippy.js/dist/tippy.css","./node_modules/tippy.js/animations/scale-subtle.css","./node_modules/@angular/material/badge/_badge-theme.scss","./node_modules/@angular/material/core/typography/_typography.scss","./node_modules/@angular/material/core/typography/_typography-utils.scss","./node_modules/@angular/material/bottom-sheet/_bottom-sheet-theme.scss","./node_modules/@angular/material/button/_button-theme.scss","./node_modules/@angular/material/button-toggle/_button-toggle-theme.scss","./node_modules/@angular/material/card/_card-theme.scss","./node_modules/@angular/material/checkbox/_checkbox-theme.scss","./node_modules/@angular/material/chips/_chips-theme.scss","./node_modules/@angular/material/table/_table-theme.scss","./node_modules/@angular/material/datepicker/_datepicker-theme.scss","./node_modules/@angular/material/dialog/_dialog-theme.scss","./node_modules/@angular/material/expansion/_expansion-theme.scss","./node_modules/@angular/material/form-field/_form-field-theme.scss","./node_modules/@angular/material/form-field/_form-field-legacy-theme.scss","./node_modules/@angular/material/form-field/_form-field-fill-theme.scss","./node_modules/@angular/material/form-field/_form-field-outline-theme.scss","./node_modules/@angular/material/grid-list/_grid-list-theme.scss","./node_modules/@angular/material/core/style/_list-common.scss","./node_modules/@angular/material/input/_input-theme.scss","./node_modules/@angular/material/menu/_menu-theme.scss","./node_modules/@angular/material/paginator/_paginator-theme.scss","./node_modules/@angular/material/radio/_radio-theme.scss","./node_modules/@angular/material/select/_select-theme.scss","./node_modules/@angular/material/slide-toggle/_slide-toggle-theme.scss","./node_modules/@angular/material/slider/_slider-theme.scss","./node_modules/@angular/material/stepper/_stepper-theme.scss","./node_modules/@angular/material/tabs/_tabs-theme.scss","./node_modules/@angular/material/toolbar/_toolbar-theme.scss","./node_modules/@angular/material/tooltip/_tooltip-theme.scss","./node_modules/@angular/material/list/_list-theme.scss","./node_modules/@angular/material/core/option/_option-theme.scss","./node_modules/@angular/material/core/option/_optgroup-theme.scss","./node_modules/@angular/material/snack-bar/_snack-bar-theme.scss","./node_modules/@angular/material/tree/_tree-theme.scss","./node_modules/@angular/material/core/ripple/_ripple.scss","./node_modules/@angular/cdk/a11y/_index.scss","./node_modules/@angular/cdk/overlay/_index.scss","./node_modules/@angular/cdk/text-field/_index.scss","./node_modules/@angular/material/core/focus-indicators/_private.scss","./node_modules/@angular/material/core/style/_layout-common.scss","./shared/src/common/modules/material/material.scss","./node_modules/@angular/flex-layout/core/sass/_layout-bp.scss","./shared/src/common/common.scss","./shared/src/common/cards/styles.scss","./shared/src/common/lists/styles.scss","./shared/src/common/inputs/agent-select/agent-select.scss","./shared/src/common/inputs/audience-select/audience-select.scss","./shared/src/common/inputs/checkboxes.scss","./shared/src/common/inputs/material-icon-fieldset/material-icon-fieldset.scss","./shared/src/common/inputs/role-select/role-select.scss","./shared/src/common/pages/component-properties/styles.scss","./shared/src/lib/tooltip/styles.scss"],"sourcesContent":["/* You can add global styles to this file, and also import other style files */\n@use '@angular/cdk' as cdk;\n@use '@angular/material' as mat;\n\n@include mat.core();\n\n// Set custom-autofill inputs to have no background and accent color text.\ninput.mat-form-field-autofill-control {\n  @include cdk.text-field-autofill-color(transparent, var(--accent));\n}\n\n// Disables angular material theme warning\n.mat-theme-loaded-marker {\n  display: none;\n}\n\n@import 'common/common';\n@import 'common/cards/styles';\n@import 'common/dialogs/styles';\n@import 'common/inputs/styles';\n@import 'common/lists/styles';\n@import 'common/pages/component-properties/styles';\n@import 'lib/tooltip/styles';\n\nhtml,\nbody {\n  height: 100%;\n}\n\nbody {\n  margin: 0;\n  overflow: hidden;\n  font-family: Roboto, 'Helvetica Neue', sans-serif;\n  background-color: var(--body-bg);\n  color: var(--body-color);\n  direction: ltr;\n}\n",".tippy-box[data-animation=fade][data-state=hidden]{opacity:0}[data-tippy-root]{max-width:calc(100vw - 10px)}.tippy-box{position:relative;background-color:#333;color:#fff;border-radius:4px;font-size:14px;line-height:1.4;white-space:normal;outline:0;transition-property:transform,visibility,opacity}.tippy-box[data-placement^=top]>.tippy-arrow{bottom:0}.tippy-box[data-placement^=top]>.tippy-arrow:before{bottom:-7px;left:0;border-width:8px 8px 0;border-top-color:initial;transform-origin:center top}.tippy-box[data-placement^=bottom]>.tippy-arrow{top:0}.tippy-box[data-placement^=bottom]>.tippy-arrow:before{top:-7px;left:0;border-width:0 8px 8px;border-bottom-color:initial;transform-origin:center bottom}.tippy-box[data-placement^=left]>.tippy-arrow{right:0}.tippy-box[data-placement^=left]>.tippy-arrow:before{border-width:8px 0 8px 8px;border-left-color:initial;right:-7px;transform-origin:center left}.tippy-box[data-placement^=right]>.tippy-arrow{left:0}.tippy-box[data-placement^=right]>.tippy-arrow:before{left:-7px;border-width:8px 8px 8px 0;border-right-color:initial;transform-origin:center right}.tippy-box[data-inertia][data-state=visible]{transition-timing-function:cubic-bezier(.54,1.5,.38,1.11)}.tippy-arrow{width:16px;height:16px;color:#333}.tippy-arrow:before{content:\"\";position:absolute;border-color:transparent;border-style:solid}.tippy-content{position:relative;padding:5px 9px;z-index:1}",".tippy-box[data-animation=scale-subtle][data-placement^=top]{transform-origin:bottom}.tippy-box[data-animation=scale-subtle][data-placement^=bottom]{transform-origin:top}.tippy-box[data-animation=scale-subtle][data-placement^=left]{transform-origin:right}.tippy-box[data-animation=scale-subtle][data-placement^=right]{transform-origin:left}.tippy-box[data-animation=scale-subtle][data-state=hidden]{transform:scale(.8);opacity:0}","// This contains all of the styles for the badge\n// rather than just the color/theme because of\n// no style sheet support for directives.\n@use 'sass:color';\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\n@use '@angular/cdk';\n\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$font-size: 12px;\n$font-weight: 600;\n$default-size: 22px !default;\n$small-size: $default-size - 6;\n$large-size: $default-size + 6;\n$_badge-structure-emitted: false !default;\n\n// Mixin for building offset given different sizes\n@mixin _badge-size($size) {\n  // This mixin isn't used in the context of a theme so we can disable the ampersand check.\n  // stylelint-disable material/no-ampersand-beyond-selector-start\n  .mat-badge-content {\n    width: $size;\n    height: $size;\n    line-height: $size;\n  }\n\n  &.mat-badge-above {\n    .mat-badge-content {\n      top: math.div(-$size, 2);\n    }\n  }\n\n  &.mat-badge-below {\n    .mat-badge-content {\n      bottom: math.div(-$size, 2);\n    }\n  }\n\n  &.mat-badge-before {\n    .mat-badge-content {\n      left: -$size;\n    }\n  }\n\n  [dir='rtl'] &.mat-badge-before {\n    .mat-badge-content {\n      left: auto;\n      right: -$size;\n    }\n  }\n\n  &.mat-badge-after {\n    .mat-badge-content {\n      right: -$size;\n    }\n  }\n\n  [dir='rtl'] &.mat-badge-after {\n    .mat-badge-content {\n      right: auto;\n      left: -$size;\n    }\n  }\n\n  &.mat-badge-overlap {\n    &.mat-badge-before {\n      .mat-badge-content {\n        left: math.div(-$size, 2);\n      }\n    }\n\n    [dir='rtl'] &.mat-badge-before {\n      .mat-badge-content {\n        left: auto;\n        right: math.div(-$size, 2);\n      }\n    }\n\n    &.mat-badge-after {\n      .mat-badge-content {\n        right: math.div(-$size, 2);\n      }\n    }\n\n    [dir='rtl'] &.mat-badge-after {\n      .mat-badge-content {\n        right: auto;\n        left: math.div(-$size, 2);\n      }\n    }\n  }\n  // stylelint-enable\n}\n\n// Structural styles for the badge. They have to be included as a part of the theme,\n// because the badge is a directive and we have no other way of attaching styles to it.\n@mixin _badge-structure {\n  .mat-badge {\n    position: relative;\n  }\n\n  // The badge should make sure its host is overflow visible so that the badge content\n  // can be rendered outside of the element. Some components such as <mat-icon> explicitly\n  // style `overflow: hidden` so this requires extra specificity so that it does not\n  // depend on style load order.\n  .mat-badge.mat-badge {\n    overflow: visible;\n  }\n\n  .mat-badge-hidden {\n    .mat-badge-content {\n      display: none;\n    }\n  }\n\n  .mat-badge-content {\n    position: absolute;\n    text-align: center;\n    display: inline-block;\n    border-radius: 50%;\n    transition: transform 200ms ease-in-out;\n    transform: scale(0.6);\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    pointer-events: none;\n  }\n\n  .ng-animate-disabled .mat-badge-content,\n  .mat-badge-content._mat-animation-noopable {\n    transition: none;\n  }\n\n  // The active class is added after the element is added\n  // so it can animate scale to default\n  .mat-badge-content.mat-badge-active {\n    // Scale to `none` instead of `1` to avoid blurry text in some browsers.\n    transform: none;\n  }\n\n  .mat-badge-small {\n    @include _badge-size($small-size);\n  }\n\n  .mat-badge-medium {\n    @include _badge-size($default-size);\n  }\n\n  .mat-badge-large {\n    @include _badge-size($large-size);\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $primary: map.get($config, primary);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-badge-content {\n    color: theming.get-color-from-palette($primary, default-contrast);\n    background: theming.get-color-from-palette($primary);\n\n    @include cdk.high-contrast(active, off) {\n      outline: solid 1px;\n      border-radius: 0;\n    }\n  }\n\n  .mat-badge-accent {\n    .mat-badge-content {\n      background: theming.get-color-from-palette($accent);\n      color: theming.get-color-from-palette($accent, default-contrast);\n    }\n  }\n\n  .mat-badge-warn {\n    .mat-badge-content {\n      color: theming.get-color-from-palette($warn, default-contrast);\n      background: theming.get-color-from-palette($warn);\n    }\n  }\n\n  .mat-badge-disabled {\n    .mat-badge-content {\n      $app-background: theming.get-color-from-palette($background, 'background');\n      $badge-color: theming.get-color-from-palette($foreground, disabled-button);\n\n      // The disabled color usually has some kind of opacity, but because the badge is overlayed\n      // on top of something else, it won't look good if it's opaque. If it is a color *type*,\n      // we convert it into a solid color by taking the opacity from the rgba value and using\n      // the value to determine the percentage of the background to put into foreground when\n      // mixing the colors together.\n      @if (meta.type-of($badge-color) == color and meta.type-of($app-background) == color) {\n        $badge-opacity: opacity($badge-color);\n        background: color.mix($app-background, rgba($badge-color, 1), (1 - $badge-opacity) * 100%);\n      }\n      @else {\n        background: $badge-color;\n      }\n\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-badge-content {\n    font-weight: $font-weight;\n    font-size: $font-size;\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-badge-small .mat-badge-content {\n    // Set the font size to 75% of the original.\n    font-size: $font-size * 0.75;\n  }\n\n  .mat-badge-large .mat-badge-content {\n    font-size: $font-size * 2;\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-badge') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    // Try to reduce the number of times that the structural styles are emitted.\n    @if not $_badge-structure-emitted {\n      @include _badge-structure;\n\n      // Only flip the flag if the mixin is included at the top level. Otherwise the first\n      // inclusion might be inside of a theme class which will exclude the structural styles\n      // from all other themes.\n      @if not & {\n        $_badge-structure-emitted: true !global;\n      }\n    }\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'typography-utils';\n@use '../theming/theming';\n\n/// Defines a typography level from the Material Design spec.\n/// @param {String} $font-size The font-size for this level.\n/// @param {String | Number} $line-height The line-height for this level.\n/// @param {String | Number} $font-weight The font-weight for this level.\n/// @param {String} $font-family The font-family for this level.\n/// @param {String} $letter-spacing The letter-spacing for this level.\n/// @returns {Map} A map representing the definition of this typographic level.\n@function define-typography-level(\n  $font-size,\n  $line-height: $font-size,\n  $font-weight: 400,\n  $font-family: null,\n  $letter-spacing: normal) {\n\n  @return (\n    font-size: $font-size,\n    line-height: $line-height,\n    font-weight: $font-weight,\n    font-family: $font-family,\n    letter-spacing: $letter-spacing\n  );\n}\n\n/// Defines a collection of typography levels to configure typography for an application.\n/// Any level not specified defaults to the values defined in the Material Design specification:\n/// https://material.io/guidelines/style/typography.html.\n///\n/// Note that the Material Design specification does not describe explicit letter-spacing values.\n/// The values here come from reverse engineering the Material Design examples.\n/// @param {String} $font-family Default font-family for levels that don't specify font-family.\n/// @param {Map} $display-4 Configuration for the \"display-4\" typographic level.\n/// @param {Map} $display-3 Configuration for the \"display-3\" typographic level.\n/// @param {Map} $display-2 Configuration for the \"display-2\" typographic level.\n/// @param {Map} $display-1 Configuration for the \"display-1\" typographic level.\n/// @param {Map} $headline Configuration for the \"headline\" typographic level.\n/// @param {Map} $title Configuration for the \"title\" typographic level.\n/// @param {Map} $subheading-2 Configuration for the \"subheading-2\" typographic level.\n/// @param {Map} $subheading-1 Configuration for the \"subheading-1\" typographic level.\n/// @param {Map} $body-2 Configuration for the \"body-2\" typographic level.\n/// @param {Map} $body-1 Configuration for the \"body-1\" typographic level.\n/// @param {Map} $caption Configuration for the \"caption\" typographic level.\n/// @param {Map} $button Configuration for the \"button\" typographic level.\n/// @param {Map} $input Configuration for the \"input\" typographic level.\n/// @returns {Map} A typography config for the application.\n@function define-typography-config(\n  $font-family:   'Roboto, \"Helvetica Neue\", sans-serif',\n  $display-4:     define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),\n  $display-3:     define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),\n  $display-2:     define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),\n  $display-1:     define-typography-level(34px, 40px, 400),\n  $headline:      define-typography-level(24px, 32px, 400),\n  $title:         define-typography-level(20px, 32px, 500),\n  $subheading-2:  define-typography-level(16px, 28px, 400),\n  $subheading-1:  define-typography-level(15px, 24px, 400),\n  $body-2:        define-typography-level(14px, 24px, 500),\n  $body-1:        define-typography-level(14px, 20px, 400),\n  $caption:       define-typography-level(12px, 20px, 400),\n  $button:        define-typography-level(14px, 14px, 500),\n  // Line-height must be unit-less fraction of the font-size.\n  $input:         define-typography-level(inherit, 1.125, 400)\n) {\n\n  // Declare an initial map with all of the levels.\n  $config: (\n    display-4:      $display-4,\n    display-3:      $display-3,\n    display-2:      $display-2,\n    display-1:      $display-1,\n    headline:       $headline,\n    title:          $title,\n    subheading-2:   $subheading-2,\n    subheading-1:   $subheading-1,\n    body-2:         $body-2,\n    body-1:         $body-1,\n    caption:        $caption,\n    button:         $button,\n    input:          $input,\n  );\n\n  // Loop through the levels and set the `font-family` of the ones that don't have one to the base.\n  // Note that Sass can't modify maps in place, which means that we need to merge and re-assign.\n  @each $key, $level in $config {\n    @if map.get($level, font-family) == null {\n      $new-level: map.merge($level, (font-family: $font-family));\n      $config: map.merge($config, ($key: $new-level));\n    }\n  }\n\n  // Add the base font family to the config.\n  @return map.merge($config, (font-family: $font-family));\n}\n\n// Whether a config is for the Material Design 2018 typography system.\n@function private-typography-is-2018-config($config) {\n  @return map.get($config, headline-1) != null;\n}\n\n// Whether a config is for the Material Design 2014 typography system.\n@function private-typography-is-2014-config($config) {\n  @return map.get($config, headline) != null;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2014 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n//\n// Components using this function should be migrated to normalize to the 2018 style config instead.\n// New components should not use this function.\n@function private-typography-to-2014-config($config) {\n  @if $config == null {\n    @return null;\n  }\n  @if not private-typography-is-2014-config($config) {\n    $args: (\n        display-4: map.get($config, headline-1),\n        display-3: map.get($config, headline-2),\n        display-2: map.get($config, headline-3),\n        display-1: map.get($config, headline-4),\n        headline: map.get($config, headline-5),\n        title: map.get($config, headline-6),\n        subheading-2: map.get($config, subtitle-1),\n        subheading-1: map.get($config, subtitle-2),\n        body-2: map.get($config, body-1),\n        body-1: map.get($config, body-2),\n        button: map.get($config, button),\n        caption: map.get($config, caption),\n    );\n    $non-null-args: ();\n    @each $key, $value in $args {\n      @if $value != null {\n        $non-null-args: map.merge($non-null-args, ($key: $value));\n      }\n    }\n    @return define-typography-config($non-null-args...);\n  }\n  @return $config;\n}\n\n// Given a config for either the 2014 or 2018 Material Design typography system,\n// produces a normalized typography config for the 2018 Material Design typography system.\n// 2014 - https://material.io/archive/guidelines/style/typography.html#typography-styles\n// 2018 - https://material.io/design/typography/the-type-system.html#type-scale\n@function private-typography-to-2018-config($config) {\n  @if $config == null {\n    @return null;\n  }\n  @if not private-typography-is-2018-config($config) {\n    @return (\n        headline-1: map.get($config, display-4),\n        headline-2: map.get($config, display-3),\n        headline-3: map.get($config, display-2),\n        headline-4: map.get($config, display-1),\n        headline-5: map.get($config, headline),\n        headline-6: map.get($config, title),\n        subtitle-1: map.get($config, subheading-2),\n\n        // These mappings are odd, but body-2 in the 2014 system actually looks closer to subtitle-2\n        // in the 2018 system, and subeading-1 in the 2014 system looks more like body-1 in the 2018\n        // system.\n        subtitle-2: map.get($config, body-2),\n        body-1: map.get($config, subheading-1),\n\n        body-2: map.get($config, body-1),\n        button: map.get($config, button),\n        caption: map.get($config, caption),\n        overline: if(map.get($config, overline), map.get($config, overline),\n            define-typography-level(12px, 32px, 500)\n        )\n    );\n  }\n  @return $config;\n}\n\n/// Emits baseline typographic styles based on a given config.\n/// @param {Map} $config-or-theme A typography config for an entire theme.\n/// @param {String} $selector Ancestor selector under which native elements, such as h1, will\n///     be styled.\n@mixin typography-hierarchy($config-or-theme, $selector: '.mat-typography') {\n  $config: private-typography-to-2014-config(theming.get-typography-config($config-or-theme));\n\n  // Note that it seems redundant to prefix the class rules with the `$selector`, however it's\n  // necessary if we want to allow people to overwrite the tag selectors. This is due to\n  // selectors like `#{$selector} h1` being more specific than ones like `.mat-title`.\n  .mat-h1,\n  .mat-headline,\n  #{$selector} .mat-h1,\n  #{$selector} .mat-headline,\n  #{$selector} h1 {\n    @include typography-utils.typography-level($config, headline);\n    margin: 0 0 16px;\n  }\n\n  .mat-h2,\n  .mat-title,\n  #{$selector} .mat-h2,\n  #{$selector} .mat-title,\n  #{$selector} h2 {\n    @include typography-utils.typography-level($config, title);\n    margin: 0 0 16px;\n  }\n\n  .mat-h3,\n  .mat-subheading-2,\n  #{$selector} .mat-h3,\n  #{$selector} .mat-subheading-2,\n  #{$selector} h3 {\n    @include typography-utils.typography-level($config, subheading-2);\n    margin: 0 0 16px;\n  }\n\n  .mat-h4,\n  .mat-subheading-1,\n  #{$selector} .mat-h4,\n  #{$selector} .mat-subheading-1,\n  #{$selector} h4 {\n    @include typography-utils.typography-level($config, subheading-1);\n    margin: 0 0 16px;\n  }\n\n  // Note: the spec doesn't have anything that would correspond to h5 and h6, but we add these for\n  // consistency. The font sizes come from the Chrome user agent styles which have h5 at 0.83em\n  // and h6 at 0.67em.\n  .mat-h5,\n  #{$selector} .mat-h5,\n  #{$selector} h5 {\n    @include typography-utils.font-shorthand(\n       // calc is used here to support css variables\n      calc(#{typography-utils.font-size($config, body-1)} * 0.83),\n      typography-utils.font-weight($config, body-1),\n      typography-utils.line-height($config, body-1),\n      typography-utils.font-family($config, body-1)\n    );\n\n    margin: 0 0 12px;\n  }\n\n  .mat-h6,\n  #{$selector} .mat-h6,\n  #{$selector} h6 {\n    @include typography-utils.font-shorthand(\n       // calc is used here to support css variables\n      calc(#{typography-utils.font-size($config, body-1)} * 0.67),\n      typography-utils.font-weight($config, body-1),\n      typography-utils.line-height($config, body-1),\n      typography-utils.font-family($config, body-1)\n    );\n\n    margin: 0 0 12px;\n  }\n\n  .mat-body-strong,\n  .mat-body-2,\n  #{$selector} .mat-body-strong,\n  #{$selector} .mat-body-2 {\n    @include typography-utils.typography-level($config, body-2);\n  }\n\n  .mat-body,\n  .mat-body-1,\n  #{$selector} .mat-body,\n  #{$selector} .mat-body-1,\n  #{$selector} {\n    @include typography-utils.typography-level($config, body-1);\n\n    p {\n      margin: 0 0 12px;\n    }\n  }\n\n  .mat-small,\n  .mat-caption,\n  #{$selector} .mat-small,\n  #{$selector} .mat-caption {\n    @include typography-utils.typography-level($config, caption);\n  }\n\n  .mat-display-4,\n  #{$selector} .mat-display-4 {\n    @include typography-utils.typography-level($config, display-4);\n    margin: 0 0 56px;\n  }\n\n  .mat-display-3,\n  #{$selector} .mat-display-3 {\n    @include typography-utils.typography-level($config, display-3);\n    margin: 0 0 64px;\n  }\n\n  .mat-display-2,\n  #{$selector} .mat-display-2 {\n    @include typography-utils.typography-level($config, display-2);\n    margin: 0 0 64px;\n  }\n\n  .mat-display-1,\n  #{$selector} .mat-display-1 {\n    @include typography-utils.typography-level($config, display-1);\n    margin: 0 0 64px;\n  }\n}\n","@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n\n\n// Utility for fetching a nested value from a typography config.\n@function _mat-get-type-value($config, $level, $name) {\n  @return map.get(map.get($config, $level), $name);\n}\n\n/// Gets the font size for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-size($config, $level) {\n  @return _mat-get-type-value($config, $level, font-size);\n}\n\n/// Gets the line height for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function line-height($config, $level) {\n  @return _mat-get-type-value($config, $level, line-height);\n}\n\n/// Gets the font weight for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-weight($config, $level) {\n  @return _mat-get-type-value($config, $level, font-weight);\n}\n\n/// Gets the letter spacing for a level inside a typography config.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function letter-spacing($config, $level) {\n  @return _mat-get-type-value($config, $level, letter-spacing);\n}\n\n/// Gets the font-family from a typography config and removes the quotes around it.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@function font-family($config, $level: null) {\n  $font-family: map.get($config, font-family);\n\n  @if $level != null {\n    $font-family: _mat-get-type-value($config, $level, font-family);\n  }\n\n  // Guard against unquoting non-string values, because it's deprecated.\n  @return if(meta.type-of($font-family) == string, string.unquote($font-family), $font-family);\n}\n\n/// Outputs the shorthand `font` CSS property, based on a set of typography values. Falls back to\n/// the individual properties if a value that isn't allowed in the shorthand is passed in.\n/// @param {String} $font-size The font-size value.\n/// @param {String | Number} $font-weight The font-weight value.\n/// @param {String | Number} $line-height The line-height value.\n/// @param {String} $font-family The font-family value.\n/// @returns {String} The `font` shorthand value combining the given parts.\n@mixin font-shorthand($font-size, $font-weight, $line-height, $font-family) {\n  // If any of the values are set to `inherit`, we can't use the shorthand\n  // so we fall back to passing in the individual properties.\n  @if ($font-size == inherit or\n       $font-weight == inherit or\n       $line-height == inherit or\n       $font-family == inherit or\n       $font-size == null or\n       $font-weight == null or\n       $line-height == null or\n       $font-family == null) {\n\n    font-size: $font-size;\n    font-weight: $font-weight;\n    line-height: $line-height;\n    font-family: $font-family;\n  }\n  @else {\n    // Otherwise use the shorthand `font`, because it's the least amount of bytes.\n    font: $font-weight list.slash($font-size, $line-height) $font-family;\n  }\n}\n\n/// Emits CSS styles for the given typography level.\n/// @param {Map} $config A typography config.\n/// @param {Map} $level A typography level.\n@mixin typography-level($config, $level) {\n  $font-size: font-size($config, $level);\n  $font-weight: font-weight($config, $level);\n  $line-height: line-height($config, $level);\n  $font-family: font-family($config, $level);\n\n  @include font-shorthand($font-size, $font-weight, $line-height, $font-family);\n  letter-spacing: letter-spacing($config, $level);\n}\n\n/// Coerce a value to `em` if it is a unitless number, otherwise returns\n/// the value provided.\n@function private-coerce-unitless-to-em($value) {\n  @return if(math.is-unitless($value), 1em * $value, $value);\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-bottom-sheet-container {\n    @include private.private-theme-elevation(16, $config);\n    background: theming.get-color-from-palette($background, dialog);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-bottom-sheet-container {\n    @include typography-utils.typography-level($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-bottom-sheet') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$_ripple-opacity: 0.1;\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _focus-overlay-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  &.mat-primary .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($primary);\n  }\n\n  &.mat-accent .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($accent);\n  }\n\n  &.mat-warn .mat-button-focus-overlay {\n    background-color: theming.get-color-from-palette($warn);\n  }\n\n  &.mat-button-disabled .mat-button-focus-overlay {\n    background-color: transparent;\n  }\n}\n\n// Applies the background color for a ripple. If the value provided is not a Sass color,\n// we assume that we've been given a CSS variable. Since we can't perform alpha-blending\n// on a CSS variable, we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $hue, $opacity) {\n  $background-color: theming.get-color-from-palette($palette, $hue, $opacity);\n  background-color: $background-color;\n  @if (meta.type-of($background-color) != color) {\n    opacity: $opacity;\n  }\n}\n\n@mixin _ripple-color($theme, $hue, $opacity: $_ripple-opacity) {\n  $primary: map.get($theme, primary);\n  $accent: map.get($theme, accent);\n  $warn: map.get($theme, warn);\n\n  &.mat-primary .mat-ripple-element {\n    @include _ripple-background($primary, $hue, $opacity);\n  }\n\n  &.mat-accent .mat-ripple-element {\n    @include _ripple-background($accent, $hue, $opacity);\n  }\n\n  &.mat-warn .mat-ripple-element {\n    @include _ripple-background($warn, $hue, $opacity);\n  }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _theme-property($theme, $property, $hue) {\n  $primary: map.get($theme, primary);\n  $accent: map.get($theme, accent);\n  $warn: map.get($theme, warn);\n  $background: map.get($theme, background);\n  $foreground: map.get($theme, foreground);\n\n  &.mat-primary {\n    #{$property}: theming.get-color-from-palette($primary, $hue);\n  }\n  &.mat-accent {\n    #{$property}: theming.get-color-from-palette($accent, $hue);\n  }\n  &.mat-warn {\n    #{$property}: theming.get-color-from-palette($warn, $hue);\n  }\n\n  &.mat-primary, &.mat-accent, &.mat-warn, &.mat-button-disabled {\n    &.mat-button-disabled {\n      $palette: if($property == 'color', $foreground, $background);\n      #{$property}: theming.get-color-from-palette($palette, disabled-button);\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-button, .mat-icon-button, .mat-stroked-button {\n    // Buttons without a background color should inherit the font color. This is necessary to\n    // ensure that the button is readable on custom background colors. It's wrong to always assume\n    // that those buttons are always placed inside of containers with the default background\n    // color of the theme (e.g. themed toolbars).\n    color: inherit;\n    background: transparent;\n\n    @include _theme-property($config, 'color', text);\n    @include _focus-overlay-color($config);\n\n    // Setup the ripple color to be based on the text color. This ensures that the ripples\n    // are matching with the current theme palette and are in contrast to the background color\n    // (e.g in themed toolbars).\n    .mat-ripple-element {\n      opacity: $_ripple-opacity;\n      background-color: currentColor;\n    }\n  }\n\n  .mat-button-focus-overlay {\n    background: map.get($foreground, base);\n  }\n\n  // Note: this needs a bit extra specificity, because we're not guaranteed the inclusion\n  // order of the theme styles and the button reset may end up resetting this as well.\n  .mat-stroked-button:not(.mat-button-disabled) {\n    border-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {\n    // Default font and background color when not using any color palette.\n    color: theming.get-color-from-palette($foreground, text);\n    background-color: theming.get-color-from-palette($background, raised-button);\n\n    @include _theme-property($config, 'color', default-contrast);\n    @include _theme-property($config, 'background-color', default);\n    @include _ripple-color($config, default-contrast);\n  }\n\n  .mat-stroked-button, .mat-flat-button {\n    @include private.private-theme-overridable-elevation(0, $config);\n  }\n\n  .mat-raised-button {\n    @include private.private-theme-overridable-elevation(2, $config);\n\n    &:not(.mat-button-disabled):active {\n      @include private.private-theme-overridable-elevation(8, $config);\n    }\n\n    &.mat-button-disabled {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n\n  .mat-fab, .mat-mini-fab {\n    @include private.private-theme-overridable-elevation(6, $config);\n\n    &:not(.mat-button-disabled):active {\n      @include private.private-theme-overridable-elevation(12, $config);\n    }\n\n    &.mat-button-disabled {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,\n  .mat-flat-button, .mat-fab, .mat-mini-fab {\n    font: {\n      family: typography-utils.font-family($config, button);\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-button') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './button-toggle-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $divider-color: theming.get-color-from-palette($foreground, divider);\n  $theme-divider-color: map.get($foreground, divider);\n\n  // By default the theme usually has an rgba color for the dividers, which can\n  // stack up with the background of a button toggle. This can cause the border\n  // of a selected toggle to look different from an deselected one. We use a solid\n  // color to ensure that the border always stays the same.\n  $divider-color: if(type-of($theme-divider-color) == color,\n    theming.private-rgba-to-hex($theme-divider-color, map.get($background, card)),\n    $theme-divider-color\n  );\n\n  .mat-button-toggle-standalone,\n  .mat-button-toggle-group {\n    @include private.private-theme-overridable-elevation(2, $config);\n  }\n\n  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n  .mat-button-toggle-group-appearance-standard {\n    &:not([class*='mat-elevation-z']) {\n      box-shadow: none;\n    }\n  }\n\n  .mat-button-toggle {\n    color: theming.get-color-from-palette($foreground, hint-text);\n\n    .mat-button-toggle-focus-overlay {\n      background-color: theming.get-color-from-palette($background, focused-button);\n    }\n  }\n\n  .mat-button-toggle-appearance-standard {\n    color: theming.get-color-from-palette($foreground, text);\n    background: theming.get-color-from-palette($background, card);\n\n    .mat-button-toggle-focus-overlay {\n      background-color: theming.get-color-from-palette($background, focused-button, 1);\n    }\n  }\n\n  .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n    border-left: solid 1px $divider-color;\n  }\n\n  [dir='rtl'] .mat-button-toggle-group-appearance-standard .mat-button-toggle + .mat-button-toggle {\n    border-left: none;\n    border-right: solid 1px $divider-color;\n  }\n\n  .mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical {\n    .mat-button-toggle + .mat-button-toggle {\n      border-left: none;\n      border-right: none;\n      border-top: solid 1px $divider-color;\n    }\n  }\n\n  .mat-button-toggle-checked {\n    background-color: theming.get-color-from-palette($background, selected-button);\n    color: theming.get-color-from-palette($foreground, secondary-text);\n\n    &.mat-button-toggle-appearance-standard {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n  }\n\n  .mat-button-toggle-disabled {\n    color: theming.get-color-from-palette($foreground, disabled-button);\n    background-color: theming.get-color-from-palette($background, disabled-button-toggle);\n\n    &.mat-button-toggle-appearance-standard {\n      background: theming.get-color-from-palette($background, card);\n    }\n\n    &.mat-button-toggle-checked {\n      background-color: theming.get-color-from-palette($background, selected-disabled-button);\n    }\n  }\n\n  .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,\n  .mat-button-toggle-group-appearance-standard {\n    border: solid 1px $divider-color;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-button-toggle {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $standard-height: compatibility.private-density-prop-value(\n      button-toggle-variables.$standard-density-config, $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-button-toggle-appearance-standard .mat-button-toggle-label-content {\n      line-height: $standard-height;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-button-toggle') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-card {\n    @include private.private-theme-overridable-elevation(1, $config);\n    background: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n\n    // Needs extra specificity to be able to override the elevation selectors.\n    &.mat-card-flat {\n      @include private.private-theme-overridable-elevation(0, $config);\n    }\n  }\n\n  .mat-card-subtitle {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-card {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-card-title {\n    font: {\n      size: typography-utils.font-size($config, headline);\n      weight: typography-utils.font-weight($config, title);\n    }\n  }\n\n  .mat-card-header .mat-card-title {\n    font-size: typography-utils.font-size($config, title);\n  }\n\n  .mat-card-subtitle,\n  .mat-card-content {\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-card') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n\n  // The color of the checkbox's checkmark / mixedmark.\n  $checkbox-mark-color: theming.get-color-from-palette($background, background);\n\n  // NOTE(traviskaufman): While the spec calls for translucent blacks/whites for disabled colors,\n  // this does not work well with elements layered on top of one another. To get around this we\n  // blend the colors together based on the base color and the theme background.\n  $white-30pct-opacity-on-dark: #686868;\n  $black-26pct-opacity-on-light: #b0b0b0;\n  $disabled-color: if($is-dark-theme, $white-30pct-opacity-on-dark, $black-26pct-opacity-on-light);\n\n  .mat-checkbox-frame {\n    border-color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-checkbox-checkmark {\n    fill: $checkbox-mark-color;\n  }\n\n  .mat-checkbox-checkmark-path {\n    // !important is needed here because a stroke must be set as an\n    // attribute on the SVG in order for line animation to work properly.\n    stroke: $checkbox-mark-color !important;\n  }\n\n  .mat-checkbox-mixedmark {\n    background-color: $checkbox-mark-color;\n  }\n\n  .mat-checkbox-indeterminate, .mat-checkbox-checked {\n    &.mat-primary .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($primary);\n    }\n\n    &.mat-accent .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($accent);\n    }\n\n    &.mat-warn .mat-checkbox-background {\n      background-color: theming.get-color-from-palette($warn);\n    }\n  }\n\n  .mat-checkbox-disabled {\n    &.mat-checkbox-checked,\n    &.mat-checkbox-indeterminate {\n      .mat-checkbox-background {\n        background-color: $disabled-color;\n      }\n    }\n\n    &:not(.mat-checkbox-checked) {\n      .mat-checkbox-frame {\n        border-color: $disabled-color;\n      }\n    }\n\n    .mat-checkbox-label {\n      color: theming.get-color-from-palette($foreground, disabled);\n    }\n  }\n\n  // Switch this to a solid color since we're using `opacity`\n  // to control how opaque the ripple should be.\n  .mat-checkbox .mat-ripple-element {\n    background-color: map.get(map.get($config, foreground), base);\n  }\n\n  .mat-checkbox-checked:not(.mat-checkbox-disabled),\n  .mat-checkbox:active:not(.mat-checkbox-disabled) {\n    &.mat-primary .mat-ripple-element {\n      background: theming.get-color-from-palette($primary);\n    }\n\n    &.mat-accent .mat-ripple-element {\n      background: theming.get-color-from-palette($accent);\n    }\n\n    &.mat-warn .mat-ripple-element {\n      background: theming.get-color-from-palette($warn);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-checkbox {\n    font-family: typography-utils.font-family($config);\n  }\n\n  // TODO(kara): Remove this style when fixing vertical baseline\n  .mat-checkbox-layout .mat-checkbox-label {\n    line-height: typography-utils.line-height($config, body-2);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-checkbox') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$chip-remove-font-size: 18px;\n\n@mixin _element-color($foreground, $background) {\n  background-color: $background;\n  color: $foreground;\n\n  .mat-chip-remove {\n    color: $foreground;\n    opacity: 0.4;\n  }\n}\n\n\n// Applies the background color for a ripple element.\n// If the color value provided is not a Sass color,\n// we assume that we've been given a CSS variable.\n// Since we can't perform alpha-blending on a CSS variable,\n// we instead add the opacity directly to the ripple element.\n@mixin _ripple-background($palette, $default-contrast, $opacity) {\n  $background-color: theming.get-color-from-palette($palette, $default-contrast, $opacity);\n  background-color: $background-color;\n  @if (meta.type-of($background-color) != color) {\n    opacity: $opacity;\n  }\n}\n\n@mixin _palette-styles($palette) {\n  @include _element-color(theming.get-color-from-palette($palette, default-contrast),\n    theming.get-color-from-palette($palette));\n\n  .mat-ripple-element {\n    @include _ripple-background($palette, default-contrast, 0.1);\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  $unselected-background: theming.get-color-from-palette($background, unselected-chip);\n  $unselected-foreground: theming.get-color-from-palette($foreground, text);\n\n  .mat-chip.mat-standard-chip {\n    @include _element-color($unselected-foreground, $unselected-background);\n\n    &:not(.mat-chip-disabled) {\n      &:active {\n        @include private.private-theme-elevation(3, $config);\n      }\n\n      .mat-chip-remove:hover {\n        opacity: 0.54;\n      }\n    }\n\n    &.mat-chip-disabled {\n      opacity: 0.4;\n    }\n\n    &::after {\n      background: map.get($foreground, base);\n    }\n  }\n\n  .mat-chip.mat-standard-chip.mat-chip-selected {\n    &.mat-primary {\n      @include _palette-styles($primary);\n    }\n\n    &.mat-warn {\n      @include _palette-styles($warn);\n    }\n\n    &.mat-accent {\n      @include _palette-styles($accent);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-chip {\n    font-size: typography-utils.font-size($config, body-2);\n    font-weight: typography-utils.font-weight($config, body-2);\n\n    .mat-chip-trailing-icon.mat-icon,\n    .mat-chip-remove.mat-icon {\n      font-size: $chip-remove-font-size;\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-chips') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-table {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-table thead, .mat-table tbody, .mat-table tfoot,\n  mat-header-row, mat-row, mat-footer-row,\n  [mat-header-row], [mat-row], [mat-footer-row],\n  .mat-table-sticky {\n    background: inherit;\n  }\n\n  mat-row, mat-header-row, mat-footer-row,\n  th.mat-header-cell, td.mat-cell, td.mat-footer-cell {\n    border-bottom-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-header-cell {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-cell, .mat-footer-cell {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-table {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-header-cell {\n    font-size: typography-utils.font-size($config, caption);\n    font-weight: typography-utils.font-weight($config, body-2);\n  }\n\n  .mat-cell, .mat-footer-cell {\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-table') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:color';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n$selected-today-box-shadow-width: 1px;\n$selected-fade-amount: 0.6;\n$range-fade-amount: 0.2;\n$today-fade-amount: 0.2;\n$calendar-body-font-size: 13px !default;\n$calendar-weekday-table-font-size: 11px !default;\n\n@mixin _color($palette) {\n  @include date-range-colors(\n    theming.get-color-from-palette($palette, default, $range-fade-amount));\n\n  .mat-calendar-body-selected {\n    background-color: theming.get-color-from-palette($palette);\n    color: theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-selected {\n    $background: theming.get-color-from-palette($palette);\n\n    @if (meta.type-of($background) == color) {\n      background-color: color.adjust($background, $alpha: -$selected-fade-amount);\n    }\n    @else {\n      // If we couldn't resolve to background to a color (e.g. it's a CSS variable),\n      // fall back to fading the content out via `opacity`.\n      opacity: $today-fade-amount;\n    }\n  }\n\n  .mat-calendar-body-today.mat-calendar-body-selected {\n    box-shadow: inset 0 0 0 $selected-today-box-shadow-width\n                theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .cdk-keyboard-focused .mat-calendar-body-active,\n  .cdk-program-focused .mat-calendar-body-active {\n    @include _highlighted-cell($palette);\n  }\n\n  @media (hover: hover) {\n    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover {\n      @include _highlighted-cell($palette);\n    }\n  }\n}\n\n// Utility mixin to target cells that aren't selected. Used to make selector easier to follow.\n@mixin _unselected-cell {\n  &:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {\n    @content;\n  }\n}\n\n// Styles for a highlighted calendar cell (e.g. hovered or focused).\n@mixin _highlighted-cell($palette) {\n  & > .mat-calendar-body-cell-content {\n    @include _unselected-cell {\n      background-color: theming.get-color-from-palette($palette, 0.3);\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n  .mat-calendar-arrow {\n    fill: theming.get-color-from-palette($foreground, icon);\n  }\n\n  // The prev/next buttons need a bit more specificity to\n  // avoid being overwritten by the .mat-icon-button.\n  .mat-datepicker-toggle,\n  .mat-datepicker-content .mat-calendar-next-button,\n  .mat-datepicker-content .mat-calendar-previous-button {\n    color: theming.get-color-from-palette($foreground, icon);\n  }\n\n  .mat-calendar-table-header-divider::after {\n    background: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-calendar-table-header,\n  .mat-calendar-body-label {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-calendar-body-cell-content,\n  .mat-date-range-input-separator {\n    color: theming.get-color-from-palette($foreground, text);\n    border-color: transparent;\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-cell-content {\n    @include _unselected-cell {\n      color: $disabled-color;\n    }\n  }\n\n  .mat-form-field-disabled .mat-date-range-input-separator {\n    color: $disabled-color;\n  }\n\n  .mat-calendar-body-in-preview {\n    $divider-color: theming.get-color-from-palette($foreground, divider);\n\n    @if meta.type-of($divider-color) == color {\n      // The divider color is set under the assumption that it'll be used\n      // for a solid border, but because we're using a dashed border for the\n      // preview range, we need to bump its opacity to ensure that it's visible.\n      color: rgba($divider-color, math.min(opacity($divider-color) * 2, 1));\n    }\n    @else {\n      color: $divider-color;\n    }\n  }\n\n  .mat-calendar-body-today {\n    @include _unselected-cell {\n      // Note: though it's not text, the border is a hint about the fact that this is today's date,\n      // so we use the hint color.\n      border-color: theming.get-color-from-palette($foreground, hint-text);\n    }\n  }\n\n  .mat-calendar-body-disabled > .mat-calendar-body-today {\n    @include _unselected-cell {\n      $color: theming.get-color-from-palette($foreground, hint-text);\n\n      @if (meta.type-of($color) == color) {\n        border-color: color.adjust($color, $alpha: -$today-fade-amount);\n      }\n      @else {\n        // If the color didn't resolve to a color value, but something like a CSS variable, we can't\n        // fade it out so we fall back to reducing the element opacity. Note that we don't use the\n        // $mat-datepicker-today-fade-amount, because hint text usually has some opacity applied\n        // to it already and we don't want them to stack on top of each other.\n        opacity: 0.5;\n      }\n    }\n  }\n\n  @include _color(map.get($config, primary));\n\n  .mat-datepicker-content {\n    @include private.private-theme-elevation(4, $config);\n    background-color: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-accent {\n      @include _color(map.get($config, accent));\n    }\n\n    &.mat-warn {\n      @include _color(map.get($config, warn));\n    }\n  }\n\n  .mat-datepicker-content-touch {\n    @include private.private-theme-elevation(24, $config);\n  }\n\n  .mat-datepicker-toggle-active {\n    color: theming.get-color-from-palette(map.get($config, primary), text);\n\n    &.mat-accent {\n      color: theming.get-color-from-palette(map.get($config, accent), text);\n    }\n\n    &.mat-warn {\n      color: theming.get-color-from-palette(map.get($config, warn), text);\n    }\n  }\n\n  .mat-date-range-input-inner[disabled] {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-calendar {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-calendar-body {\n    font-size: $calendar-body-font-size;\n  }\n\n  .mat-calendar-body-label,\n  .mat-calendar-period-button {\n    font: {\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n\n  .mat-calendar-table-header th {\n    font: {\n      size: $calendar-weekday-table-font-size;\n      weight: typography-utils.font-weight($config, body-1);\n    }\n  }\n}\n\n@mixin date-range-colors(\n  $range-color,\n  $comparison-color: rgba(#f9ab00, $range-fade-amount),\n  $overlap-color: #a8dab5,\n  $overlap-selected-color: color.adjust($overlap-color, $lightness: -30%)) {\n\n  .mat-calendar-body-in-range::before {\n    background: $range-color;\n  }\n\n  .mat-calendar-body-comparison-identical,\n  .mat-calendar-body-in-comparison-range::before {\n    background: $comparison-color;\n  }\n\n  .mat-calendar-body-comparison-bridge-start::before,\n  [dir='rtl'] .mat-calendar-body-comparison-bridge-end::before {\n    background: linear-gradient(to right, $range-color 50%, $comparison-color 50%);\n  }\n\n  .mat-calendar-body-comparison-bridge-end::before,\n  [dir='rtl'] .mat-calendar-body-comparison-bridge-start::before {\n    background: linear-gradient(to left, $range-color 50%, $comparison-color 50%);\n  }\n\n  .mat-calendar-body-in-range > .mat-calendar-body-comparison-identical,\n  .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range::after {\n    background: $overlap-color;\n  }\n\n  .mat-calendar-body-comparison-identical.mat-calendar-body-selected,\n  .mat-calendar-body-in-comparison-range > .mat-calendar-body-selected {\n    background: $overlap-selected-color;\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-datepicker') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-dialog-container {\n    @include private.private-theme-elevation(24, $config);\n    background: theming.get-color-from-palette($background, dialog);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-dialog-title {\n    @include typography-utils.typography-level($config, title);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-dialog') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './expansion-variables';\n@use './expansion-mixins';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-expansion-panel {\n    @include private.private-theme-overridable-elevation(2, $config);\n    background: theming.get-color-from-palette($background, card);\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-action-row {\n    border-top-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  @include expansion-mixins.private-expansion-focus {\n    background: theming.get-color-from-palette($background, hover);\n  }\n\n  // Disable the hover on touch devices since it can appear like it is stuck. We can't use\n  // `@media (hover)` above, because the desktop support browser support isn't great.\n  @media (hover: none) {\n    .mat-expansion-panel:not(.mat-expanded):not([aria-disabled='true'])\n      .mat-expansion-panel-header:hover {\n      background: theming.get-color-from-palette($background, card);\n    }\n  }\n\n  .mat-expansion-panel-header-title {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-expansion-panel-header-description,\n  .mat-expansion-indicator::after {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-expansion-panel-header[aria-disabled='true'] {\n    color: theming.get-color-from-palette($foreground, disabled-button);\n\n    .mat-expansion-panel-header-title,\n    .mat-expansion-panel-header-description {\n      color: inherit;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-expansion-panel-header {\n    font: {\n      family: typography-utils.font-family($config, subheading-1);\n      size: typography-utils.font-size($config, subheading-1);\n      weight: typography-utils.font-weight($config, subheading-1);\n    }\n  }\n\n  .mat-expansion-panel-content {\n    @include typography-utils.typography-level($config, body-1);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $expanded-height: compatibility.private-density-prop-value(\n        expansion-variables.$header-density-config, $density-scale, expanded-height);\n  $collapsed-height: compatibility.private-density-prop-value(\n      expansion-variables.$header-density-config, $density-scale, collapsed-height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-expansion-panel-header {\n      height: $collapsed-height;\n\n      &.mat-expanded {\n        height: $expanded-height;\n      }\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-expansion') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@use './form-field-fill-theme.scss';\n@use './form-field-legacy-theme.scss';\n@use './form-field-outline-theme.scss';\n@use './form-field-standard-theme.scss';\n\n// Color styles that apply to all appearances of the form-field.\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  // Label colors. Required is used for the `*` star shown in the label.\n  $label-color:\n    theming.get-color-from-palette($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n  $focused-label-color: theming.get-color-from-palette($primary, text);\n  $required-label-color: theming.get-color-from-palette($accent, text);\n\n  // Underline colors.\n  $underline-color-base:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n  $underline-color-accent: theming.get-color-from-palette($accent, text);\n  $underline-color-warn: theming.get-color-from-palette($warn, text);\n  $underline-focused-color: theming.get-color-from-palette($primary, text);\n\n  .mat-form-field-label {\n    color: $label-color;\n  }\n\n  .mat-hint {\n    color: $label-color;\n  }\n\n  .mat-form-field.mat-focused .mat-form-field-label {\n    color: $focused-label-color;\n\n    &.mat-accent {\n      color: $underline-color-accent;\n    }\n\n    &.mat-warn {\n      color: $underline-color-warn;\n    }\n  }\n\n  .mat-focused .mat-form-field-required-marker {\n    color: $required-label-color;\n  }\n\n  .mat-form-field-ripple {\n    background-color: $underline-color-base;\n  }\n\n  .mat-form-field.mat-focused {\n    .mat-form-field-ripple {\n      background-color: $underline-focused-color;\n\n      &.mat-accent {\n        background-color: $underline-color-accent;\n      }\n\n      &.mat-warn {\n        background-color: $underline-color-warn;\n      }\n    }\n  }\n\n  .mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) {\n    .mat-form-field-infix::after {\n      color: $underline-focused-color;\n    }\n\n    &.mat-accent .mat-form-field-infix::after {\n      color: $underline-color-accent;\n    }\n\n    &.mat-warn .mat-form-field-infix::after {\n      color: $underline-color-warn;\n    }\n  }\n\n  // Styling for the error state of the form field. Note that while the same can be\n  // achieved with the ng-* classes, we use this approach in order to ensure that the same\n  // logic is used to style the error state and to show the error messages.\n  .mat-form-field.mat-form-field-invalid {\n    .mat-form-field-label {\n      color: $underline-color-warn;\n\n      &.mat-accent,\n      .mat-form-field-required-marker {\n        color: $underline-color-warn;\n      }\n    }\n\n    .mat-form-field-ripple,\n    .mat-form-field-ripple.mat-accent {\n      background-color: $underline-color-warn;\n    }\n  }\n\n  .mat-error {\n    color: $underline-color-warn;\n  }\n\n  @include form-field-legacy-theme.legacy-color($config);\n  @include form-field-standard-theme.standard-color($config);\n  @include form-field-fill-theme.fill-color($config);\n  @include form-field-outline-theme.outline-color($config);\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $dedupe)\n             scale($font-scale);\n  width: math.div(100%, $font-scale) + $dedupe;\n\n  $dedupe: $dedupe + 0.00001 !global;\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The amount to scale the font for the prefix and suffix icons.\n  $prefix-suffix-icon-font-scale: 1.5;\n\n  // The padding on the infix. Mocks show half of the text size.\n  $infix-padding: 0.5em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  // If the line-height is given as a unitless number, coerce it to `em`.\n  $infix-margin-top: $subscript-font-scale *\n      typography-utils.private-coerce-unitless-to-em($line-height);\n  // Font size to use for the label and subscript text.\n  $subscript-font-size: $subscript-font-scale * 100%;\n  // Font size to use for the for the prefix and suffix icons.\n  $prefix-suffix-icon-font-size: $prefix-suffix-icon-font-scale * 100%;\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n  .mat-form-field {\n    @include typography-utils.typography-level($config, input);\n  }\n\n  .mat-form-field-wrapper {\n    padding-bottom: $wrapper-padding-bottom;\n  }\n\n  .mat-form-field-prefix,\n  .mat-form-field-suffix {\n    // Allow icons in a prefix or suffix to adapt to the correct size.\n    .mat-icon {\n      font-size: $prefix-suffix-icon-font-size;\n      line-height: $line-height;\n    }\n\n    // Allow icon buttons in a prefix or suffix to adapt to the correct size.\n    .mat-icon-button {\n      height: $prefix-suffix-icon-font-scale * 1em;\n      width: $prefix-suffix-icon-font-scale * 1em;\n\n      .mat-icon {\n        height: typography-utils.private-coerce-unitless-to-em($line-height);\n        line-height: $line-height;\n      }\n    }\n  }\n\n  .mat-form-field-infix {\n    padding: $infix-padding 0;\n    // Throws off the baseline if we do it as a real margin, so we do it as a border instead.\n    border-top: $infix-margin-top solid transparent;\n  }\n\n  .mat-form-field-can-float {\n    &.mat-form-field-should-float .mat-form-field-label,\n    .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n      @include _label-floating(\n              $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n\n    // Server-side rendered matInput with a label attribute but label not shown\n    // (used as a pure CSS stand-in for mat-form-field-should-float).\n    .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n        .mat-form-field-label {\n      @include _label-floating(\n              $subscript-font-scale, $infix-padding, $infix-margin-top);\n    }\n  }\n\n  .mat-form-field-label-wrapper {\n    top: -$infix-margin-top;\n    padding-top: $infix-margin-top;\n  }\n\n  .mat-form-field-label {\n    top: $infix-margin-top + $infix-padding;\n  }\n\n  .mat-form-field-underline {\n    // We want the underline to start at the end of the content box, not the padding box,\n    // so we move it up by the padding amount.\n    bottom: $wrapper-padding-bottom;\n  }\n\n  .mat-form-field-subscript-wrapper {\n    font-size: $subscript-font-size;\n    margin-top: $subscript-margin-top;\n\n    // We want the subscript to start at the end of the content box, not the padding box,\n    // so we move it up by the padding amount (adjusted for the smaller font size);\n    top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n  }\n\n  @include form-field-legacy-theme.legacy-typography($config);\n  @include form-field-standard-theme.standard-typography($config);\n  @include form-field-fill-theme.fill-typography($config);\n  @include form-field-outline-theme.outline-typography($config);\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  @include form-field-legacy-theme.private-form-field-legacy-density($density-scale);\n  @include form-field-standard-theme.private-form-field-standard-density($density-scale);\n  @include form-field-fill-theme.private-form-field-fill-density($density-scale);\n  @include form-field-outline-theme.private-form-field-outline-density($density-scale);\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin legacy-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $label-color: theming.get-color-from-palette($foreground, secondary-text);\n  $underline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n  .mat-form-field-appearance-legacy {\n    .mat-form-field-label {\n      color: $label-color;\n    }\n\n    .mat-hint {\n      color: $label-color;\n    }\n\n    .mat-form-field-underline {\n      background-color: $underline-color;\n    }\n\n    &.mat-form-field-disabled .mat-form-field-underline {\n      @include form-common.private-control-disabled-underline($underline-color);\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  // We use perspective to fix the text blurriness as described here:\n  // http://www.useragentman.com/blog/2014/05/04/fixing-typography-inside-of-2-d-css-transforms/\n  // This results in a small jitter after the label floats on Firefox, which the\n  // translateZ fixes.\n  transform: translateY(-$infix-margin-top - $infix-padding) scale($font-scale) perspective(100px)\n  translateZ(0.001px + $legacy-dedupe);\n  width: math.div(100%, $font-scale) + $legacy-dedupe;\n\n  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n// Same as mixin above, but omits the translateZ for printing purposes.\n@mixin _label-floating-print($font-scale, $infix-padding, $infix-margin-top) {\n  // This results in a small jitter after the label floats on Firefox, which the\n  // translateZ fixes.\n  transform: translateY(-$infix-margin-top - $infix-padding + $legacy-dedupe)\n                  scale($font-scale);\n  // The tricks above used to smooth out the animation on chrome and firefox actually make things\n  // worse on IE, so we don't include them in the IE version.\n  $legacy-dedupe: $legacy-dedupe + 0.00001 !global;\n}\n\n@mixin legacy-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The amount of space between the top of the line and the top of the actual text\n  // (as a fraction of the font-size).\n  $line-spacing: math.div($line-height - 1, 2);\n  // The padding on the infix. Mocks show half of the text size, but seem to measure from the edge\n  // of the text itself, not the edge of the line; therefore we subtract off the line spacing.\n  $infix-padding: 0.5em - $line-spacing;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  // If the line-height is given as a unitless number, coerce it to `em`.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size. We again need to subtract off the line spacing since the mocks measure to the edge of the\n  // text, not the  edge of the line.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale) - ($line-spacing * 2);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n\n  .mat-form-field-appearance-legacy {\n    .mat-form-field-wrapper {\n      padding-bottom: $wrapper-padding-bottom;\n    }\n\n    .mat-form-field-infix {\n      padding: $infix-padding 0;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n\n      // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n      .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n      .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n      .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding, $infix-margin-top);\n      }\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding;\n    }\n\n    .mat-form-field-underline {\n      // We want the underline to start at the end of the content box, not the padding box,\n      // so we move it up by the padding amount.\n      bottom: $wrapper-padding-bottom;\n    }\n\n    .mat-form-field-subscript-wrapper {\n      margin-top: $subscript-margin-top;\n\n      // We want the subscript to start at the end of the content box, not the padding box,\n      // so we move it up by the padding amount (adjusted for the smaller font size);\n      top: calc(100% - #{math.div($wrapper-padding-bottom, $subscript-font-scale)});\n    }\n  }\n\n  // translateZ causes the label to not appear while printing, so we override it to not\n  // apply translateZ while printing\n  @media print {\n    .mat-form-field-appearance-legacy {\n      &.mat-form-field-can-float {\n        &.mat-form-field-should-float .mat-form-field-label,\n        .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n\n        // @breaking-change 8.0.0 will rely on AutofillMonitor instead.\n        .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper\n        .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n\n        // Server-side rendered matInput with a label attribute but label not shown\n        // (used as a pure CSS stand-in for mat-form-field-should-float).\n        .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n        .mat-form-field-label {\n          @include _label-floating-print(\n                  $subscript-font-scale, $infix-padding, $infix-margin-top);\n        }\n      }\n    }\n  }\n}\n\n@mixin private-form-field-legacy-density($config-or-theme) {}\n\n@mixin legacy-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-legacy') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include legacy-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-legacy-density($density);\n    }\n    @if $typography != null {\n      @include legacy-typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin fill-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $fill-background:\n    theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.1, 0.04));\n  $fill-disabled-background:\n    theming.get-color-from-palette($foreground, base, if($is-dark-theme, 0.05, 0.02));\n  $underline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n  $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n\n  .mat-form-field-appearance-fill {\n    .mat-form-field-flex {\n      background-color: $fill-background;\n    }\n\n    &.mat-form-field-disabled .mat-form-field-flex {\n      background-color: $fill-disabled-background;\n    }\n\n    .mat-form-field-underline::before {\n      background-color: $underline-color;\n    }\n\n    &.mat-form-field-disabled {\n      .mat-form-field-label {\n        color: $label-disabled-color;\n      }\n\n      .mat-form-field-underline::before {\n        background-color: transparent;\n      }\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $fill-dedupe)\n             scale($font-scale);\n  width: math.div(100%, $font-scale) + $fill-dedupe;\n\n  $fill-dedupe: $fill-dedupe + 0.00001 !global;\n}\n\n@mixin fill-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The padding on top of the infix.\n  $infix-padding-top: 0.25em;\n  // The padding below the infix.\n  $infix-padding-bottom: 0.75em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The amount we offset the label from the input text in the fill appearance.\n  $fill-appearance-label-offset: -0.5em;\n\n  .mat-form-field-appearance-fill {\n    .mat-form-field-infix {\n      padding: $infix-padding-top 0 $infix-padding-bottom 0;\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding-top;\n      margin-top: $fill-appearance-label-offset;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n                $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n      .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n                $infix-margin-top);\n      }\n    }\n  }\n}\n\n@mixin private-form-field-fill-density($config-or-theme) {}\n\n@mixin fill-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-fill') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include fill-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-fill-density($density);\n    }\n    @if $typography != null {\n      @include fill-typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin outline-color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $foreground: map.get($config, foreground);\n  $is-dark-theme: map.get($config, is-dark);\n\n  $label-disabled-color: theming.get-color-from-palette($foreground, disabled-text);\n  $outline-color:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n  $outline-color-hover:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 1, 0.87));\n  $outline-color-primary: theming.get-color-from-palette($primary);\n  $outline-color-accent: theming.get-color-from-palette($accent);\n  $outline-color-warn: theming.get-color-from-palette($warn);\n  $outline-color-disabled:\n    theming.get-color-from-palette($foreground, divider, if($is-dark-theme, 0.15, 0.06));\n\n  .mat-form-field-appearance-outline {\n    .mat-form-field-outline {\n      color: $outline-color;\n    }\n\n    .mat-form-field-outline-thick {\n      color: $outline-color-hover;\n    }\n\n    &.mat-focused {\n      .mat-form-field-outline-thick {\n        color: $outline-color-primary;\n      }\n\n      &.mat-accent .mat-form-field-outline-thick {\n        color: $outline-color-accent;\n      }\n\n      &.mat-warn .mat-form-field-outline-thick {\n        color: $outline-color-warn;\n      }\n    }\n\n    // Class repeated so that rule is specific enough to override focused accent color case.\n    &.mat-form-field-invalid.mat-form-field-invalid {\n      .mat-form-field-outline-thick {\n        color: $outline-color-warn;\n      }\n    }\n\n    &.mat-form-field-disabled {\n      .mat-form-field-label {\n        color: $label-disabled-color;\n      }\n\n      .mat-form-field-outline {\n        color: $outline-color-disabled;\n      }\n    }\n  }\n}\n\n// Used to make instances of the _mat-form-field-label-floating mixin negligibly different,\n// and prevent Google's CSS Optimizer from collapsing the declarations. This is needed because some\n// of the selectors contain pseudo-classes not recognized in all browsers. If a browser encounters\n// an unknown pseudo-class it will discard the entire rule set.\n$outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _label-floating($font-scale, $infix-padding, $infix-margin-top) {\n  transform: translateY(-$infix-margin-top - $infix-padding + $outline-dedupe)\n  scale($font-scale);\n  width: math.div(100%, $font-scale) + $outline-dedupe;\n\n  $outline-dedupe: $outline-dedupe + 0.00001 !global;\n}\n\n@mixin outline-typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n  // The amount to scale the font for the floating label and subscript.\n  $subscript-font-scale: 0.75;\n  // The padding above and below the infix.\n  $infix-padding: 1em;\n  // The margin applied to the form-field-infix to reserve space for the floating label.\n  $infix-margin-top:\n      $subscript-font-scale * typography-utils.private-coerce-unitless-to-em($line-height);\n  // The space between the bottom of the .mat-form-field-flex area and the subscript wrapper.\n  // Mocks show half of the text size, but this margin is applied to an element with the subscript\n  // text font size, so we need to divide by the scale factor to make it half of the original text\n  // size.\n  $subscript-margin-top: math.div(0.5em, $subscript-font-scale);\n  // The padding applied to the form-field-wrapper to reserve space for the subscript, since it's\n  // absolutely positioned. This is a combination of the subscript's margin and line-height, but we\n  // need to multiply by the subscript font scale factor since the wrapper has a larger font size.\n  $wrapper-padding-bottom: ($subscript-margin-top + $line-height) * $subscript-font-scale;\n  // The amount we offset the label from the input text in the outline appearance.\n  $outline-appearance-label-offset: -0.25em;\n\n  .mat-form-field-appearance-outline {\n    .mat-form-field-infix {\n      padding: $infix-padding 0 $infix-padding 0;\n    }\n\n    .mat-form-field-label {\n      top: $infix-margin-top + $infix-padding;\n      margin-top: $outline-appearance-label-offset;\n    }\n\n    &.mat-form-field-can-float {\n      &.mat-form-field-should-float .mat-form-field-label,\n      .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n                $infix-margin-top);\n      }\n\n      // Server-side rendered matInput with a label attribute but label not shown\n      // (used as a pure CSS stand-in for mat-form-field-should-float).\n      .mat-input-server[label]:not(:label-shown) + .mat-form-field-label-wrapper\n      .mat-form-field-label {\n        @include _label-floating(\n                $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n                $infix-margin-top);\n      }\n    }\n  }\n}\n\n@mixin private-form-field-outline-density($config-or-theme) {}\n\n@mixin outline-theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-form-field-outline') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include outline-color($color);\n    }\n    @if $density != null {\n      @include private-form-field-outline-density($density);\n    }\n    @if $typography != null {\n      @include outline-typography($typography);\n    }\n  }\n}\n\n","@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin color($config-or-theme) {}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-grid-tile-header,\n  .mat-grid-tile-footer {\n    @include list-common.base(typography-utils.font-size($config, caption));\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-grid-list') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","// This mixin will ensure that lines that overflow the container will hide the overflow and\n// truncate neatly with an ellipsis.\n@mixin truncate-line() {\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n// Mixin to provide all mat-line styles, changing secondary font size based on whether the list\n// is in dense mode.\n@mixin base($secondary-font-size) {\n  .mat-line {\n    @include truncate-line();\n    display: block;\n    box-sizing: border-box;\n\n    // all lines but the top line should have smaller text\n    &:nth-child(n+2) {\n      font-size: $secondary-font-size;\n    }\n  }\n}\n\n// This mixin normalizes default element styles, e.g. font weight for heading text.\n@mixin normalize-text() {\n  & > * {\n    margin: 0;\n    padding: 0;\n    font-weight: normal;\n    font-size: inherit;\n  }\n}\n\n// This mixin provides base styles for the wrapper around mat-line elements in a list.\n@mixin wrapper-base() {\n  @include normalize-text();\n\n  display: flex;\n  flex-direction: column;\n  flex: auto;\n  box-sizing: border-box;\n  overflow: hidden;\n\n  // Must remove wrapper when lines are empty or it takes up horizontal\n  // space and pushes other elements to the right.\n  &:empty {\n    display: none;\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/vendor-prefixes';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $foreground: map.get($config, foreground);\n\n  .mat-form-field-type-mat-native-select .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-input-element:disabled,\n  .mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  .mat-input-element {\n    caret-color: theming.get-color-from-palette($primary, text);\n\n    @include vendor-prefixes.input-placeholder {\n      color: form-common.private-control-placeholder-color($config);\n    }\n\n    // On dark themes we set the native `select` color to some shade of white,\n    // however the color propagates to all of the `option` elements, which are\n    // always on a white background inside the dropdown, causing them to blend in.\n    // Since we can't change background of the dropdown, we need to explicitly\n    // reset the color of the options to something dark.\n    @if (map.get($config, is-dark)) {\n      &:not(.mat-native-select-inline) {\n        option {\n          color: palette.$dark-primary-text;\n        }\n\n        option:disabled {\n          color: palette.$dark-disabled-text;\n        }\n      }\n    }\n  }\n\n  .mat-form-field.mat-accent .mat-input-element {\n    caret-color: theming.get-color-from-palette($accent, text);\n  }\n\n  .mat-form-field.mat-warn .mat-input-element,\n  .mat-form-field-invalid .mat-input-element {\n    caret-color: theming.get-color-from-palette($warn, text);\n  }\n\n  .mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {\n    color: theming.get-color-from-palette($warn, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  // The amount of space between the top of the line and the top of the actual text\n  // (as a fraction of the font-size).\n  $line-spacing: math.div($line-height - 1, 2);\n\n  // <input> elements seem to have their height set slightly too large on Safari causing the text to\n  // be misaligned w.r.t. the placeholder. Adding this margin corrects it.\n  input.mat-input-element {\n    margin-top: typography-utils.private-coerce-unitless-to-em(-$line-spacing);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-input') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-menu-panel {\n    @include private.private-theme-overridable-elevation(4, $config);\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-menu-item {\n    background: transparent;\n    color: theming.get-color-from-palette($foreground, 'text');\n\n    &[disabled] {\n      &,\n      .mat-menu-submenu-icon,\n      .mat-icon-no-color {\n        color: theming.get-color-from-palette($foreground, 'disabled');\n      }\n    }\n  }\n\n  .mat-menu-item .mat-icon-no-color,\n  .mat-menu-submenu-icon {\n    color: theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-menu-item:hover,\n  .mat-menu-item.cdk-program-focused,\n  .mat-menu-item.cdk-keyboard-focused,\n  .mat-menu-item-highlighted {\n    &:not([disabled]) {\n      background: theming.get-color-from-palette($background, 'hover');\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-menu-item {\n    font: {\n      family: typography-utils.font-family($config, body-1);\n      size: typography-utils.font-size($config, body-1);\n      weight: typography-utils.font-weight($config, body-1);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-menu') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './paginator-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n\n  .mat-paginator {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-paginator-decrement,\n  .mat-paginator-increment {\n    border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n    border-right: 2px solid theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-paginator-first,\n  .mat-paginator-last {\n    border-top: 2px solid theming.get-color-from-palette($foreground, 'icon');\n  }\n\n  .mat-icon-button[disabled] {\n    .mat-paginator-decrement,\n    .mat-paginator-increment,\n    .mat-paginator-first,\n    .mat-paginator-last {\n      border-color: theming.get-color-from-palette($foreground, 'disabled');\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-paginator,\n  .mat-paginator-page-size .mat-select-trigger {\n    font: {\n      family: typography-utils.font-family($config, caption);\n      size: typography-utils.font-size($config, caption);\n    }\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(paginator-variables.$density-config,\n    $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-paginator-container {\n      min-height: $height;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-paginator') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _color($palette) {\n  &.mat-radio-checked .mat-radio-outer-circle {\n    border-color: theming.get-color-from-palette($palette);\n  }\n\n  .mat-radio-inner-circle,\n  .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple),\n  &.mat-radio-checked .mat-radio-persistent-ripple,\n  &:active .mat-radio-persistent-ripple {\n    background-color: theming.get-color-from-palette($palette);\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-radio-outer-circle {\n    border-color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-radio-button {\n    &.mat-primary {\n      @include _color($primary);\n    }\n\n    &.mat-accent {\n      @include _color($accent);\n    }\n\n    &.mat-warn {\n      @include _color($warn);\n    }\n\n    // This needs extra specificity, because the classes above are combined\n    // (e.g. `.mat-radio-button.mat-accent`) which increases their specificity a lot.\n    // TODO: consider making the selectors into descendants (`.mat-primary .mat-radio-button`).\n    &.mat-radio-disabled {\n      &.mat-radio-checked .mat-radio-outer-circle,\n      .mat-radio-outer-circle {\n        border-color: theming.get-color-from-palette($foreground, disabled);\n      }\n\n      .mat-radio-ripple .mat-ripple-element,\n      .mat-radio-inner-circle {\n        background-color: theming.get-color-from-palette($foreground, disabled);\n      }\n\n      .mat-radio-label-content {\n        color: theming.get-color-from-palette($foreground, disabled);\n      }\n    }\n\n    // Switch this to a solid color since we're using `opacity`\n    // to control how opaque the ripple should be.\n    .mat-ripple-element {\n      background-color: map.get($foreground, base);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-radio-button {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-radio') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/style/private';\n@use '../core/style/form-common';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-select-value {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-select-placeholder {\n    color: form-common.private-control-placeholder-color($config);\n  }\n\n  .mat-select-disabled .mat-select-value {\n    color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  .mat-select-arrow {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-select-panel {\n    background: theming.get-color-from-palette($background, card);\n    @include private.private-theme-overridable-elevation(4, $config);\n\n    .mat-option.mat-selected:not(.mat-option-multiple) {\n      background: theming.get-color-from-palette($background, hover, 0.12);\n    }\n  }\n\n  .mat-form-field {\n    &.mat-focused {\n      &.mat-primary .mat-select-arrow {\n        color: theming.get-color-from-palette($primary, text);\n      }\n\n      &.mat-accent .mat-select-arrow {\n        color: theming.get-color-from-palette($accent, text);\n      }\n\n      &.mat-warn .mat-select-arrow {\n        color: theming.get-color-from-palette($warn, text);\n      }\n    }\n\n    .mat-select.mat-select-invalid .mat-select-arrow {\n      color: theming.get-color-from-palette($warn, text);\n    }\n\n    .mat-select.mat-select-disabled .mat-select-arrow {\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  // The unit-less line-height from the font config.\n  $line-height: typography-utils.line-height($config, input);\n\n  .mat-select {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-select-trigger {\n    height: typography-utils.private-coerce-unitless-to-em($line-height);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-select') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/style/private';\n@use '../core/theming/palette';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _checked-color($palette, $thumb-checked-hue) {\n  &.mat-checked {\n    .mat-slide-toggle-thumb {\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n    }\n\n    .mat-slide-toggle-bar {\n      // Opacity is determined from the specs for the selection controls.\n      // See: https://material.io/design/components/selection-controls.html#specs\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue, 0.54);\n    }\n\n    .mat-ripple-element {\n      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n      background-color: theming.get-color-from-palette($palette, $thumb-checked-hue);\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark: map.get($config, is-dark);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  // Color hues are based on the specs which briefly show the hues that are applied to a switch.\n  // The 2018 specs no longer describe how dark switches should look like. Due to the lack of\n  // information for dark themed switches, we partially keep the old behavior that is based on\n  // the previous specifications. For the checked color we always use the `default` hue because\n  // that follows MDC and also makes it easier for people to create a custom theme without needing\n  // to specify each hue individually.\n  $thumb-unchecked-hue: if($is-dark, 400, 50);\n  $thumb-checked-hue: default;\n\n  $bar-unchecked-color: theming.get-color-from-palette($foreground, disabled);\n  $ripple-unchecked-color: theming.get-color-from-palette($foreground, base);\n\n  .mat-slide-toggle {\n    @include _checked-color($accent, $thumb-checked-hue);\n\n    &.mat-primary {\n      @include _checked-color($primary, $thumb-checked-hue);\n    }\n\n    &.mat-warn {\n      @include _checked-color($warn, $thumb-checked-hue);\n    }\n\n    &:not(.mat-checked) .mat-ripple-element {\n      // Set no opacity for the ripples because the ripple opacity will be adjusted dynamically\n      // based on the type of interaction with the slide-toggle (e.g. for hover, focus)\n      background-color: $ripple-unchecked-color;\n    }\n  }\n\n  .mat-slide-toggle-thumb {\n    @include private.private-theme-elevation(1, $config);\n    background-color: theming.get-color-from-palette(palette.$grey-palette, $thumb-unchecked-hue);\n  }\n\n  .mat-slide-toggle-bar {\n    background-color: $bar-unchecked-color;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-slide-toggle-content {\n    font-family: typography-utils.font-family($config);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-slide-toggle') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use 'sass:meta';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin _inner-content-theme($palette) {\n  .mat-slider-track-fill,\n  .mat-slider-thumb,\n  .mat-slider-thumb-label {\n    background-color: theming.get-color-from-palette($palette);\n  }\n\n  .mat-slider-thumb-label-text {\n    color: theming.get-color-from-palette($palette, default-contrast);\n  }\n\n  .mat-slider-focus-ring {\n    $opacity: 0.2;\n    $color: theming.get-color-from-palette($palette, default, $opacity);\n    background-color: $color;\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($color) != color) {\n      opacity: $opacity;\n    }\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  $mat-slider-off-color: theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-off-focused-color: theming.get-color-from-palette($foreground, slider-off-active);\n  $mat-slider-disabled-color: theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-labeled-min-value-thumb-color:\n    theming.get-color-from-palette($foreground, slider-min);\n  $mat-slider-labeled-min-value-thumb-label-color:\n    theming.get-color-from-palette($foreground, slider-off);\n  $mat-slider-tick-opacity: 0.7;\n  $mat-slider-tick-color:\n    theming.get-color-from-palette($foreground, base, $mat-slider-tick-opacity);\n  $mat-slider-tick-size: 2px;\n\n  .mat-slider-track-background {\n    background-color: $mat-slider-off-color;\n  }\n\n  .mat-slider {\n    &.mat-primary {\n      @include _inner-content-theme($primary);\n    }\n\n    &.mat-accent {\n      @include _inner-content-theme($accent);\n    }\n\n    &.mat-warn {\n      @include _inner-content-theme($warn);\n    }\n  }\n\n  .mat-slider:hover,\n  .mat-slider.cdk-focused {\n    .mat-slider-track-background {\n      background-color: $mat-slider-off-focused-color;\n    }\n  }\n\n  .mat-slider.mat-slider-disabled {\n    .mat-slider-track-background,\n    .mat-slider-track-fill,\n    .mat-slider-thumb {\n      background-color: $mat-slider-disabled-color;\n    }\n\n    &:hover {\n      .mat-slider-track-background {\n        background-color: $mat-slider-disabled-color;\n      }\n    }\n  }\n\n  .mat-slider.mat-slider-min-value {\n    .mat-slider-focus-ring {\n      $opacity: 0.12;\n      $color: theming.get-color-from-palette($foreground, base, $opacity);\n      background-color: $color;\n\n      // `mat-color` uses `rgba` for the opacity which won't work with\n      // CSS variables so we need to use `opacity` as a fallback.\n      @if (meta.type-of($color) != color) {\n        opacity: $opacity;\n      }\n    }\n\n    &.mat-slider-thumb-label-showing {\n      .mat-slider-thumb,\n      .mat-slider-thumb-label {\n        background-color: $mat-slider-labeled-min-value-thumb-color;\n      }\n\n      &.cdk-focused {\n        .mat-slider-thumb,\n        .mat-slider-thumb-label {\n          background-color: $mat-slider-labeled-min-value-thumb-label-color;\n        }\n      }\n    }\n\n    &:not(.mat-slider-thumb-label-showing) {\n      .mat-slider-thumb {\n        border-color: $mat-slider-off-color;\n        background-color: transparent;\n      }\n\n      &:hover,\n      &.cdk-focused {\n        .mat-slider-thumb {\n          border-color: $mat-slider-off-focused-color;\n        }\n\n        &.mat-slider-disabled .mat-slider-thumb {\n          border-color: $mat-slider-disabled-color;\n        }\n      }\n    }\n  }\n\n  .mat-slider-has-ticks .mat-slider-wrapper::after {\n    border-color: $mat-slider-tick-color;\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n\n  .mat-slider-horizontal .mat-slider-ticks {\n    background-image: repeating-linear-gradient(to right, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n    // Firefox doesn't draw the gradient correctly with 'to right'\n    // (see https://bugzilla.mozilla.org/show_bug.cgi?id=1314319).\n    background-image: -moz-repeating-linear-gradient(0.0001deg, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n\n  .mat-slider-vertical .mat-slider-ticks {\n    background-image: repeating-linear-gradient(to bottom, $mat-slider-tick-color,\n        $mat-slider-tick-color $mat-slider-tick-size, transparent 0, transparent);\n\n    // `mat-color` uses `rgba` for the opacity which won't work with\n    // CSS variables so we need to use `opacity` as a fallback.\n    @if (meta.type-of($mat-slider-tick-color) != color) {\n      opacity: $mat-slider-tick-opacity;\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-slider-thumb-label-text {\n    font: {\n      family: typography-utils.font-family($config);\n      size: typography-utils.font-size($config, caption);\n      weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-slider') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/density/private/compatibility';\n@use './stepper-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-step-header {\n    &.cdk-keyboard-focused,\n    &.cdk-program-focused,\n    &:hover:not([aria-disabled]),\n    &:hover[aria-disabled='false'] {\n      background-color: theming.get-color-from-palette($background, hover);\n    }\n\n    &:hover[aria-disabled='true'] {\n      cursor: default;\n    }\n\n    // On touch devices the :hover state will linger on the element after a tap.\n    // Reset it via `@media` after the declaration, because the media query isn't\n    // supported by all browsers yet.\n    @media (hover: none) {\n      &:hover {\n        background: none;\n      }\n    }\n\n    .mat-step-label,\n    .mat-step-optional {\n      // TODO(josephperrott): Update to using a corrected disabled-text contrast\n      // instead of secondary-text.\n      color: theming.get-color-from-palette($foreground, secondary-text);\n    }\n\n    .mat-step-icon {\n      // TODO(josephperrott): Update to using a corrected disabled-text contrast\n      // instead of secondary-text.\n      background-color: theming.get-color-from-palette($foreground, secondary-text);\n      color: theming.get-color-from-palette($primary, default-contrast);\n    }\n\n    .mat-step-icon-selected,\n    .mat-step-icon-state-done,\n    .mat-step-icon-state-edit {\n      background-color: theming.get-color-from-palette($primary);\n      color: theming.get-color-from-palette($primary, default-contrast);\n    }\n\n    &.mat-accent {\n      .mat-step-icon {\n        color: theming.get-color-from-palette($accent, default-contrast);\n      }\n\n      .mat-step-icon-selected,\n      .mat-step-icon-state-done,\n      .mat-step-icon-state-edit {\n        background-color: theming.get-color-from-palette($accent);\n        color: theming.get-color-from-palette($accent, default-contrast);\n      }\n    }\n\n    &.mat-warn {\n      .mat-step-icon {\n        color: theming.get-color-from-palette($warn, default-contrast);\n      }\n\n      .mat-step-icon-selected,\n      .mat-step-icon-state-done,\n      .mat-step-icon-state-edit {\n        background-color: theming.get-color-from-palette($warn);\n        color: theming.get-color-from-palette($warn, default-contrast);\n      }\n    }\n\n    .mat-step-icon-state-error {\n      background-color: transparent;\n      color: theming.get-color-from-palette($warn, text);\n    }\n\n    .mat-step-label.mat-step-label-active {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-step-label.mat-step-label-error {\n      color: theming.get-color-from-palette($warn, text);\n    }\n  }\n\n  .mat-stepper-horizontal, .mat-stepper-vertical {\n    background-color: theming.get-color-from-palette($background, card);\n  }\n\n  .mat-stepper-vertical-line::before {\n    border-left-color: theming.get-color-from-palette($foreground, divider);\n  }\n\n  .mat-horizontal-stepper-header::before,\n  .mat-horizontal-stepper-header::after,\n  .mat-stepper-horizontal-line {\n    border-top-color: theming.get-color-from-palette($foreground, divider);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-stepper-vertical, .mat-stepper-horizontal {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-step-label {\n    font: {\n      size: typography-utils.font-size($config, body-1);\n      weight: typography-utils.font-weight($config, body-1);\n    };\n  }\n\n  .mat-step-sub-label-error {\n    font-weight: normal;\n  }\n\n  .mat-step-label-error {\n    font-size: typography-utils.font-size($config, body-2);\n  }\n\n  .mat-step-label-selected {\n    font: {\n      size: typography-utils.font-size($config, body-2);\n      weight: typography-utils.font-weight($config, body-2);\n    };\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(stepper-variables.$density-config,\n    $density-scale, height);\n  $vertical-padding: math.div($height - stepper-variables.$label-header-height, 2);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-horizontal-stepper-header {\n      height: $height;\n    }\n\n    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header,\n    .mat-vertical-stepper-header {\n      padding: $vertical-padding stepper-variables.$side-gap;\n    }\n\n    // Ensures that the vertical lines for the step content exceed into the step\n    // headers with a given distance (`$mat-stepper-line-gap`) to the step icon.\n    .mat-stepper-vertical-line::before {\n      top: stepper-variables.$line-gap - $vertical-padding;\n      bottom: stepper-variables.$line-gap - $vertical-padding;\n    }\n\n    // Ensures that the horizontal lines for the step header are centered vertically.\n    .mat-stepper-label-position-bottom .mat-horizontal-stepper-header {\n      &::after, &::before {\n        top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n      }\n    }\n\n    // Ensures that the horizontal line for the step content is aligned centered vertically.\n    .mat-stepper-label-position-bottom .mat-stepper-horizontal-line {\n      top: $vertical-padding + math.div(stepper-variables.$label-header-height, 2);\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-stepper') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n  $header-border: 1px solid theming.get-color-from-palette($foreground, divider);\n\n  .mat-tab-nav-bar,\n  .mat-tab-header {\n    border-bottom: $header-border;\n  }\n\n  .mat-tab-group-inverted-header {\n    .mat-tab-nav-bar,\n    .mat-tab-header {\n      border-top: $header-border;\n      border-bottom: none;\n    }\n  }\n\n  .mat-tab-label, .mat-tab-link {\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-tab-disabled {\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n\n  .mat-tab-header-pagination-chevron {\n    border-color: theming.get-color-from-palette($foreground, text);\n  }\n\n  .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    border-color: theming.get-color-from-palette($foreground, disabled-text);\n  }\n\n  // Remove header border when there is a background color\n  .mat-tab-group[class*='mat-background-'] > .mat-tab-header,\n  .mat-tab-nav-bar[class*='mat-background-'] {\n    border-bottom: none;\n    border-top: none;\n  }\n\n  .mat-tab-group, .mat-tab-nav-bar {\n    $theme-colors: (\n      primary: $primary,\n      accent: $accent,\n      warn: $warn\n    );\n\n    @each $name, $color in $theme-colors {\n      // Set the foreground color of the tabs\n      &.mat-#{$name} {\n        @include _label-focus-color($color);\n        @include _ink-bar-color($color);\n\n        // Override ink bar when background color is the same\n        &.mat-background-#{$name} {\n          > .mat-tab-header, > .mat-tab-link-container {\n            @include _ink-bar-color($color, default-contrast);\n          }\n        }\n      }\n    }\n\n    @each $name, $color in $theme-colors {\n      // Set background color of the tabs and override focus color\n      &.mat-background-#{$name} {\n        @include _label-focus-color($color);\n        @include _tabs-background($color);\n      }\n    }\n  }\n}\n\n@mixin _ink-bar-color($color, $hue: default) {\n  .mat-ink-bar {\n    background-color: theming.get-color-from-palette($color, $hue);\n  }\n}\n\n@mixin _label-focus-color($tab-focus-color) {\n  .mat-tab-label,\n  .mat-tab-link {\n    &.cdk-keyboard-focused,\n    &.cdk-program-focused {\n      &:not(.mat-tab-disabled) {\n        background-color: theming.get-color-from-palette($tab-focus-color, lighter, 0.3);\n      }\n    }\n  }\n}\n\n@mixin _tabs-background($background-color) {\n  // Note that these selectors target direct descendants so\n  // that the styles don't apply to any nested tab groups.\n\n  // Set background color for the tab group\n  > .mat-tab-header, > .mat-tab-link-container, > .mat-tab-header-pagination {\n    background-color: theming.get-color-from-palette($background-color);\n  }\n\n  // Set labels to contrast against background\n  > .mat-tab-header .mat-tab-label, > .mat-tab-link-container .mat-tab-link {\n    color: theming.get-color-from-palette($background-color, default-contrast);\n\n    &.mat-tab-disabled {\n      color: theming.get-color-from-palette($background-color, default-contrast, 0.4);\n    }\n  }\n\n  // Set pagination chevrons to contrast background\n  > .mat-tab-header .mat-tab-header-pagination-chevron,\n  > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,\n  > .mat-tab-link-container .mat-focus-indicator::before,\n  > .mat-tab-header .mat-focus-indicator::before {\n    border-color: theming.get-color-from-palette($background-color, default-contrast);\n  }\n\n  > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,\n  > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n    border-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n    opacity: 0.4;\n  }\n\n  // Set ripples color to be the contrast color of the new background. Otherwise the ripple\n  // color will be based on the app background color.\n  > .mat-tab-header .mat-ripple-element,\n  > .mat-tab-link-container .mat-ripple-element,\n  > .mat-tab-header-pagination .mat-ripple-element {\n    // Set the color opacity via `opacity`, rather than `rgba`, because it may be a CSS variable.\n    background-color: theming.get-color-from-palette($background-color, default-contrast, 1);\n    opacity: 0.12;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tab-group {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-tab-label, .mat-tab-link {\n    font: {\n      family: typography-utils.font-family($config, button);\n      size: typography-utils.font-size($config, button);\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-tabs') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/style/variables';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './toolbar-variables';\n\n@mixin _height($height) {\n  .mat-toolbar-multiple-rows {\n    min-height: $height;\n  }\n  .mat-toolbar-row, .mat-toolbar-single-row {\n    height: $height;\n  }\n}\n\n@mixin _palette-styles($palette) {\n  background: theming.get-color-from-palette($palette);\n  color: theming.get-color-from-palette($palette, default-contrast);\n}\n\n@mixin _form-field-overrides {\n  .mat-form-field-underline,\n  .mat-form-field-ripple,\n  .mat-focused .mat-form-field-ripple {\n    background-color: currentColor;\n  }\n\n  .mat-form-field-label,\n  .mat-focused .mat-form-field-label,\n  .mat-select-value,\n  .mat-select-arrow,\n  .mat-form-field.mat-focused .mat-select-arrow {\n    color: inherit;\n  }\n\n  .mat-input-element {\n    caret-color: currentColor;\n  }\n}\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-toolbar {\n    background: theming.get-color-from-palette($background, app-bar);\n    color: theming.get-color-from-palette($foreground, text);\n\n    &.mat-primary {\n      @include _palette-styles($primary);\n    }\n\n    &.mat-accent {\n      @include _palette-styles($accent);\n    }\n\n    &.mat-warn {\n      @include _palette-styles($warn);\n    }\n\n    @include _form-field-overrides;\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-toolbar,\n  .mat-toolbar h1,\n  .mat-toolbar h2,\n  .mat-toolbar h3,\n  .mat-toolbar h4,\n  .mat-toolbar h5,\n  .mat-toolbar h6 {\n    @include typography-utils.typography-level($config, title);\n    margin: 0;\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height-desktop: compatibility.private-density-prop-value(\n      toolbar-variables.$desktop-density-config, $density-scale, height);\n  $height-mobile: compatibility.private-density-prop-value(\n      toolbar-variables.$mobile-density-config, $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    // Set the default height for the toolbar.\n    @include _height($height-desktop);\n\n    // As per specs, toolbars should have a different height in mobile devices. This has been\n    // specified in the old guidelines and is still observable in the new specifications by\n    // looking at the spec images. See: https://material.io/design/components/app-bars-top.html#anatomy\n    @media (variables.$xsmall) {\n      @include _height($height-mobile);\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-toolbar') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use 'sass:math';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n\n$target-height: 22px;\n$font-size: 10px;\n$vertical-padding: math.div($target-height - $font-size, 2);\n\n$handset-target-height: 30px;\n$handset-font-size: 14px;\n$handset-vertical-padding: math.div($handset-target-height - $handset-font-size, 2);\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n\n  .mat-tooltip {\n    background: theming.get-color-from-palette($background, tooltip, 0.9);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tooltip {\n    font-family: typography-utils.font-family($config);\n    font-size: $font-size;\n    padding-top: $vertical-padding;\n    padding-bottom: $vertical-padding;\n  }\n\n  .mat-tooltip-handset {\n    font-size: $handset-font-size;\n    padding-top: $handset-vertical-padding;\n    padding-bottom: $handset-vertical-padding;\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-tooltip') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use 'sass:map';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/style/list-common';\n\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-list-base {\n    .mat-list-item {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-list-option {\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    .mat-subheader {\n      color: theming.get-color-from-palette($foreground, secondary-text);\n    }\n\n    .mat-list-item-disabled {\n      background-color: theming.get-color-from-palette($background, disabled-list-option);\n      color: theming.get-color-from-palette($foreground, disabled-text);\n    }\n  }\n\n  .mat-list-option,\n  .mat-nav-list .mat-list-item,\n  .mat-action-list .mat-list-item {\n    &:hover, &:focus {\n      background: theming.get-color-from-palette($background, 'hover');\n    }\n  }\n\n  .mat-list-single-selected-option {\n    &, &:hover, &:focus {\n      background: theming.get-color-from-palette($background, hover, 0.12);\n    }\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  $font-family: typography-utils.font-family($config);\n\n  .mat-list-item {\n    font-family: $font-family;\n  }\n\n  .mat-list-option {\n    font-family: $font-family;\n  }\n\n  // Default list\n  .mat-list-base {\n    .mat-list-item {\n      font-size: typography-utils.font-size($config, subheading-2);\n      @include list-common.base(typography-utils.font-size($config, body-1));\n    }\n\n    .mat-list-option {\n      font-size: typography-utils.font-size($config, subheading-2);\n      @include list-common.base(typography-utils.font-size($config, body-1));\n    }\n\n    .mat-subheader {\n      font-family: typography-utils.font-family($config, body-2);\n      font-size: typography-utils.font-size($config, body-2);\n      font-weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n\n  // Dense list\n  .mat-list-base[dense] {\n    .mat-list-item {\n      font-size: typography-utils.font-size($config, caption);\n      @include list-common.base(typography-utils.font-size($config, caption));\n    }\n\n    .mat-list-option {\n      font-size: typography-utils.font-size($config, caption);\n      @include list-common.base(typography-utils.font-size($config, caption));\n    }\n\n    .mat-subheader {\n      font-family: $font-family;\n      font-size: typography-utils.font-size($config, caption);\n      font-weight: typography-utils.font-weight($config, body-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-list') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n  $background: map.get($config, background);\n  $primary: map.get($config, primary);\n  $accent: map.get($config, accent);\n  $warn: map.get($config, warn);\n\n  .mat-option {\n    color: theming.get-color-from-palette($foreground, text);\n\n    &:hover:not(.mat-option-disabled),\n    &:focus:not(.mat-option-disabled) {\n      background: theming.get-color-from-palette($background, hover);\n    }\n\n    // In multiple mode there is a checkbox to show that the option is selected.\n    &.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {\n      background: theming.get-color-from-palette($background, hover);\n    }\n\n    &.mat-active {\n      background: theming.get-color-from-palette($background, hover);\n      color: theming.get-color-from-palette($foreground, text);\n    }\n\n    &.mat-option-disabled {\n      color: theming.get-color-from-palette($foreground, hint-text);\n    }\n  }\n\n  .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($primary, text);\n  }\n\n  .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($accent, text);\n  }\n\n  .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n    color: theming.get-color-from-palette($warn, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-option {\n    font: {\n      family: typography-utils.font-family($config);\n      size: typography-utils.font-size($config, subheading-2);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-option') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../theming/theming';\n@use '../typography/typography';\n@use '../typography/typography-utils';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $foreground: map.get($config, foreground);\n\n  .mat-optgroup-label {\n    color: theming.get-color-from-palette($foreground, secondary-text);\n  }\n\n  .mat-optgroup-disabled .mat-optgroup-label {\n    color: theming.get-color-from-palette($foreground, hint-text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-optgroup-label {\n    @include typography-utils.typography-level($config, body-2);\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-optgroup') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use '../core/theming/theming';\n@use '../core/theming/palette';\n@use '../core/style/private';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $is-dark-theme: map.get($config, is-dark);\n  $accent: map.get($config, accent);\n\n  .mat-snack-bar-container {\n    // Use the primary text on the dark theme, even though the lighter one uses\n    // a secondary, because the contrast on the light primary text is poor.\n    color: if($is-dark-theme, palette.$dark-primary-text, palette.$light-secondary-text);\n    background: if($is-dark-theme, map.get(palette.$grey-palette, 50), #323232);\n\n    @include private.private-theme-elevation(6, $config);\n  }\n\n  .mat-simple-snackbar-action {\n    color: if($is-dark-theme, inherit, theming.get-color-from-palette($accent, text));\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-simple-snackbar {\n    font: {\n      family: typography-utils.font-family($config, body-1);\n      size: typography-utils.font-size($config, body-1);\n    }\n  }\n\n  .mat-simple-snackbar-action {\n    line-height: 1;\n    font: {\n      family: inherit;\n      size: inherit;\n      weight: typography-utils.font-weight($config, button);\n    }\n  }\n}\n\n@mixin _density($config-or-theme) {}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-snack-bar') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include _density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n","@use 'sass:map';\n@use '../core/density/private/compatibility';\n@use '../core/theming/theming';\n@use '../core/typography/typography';\n@use '../core/typography/typography-utils';\n@use './tree-variables';\n\n@mixin color($config-or-theme) {\n  $config: theming.get-color-config($config-or-theme);\n  $background: map.get($config, background);\n  $foreground: map.get($config, foreground);\n\n  .mat-tree {\n    background: theming.get-color-from-palette($background, 'card');\n  }\n\n  .mat-tree-node,\n  .mat-nested-tree-node {\n    color: theming.get-color-from-palette($foreground, text);\n  }\n}\n\n@mixin typography($config-or-theme) {\n  $config: typography.private-typography-to-2014-config(\n      theming.get-typography-config($config-or-theme));\n  .mat-tree {\n    font-family: typography-utils.font-family($config);\n  }\n\n  .mat-tree-node,\n  .mat-nested-tree-node {\n    font-weight: typography-utils.font-weight($config, body-1);\n    font-size: typography-utils.font-size($config, body-1);\n  }\n}\n\n@mixin density($config-or-theme) {\n  $density-scale: theming.get-density-config($config-or-theme);\n  $height: compatibility.private-density-prop-value(tree-variables.$density-config,\n    $density-scale, height);\n\n  @include compatibility.private-density-legacy-compatibility() {\n    .mat-tree-node {\n      min-height: $height;\n    }\n  }\n}\n\n@mixin theme($theme-or-color-config) {\n  $theme: theming.private-legacy-get-theme($theme-or-color-config);\n  @include theming.private-check-duplicate-theme-styles($theme, 'mat-tree') {\n    $color: theming.get-color-config($theme);\n    $density: theming.get-density-config($theme);\n    $typography: theming.get-typography-config($theme);\n\n    @if $color != null {\n      @include color($color);\n    }\n    @if $density != null {\n      @include density($density);\n    }\n    @if $typography != null {\n      @include typography($typography);\n    }\n  }\n}\n\n","@use '@angular/cdk';\n\n@mixin ripple() {\n  // The host element of an mat-ripple directive should always have a position of \"absolute\" or\n  // \"relative\" so that the ripples inside are correctly positioned relatively to the container.\n  .mat-ripple {\n    overflow: hidden;\n\n    // By default, every ripple container should have position: relative in favor of creating an\n    // easy API for developers using the MatRipple directive.\n    position: relative;\n\n    // Promote containers that have ripples to a new layer. We want to target `:not(:empty)`,\n    // because we don't want all ripple containers to have their own layer since they're used in a\n    // lot of places and the layer is only relevant while animating. Note that ideally we'd use\n    // the `contain` property here (see #13175), because `:empty` can be broken by having extra\n    // text inside the element, but it isn't very well supported yet.\n    &:not(:empty) {\n      transform: translateZ(0);\n    }\n  }\n\n  .mat-ripple.mat-ripple-unbounded {\n    overflow: visible;\n  }\n\n  .mat-ripple-element {\n    position: absolute;\n    border-radius: 50%;\n    pointer-events: none;\n\n    transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);\n\n    // We use a 3d transform here in order to avoid an issue in Safari where\n    // the ripples aren't clipped when inside the shadow DOM (see #24028).\n    transform: scale3d(0, 0, 0);\n\n    // In high contrast mode the ripple is opaque, causing it to obstruct the content.\n    @include cdk.high-contrast(active, off) {\n      display: none;\n    }\n  }\n}\n","/// Emits a CSS class, `.cdk-visually-hidden`. This class can be applied to an element\n/// to make that element visually hidden while remaining available to assistive technology.\n@mixin a11y-visually-hidden() {\n  .cdk-visually-hidden {\n    border: 0;\n    clip: rect(0 0 0 0);\n    height: 1px;\n    margin: -1px;\n    overflow: hidden;\n    padding: 0;\n    position: absolute;\n    width: 1px;\n\n    // This works around a Chrome bug that can cause the tab to crash when large amounts of\n    // non-English text get wrapped: https://bugs.chromium.org/p/chromium/issues/detail?id=1201444\n    white-space: nowrap;\n\n    // Avoid browsers rendering the focus ring in some cases.\n    outline: 0;\n\n    // Avoid some cases where the browser will still render the native controls (see #9049).\n    -webkit-appearance: none;\n    -moz-appearance: none;\n\n    // We need at least one of top/bottom/left/right in order to prevent cases where the\n    // absolute-positioned element is pushed down and can affect scrolling (see #24597).\n    // `left` was chosen here, because it's the least likely to break overrides where the\n    // element might have been positioned (e.g. `mat-checkbox`).\n    left: 0;\n\n    [dir='rtl'] & {\n      left: auto;\n      right: 0;\n    }\n  }\n}\n\n/// @deprecated Use `a11y-visually-hidden`.\n@mixin a11y() {\n  @include a11y-visually-hidden;\n}\n\n/// Emits the mixin's content nested under `$selector-context` if `$selector-context`\n/// is non-empty.\n/// @param {String} selector-context The selector under which to nest the mixin's content.\n@mixin _optionally-nest-content($selector-context) {\n  @if ($selector-context == '') {\n    @content;\n  }\n  @else {\n    #{$selector-context} {\n      @content;\n    }\n  }\n}\n\n/// Applies styles for users in high contrast mode. Note that this only applies\n/// to Microsoft browsers. Chrome can be included by checking for the `html[hc]`\n/// attribute, however Chrome handles high contrast differently.\n///\n/// @param {String} target Type of high contrast setting to target. Defaults to `active`, can be\n///     `white-on-black` or `black-on-white`.\n/// @param {String} encapsulation Whether to emit styles for view encapsulation. Values are:\n///     * `on` - works for `Emulated`, `Native`, and `ShadowDom`\n///     * `off` - works for `None`\n///     * `any` - works for all encapsulation modes by emitting the CSS twice (default).\n@mixin high-contrast($target: active, $encapsulation: 'any') {\n  @if ($target != 'active' and $target != 'black-on-white' and $target != 'white-on-black') {\n    @error 'Unknown cdk-high-contrast value \"#{$target}\" provided. ' +\n           'Allowed values are \"active\", \"black-on-white\", and \"white-on-black\"';\n  }\n\n  @if ($encapsulation != 'on' and $encapsulation != 'off' and $encapsulation != 'any') {\n    @error 'Unknown cdk-high-contrast encapsulation \"#{$encapsulation}\" provided. ' +\n           'Allowed values are \"on\", \"off\", and \"any\"';\n  }\n\n  // If the selector context has multiple parts, such as `.section, .region`, just doing\n  // `.cdk-high-contrast-xxx #{&}` will only apply the parent selector to the first part of the\n  // context. We address this by nesting the selector context under .cdk-high-contrast.\n  @at-root {\n    $selector-context: #{&};\n\n    @if ($encapsulation != 'on') {\n      // Note that if this selector is updated, the same change has to be made inside\n      // `_overlay.scss` which can't depend on this mixin due to some infrastructure limitations.\n      .cdk-high-contrast-#{$target} {\n        @include _optionally-nest-content($selector-context) {\n          @content;\n        }\n      }\n    }\n\n    @if ($encapsulation != 'off') {\n      .cdk-high-contrast-#{$target} :host {\n        @include _optionally-nest-content($selector-context) {\n          @content;\n        }\n      }\n    }\n  }\n}\n","// We want overlays to always appear over user content, so set a baseline\n// very high z-index for the overlay container, which is where we create the new\n// stacking context for all overlays.\n$overlay-container-z-index: 1000 !default;\n$overlay-z-index: 1000 !default;\n$overlay-backdrop-z-index: 1000 !default;\n\n// Background color for all of the backdrops\n$overlay-backdrop-color: rgba(0, 0, 0, 0.32) !default;\n\n// Default backdrop animation is based on the Material Design swift-ease-out.\n$backdrop-animation-duration: 400ms !default;\n$backdrop-animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n\n/// Emits structural styles required for cdk/overlay to function.\n@mixin overlay() {\n  .cdk-overlay-container, .cdk-global-overlay-wrapper {\n    // Disable events from being captured on the overlay container.\n    pointer-events: none;\n\n    // The container should be the size of the viewport.\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n  }\n\n  // The overlay-container is an invisible element which contains all individual overlays.\n  .cdk-overlay-container {\n    position: fixed;\n    z-index: $overlay-container-z-index;\n\n    &:empty {\n      // Hide the element when it doesn't have any child nodes. This doesn't\n      // include overlays that have been detached, rather than disposed.\n      display: none;\n    }\n  }\n\n  // We use an extra wrapper element in order to use make the overlay itself a flex item.\n  // This makes centering the overlay easy without running into the subpixel rendering\n  // problems tied to using `transform` and without interfering with the other position\n  // strategies.\n  .cdk-global-overlay-wrapper {\n    display: flex;\n    position: absolute;\n    z-index: $overlay-z-index;\n  }\n\n  // A single overlay pane.\n  .cdk-overlay-pane {\n    // Note: it's important for this one to start off `absolute`,\n    // in order for us to be able to measure it correctly.\n    position: absolute;\n    pointer-events: auto;\n    box-sizing: border-box;\n    z-index: $overlay-z-index;\n\n    // For connected-position overlays, we set `display: flex` in\n    // order to force `max-width` and `max-height` to take effect.\n    display: flex;\n    max-width: 100%;\n    max-height: 100%;\n  }\n\n  .cdk-overlay-backdrop {\n    // TODO(jelbourn): reuse sidenav fullscreen mixin.\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n\n    z-index: $overlay-backdrop-z-index;\n    pointer-events: auto;\n    -webkit-tap-highlight-color: transparent;\n    transition: opacity $backdrop-animation-duration $backdrop-animation-timing-function;\n    opacity: 0;\n\n    &.cdk-overlay-backdrop-showing {\n      opacity: 1;\n\n      // Note that we can't import and use the `high-contrast` mixin from `_a11y.scss`, because\n      // this file will be copied to the top-level `cdk` package when putting together the files\n      // for npm. Any relative import paths we use here will become invalid once the file is copied.\n      .cdk-high-contrast-active & {\n        // In high contrast mode the rgba background will become solid\n        // so we need to fall back to making it opaque using `opacity`.\n        opacity: 0.6;\n      }\n    }\n  }\n\n  .cdk-overlay-dark-backdrop {\n    background: $overlay-backdrop-color;\n  }\n\n  .cdk-overlay-transparent-backdrop {\n    // Define a transition on the visibility so that the `transitionend` event can fire immediately.\n    transition: visibility 1ms linear, opacity 1ms linear;\n    visibility: hidden;\n    opacity: 1;\n\n    // Note: as of Firefox 57, having the backdrop be `background: none` will prevent it from\n    // capturing the user's mouse scroll events. Since we also can't use something like\n    // `rgba(0, 0, 0, 0)`, we work around the inconsistency by not setting the background at\n    // all and using `opacity` to make the element transparent.\n    &.cdk-overlay-backdrop-showing {\n      opacity: 0;\n      visibility: visible;\n    }\n  }\n\n  .cdk-overlay-backdrop-noop-animation {\n    transition: none;\n  }\n\n  // Overlay parent element used with the connected position strategy. Used to constrain the\n  // overlay element's size to fit within the viewport.\n  .cdk-overlay-connected-position-bounding-box {\n    position: absolute;\n    z-index: $overlay-z-index;\n\n    // We use `display: flex` on this element exclusively for centering connected overlays.\n    // When *not* centering, a top/left/bottom/right will be set which overrides the normal\n    // flex layout.\n    display: flex;\n\n    // We use the `column` direction here to avoid some flexbox issues in Edge\n    // when using the \"grow after open\" options.\n    flex-direction: column;\n\n    // Add some dimensions so the element has an `innerText` which some people depend on in tests.\n    min-width: 1px;\n    min-height: 1px;\n  }\n\n  // Used when disabling global scrolling.\n  .cdk-global-scrollblock {\n    position: fixed;\n\n    // Necessary for the content not to lose its width. Note that we're using 100%, instead of\n    // 100vw, because 100vw includes the width plus the scrollbar, whereas 100% is the width\n    // that the element had before we made it `fixed`.\n    width: 100%;\n\n    // Note: this will always add a scrollbar to whatever element it is on, which can\n    // potentially result in double scrollbars. It shouldn't be an issue, because we won't\n    // block scrolling on a page that doesn't have a scrollbar in the first place.\n    overflow-y: scroll;\n  }\n}\n","// Structural styles for the autosize text fields.\n@mixin text-field-autosize() {\n  // Remove the resize handle on autosizing textareas, because whatever height\n  // the user resized to will be overwritten once they start typing again.\n  textarea.cdk-textarea-autosize {\n    resize: none;\n  }\n\n  // This class is temporarily applied to the textarea when it is being measured. It is immediately\n  // removed when measuring is complete. We use `!important` rules here to make sure user-specified\n  // rules do not interfere with the measurement.\n  textarea.cdk-textarea-autosize-measuring {\n    @include _autosize-measuring-base;\n    height: auto !important;\n    overflow: hidden !important;\n  }\n\n  // Similar to the `cdk-textarea-autosize-measuring` class, but only applied on Firefox. We need\n  // to use this class, because Firefox has a bug where changing the `overflow` breaks the user's\n  // ability to undo/redo what they were typing (see #16629). This class is only scoped to Firefox,\n  // because the measurements there don't seem to be affected by the `height: 0`, whereas on other\n  // browsers they are, e.g. Chrome detects longer text and IE does't resize back to normal.\n  // Identical issue report: https://bugzilla.mozilla.org/show_bug.cgi?id=448784\n  textarea.cdk-textarea-autosize-measuring-firefox {\n    @include _autosize-measuring-base;\n    height: 0 !important;\n  }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin text-field-autofill() {\n  // Keyframes that apply no styles, but allow us to monitor when an text field becomes autofilled\n  // by watching for the animation events that are fired when they start. Note: the /*!*/ comment is\n  // needed to prevent LibSass from stripping the keyframes out.\n  // Based on: https://medium.com/@brunn/detecting-autofilled-fields-in-javascript-aed598d25da7\n  @keyframes cdk-text-field-autofill-start {/*!*/}\n  @keyframes cdk-text-field-autofill-end {/*!*/}\n\n  .cdk-text-field-autofill-monitored:-webkit-autofill {\n    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n    animation: cdk-text-field-autofill-start 0s 1ms;\n  }\n\n  .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n    // Since Chrome 80 we need a 1ms delay, or the animationstart event won't fire.\n    animation: cdk-text-field-autofill-end 0s 1ms;\n  }\n}\n\n@mixin _autosize-measuring-base {\n  // Having 2px top and bottom padding seems to fix a bug where Chrome gets an incorrect\n  // measurement. We just have to account for it later and subtract it off the final result.\n  padding: 2px 0 !important;\n  box-sizing: content-box !important;\n}\n\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$autofill-color-frame-count: 0;\n\n// Mixin used to apply custom background and foreground colors to an autofilled text field.\n// Based on: https://stackoverflow.com/questions/2781549/\n// removing-input-background-colour-for-chrome-autocomplete#answer-37432260\n@mixin text-field-autofill-color($background, $foreground:'') {\n  @keyframes cdk-text-field-autofill-color-#{$autofill-color-frame-count} {\n    to {\n      background: $background;\n      @if $foreground != '' { color: $foreground; }\n    }\n  }\n\n  &:-webkit-autofill {\n    animation: cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n  }\n\n  &.cdk-text-field-autofill-monitored:-webkit-autofill {\n    // Since Chrome 80 we need a 1ms delay for cdk-text-field-autofill-start, or the animationstart\n    // event won't fire.\n    animation: cdk-text-field-autofill-start 0s 1ms,\n               cdk-text-field-autofill-color-#{$autofill-color-frame-count} both;\n  }\n\n  $autofill-color-frame-count: $autofill-color-frame-count + 1 !global;\n}\n\n// @deprecated Use `autosize` and `autofill` instead.\n@mixin text-field {\n  @include text-field-autosize();\n  @include text-field-autofill();\n}\n","@use 'sass:map';\n@use '@angular/cdk';\n@use '../style/layout-common';\n\n// Private sass variables that will be used as reference throughout component stylesheets.\n$default-border-width: 3px;\n$default-border-style: solid;\n$default-border-color: transparent;\n$default-border-radius: 4px;\n\n// Mixin that renders the focus indicator structural styles.\n@mixin structural-styling($prefix) {\n  .#{$prefix}-focus-indicator {\n    position: relative;\n\n    &::before {\n      @include layout-common.fill();\n      box-sizing: border-box;\n      pointer-events: none;\n      display: var(--#{$prefix}-focus-indicator-display, none); // Hide the indicator by default.\n      border: var(\n          --#{$prefix}-focus-indicator-border-width,\n          #{$default-border-width}\n        )\n        var(\n          --#{$prefix}-focus-indicator-border-style,\n          #{$default-border-style}\n        )\n        var(\n          --#{$prefix}-focus-indicator-border-color,\n          #{$default-border-color}\n        );\n      border-radius: var(\n        --#{$prefix}-focus-indicator-border-radius,\n        #{$default-border-radius}\n      );\n    }\n\n    // By default, render the focus indicator when the focus indicator host element takes focus.\n    // Defining a pseudo element's content will cause it to render.\n    &:focus::before {\n      content: '';\n    }\n  }\n\n  // Enable the indicator in high contrast mode.\n  @include cdk.high-contrast(active, off) {\n    @include customize-focus-indicators((display: block), $prefix);\n  }\n}\n\n// Generates CSS variable declarations from a map.\n@mixin _output-variables($map) {\n  @each $key, $value in $map {\n    @if ($value) {\n      --#{$key}: #{$value};\n    }\n  }\n}\n\n// Mixin that dedups CSS variables for the strong-focus-indicators mixin.\n@mixin customize-focus-indicators($config, $prefix) {\n  $border-style: map.get($config, border-style);\n  $border-width: map.get($config, border-width);\n  $border-radius: map.get($config, border-radius);\n  $border-color: map.get($config, border-color);\n  $display: map.get($config, display);\n  $map: (\n    '#{$prefix}-focus-indicator-border-style': $border-style,\n    '#{$prefix}-focus-indicator-border-width': $border-width,\n    '#{$prefix}-focus-indicator-border-radius': $border-radius,\n    '#{$prefix}-focus-indicator-border-color': $border-color,\n    '#{$prefix}-focus-indicator-display': $display,\n  );\n\n  @if (&) {\n    @include _output-variables($map);\n  }\n  @else {\n    // We use `html` here instead of `:root`, because the\n    // latter causes some issues with internal tooling.\n    html {\n      @include _output-variables($map);\n    }\n  }\n}\n","// This mixin ensures an element spans to fill the nearest ancestor with defined positioning.\n@mixin fill {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n}\n","@import '@angular/flex-layout/mq';\n\n:root {\n  --toolbar-height: 56px;\n  --statusbar-height: 32px;\n}\n\n@include layout-bp(gt-xs) {\n  :root {\n    --toolbar-height: 64px;\n    --statusbar-height: 40px;\n  }\n}\n\n.mat-autocomplete-panel {\n  margin-top: 12px;\n  padding-bottom: 8px;\n  border-radius: 8px;\n  box-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3),\n    0 1px 3px 1px rgba(60, 64, 67, 0.15) !important;\n}\n\n.mat-button,\n.mat-flat-button {\n  svg {\n    margin-right: 6px;\n    fill: currentColor;\n  }\n}\n\n/** Fixes vertical alignment offset */\n.mat-icon-button .mat-icon {\n  display: block;\n  margin: auto;\n}\n\n.mat-option.contains-mat-select-search .mat-icon-button .mat-icon {\n  margin: auto !important;\n}\n\n.mat-card {\n  border: 1px solid var(--card-border-color);\n  border-bottom-width: 2px;\n  border-radius: 8px !important;\n  box-shadow: none !important;\n}\n\n.mat-card-title {\n  font-family: var(--font-family);\n}\n\n.mat-checkbox-label {\n  white-space: normal;\n}\n\n.mat-chip.mat-standard-chip.mat-chip-selected.mat-success {\n  background-color: var(--success);\n  color: white;\n\n  .mat-chip-remove {\n    color: white;\n  }\n}\n\n.mat-dialog-container {\n  position: relative;\n  border-radius: 10px !important;\n}\n\n.fullscreen .mat-dialog-container {\n  border-radius: 0 !important;\n\n  @include layout-bp(gt-sm) {\n    border-radius: 10px !important;\n  }\n}\n\n.mat-divider.spaced {\n  margin-top: 8px !important;\n  padding-bottom: 8px !important;\n}\n\n.mat-dialog-header {\n  padding: 24px;\n  margin: -24px -24px 0;\n  border-bottom: 1px solid rgba(0, 0, 0, 0.12);\n}\n\n.mat-card-content,\n.mat-dialog-content {\n  .mat-form-field {\n    @include layout-bp(gt-sm) {\n      font-size: 14px;\n\n      &.mat-form-field-appearance-fill .mat-form-field-infix {\n        padding: 0.225em 0 0.725em 0;\n      }\n    }\n  }\n}\n\n.mat-form-field-prefix .mat-icon {\n  margin-right: 4px;\n}\n\n.mat-nav-list .mat-list-item {\n  &:focus,\n  &:hover {\n    background-color: rgba(140, 140, 140, 0.08);\n\n    &.active {\n      background-color: rgba(var(--primary-rgb), 0.16) !important;\n    }\n  }\n\n  &.active {\n    background-color: rgba(var(--primary-rgb), 0.08) !important;\n  }\n}\n\n.mat-list-base .mat-list-item,\n.mat-list-base .mat-list-option {\n  max-width: 100vw;\n}\n\na.mat-list-item {\n  text-decoration: none;\n}\n\n.mat-menu-panel {\n  max-height: calc(100vh - 72px) !important;\n}\n\n.mat-menu-panel.dense {\n  min-height: 52px;\n\n  .mat-menu-item {\n    height: 36px;\n    line-height: 36px;\n  }\n}\n\n.mat-menu-item {\n  &[color='warn'],\n  &.mat-warn {\n    color: var(--warn);\n\n    .mat-icon {\n      color: currentColor;\n    }\n  }\n\n  &.active {\n    background-color: rgba(0, 0, 0, 0.04);\n    color: var(--primary);\n\n    .mat-icon {\n      color: currentColor;\n    }\n  }\n}\n\n.mat-progress-bar {\n  height: 3px !important;\n}\n\n.mat-radio-group-vertical {\n  flex-wrap: wrap;\n\n  .mat-radio-label {\n    flex-direction: column;\n\n    .mat-radio-label-content {\n      padding-left: 0;\n      padding-top: 8px;\n\n      &.mat-radio-label-before {\n        padding-right: 0;\n        padding-bottom: 8px;\n      }\n    }\n  }\n}\n\n.mat-select-value {\n  color: currentColor !important;\n}\n\n.mat-snack-bar-container {\n  @include layout-bp(lt-sm) {\n    margin: 0 !important;\n    border-radius: 0 !important;\n  }\n\n  .mat-simple-snackbar {\n    @media (orientation: portrait) {\n      align-items: start;\n      padding-bottom: env(safe-area-inset-bottom, 14px) !important;\n    }\n  }\n}\n\n.mat-subheader {\n  font-size: 11.5px !important;\n  font-weight: 500 !important;\n  text-transform: uppercase;\n  letter-spacing: 0.8px;\n}\n\n.mat-tab-nav-bar {\n  .mat-tab-links .mat-tab-link {\n    &.mat-tab-label-active {\n      color: var(--primary);\n      opacity: 1;\n    }\n  }\n}\n\n.mat-tooltip {\n  contain: style;\n}\n\n.mat-table {\n  thead {\n    background-color: var(--body-bg) !important;\n  }\n\n  .mat-header-row .mat-header-cell {\n    font-size: 0.875rem;\n  }\n\n  .mat-row {\n    &:hover,\n    &:focus {\n      cursor: pointer;\n    }\n\n    .mat-cell {\n      border-bottom-color: transparent;\n    }\n  }\n}\n\n.mat-toolbar h1 {\n  font-family: var(--font-family) !important;\n}\n\n.mat-drawer:not(.mat-drawer-end) {\n  .mat-nav-list {\n    .mat-list-item {\n      .mat-list-item-content {\n        padding-left: 24px;\n\n        .mat-list-text {\n          padding-left: 24px;\n          font-size: 15px;\n        }\n      }\n    }\n  }\n}\n\n::-webkit-scrollbar {\n  height: 16px;\n  overflow: visible;\n  width: 16px;\n}\n\n::-webkit-scrollbar-button {\n  height: 0;\n  width: 0;\n}\n\n::-webkit-scrollbar-corner {\n  background: transparent;\n}\n\n::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.2);\n  background-clip: padding-box;\n  border: solid transparent;\n  border-width: 1px 1px 1px 6px;\n  min-height: 28px;\n  padding: 100px 0 0;\n  box-shadow: inset 1px 1px 0 rgba(0, 0, 0, 0.1),\n    inset 0 -1px 0 rgba(0, 0, 0, 0.07);\n}\n\n::-webkit-scrollbar-track {\n  background-clip: padding-box;\n  border: solid transparent;\n  border-width: 0 0 0 4px;\n}\n","@charset \"UTF-8\";\n\n// Non-overlapping Material Design breakpoints\n// @type map\n$breakpoints: (\n  xs: (\n    begin: 0,\n    end: 599.9px\n  ),\n  sm: (\n    begin: 600px,\n    end: 959.9px\n  ),\n  md: (\n    begin: 960px,\n    end: 1279.9px\n  ),\n  lg: (\n    begin: 1280px,\n    end: 1919.9px\n  ),\n  xl: (\n    begin: 1920px,\n    end: 4999.99px\n  ),\n) !default;\n\n// Overlapping breakpoints that are greater than defined\n// Material Design breakpoints\n// @type map\n$overlapping-gt: (\n  gt-xs: 600px,\n  gt-sm: 960px,\n  gt-md: 1280px,\n  gt-lg: 1920px,\n) !default;\n\n// Overlapping breakpoints that are less than defined\n// Material Design breakpoints\n// @type map\n$overlapping-lt: (\n  lt-sm: 599.9px,\n  lt-md: 959.9px,\n  lt-lg: 1279.9px,\n  lt-xl: 1919.9px,\n) !default;\n\n\n// Media Query Mixin, takes a breakpoint and returns a wrapping\n// media query statement\n// e.g.\n//\n// @include layout-bp(xs) {\n//   background-color: red;\n// }\n//\n// becomes\n//\n// @media (min-width: 0px) and (max-width: 599px) {\n//   background-color: red;\n// }\n@mixin layout-bp($bp) {\n  @if map-has-key($breakpoints, $bp) {\n    $min: map-get(map-get($breakpoints, $bp), begin);\n    $max: map-get(map-get($breakpoints, $bp), end);\n    @media (min-width: $min) and (max-width: $max) { @content; }\n  }\n  @else if map-has-key($overlapping-gt, $bp) {\n    $min: map-get($overlapping-gt, $bp);\n    @media (min-width: $min) { @content; }\n  }\n  @else if map-has-key($overlapping-lt, $bp) {\n    $max: map-get($overlapping-lt, $bp);\n    @media (max-width: $max) { @content; }\n  }\n}\n","@import 'modules/material/material';\n@import '@angular/flex-layout/mq';\n\nbody {\n  -webkit-font-smoothing: subpixel-antialiased;\n}\n\na,\n.ix-link {\n  color: currentColor;\n  text-decoration: underline;\n  cursor: pointer;\n}\n\npre {\n  padding: 0 4px;\n  background: #fafafa;\n  border: 1px solid #c9c9c9;\n  color: #232427;\n}\n\n[hidden] {\n  display: none !important;\n}\n\n.ix-container {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  bottom: 0px;\n  right: 0px;\n  overflow: visible;\n  transform-style: preserve-3d;\n  backface-visibility: visible;\n  pointer-events: none;\n  contain: style;\n}\n\n.ix-surface {\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  bottom: 0px;\n  right: 0px;\n  transform-origin: center center;\n  backface-visibility: hidden;\n  transform-style: preserve-3d;\n  box-sizing: border-box;\n  -webkit-tap-highlight-color: transparent;\n  pointer-events: auto;\n}\n\n.ix-backdrop {\n  display: flex;\n  place-content: center;\n  align-items: center;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  bottom: 0px;\n  right: 0px;\n  background-color: rgba(var(--basic-rgb), 0.95);\n  pointer-events: none;\n}\n\n.ix-fullscreen-backdrop {\n  @extend .ix-backdrop;\n  position: fixed;\n}\n\n.ix-badge {\n  display: inline-block;\n  box-sizing: border-box;\n  height: 22px;\n  min-width: 16px;\n  padding: 0 5px;\n  background-color: #ebebeb;\n  border-radius: 2px;\n  text-align: center;\n  line-height: 22px;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(0, 0, 0, 0.87);\n}\n\n.ix-spinner {\n  height: 32px;\n  width: 32px;\n  margin: auto;\n\n  > svg {\n    animation: rotate 2s linear infinite;\n    will-change: transform;\n    transform-origin: center center;\n\n    > circle {\n      animation: dash 1.5s ease-in-out infinite;\n      stroke-dasharray: 1, 200;\n      stroke-dashoffset: 0;\n      stroke: rgba(0, 0, 0, 0.67);\n    }\n  }\n}\n\n@keyframes rotate {\n  100% {\n    transform: rotate(360deg);\n  }\n}\n\n@keyframes dash {\n  0% {\n    stroke-dasharray: 1, 200;\n    stroke-dashoffset: 0;\n  }\n  50% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -35px;\n  }\n  100% {\n    stroke-dasharray: 89, 200;\n    stroke-dashoffset: -124px;\n  }\n}\n\n.ix-content {\n  display: block;\n  position: relative;\n  overflow: auto;\n  -webkit-overflow-scrolling: touch;\n}\n\n.ix-section {\n  box-sizing: border-box;\n  width: 100%;\n  margin: 0 auto;\n}\n\n.ix-large-section {\n  @extend .ix-section;\n\n  @include layout-bp(gt-sm) {\n    max-width: 970px;\n  }\n\n  @include layout-bp(gt-md) {\n    max-width: 1200px;\n  }\n\n  @include layout-bp(gt-lg) {\n    max-width: 1600px;\n  }\n\n  @media screen and (min-width: 2251px) {\n    max-width: 2000px;\n  }\n}\n\n@include layout-bp(gt-xs) {\n  .py-gt-xs-1 {\n    padding-top: 1rem !important;\n    padding-bottom: 1rem !important;\n  }\n}\n","@import '@angular/flex-layout/mq';\n@import '../lists/styles';\n\n$card-padding: 24px;\n\n@mixin ix-card() {\n  padding: $card-padding !important;\n  margin-bottom: 8px !important;\n\n  @include layout-bp(gt-lg) {\n    margin-bottom: 16px !important;\n  }\n\n  .mat-card-title {\n    margin-bottom: 24px;\n\n    @include layout-bp(gt-xs) {\n      font-size: 20px;\n    }\n  }\n\n  .mat-list {\n    @include ix-list($card-padding);\n  }\n\n  > .mat-list > .mat-list-item,\n  > .mat-card-content > .mat-list > .mat-list-item {\n    @include layout-bp(xs) {\n      height: 72px !important;\n    }\n  }\n\n  .mat-list:last-child {\n    margin-bottom: -8px !important;\n  }\n}\n\n@mixin ix-tool-card() {\n  height: 180px;\n  width: 100%;\n\n  @include layout-bp(gt-xs) {\n    height: 370px;\n  }\n\n  .icon-container {\n    display: none;\n\n    @include layout-bp(gt-xs) {\n      display: block;\n    }\n\n    .icon {\n      display: flex;\n      flex-direction: column;\n      align-items: center;\n      justify-content: center;\n      margin: 1rem auto 0;\n      height: 120px;\n      width: 120px;\n      border-radius: 50%;\n      background-color: #f7f8fb;\n\n      body.dark & {\n        background-color: rgb(255, 255, 255, 0.1);\n      }\n    }\n  }\n\n  .mat-card-title {\n    padding: 16px 0 8px 0;\n    font-size: 1.2rem;\n  }\n\n  .mat-card-content {\n    padding: 0 0.5rem;\n\n    @include layout-bp(gt-xs) {\n      margin-bottom: 8px;\n    }\n\n    @include layout-bp(lt-sm) {\n      flex: 1;\n    }\n  }\n\n  .mat-card-actions .mat-button,\n  .mat-card-actions ix-vpn-installer-button,\n  .mat-card-actions ix-options-menu {\n    height: 40px;\n    line-height: 40px;\n\n    .tools-button-text {\n      display: inline-flex;\n      white-space: normal;\n      line-height: 1em;\n      text-align: left;\n    }\n  }\n}\n\n.ix-card {\n  @include ix-card();\n}\n\n.ix-mock-card {\n  @include ix-card();\n\n  .mat-card-title:after {\n    content: '';\n    display: inline-block;\n    width: 180px;\n    height: 12px;\n    margin-top: 12px;\n    background-color: rgba(var(--body-color-rgb), 0.08);\n  }\n}\n\n.ix-tool-card {\n  @include ix-tool-card();\n}\n","@import '@angular/flex-layout/mq';\n\n@mixin separator($padding: 24px) {\n  content: '';\n  width: calc(100% - #{$padding});\n  height: 1px;\n  position: absolute;\n  right: 0;\n  background-color: var(--card-border-color);\n}\n\n@mixin ix-list($padding: 24px) {\n  margin: 0 ($padding * -1);\n\n  .mat-list-item {\n    box-sizing: border-box;\n    height: 54px;\n    margin-top: -1px;\n    border: none;\n    border-top: 1px solid transparent;\n    border-bottom: 1px solid transparent;\n\n    &:after {\n      @include separator($padding);\n      bottom: -1px;\n    }\n\n    &:first-child {\n      margin-top: 0;\n    }\n\n    &:last-child,\n    &:last-child:first-child {\n      &:after {\n        display: none;\n      }\n    }\n\n    @include layout-bp(gt-xs) {\n      height: 44px;\n      font-size: 14px;\n\n      .mat-button {\n        line-height: 32px;\n      }\n    }\n  }\n\n  & .mat-list-item-content {\n    padding: 0 $padding 1px !important;\n  }\n\n  &.mat-action-list {\n    .mat-list-item:hover {\n      border-image: none;\n      border-color: var(--card-border-color);\n\n      &:first-child {\n        border-top: 1px solid var(--card-border-color);\n      }\n\n      & + .mat-list-item {\n        border-top-color: transparent;\n      }\n    }\n  }\n\n  & + .mat-list {\n    padding-top: 0;\n    position: relative;\n\n    .mat-subheader:first-child {\n      margin-top: 0;\n    }\n\n    &:before {\n      @include separator($padding);\n      top: -1px;\n    }\n  }\n\n  .mat-subheader {\n    padding-left: $padding;\n    padding-right: $padding;\n  }\n\n  .mat-list-item .mat-list-item-content {\n    span[fxflex\\.gt-xs^='1 1 '][fxflex\\.xs='1'] {\n      @include layout-bp(lt-sm) {\n        font-size: 0.825em;\n        margin-bottom: 0.175em;\n      }\n    }\n  }\n}\n",".mat-select-panel.agent-select-panel {\n  @include layout-bp(gt-sm) {\n    min-width: 400px !important;\n    max-width: 500px !important;\n  }\n\n  mat-option.mat-option {\n    padding-top: 6px;\n    padding-bottom: 6px;\n  }\n\n  .mat-option-text.mat-option-text {\n    padding-top: 12px;\n    padding-bottom: 12px;\n    font-size: 14px;\n    line-height: 1em;\n  }\n\n  .search-option {\n    .mat-option-text {\n      padding-top: 0px !important;\n      padding-bottom: 0px !important;\n    }\n  }\n\n  .contains-mat-select-search {\n    padding-bottom: 2px !important;\n  }\n\n  .mat-select-search-inner {\n    height: 43px !important;\n  }\n\n  .mat-select-search-inside-mat-option .mat-select-search-clear {\n    top: 1px !important;\n  }\n}\n",".mat-select-panel.audience-select-panel {\n  max-height: 297.5px;\n\n  .mat-option {\n    display: block;\n    height: auto;\n    padding: 8px;\n    color: var(--body-color);\n\n    .mat-option-text {\n      line-height: 1.5em;\n      display: block;\n    }\n\n    .audience {\n      user-select: none;\n      font-weight: 500;\n      line-height: 1.5em;\n    }\n\n    .roles {\n      user-select: none;\n      display: inline-flex;\n      font-size: 13px;\n      line-height: 1.25em;\n      white-space: normal;\n      margin-bottom: 3.5px;\n\n      .company-admin-icon {\n        font-size: 8px;\n        margin-left: 4px;\n        margin-right: 0px;\n        width: 16px;\n        height: 16px;\n        color: var(--primary);\n      }\n\n      .role:not(:last-child):after {\n        content: ' + ';\n        white-space: pre;\n      }\n    }\n  }\n}\n",".ix-checkbox {\n  height: 16px;\n  width: 16px;\n  padding: 10px;\n  border-radius: 20px;\n\n  /* Remove default checkbox */\n  [type='checkbox']:not(:checked),\n  [type='checkbox']:checked {\n    position: absolute;\n    opacity: 0;\n    pointer-events: none;\n  }\n\n  // Checkbox Styles\n  [type='checkbox'] {\n    // Text Label Style\n    + span {\n      position: relative;\n      padding-left: 16px;\n      cursor: pointer;\n      display: inline-block;\n      height: 16px;\n      line-height: 16px;\n      font-size: 1rem;\n      user-select: none;\n    }\n\n    + span:before,\n    + span:after {\n      box-sizing: border-box;\n    }\n\n    /* checkbox aspect */\n    + span:before {\n      content: '';\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 18px;\n      height: 18px;\n      z-index: 0;\n      border: 2px solid rgba(0, 0, 0, 0.54);\n      border-radius: 1px;\n      margin-top: 3px;\n    }\n  }\n\n  [type='checkbox']:checked {\n    + span:before {\n      top: -4px;\n      left: -5px;\n      width: 12px;\n      height: 22px;\n      border-top: 2px solid transparent;\n      border-left: 2px solid transparent;\n      border-right: 2px solid var(--primary);\n      border-bottom: 2px solid var(--primary);\n      transform: rotate(40deg);\n      backface-visibility: hidden;\n      transform-origin: 100% 100%;\n    }\n  }\n  // Filled in Style\n  [type='checkbox'] {\n    // General\n    + span:after {\n      border-radius: 2px;\n    }\n\n    + span:before,\n    + span:after {\n      content: '';\n      left: 0;\n      position: absolute;\n      z-index: 1;\n    }\n\n    // Unchecked style\n    &:not(:checked) + span:before {\n      width: 0;\n      height: 0;\n      border: 3px solid transparent;\n      left: 6px;\n      top: 10px;\n      transform: rotateZ(37deg);\n      transform-origin: 100% 100%;\n    }\n\n    &:not(:checked) + span:after {\n      height: 16px;\n      width: 16px;\n      background-color: transparent;\n      border: 2px solid rgba(0, 0, 0, 0.54);\n      top: 0px;\n      z-index: 0;\n    }\n\n    // Checked style\n    &:checked {\n      + span:before {\n        top: -2px;\n        left: 0;\n        width: 7px;\n        height: 12px;\n        border-top: 2px solid transparent;\n        border-left: 2px solid transparent;\n        border-right: 2px solid #fafafa;\n        border-bottom: 2px solid #fafafa;\n        transform: rotateZ(37deg);\n        transform-origin: 100% 100%;\n      }\n\n      + span:after {\n        top: 0;\n        width: 16px;\n        height: 16px;\n        border: 2px solid var(--accent);\n        background-color: var(--accent);\n        z-index: 0;\n      }\n    }\n  }\n}\n",".mat-select-panel.material-icon-select-panel {\n  .mat-optgroup {\n    display: block;\n    padding: 0 8px !important;\n    width: 280px;\n\n    &:last-child {\n      margin-bottom: 8px;\n    }\n\n    .mat-optgroup-label {\n      padding: 0 8px !important;\n      font-size: 11.5px !important;\n      font-weight: 500 !important;\n      text-transform: uppercase;\n      letter-spacing: 0.8px;\n    }\n\n    .mat-option {\n      display: inline-flex;\n      height: 40px;\n      width: 40px;\n      padding: 8px;\n      border-radius: 20px;\n      color: var(--body-color);\n\n      .mat-icon {\n        margin-right: 0;\n      }\n    }\n  }\n}\n",".mat-select-panel.role-select-panel {\n  max-height: 297.5px;\n\n  .mat-option {\n    display: block;\n    height: auto;\n    padding: 8px;\n    color: var(--body-color);\n\n    .mat-option-text {\n      line-height: 1.5em;\n      display: block;\n    }\n\n    .role {\n      user-select: none;\n      font-weight: 500;\n      line-height: 1.5em;\n\n      .company-admin-icon {\n        font-size: 8px;\n        margin-left: 4px;\n        width: 20px;\n        height: 20px;\n        color: var(--primary);\n      }\n    }\n\n    .permissions-audiences {\n      user-select: none;\n      display: inline-flex;\n      font-size: 13px;\n      line-height: 1.25em;\n      white-space: normal;\n      margin-bottom: 3.5px;\n    }\n  }\n}\n",".mat-select-panel.component-properties-select-panel {\n  @include layout-bp(gt-sm) {\n    min-width: 350px !important;\n  }\n\n  mat-option.mat-option {\n    height: unset;\n    padding-top: 6px;\n    padding-bottom: 6px;\n  }\n\n  .mat-option-text.mat-option-text {\n    white-space: normal;\n    line-height: 20px;\n  }\n\n  .mat-optgroup-label {\n    height: 2.5em;\n    line-height: 2.5em;\n  }\n\n  .contains-mat-select-search {\n    padding-bottom: 2px !important;\n  }\n\n  .mat-select-search-inside-mat-option .mat-select-search-clear {\n    top: 1px !important;\n  }\n}\n","@import '~tippy.js/dist/tippy.css';\n@import '~tippy.js/animations/scale-subtle.css';\n\n.ix-tippy-root {\n  .tippy-box {\n    background-color: transparent;\n\n    .tippy-content {\n      overflow: hidden;\n      background-color: rgba(97, 97, 97, 0.9);\n      border-radius: 4px;\n      font-family: Roboto, 'Helvetica Neue', sans-serif;\n      font-size: 10px;\n      color: white;\n    }\n  }\n}\n"],"mappings":"ACAA,mDAAmD,UAAU,kBAAkB,6BAA6B,WAAW,kBAAkB,sBAAsB,WDA/J,kBCA4L,eAAe,gBAAgB,mBAAmB,UAAU,iDAAiD,6CAA6C,SAAS,oDAAoD,YAAY,OAAO,uBAAuB,8BAAA,yBAAyB,4BAA4B,gDAAgD,MAAM,uDAAuD,SAAS,OAAO,uBAAuB,iCAAA,4BAA4B,+BAA+B,8CAA8C,QAAQ,qDAAqD,2BAA2B,+BAAA,0BAA0B,WAAW,6BAA6B,+CAA+C,OAAO,sDAAsD,UAAU,2BAA2B,gCAAA,2BAA2B,8BAA8B,6CAA6C,0DAA0D,aAAa,WAAW,YAAY,WAAW,oBAAoB,WAAW,kBAAkB,yBAAyB,mBAAmB,eAAe,kBDAr1C,gBCAu3C,UCAv3C,6DAA6D,wBAAwB,gEAAgE,qBAAqB,8DAA8D,uBAAuB,+DAA+D,sBAAsB,2DAA2D,oBAAoB,UCuNja,mBACE,gBACA,eACA,6CAGF,oCAEE,cAGF,oCACE,eCvCF,+FC5GE,oDAcF,sBL9FF,gBIqME,yFCrHE,oDAcF,sBL9FF,gBI8ME,uGC9HE,oDAcF,sBL9FF,gBIuNE,uGCvIE,oDAcF,sBL9FF,gBImOE,mDCnJE,uDLhFJ,gBIiPE,mDCjKE,sDLhFJ,gBI+PE,0FC/KE,oDAcF,sBDwKA,4FCtLE,oDAcF,sBD+KE,sGJ7QJ,gBIkRE,gFClME,oDAcF,sBD2LA,8CCzME,sDAcF,sBL9FF,gBI+RE,8CC/ME,oDAcF,sBL9FF,gBIqSE,8CCrNE,oDAcF,uBL9FF,gBI2SE,8CC3NE,oDAcF,sBL9FF,gBMqBE,4BD2DE,oDAcF,sBE0EA,4GAGI,6CACA,eACA,gBCxEJ,6BACE,6CCnEF,gBAEI,eACA,gBAIJ,iCACE,eAGF,qCAEE,eCsDF,cACE,6CAIF,yCACE,iBCdF,UACE,eACA,gBAEA,+EAEE,eC9DJ,WACE,6CAGF,iBACE,eACA,gBAGF,2BACE,eCkJF,cACE,6CAGF,mBACE,eAGF,qDAGI,eACA,gBAIJ,8BAEI,eACA,gBC/LJ,kBT0DE,oDAcF,sBUnCA,4BAEI,6CACA,eACA,gBAIJ,6BVaE,oDAcF,sBWuEA,gBX5FE,kBACA,gBACA,kBACA,6CAkBF,sBW2EA,wBACE,yBAMA,kEACE,eACA,kBAIF,gFACE,aACA,YAEA,oGACE,eACA,kBAKN,sBhBjMF,egBoMI,sCAIA,kLAzEF,4CAEA,sBA+EE,yHAjFF,4CAEA,sBAsFA,8BACE,cACA,qBAGF,sBACE,cAGF,0BAGE,iBAGF,kCACE,cACA,yBAIA,gCC3IA,0DACE,sBAGF,wDjBrGJ,kBiB0GM,oPAxDJ,kFAEA,sBA6DI,iKA/DJ,oFAEA,sBAqEI,0JAvEJ,oFAEA,sBA4EE,wDACE,cAGF,4DAGE,cAGF,oEACE,yBAIA,gCAMJ,aAGM,oPA3FN,4CAkGM,iKAlGN,4CA0GM,0JA1GN,4CCmBE,sDlBhFJ,sBkBoFI,sDACE,cACA,iBAIA,gPAnCJ,2CAEA,sBA0CI,wJA5CJ,2CAEA,sBCqDE,yDnB9GJ,cmBkHI,yDACE,cACA,kBAIA,sPA1CJ,4CAEA,sBAiDI,2JAnDJ,4CAEA,sBCpEA,4CAGE,eCJF,gEARA,mBACA,gBACA,uBAQE,cACA,sBAGA,8FACE,eC2DJ,wBACE,oBC9BF,eAEI,6CACA,eACA,gBCPJ,4DAGI,6CACA,eCwBJ,8BACE,6CCEF,oBACE,eCEF,0BACE,6CC+FF,6BAEI,6CACA,eACA,gBC/DJ,8CACE,6CAGF,gBAEI,eACA,gBAIJ,0BACE,gBAGF,sBACE,eAGF,yBAEI,eACA,gBCSJ,eACE,6CAGF,6BAEI,6CACA,eACA,gBClFJ,6G1BOE,oDAcF,sBL9FF,SgC0BE,aACE,6CACA,eACA,gBACA,mBAGF,qBACE,eACA,gBACA,mBCeF,gCACE,6CASA,8BACE,eZnDJ,wCARA,mBACA,gBACA,uBAQE,cACA,sBAGA,uDACE,eYgDF,gCACE,eZxDJ,0CARA,mBACA,gBACA,uBAQE,cACA,sBAGA,yDACE,eYqDF,8BACE,6CACA,eACA,gBAMF,qCACE,eZtEJ,+CARA,mBACA,gBACA,uBAQE,cACA,sBAGA,8DACE,eYmEF,uCACE,eZ3EJ,iDARA,mBACA,gBACA,uBAQE,cACA,sBAGA,gEACE,eYwEF,qCACE,6CACA,eACA,gBCzCJ,YAEI,6CACA,eClCJ,oB9B2DE,oDAcF,sB+BjEA,qBAEI,6CACA,eAIJ,4BACE,cAEE,oBACA,kBACA,gBChBJ,UACE,6CAGF,qCAEE,gBACA,eC3BF,YACE,gBAIA,kBAOA,wBACE,wBAIJ,iCACE,iBAGF,oBACE,kBtC3BJ,kBsC6BI,oBAEA,wDAIA,yBCeA,8CDXE,aCpCJ,qBACE,SACA,mBACA,WvCNJ,YuCQI,gBvCRJ,UuCUI,kBACA,UAIA,mBAGA,UAGA,wBACA,qBAMA,OAEA,+BACE,UACA,QChBJ,mDAEE,oBAGA,MACA,OACA,YACA,WAIF,uBACE,eACA,aAEA,6BAGE,aAQJ,4BACE,aACA,kBACA,aAIF,kBAGE,kBACA,oBACA,sBACA,aAIA,aACA,eACA,gBAGF,sBAEE,kBACA,MACA,SACA,OACA,QAEA,aACA,oBACA,wCACA,kDACA,UAEA,mDACE,UAKA,6EAGE,WAKN,2BACE,2BAGF,kCAEE,oDACA,kBACA,UAMA,+DACE,UACA,mBAIJ,qCACE,gBAKF,6CACE,kBACA,aAKA,aAIA,sBAGA,cACA,eAIF,wBACE,eAKA,WAKA,kBCjJF,+BACE,YAMF,yCzCXF,wByCqDE,iCAxCE,sBACA,0BASF,iDzCvBF,wByCqDE,iCA5BE,mBAUF,kDAAA,0CACA,gDAAA,wCAEA,oDAEE,uDAAA,+CAGF,0DAEE,qDAAA,6CCjCF,qBACE,kBAEA,4BCbF,MACA,OACA,QACA,SACA,kBDWI,sBACA,oBACA,aAAA,iDACA,6BAAA,wJ1CpBN,kB0CgCM,4DAQF,kCACE,WH6CA,0BG/BA,qCA3CJ,yBACE,kBAEA,gCCbF,MACA,OACA,QACA,SACA,kBDWI,sBACA,oBACA,aAAA,qDACA,6BAAA,oK1CpBN,kB0CgCM,gEAQF,sCACE,WH6CA,0BG/BA,yCDQJ,sDAEI,uBACwB,qBAH5B,8CAEI,uBACwB,qBAI5B,uDACE,uDAAA,+CAGF,yFAGE,4FAAA,oFzCjEJ,yBACE,a4CXF,MACE,uBACA,yBCiEE,0BD7DF,MACE,uBACA,0BAIJ,wBACE,gBACA,mB5ChBF,kB4CkBE,iEAMA,qCACE,iBACA,kBAKJ,2BACE,c5ChCF,Y4CoCA,kE5CpCA,sB4CwCA,UACE,0CACA,wB5C1CF,4B4C4CE,0BAGF,gBACE,+BAGF,oBACE,mBAGF,0DACE,gCACA,WAEA,2EACE,WAIJ,sBACE,kB5CjEF,6B4CqEA,kC5CrEA,0B6CqEI,0BDAJ,kC5CrEA,8B4C6EA,oBACE,yBACA,6BAGF,mB5ClFA,kC4CqFE,wCChBE,0BDqBF,sEAEI,eAEA,gL5C9FN,yB4CqGA,iCACE,iBAIA,sEAEE,2BAEA,oFACE,wDAIJ,oCACE,wDAIJ,8DAEE,gBAGF,gBACE,qBAGF,gBACE,wCAGF,sBACE,gBAEA,qCACE,YACA,iBAKF,mDAEE,kBAEA,uEACE,mBAIJ,sBACE,2BACA,qBAEA,gCACE,mBAKN,kBACE,qBAGF,0BACE,eAEA,2CACE,sBAEA,oEACE,eACA,gBAEA,2FACE,gBACA,mBAMR,kBACE,6BChHE,4BDmHJ,yB5C5LA,8C4CmMI,+BADF,8CAEI,kBACA,2DAKN,eACE,2BACA,0BACA,yBACA,oBAKE,mEACE,qBACA,UAKN,aACE,cAIA,iBACE,0CAGF,4CACE,kBAIA,oDAEE,eAGF,8BACE,gCAKN,gBACE,yCAMI,qFACE,kBAEA,oGACE,kBACA,eAOV,oBACE,YACA,iBACA,WAGF,2BACE,SACA,QAGF,2BACE,uBAGF,0BACE,uBACA,4BACA,yBACA,6BACA,gB5C1RF,kB4C4RE,0DAIF,0BACE,4BACA,yBACA,uBEhSF,KACE,4CAGF,WAEE,mBACA,0BACA,eAGF,I9CdA,c8CgBE,mBACA,yBACA,cAGF,SACE,uBAGF,cACE,kBACA,QACA,SACA,WACA,UACA,iBACA,4BACA,oCAAA,4BACA,oBACA,cAGF,YACE,kBACA,QACA,SACA,WACA,UACA,+BACA,mCAAA,2BACA,4BACA,sBACA,wCACA,oBAGF,qCACE,aACA,qBACA,mBACA,kBACA,QACA,SACA,WACA,UACA,4CACA,oBAGF,wBAEE,eAGF,UACE,qBACA,sBACA,YACA,e9C1EF,c8C4EE,yB9C5EF,kB8C8EE,kBACA,iBACA,eACA,gBACA,gBAGF,YACE,YACA,W9CvFF,Y8C0FE,gBACE,4CAAA,oCACA,sBACA,+BAEA,uBACE,iDAAA,yCACA,uBACA,oBACA,iBAKN,6BAEI,0BAFJ,qBAEI,0BAIJ,2BAEI,uBACA,wBAGA,wBACA,2BAGA,wBACA,0BAXJ,mBAEI,uBACA,wBAGA,wBACA,2BAGA,wBACA,0BAIJ,YACE,cACA,kBACA,cACA,iCAGF,8BACE,sBACA,W9CtIF,c6CqEI,0BCqEJ,kBAII,iBDzEA,2BCqEJ,kBAQI,kBD7EA,2BCqEJ,kBAYI,kBAGF,sCAfF,kBAgBI,kBDrFA,0BC0FF,YACE,2BACA,+BC5DJ,S/CrGA,uB+COE,4BF8DE,2BEgCJ,SA3FI,8BAGF,yBACE,mBFuDA,0BExDF,yBAII,gBAIJ,mB/CrBF,egDcE,kCACE,sBACA,YACA,gBACA,YACA,iCACA,oCAEA,wCAnBF,WACA,wBACA,WACA,kBACA,QACA,0CAgBI,YAGF,8CACE,aAKA,kHACE,aHmCJ,0BGvDF,kCAyBI,YACA,eAEA,8CACE,kBAKN,0ChDhDF,6BgDqDI,wDACE,qBAAA,kBACA,sCAEA,oEACE,8CAGF,uEACE,6BAKN,6BACE,cACA,kBAEA,wDACE,aAGF,oCAxEF,WACA,wBACA,WACA,kBACA,QACA,0CAqEI,SAIJ,kCACE,kBACA,mBHVA,4BGcA,qGAEI,iBACA,sBHzBJ,+CExCF,sFAGI,uBAIJ,8BACE,6BAwEJ,c/CzGA,uB+COE,4BF8DE,2BEoCJ,cA/FI,8BAGF,8BACE,mBFuDA,0BExDF,8BAII,gBAIJ,wB/CrBF,egDcE,uCACE,sBACA,YACA,gBACA,YACA,iCACA,oCAEA,6CAnBF,WACA,wBACA,WACA,kBACA,QACA,0CAgBI,YAGF,mDACE,aAKA,4HACE,aHmCJ,0BGvDF,uCAyBI,YACA,eAEA,mDACE,kBAKN,+ChDhDF,6BgDqDI,6DACE,qBAAA,kBACA,sCAEA,yEACE,8CAGF,4EACE,6BAKN,kCACE,cACA,kBAEA,6DACE,aAGF,yCAxEF,WACA,wBACA,WACA,kBACA,QACA,0CAqEI,SAIJ,uCACE,kBACA,mBHVA,4BGcA,0GAEI,iBACA,sBHzBJ,+CExCF,gGAGI,uBAIJ,mCACE,6BA2EF,oCACE,WACA,qBACA,YACA,YACA,gBACA,iDAIJ,cAhFE,aACA,WF8BE,0BEiDJ,cA5EI,cAGF,8BACE,aFuBA,0BExBF,8BAII,eAGF,oCACE,aACA,sBACA,mBACA,uB/CxDN,mB+C0DM,aACA,Y/C3DN,kB+C6DM,yBAEA,8CACE,2BAKN,8B/CrEF,mB+CuEI,iBAGF,gC/C1EF,gB6CqEI,0BEKF,gCAII,mBFLF,4BECF,gCAQI,QAIJ,oJAGE,YACA,iBAEA,6MACE,oBACA,mBACA,gBACA,gBF3BF,0BIrEJ,qCAEI,0BACA,2BAGF,2DACE,gBACA,mBAGF,sEACE,iBACA,oBACA,eACA,gBAIA,qEACE,wBACA,2BAIJ,iEACE,6BAGF,8DACE,sBAGF,mGACE,kBClCJ,wCACE,mBAEA,oDACE,cACA,YlDLJ,YkDOI,wBAEA,qEACE,kBACA,cAGF,8DACE,yBAAA,sBAAA,iBACA,gBACA,kBAGF,2DACE,yBAAA,sBAAA,iBACA,oBACA,eACA,mBACA,mBACA,oBAEA,+EACE,cACA,gBACA,eACA,WACA,YACA,qBAGF,wFACE,cACA,gBCvCR,aACE,YACA,WnDFF,gCmDOE,gFAEE,kBACA,UACA,oBAMA,kCACE,kBACA,kBACA,eACA,qBACA,YACA,iBACA,eACA,yBAAA,sBAAA,iBAGF,iFAEE,sBAIF,yCACE,WACA,kBACA,MACA,OACA,WACA,YACA,UACA,iCnD1CN,kBmD4CM,eAKF,iDACE,SACA,UACA,WACA,YACA,iCACA,kCACA,sCACA,uCACA,wBACA,mCAAA,2BACA,2BAMF,wCnDlEJ,kBmDsEI,iFAEE,WACA,OACA,kBACA,UAIF,uDACE,QACA,SACA,6BACA,SACA,SACA,wBACA,2BAGF,sDACE,YACA,WACA,6BACA,iCACA,QACA,UAKA,iDACE,SACA,OACA,UACA,YACA,iCACA,kCACA,+BACA,gCACA,wBACA,2BAGF,gDACE,MACA,WACA,YACA,+BACA,+BACA,UCtHN,2DACE,cpDFJ,wBoDII,YAEA,sEACE,kBAGF,+EpDVJ,wBoDYM,2BACA,0BACA,yBACA,oBAGF,uEACE,oBACA,YACA,WpDrBN,+BoDwBM,wBAEA,iFACE,eC3BR,oCACE,mBAEA,gDACE,cACA,YrDLJ,YqDOI,wBAEA,iEACE,kBACA,cAGF,sDACE,yBAAA,sBAAA,iBACA,gBACA,kBAEA,0EACE,cACA,gBACA,WACA,YACA,qBAIJ,uEACE,yBAAA,sBAAA,iBACA,oBACA,eACA,mBACA,mBACA,oBRmCF,0BSrEJ,oDAEI,2BAGF,0EACE,YAAA,eACA,gBACA,mBAGF,qFACE,mBACA,iBAGF,wEACE,aACA,kBAGF,gFACE,6BAGF,kHACE,kBCtBF,0BACE,6BAEA,yCACE,gBACA,2BvDTN,kBuDWM,6CACA,eACA,WvDWN,UAEE,YAGF,KA7BA,SA+BE,gBACA,6CACA,gCACA,wBACA","names":[],"sourceRoot":"webpack:///","file":"styles.5e5857c3faa6ae37.css","x_google_ignoreList":[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,45]}