-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathstyles.8619b418e94a3136fcaf.css.map
1 lines (1 loc) · 229 KB
/
styles.8619b418e94a3136fcaf.css.map
1
{"version":3,"sources":["webpack:///./node_modules/@angular/material/_theming.scss","webpack:///$stdin","webpack:///./src/styles.scss","webpack:///./src/styles/0-base/_typography.scss","webpack:///./src/styles/1-layouts/_layout-global.scss","webpack:///./src/styles/1-layouts/_api-pages.scss","webpack:///./src/styles/1-layouts/_content-layout.scss","webpack:///./src/styles/1-layouts/_doc-viewer.scss","webpack:///./src/styles/1-layouts/_footer.scss","webpack:///./src/styles/1-layouts/_marketing-layout.scss","webpack:///./src/styles/_mixins.scss","webpack:///./src/styles/1-layouts/_not-found.scss","webpack:///./src/styles/1-layouts/_sidenav.scss","webpack:///./src/styles/1-layouts/_table-of-contents.scss","webpack:///./src/styles/1-layouts/_top-menu.scss","webpack:///./src/styles/2-modules/_table.scss","webpack:///./src/styles/2-modules/_alert.scss","webpack:///./src/styles/2-modules/_api-pages.scss","webpack:///./src/styles/2-modules/_api-list.scss","webpack:///./src/styles/2-modules/_buttons.scss","webpack:///./src/styles/2-modules/_callout.scss","webpack:///./src/styles/2-modules/_card.scss","webpack:///./src/styles/2-modules/_code.scss","webpack:///./src/styles/2-modules/_contribute.scss","webpack:///./src/styles/2-modules/_contributor.scss","webpack:///./src/styles/2-modules/_details.scss","webpack:///./src/styles/2-modules/_edit-page-cta.scss","webpack:///./src/styles/2-modules/_features.scss","webpack:///./src/styles/2-modules/_filetree.scss","webpack:///./src/styles/2-modules/_heading-anchors.scss","webpack:///./src/styles/2-modules/_hr.scss","webpack:///./src/styles/2-modules/_images.scss","webpack:///./src/styles/2-modules/_notification.scss","webpack:///./src/styles/2-modules/_progress-bar.scss","webpack:///./src/styles/2-modules/_presskit.scss","webpack:///./src/styles/2-modules/_resources.scss","webpack:///./src/styles/2-modules/_scrollbar.scss","webpack:///./src/styles/2-modules/_search-results.scss","webpack:///./src/styles/2-modules/_toc.scss","webpack:///./src/styles/2-modules/_select-menu.scss","webpack:///./src/styles/2-modules/_deploy-theme.scss","webpack:///./src/styles/2-modules/_label.scss","webpack:///./src/styles/_translator.scss","webpack:///./src/styles/_print.scss"],"names":[],"mappings":"AA24II,kBAh+HF,iCC8+B8C,CD9+B9C,uBC8+BmF,CD9+BnF,wBAg+HE,kBAh+HF,wCCg/B+C,CDh/B/C,2BCg/BoF,CDh/BpF,4BAg+HE,kBAh+HF,wCCk/B+C,CDl/B/C,2BCk/BoF,CDl/BpF,4BAg+HE,kBAh+HF,wCCo/B+C,CDp/B/C,2BCo/BoF,CDp/BpF,4BAg+HE,kBAh+HF,wCCs/B+C,CDt/B/C,2BCs/BoF,CDt/BpF,6BAg+HE,kBAh+HF,wCCw/B+C,CDx/B/C,2BCw/BoF,CDx/BpF,6BAg+HE,kBAh+HF,wCC0/B+C,CD1/B/C,4BC0/BqF,CD1/BrF,6BAg+HE,kBAh+HF,wCC4/B+C,CD5/B/C,8BC4/BqF,CD5/BrF,+BAg+HE,kBAh+HF,wCC8/B+C,CD9/B/C,8BC8/BqF,CD9/BrF,+BAg+HE,kBAh+HF,wCCggC+C,CDhgC/C,8BCggCqF,CDhgCrF,+BAg+HE,mBAh+HF,wCCkgC+C,CDlgC/C,+BCkgCsF,CDlgCtF,+BAg+HE,mBAh+HF,wCCogC+C,CDpgC/C,+BCogCsF,CDpgCtF,+BAg+HE,mBAh+HF,wCCsgC+C,CDtgC/C,+BCsgCsF,CDtgCtF,+BAg+HE,mBAh+HF,wCCwgC+C,CDxgC/C,+BCwgCsF,CDxgCtF,+BAg+HE,mBAh+HF,wCC0gC+C,CD1gC/C,+BC0gCsF,CD1gCtF,+BAg+HE,mBAh+HF,wCC4gC+C,CD5gC/C,+BC4gCsF,CD5gCtF,+BAg+HE,mBAh+HF,yCC8gCgD,CD9gChD,+BC8gCuF,CD9gCvF,+BAg+HE,mBAh+HF,yCCghCgD,CDhhChD,+BCghCuF,CDhhCvF,+BAg+HE,mBAh+HF,yCCkhCgD,CDlhChD,+BCkhCuF,CDlhCvF,+BAg+HE,mBAh+HF,yCCohCgD,CDphChD,+BCohCuF,CDphCvF,+BAg+HE,mBAh+HF,0CCshCiD,CDthCjD,+BCshCwF,CDthCxF,+BAg+HE,mBAh+HF,0CCwhCiD,CDxhCjD,+BCwhCwF,CDxhCxF,+BAg+HE,mBAh+HF,0CC0hCiD,CD1hCjD,+BC0hCwF,CD1hCxF,+BAg+HE,mBAh+HF,0CC4hCiD,CD5hCjD,+BC4hCwF,CD5hCxF,+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","file":"styles.8619b418e94a3136fcaf.css","sourcesContent":["// Import all the theming functionality.\n// We can use relative imports for imports from the cdk because we bundle everything\n// up into a single flat scss file for material.\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$cdk-z-index-overlay-container: 1000;\n$cdk-z-index-overlay: 1000;\n$cdk-z-index-overlay-backdrop: 1000;\n\n// Background color for all of the backdrops\n$cdk-overlay-dark-backdrop-background: rgba(0, 0, 0, 0.288);\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\n@mixin cdk-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: $cdk-z-index-overlay-container;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay;\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: $cdk-z-index-overlay-backdrop;\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 // In high contrast mode the rgba background will become solid so we need to fall back\n // to making it opaque using `opacity`. Note that we can't use the `cdk-high-contrast`\n // mixin, because we can't normalize the import path to the _a11y.scss both for the\n // source and when this file is distributed. See #10908.\n @media screen and (-ms-high-contrast: active) {\n opacity: 0.6;\n }\n }\n }\n\n .cdk-overlay-dark-backdrop {\n background: $cdk-overlay-dark-backdrop-background;\n }\n\n .cdk-overlay-transparent-backdrop {\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 }\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: $cdk-z-index-overlay;\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\n@mixin cdk-a11y {\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 // 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}\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@mixin cdk-high-contrast {\n @media screen and (-ms-high-contrast: active) {\n @content;\n }\n}\n\n// Core styles that enable monitoring autofill state of text fields.\n@mixin cdk-text-field {\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.\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 animation-name: cdk-text-field-autofill-start;\n }\n\n .cdk-text-field-autofill-monitored:not(:-webkit-autofill) {\n animation-name: cdk-text-field-autofill-end;\n }\n\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 height: auto !important;\n overflow: hidden !important;\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\n// Used to generate UIDs for keyframes used to change the text field autofill styles.\n$cdk-text-field-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 cdk-text-field-autofill-color($background, $foreground:'') {\n @keyframes cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count} {\n to {\n background: $background;\n @if $foreground != '' { color: $foreground; }\n }\n }\n\n &:-webkit-autofill {\n animation-name: cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n animation-fill-mode: both;\n }\n\n &.cdk-text-field-autofill-monitored:-webkit-autofill {\n animation-name: cdk-text-field-autofill-start,\n cdk-text-field-autofill-color-#{$cdk-text-field-autofill-color-frame-count};\n }\n\n $cdk-text-field-autofill-color-frame-count:\n $cdk-text-field-autofill-color-frame-count + 1 !global;\n}\n\n\n// Core styles that can be used to apply material design treatments to any element.\n// Media queries\n// TODO(josephperrott): Change $mat-xsmall and $mat-small usages to rely on BreakpointObserver,\n$mat-xsmall: 'max-width: 599px';\n$mat-small: 'max-width: 959px';\n\n// TODO: Revisit all z-indices before beta\n// z-index master list\n\n$z-index-fab: 20 !default;\n$z-index-drawer: 100 !default;\n\n// Global constants\n$pi: 3.14159265;\n\n// Padding between input toggles and their labels\n$mat-toggle-padding: 8px !default;\n// Width and height of input toggles\n$mat-toggle-size: 20px !default;\n\n// Easing Curves\n// TODO(jelbourn): all of these need to be revisited\n\n// The default animation curves used by material design.\n$mat-linear-out-slow-in-timing-function: cubic-bezier(0, 0, 0.2, 0.1) !default;\n$mat-fast-out-slow-in-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;\n$mat-fast-out-linear-in-timing-function: cubic-bezier(0.4, 0, 1, 1) !default;\n\n$ease-in-out-curve-function: cubic-bezier(0.35, 0, 0.25, 1) !default;\n\n$swift-ease-out-duration: 400ms !default;\n$swift-ease-out-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1) !default;\n$swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !default;\n\n$swift-ease-in-duration: 300ms !default;\n$swift-ease-in-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2) !default;\n$swift-ease-in: all $swift-ease-in-duration $swift-ease-in-timing-function !default;\n\n$swift-ease-in-out-duration: 500ms !default;\n$swift-ease-in-out-timing-function: $ease-in-out-curve-function !default;\n$swift-ease-in-out: all $swift-ease-in-out-duration $swift-ease-in-out-timing-function !default;\n\n$swift-linear-duration: 80ms !default;\n$swift-linear-timing-function: linear !default;\n$swift-linear: all $swift-linear-duration $swift-linear-timing-function !default;\n\n\n\n// A collection of mixins and CSS classes that can be used to apply elevation to a material\n// element.\n// See: https://www.google.com/design/spec/what-is-material/elevation-shadows.html\n// Examples:\n//\n//\n// .mat-foo {\n// @include $mat-elevation(2);\n//\n// &:active {\n// @include $mat-elevation(8);\n// }\n// }\n//\n// <div id=\"external-card\" class=\"mat-elevation-z2\"><p>Some content</p></div>\n//\n// For an explanation of the design behind how elevation is implemented, see the design doc at\n// https://goo.gl/Kq0k9Z.\n\n// Colors for umbra, penumbra, and ambient shadows. As described in the design doc, each elevation\n// level is created using a set of 3 shadow values, one for umbra (the shadow representing the\n// space completely obscured by an object relative to its light source), one for penumbra (the\n// space partially obscured by an object), and one for ambient (the space which contains the object\n// itself). For a further explanation of these terms and their meanings, see\n// https://en.wikipedia.org/wiki/Umbra,_penumbra_and_antumbra.\n\n// Maps for the different shadow sets and their values within each z-space. These values were\n// created by taking a few reference shadow sets created by Google's Designers and interpolating\n// all of the values between them.\n\n@function _get-umbra-map($color) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, 0.2)}',\n 1: '0px 2px 1px -1px #{rgba($color, 0.2)}',\n 2: '0px 3px 1px -2px #{rgba($color, 0.2)}',\n 3: '0px 3px 3px -2px #{rgba($color, 0.2)}',\n 4: '0px 2px 4px -1px #{rgba($color, 0.2)}',\n 5: '0px 3px 5px -1px #{rgba($color, 0.2)}',\n 6: '0px 3px 5px -1px #{rgba($color, 0.2)}',\n 7: '0px 4px 5px -2px #{rgba($color, 0.2)}',\n 8: '0px 5px 5px -3px #{rgba($color, 0.2)}',\n 9: '0px 5px 6px -3px #{rgba($color, 0.2)}',\n 10: '0px 6px 6px -3px #{rgba($color, 0.2)}',\n 11: '0px 6px 7px -4px #{rgba($color, 0.2)}',\n 12: '0px 7px 8px -4px #{rgba($color, 0.2)}',\n 13: '0px 7px 8px -4px #{rgba($color, 0.2)}',\n 14: '0px 7px 9px -4px #{rgba($color, 0.2)}',\n 15: '0px 8px 9px -5px #{rgba($color, 0.2)}',\n 16: '0px 8px 10px -5px #{rgba($color, 0.2)}',\n 17: '0px 8px 11px -5px #{rgba($color, 0.2)}',\n 18: '0px 9px 11px -5px #{rgba($color, 0.2)}',\n 19: '0px 9px 12px -6px #{rgba($color, 0.2)}',\n 20: '0px 10px 13px -6px #{rgba($color, 0.2)}',\n 21: '0px 10px 13px -6px #{rgba($color, 0.2)}',\n 22: '0px 10px 14px -6px #{rgba($color, 0.2)}',\n 23: '0px 11px 14px -7px #{rgba($color, 0.2)}',\n 24: '0px 11px 15px -7px #{rgba($color, 0.2)}'\n );\n}\n\n@function _get-penumbra-map($color) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, 0.14)}',\n 1: '0px 1px 1px 0px #{rgba($color, 0.14)}',\n 2: '0px 2px 2px 0px #{rgba($color, 0.14)}',\n 3: '0px 3px 4px 0px #{rgba($color, 0.14)}',\n 4: '0px 4px 5px 0px #{rgba($color, 0.14)}',\n 5: '0px 5px 8px 0px #{rgba($color, 0.14)}',\n 6: '0px 6px 10px 0px #{rgba($color, 0.14)}',\n 7: '0px 7px 10px 1px #{rgba($color, 0.14)}',\n 8: '0px 8px 10px 1px #{rgba($color, 0.14)}',\n 9: '0px 9px 12px 1px #{rgba($color, 0.14)}',\n 10: '0px 10px 14px 1px #{rgba($color, 0.14)}',\n 11: '0px 11px 15px 1px #{rgba($color, 0.14)}',\n 12: '0px 12px 17px 2px #{rgba($color, 0.14)}',\n 13: '0px 13px 19px 2px #{rgba($color, 0.14)}',\n 14: '0px 14px 21px 2px #{rgba($color, 0.14)}',\n 15: '0px 15px 22px 2px #{rgba($color, 0.14)}',\n 16: '0px 16px 24px 2px #{rgba($color, 0.14)}',\n 17: '0px 17px 26px 2px #{rgba($color, 0.14)}',\n 18: '0px 18px 28px 2px #{rgba($color, 0.14)}',\n 19: '0px 19px 29px 2px #{rgba($color, 0.14)}',\n 20: '0px 20px 31px 3px #{rgba($color, 0.14)}',\n 21: '0px 21px 33px 3px #{rgba($color, 0.14)}',\n 22: '0px 22px 35px 3px #{rgba($color, 0.14)}',\n 23: '0px 23px 36px 3px #{rgba($color, 0.14)}',\n 24: '0px 24px 38px 3px #{rgba($color, 0.14)}'\n );\n}\n\n@function _get-ambient-map($color) {\n @return (\n 0: '0px 0px 0px 0px #{rgba($color, 0.12)}',\n 1: '0px 1px 3px 0px #{rgba($color, 0.12)}',\n 2: '0px 1px 5px 0px #{rgba($color, 0.12)}',\n 3: '0px 1px 8px 0px #{rgba($color, 0.12)}',\n 4: '0px 1px 10px 0px #{rgba($color, 0.12)}',\n 5: '0px 1px 14px 0px #{rgba($color, 0.12)}',\n 6: '0px 1px 18px 0px #{rgba($color, 0.12)}',\n 7: '0px 2px 16px 1px #{rgba($color, 0.12)}',\n 8: '0px 3px 14px 2px #{rgba($color, 0.12)}',\n 9: '0px 3px 16px 2px #{rgba($color, 0.12)}',\n 10: '0px 4px 18px 3px #{rgba($color, 0.12)}',\n 11: '0px 4px 20px 3px #{rgba($color, 0.12)}',\n 12: '0px 5px 22px 4px #{rgba($color, 0.12)}',\n 13: '0px 5px 24px 4px #{rgba($color, 0.12)}',\n 14: '0px 5px 26px 4px #{rgba($color, 0.12)}',\n 15: '0px 6px 28px 5px #{rgba($color, 0.12)}',\n 16: '0px 6px 30px 5px #{rgba($color, 0.12)}',\n 17: '0px 6px 32px 5px #{rgba($color, 0.12)}',\n 18: '0px 7px 34px 6px #{rgba($color, 0.12)}',\n 19: '0px 7px 36px 6px #{rgba($color, 0.12)}',\n 20: '0px 8px 38px 7px #{rgba($color, 0.12)}',\n 21: '0px 8px 40px 7px #{rgba($color, 0.12)}',\n 22: '0px 8px 42px 7px #{rgba($color, 0.12)}',\n 23: '0px 9px 44px 8px #{rgba($color, 0.12)}',\n 24: '0px 9px 46px 8px #{rgba($color, 0.12)}'\n );\n}\n\n// The default duration value for elevation transitions.\n$mat-elevation-transition-duration: 280ms !default;\n\n// The default easing value for elevation transitions.\n$mat-elevation-transition-timing-function: $mat-fast-out-slow-in-timing-function;\n\n// Prefix for elevation-related selectors.\n$_mat-elevation-prefix: 'mat-elevation-z';\n\n// Applies the correct css rules to an element to give it the elevation specified by $zValue.\n// The $zValue must be between 0 and 24.\n@mixin mat-elevation($zValue, $color: black) {\n @if type-of($zValue) != number or not unitless($zValue) {\n @error '$zValue must be a unitless number';\n }\n @if $zValue < 0 or $zValue > 24 {\n @error '$zValue must be between 0 and 24';\n }\n\n box-shadow: #{map-get(_get-umbra-map($color), $zValue)},\n #{map-get(_get-penumbra-map($color), $zValue)},\n #{map-get(_get-ambient-map($color), $zValue)};\n}\n\n// Applies the elevation to an element in a manner that allows\n// consumers to override it via the Material elevation classes.\n@mixin mat-overridable-elevation($zValue) {\n &:not([class*='#{$_mat-elevation-prefix}']) {\n @include mat-elevation($zValue);\n }\n}\n\n// Returns a string that can be used as the value for a transition property for elevation.\n// Calling this function directly is useful in situations where a component needs to transition\n// more than one property.\n//\n// .foo {\n// transition: mat-elevation-transition-property-value(), opacity 100ms ease;\n// }\n@function mat-elevation-transition-property-value(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function) {\n @return box-shadow #{$duration} #{$easing};\n}\n\n// Applies the correct css rules needed to have an element transition between elevations.\n// This mixin should be applied to elements whose elevation values will change depending on their\n// context (e.g. when active or disabled).\n//\n// NOTE(traviskaufman): Both this mixin and the above function use default parameters so they can\n// be used in the same way by clients.\n@mixin mat-elevation-transition(\n $duration: $mat-elevation-transition-duration,\n $easing: $mat-elevation-transition-timing-function) {\n transition: mat-elevation-transition-property-value($duration, $easing);\n}\n\n// Color palettes from the Material Design spec.\n// See https://www.google.com/design/spec/style/color.html\n//\n// Contrast colors are hard-coded because it is too difficult (probably impossible) to\n// calculate them. These contrast colors are pulled from the public Material Design spec swatches.\n// While the contrast colors in the spec are not prescriptive, we use them for convenience.\n\n\n// @deprecated renamed to $dark-primary-text.\n// @deletion-target 7.0.0\n$black-87-opacity: rgba(black, 0.87);\n// @deprecated renamed to $light-primary-text.\n// @deletion-target 7.0.0\n$white-87-opacity: rgba(white, 0.87);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @deletion-target 7.0.0\n$black-12-opacity: rgba(black, 0.12);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @deletion-target 7.0.0\n$white-12-opacity: rgba(white, 0.12);\n// @deprecated use $dark-[secondary-text,disabled-text,dividers,focused] instead.\n// @deletion-target 7.0.0\n$black-6-opacity: rgba(black, 0.06);\n// @deprecated use $light-[secondary-text,disabled-text,dividers,focused] instead.\n// @deletion-target 7.0.0\n$white-6-opacity: rgba(white, 0.06);\n\n$dark-primary-text: rgba(black, 0.87);\n$dark-secondary-text: rgba(black, 0.54);\n$dark-disabled-text: rgba(black, 0.38);\n$dark-dividers: rgba(black, 0.12);\n$dark-focused: rgba(black, 0.12);\n$light-primary-text: white;\n$light-secondary-text: rgba(white, 0.7);\n$light-disabled-text: rgba(white, 0.5);\n$light-dividers: rgba(white, 0.12);\n$light-focused: rgba(white, 0.12);\n\n$mat-red: (\n 50: #ffebee,\n 100: #ffcdd2,\n 200: #ef9a9a,\n 300: #e57373,\n 400: #ef5350,\n 500: #f44336,\n 600: #e53935,\n 700: #d32f2f,\n 800: #c62828,\n 900: #b71c1c,\n A100: #ff8a80,\n A200: #ff5252,\n A400: #ff1744,\n A700: #d50000,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-pink: (\n 50: #fce4ec,\n 100: #f8bbd0,\n 200: #f48fb1,\n 300: #f06292,\n 400: #ec407a,\n 500: #e91e63,\n 600: #d81b60,\n 700: #c2185b,\n 800: #ad1457,\n 900: #880e4f,\n A100: #ff80ab,\n A200: #ff4081,\n A400: #f50057,\n A700: #c51162,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-purple: (\n 50: #f3e5f5,\n 100: #e1bee7,\n 200: #ce93d8,\n 300: #ba68c8,\n 400: #ab47bc,\n 500: #9c27b0,\n 600: #8e24aa,\n 700: #7b1fa2,\n 800: #6a1b9a,\n 900: #4a148c,\n A100: #ea80fc,\n A200: #e040fb,\n A400: #d500f9,\n A700: #aa00ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-deep-purple: (\n 50: #ede7f6,\n 100: #d1c4e9,\n 200: #b39ddb,\n 300: #9575cd,\n 400: #7e57c2,\n 500: #673ab7,\n 600: #5e35b1,\n 700: #512da8,\n 800: #4527a0,\n 900: #311b92,\n A100: #b388ff,\n A200: #7c4dff,\n A400: #651fff,\n A700: #6200ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-indigo: (\n 50: #e8eaf6,\n 100: #c5cae9,\n 200: #9fa8da,\n 300: #7986cb,\n 400: #5c6bc0,\n 500: #3f51b5,\n 600: #3949ab,\n 700: #303f9f,\n 800: #283593,\n 900: #1a237e,\n A100: #8c9eff,\n A200: #536dfe,\n A400: #3d5afe,\n A700: #304ffe,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-blue: (\n 50: #e3f2fd,\n 100: #bbdefb,\n 200: #90caf9,\n 300: #64b5f6,\n 400: #42a5f5,\n 500: #2196f3,\n 600: #1e88e5,\n 700: #1976d2,\n 800: #1565c0,\n 900: #0d47a1,\n A100: #82b1ff,\n A200: #448aff,\n A400: #2979ff,\n A700: #2962ff,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $light-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-light-blue: (\n 50: #e1f5fe,\n 100: #b3e5fc,\n 200: #81d4fa,\n 300: #4fc3f7,\n 400: #29b6f6,\n 500: #03a9f4,\n 600: #039be5,\n 700: #0288d1,\n 800: #0277bd,\n 900: #01579b,\n A100: #80d8ff,\n A200: #40c4ff,\n A400: #00b0ff,\n A700: #0091ea,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-cyan: (\n 50: #e0f7fa,\n 100: #b2ebf2,\n 200: #80deea,\n 300: #4dd0e1,\n 400: #26c6da,\n 500: #00bcd4,\n 600: #00acc1,\n 700: #0097a7,\n 800: #00838f,\n 900: #006064,\n A100: #84ffff,\n A200: #18ffff,\n A400: #00e5ff,\n A700: #00b8d4,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-teal: (\n 50: #e0f2f1,\n 100: #b2dfdb,\n 200: #80cbc4,\n 300: #4db6ac,\n 400: #26a69a,\n 500: #009688,\n 600: #00897b,\n 700: #00796b,\n 800: #00695c,\n 900: #004d40,\n A100: #a7ffeb,\n A200: #64ffda,\n A400: #1de9b6,\n A700: #00bfa5,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-green: (\n 50: #e8f5e9,\n 100: #c8e6c9,\n 200: #a5d6a7,\n 300: #81c784,\n 400: #66bb6a,\n 500: #4caf50,\n 600: #43a047,\n 700: #388e3c,\n 800: #2e7d32,\n 900: #1b5e20,\n A100: #b9f6ca,\n A200: #69f0ae,\n A400: #00e676,\n A700: #00c853,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-light-green: (\n 50: #f1f8e9,\n 100: #dcedc8,\n 200: #c5e1a5,\n 300: #aed581,\n 400: #9ccc65,\n 500: #8bc34a,\n 600: #7cb342,\n 700: #689f38,\n 800: #558b2f,\n 900: #33691e,\n A100: #ccff90,\n A200: #b2ff59,\n A400: #76ff03,\n A700: #64dd17,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-lime: (\n 50: #f9fbe7,\n 100: #f0f4c3,\n 200: #e6ee9c,\n 300: #dce775,\n 400: #d4e157,\n 500: #cddc39,\n 600: #c0ca33,\n 700: #afb42b,\n 800: #9e9d24,\n 900: #827717,\n A100: #f4ff81,\n A200: #eeff41,\n A400: #c6ff00,\n A700: #aeea00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-yellow: (\n 50: #fffde7,\n 100: #fff9c4,\n 200: #fff59d,\n 300: #fff176,\n 400: #ffee58,\n 500: #ffeb3b,\n 600: #fdd835,\n 700: #fbc02d,\n 800: #f9a825,\n 900: #f57f17,\n A100: #ffff8d,\n A200: #ffff00,\n A400: #ffea00,\n A700: #ffd600,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-amber: (\n 50: #fff8e1,\n 100: #ffecb3,\n 200: #ffe082,\n 300: #ffd54f,\n 400: #ffca28,\n 500: #ffc107,\n 600: #ffb300,\n 700: #ffa000,\n 800: #ff8f00,\n 900: #ff6f00,\n A100: #ffe57f,\n A200: #ffd740,\n A400: #ffc400,\n A700: #ffab00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $dark-primary-text,\n 900: $dark-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $dark-primary-text,\n )\n);\n\n$mat-orange: (\n 50: #fff3e0,\n 100: #ffe0b2,\n 200: #ffcc80,\n 300: #ffb74d,\n 400: #ffa726,\n 500: #ff9800,\n 600: #fb8c00,\n 700: #f57c00,\n 800: #ef6c00,\n 900: #e65100,\n A100: #ffd180,\n A200: #ffab40,\n A400: #ff9100,\n A700: #ff6d00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $dark-primary-text,\n 700: $dark-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: black,\n )\n);\n\n$mat-deep-orange: (\n 50: #fbe9e7,\n 100: #ffccbc,\n 200: #ffab91,\n 300: #ff8a65,\n 400: #ff7043,\n 500: #ff5722,\n 600: #f4511e,\n 700: #e64a19,\n 800: #d84315,\n 900: #bf360c,\n A100: #ff9e80,\n A200: #ff6e40,\n A400: #ff3d00,\n A700: #dd2c00,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-brown: (\n 50: #efebe9,\n 100: #d7ccc8,\n 200: #bcaaa4,\n 300: #a1887f,\n 400: #8d6e63,\n 500: #795548,\n 600: #6d4c41,\n 700: #5d4037,\n 800: #4e342e,\n 900: #3e2723,\n A100: #d7ccc8,\n A200: #bcaaa4,\n A400: #8d6e63,\n A700: #5d4037,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $light-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n$mat-grey: (\n 50: #fafafa,\n 100: #f5f5f5,\n 200: #eeeeee,\n 300: #e0e0e0,\n 400: #bdbdbd,\n 500: #9e9e9e,\n 600: #757575,\n 700: #616161,\n 800: #424242,\n 900: #212121,\n A100: #ffffff,\n A200: #eeeeee,\n A400: #bdbdbd,\n A700: #616161,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $dark-primary-text,\n 500: $dark-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $dark-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-gray: $mat-grey;\n\n$mat-blue-grey: (\n 50: #eceff1,\n 100: #cfd8dc,\n 200: #b0bec5,\n 300: #90a4ae,\n 400: #78909c,\n 500: #607d8b,\n 600: #546e7a,\n 700: #455a64,\n 800: #37474f,\n 900: #263238,\n A100: #cfd8dc,\n A200: #b0bec5,\n A400: #78909c,\n A700: #455a64,\n contrast: (\n 50: $dark-primary-text,\n 100: $dark-primary-text,\n 200: $dark-primary-text,\n 300: $dark-primary-text,\n 400: $light-primary-text,\n 500: $light-primary-text,\n 600: $light-primary-text,\n 700: $light-primary-text,\n 800: $light-primary-text,\n 900: $light-primary-text,\n A100: $dark-primary-text,\n A200: $dark-primary-text,\n A400: $light-primary-text,\n A700: $light-primary-text,\n )\n);\n\n// Alias for alternate spelling.\n$mat-blue-gray: $mat-blue-grey;\n\n\n// Background palette for light themes.\n$mat-light-theme-background: (\n status-bar: map_get($mat-grey, 300),\n app-bar: map_get($mat-grey, 100),\n background: map_get($mat-grey, 50),\n hover: rgba(black, 0.04), // TODO(kara): check style with Material Design UX\n card: white,\n dialog: white,\n disabled-button: rgba(black, 0.12),\n raised-button: white,\n focused-button: $dark-focused,\n selected-button: map_get($mat-grey, 300),\n selected-disabled-button: map_get($mat-grey, 400),\n disabled-button-toggle: map_get($mat-grey, 200),\n unselected-chip: map_get($mat-grey, 300),\n disabled-list-option: map_get($mat-grey, 200),\n);\n\n// Background palette for dark themes.\n$mat-dark-theme-background: (\n status-bar: black,\n app-bar: map_get($mat-grey, 900),\n background: #303030,\n hover: rgba(white, 0.04), // TODO(kara): check style with Material Design UX\n card: map_get($mat-grey, 800),\n dialog: map_get($mat-grey, 800),\n disabled-button: rgba(white, 0.12),\n raised-button: map-get($mat-grey, 800),\n focused-button: $light-focused,\n selected-button: map_get($mat-grey, 900),\n selected-disabled-button: map_get($mat-grey, 800),\n disabled-button-toggle: black,\n unselected-chip: map_get($mat-grey, 700),\n disabled-list-option: black,\n);\n\n// Foreground palette for light themes.\n$mat-light-theme-foreground: (\n base: black,\n divider: $dark-dividers,\n dividers: $dark-dividers,\n disabled: $dark-disabled-text,\n disabled-button: rgba(black, 0.26),\n disabled-text: $dark-disabled-text,\n hint-text: $dark-disabled-text,\n secondary-text: $dark-secondary-text,\n icon: rgba(black, 0.54),\n icons: rgba(black, 0.54),\n text: rgba(black, 0.87),\n slider-min: rgba(black, 0.87),\n slider-off: rgba(black, 0.26),\n slider-off-active: rgba(black, 0.38),\n);\n\n// Foreground palette for dark themes.\n$mat-dark-theme-foreground: (\n base: white,\n divider: $light-dividers,\n dividers: $light-dividers,\n disabled: $light-disabled-text,\n disabled-button: rgba(white, 0.3),\n disabled-text: $light-disabled-text,\n hint-text: $light-disabled-text,\n secondary-text: $light-secondary-text,\n icon: white,\n icons: white,\n text: white,\n slider-min: white,\n slider-off: rgba(white, 0.3),\n slider-off-active: rgba(white, 0.3),\n);\n\n\n\n// For a given hue in a palette, return the contrast color from the map of contrast palettes.\n// @param $color-map\n// @param $hue\n@function mat-contrast($palette, $hue) {\n @return map-get(map-get($palette, contrast), $hue);\n}\n\n\n// Creates a map of hues to colors for a theme. This is used to define a theme palette in terms\n// of the Material Design hues.\n// @param $color-map\n// @param $primary\n// @param $lighter\n@function mat-palette($base-palette, $default: 500, $lighter: 100, $darker: 700) {\n $result: map_merge($base-palette, (\n default: map-get($base-palette, $default),\n lighter: map-get($base-palette, $lighter),\n darker: map-get($base-palette, $darker),\n\n default-contrast: mat-contrast($base-palette, $default),\n lighter-contrast: mat-contrast($base-palette, $lighter),\n darker-contrast: mat-contrast($base-palette, $darker)\n ));\n\n // For each hue in the palette, add a \"-contrast\" color to the map.\n @each $hue, $color in $base-palette {\n $result: map_merge($result, (\n '#{$hue}-contrast': mat-contrast($base-palette, $hue)\n ));\n }\n\n @return $result;\n}\n\n\n// Gets a color from a theme palette (the output of mat-palette).\n// The hue can be one of the standard values (500, A400, etc.), one of the three preconfigured\n// hues (default, lighter, darker), or any of the aforementioned prefixed with \"-contrast\".\n//\n// @param $color-map The theme palette (output of mat-palette).\n// @param $hue The hue from the palette to use. If this is a value between 0 and 1, it will\n// be treated as opacity.\n// @param $opacity The alpha channel value for the color.\n@function mat-color($palette, $hue: default, $opacity: null) {\n // If hueKey is a number between zero and one, then it actually contains an\n // opacity value, so recall this function with the default hue and that given opacity.\n @if type-of($hue) == number and $hue >= 0 and $hue <= 1 {\n @return mat-color($palette, default, $hue);\n }\n\n $color: map-get($palette, $hue);\n $opacity: if($opacity == null, opacity($color), $opacity);\n\n @return rgba($color, $opacity);\n}\n\n\n// Creates a container object for a light theme to be given to individual component theme mixins.\n@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: false,\n foreground: $mat-light-theme-foreground,\n background: $mat-light-theme-background,\n );\n}\n\n\n// Creates a container object for a dark theme to be given to individual component theme mixins.\n@function mat-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {\n @return (\n primary: $primary,\n accent: $accent,\n warn: $warn,\n is-dark: true,\n foreground: $mat-dark-theme-foreground,\n background: $mat-dark-theme-background,\n );\n}\n\n\n\n$mat-ripple-color-opacity: 0.1;\n\n@mixin mat-ripple() {\n // The host element of an mat-ripple directive should always have a position of \"absolute\" or\n // \"relative\" so that the ripple divs it creates inside itself are correctly positioned.\n .mat-ripple {\n overflow: hidden;\n\n // In high contrast mode the ripple is opaque, causing it to obstruct the content.\n @include cdk-high-contrast {\n display: none;\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 transform: scale(0);\n }\n}\n\n/* Theme for the ripple elements.*/\n@mixin mat-ripple-theme($theme) {\n $foreground: map_get($theme, foreground);\n $foreground-base: map_get($foreground, base);\n\n .mat-ripple-element {\n background-color: rgba($foreground-base, $mat-ripple-color-opacity);\n }\n}\n\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@function mat-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@function mat-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@function mat-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@function mat-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@function mat-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 @return if($font-family == null, $font-family, unquote($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@mixin mat-typography-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. Note\n // that we need to use interpolation for `font-size/line-height` in order to prevent\n // Sass from dividing the two values.\n font: $font-weight #{$font-size}/#{$line-height} $font-family;\n }\n}\n\n// Converts a typography level into CSS styles.\n@mixin mat-typography-level-to-styles($config, $level) {\n $font-size: mat-font-size($config, $level);\n $font-weight: mat-font-weight($config, $level);\n $line-height: mat-line-height($config, $level);\n $font-family: mat-font-family($config, $level);\n\n @include mat-typography-font-shorthand($font-size, $font-weight, $line-height, $font-family);\n letter-spacing: mat-letter-spacing($config, $level);\n}\n\n\n@mixin mat-option-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-option {\n color: mat-color($foreground, text);\n\n &:hover:not(.mat-option-disabled),\n &:focus:not(.mat-option-disabled) {\n background: mat-color($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: mat-color($background, hover);\n }\n\n &.mat-active {\n background: mat-color($background, hover);\n color: mat-color($foreground, text);\n }\n\n &.mat-option-disabled {\n color: mat-color($foreground, hint-text);\n }\n }\n\n .mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($primary);\n }\n\n .mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($accent);\n }\n\n .mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {\n color: mat-color($warn);\n }\n}\n\n@mixin mat-option-typography($config) {\n .mat-option {\n font: {\n family: mat-font-family($config, subheading-2);\n size: mat-font-size($config, subheading-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-optgroup-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-optgroup-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-optgroup-disabled .mat-optgroup-label {\n color: mat-color($foreground, hint-text);\n }\n}\n\n@mixin mat-optgroup-typography($config) {\n .mat-optgroup-label {\n @include mat-typography-level-to-styles($config, body-2);\n }\n}\n\n\n\n@mixin mat-pseudo-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\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 $colored-box-selector: '.mat-pseudo-checkbox-checked, .mat-pseudo-checkbox-indeterminate';\n\n .mat-pseudo-checkbox {\n color: mat-color(map-get($theme, foreground), secondary-text);\n\n &::after {\n color: mat-color($background, background);\n }\n }\n\n // Default to the accent color. Note that the pseudo checkboxes are meant to inherit the\n // theme from their parent, rather than implementing their own theming, which is why we\n // don't attach to the `mat-*` classes.\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate,\n .mat-accent .mat-pseudo-checkbox-checked,\n .mat-accent .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, accent));\n }\n\n .mat-primary .mat-pseudo-checkbox-checked,\n .mat-primary .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, primary));\n }\n\n .mat-warn .mat-pseudo-checkbox-checked,\n .mat-warn .mat-pseudo-checkbox-indeterminate {\n background: mat-color(map-get($theme, warn));\n }\n\n .mat-pseudo-checkbox-checked,\n .mat-pseudo-checkbox-indeterminate {\n &.mat-pseudo-checkbox-disabled {\n background: $disabled-color;\n }\n }\n}\n\n\n\n// Represents a typography level from the Material design spec.\n@function mat-typography-level(\n $font-size,\n $line-height: $font-size,\n $font-weight: 400,\n $font-family: null,\n $letter-spacing: null) {\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// Represents a collection of typography levels.\n// Defaults come from https://material.io/guidelines/style/typography.html\n@function mat-typography-config(\n $font-family: 'Roboto, \"Helvetica Neue\", sans-serif',\n $display-4: mat-typography-level(112px, 112px, 300),\n $display-3: mat-typography-level(56px, 56px, 400),\n $display-2: mat-typography-level(45px, 48px, 400),\n $display-1: mat-typography-level(34px, 40px, 400),\n $headline: mat-typography-level(24px, 32px, 400),\n $title: mat-typography-level(20px, 32px, 500),\n $subheading-2: mat-typography-level(16px, 28px, 400),\n $subheading-1: mat-typography-level(15px, 24px, 400),\n $body-2: mat-typography-level(14px, 24px, 500),\n $body-1: mat-typography-level(14px, 20px, 400),\n $caption: mat-typography-level(12px, 20px, 400),\n $button: mat-typography-level(14px, 14px, 500),\n // Line-height must be unit-less fraction of the font-size.\n $input: mat-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// Adds the base typography styles, based on a config.\n@mixin mat-base-typography($config, $selector: '.mat-typography') {\n .mat-h1, .mat-headline, #{$selector} h1 {\n @include mat-typography-level-to-styles($config, headline);\n margin: 0 0 16px;\n }\n\n .mat-h2, .mat-title, #{$selector} h2 {\n @include mat-typography-level-to-styles($config, title);\n margin: 0 0 16px;\n }\n\n .mat-h3, .mat-subheading-2, #{$selector} h3 {\n @include mat-typography-level-to-styles($config, subheading-2);\n margin: 0 0 16px;\n }\n\n .mat-h4, .mat-subheading-1, #{$selector} h4 {\n @include mat-typography-level-to-styles($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, #{$selector} h5 {\n @include mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.83,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-h6, #{$selector} h6 {\n @include mat-typography-font-shorthand(\n mat-font-size($config, body-1) * 0.67,\n mat-font-weight($config, body-1),\n mat-line-height($config, body-1),\n mat-font-family($config, body-1)\n );\n\n margin: 0 0 12px;\n }\n\n .mat-body-strong, .mat-body-2 {\n @include mat-typography-level-to-styles($config, body-2);\n }\n\n .mat-body, .mat-body-1, #{$selector} {\n @include mat-typography-level-to-styles($config, body-1);\n\n p {\n margin: 0 0 12px;\n }\n }\n\n .mat-small, .mat-caption {\n @include mat-typography-level-to-styles($config, caption);\n }\n\n // Note: The spec doesn't mention letter spacing. The value comes from\n // eyeballing it until it looked exactly like the spec examples.\n .mat-display-4, #{$selector} .mat-display-4 {\n @include mat-typography-level-to-styles($config, display-4);\n margin: 0 0 56px;\n letter-spacing: -0.05em;\n }\n\n .mat-display-3, #{$selector} .mat-display-3 {\n @include mat-typography-level-to-styles($config, display-3);\n margin: 0 0 64px;\n letter-spacing: -0.02em;\n }\n\n .mat-display-2, #{$selector} .mat-display-2 {\n @include mat-typography-level-to-styles($config, display-2);\n margin: 0 0 64px;\n letter-spacing: -0.005em;\n }\n\n .mat-display-1, #{$selector} .mat-display-1 {\n @include mat-typography-level-to-styles($config, display-1);\n margin: 0 0 64px;\n }\n}\n\n\n\n@mixin mat-autocomplete-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-autocomplete-panel {\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n\n // Selected options in autocompletes should not be gray, but we\n // only want to override the background for selected options if\n // they are *not* in hover or focus state. This change has to be\n // made here because base option styles are shared between the\n // autocomplete and the select.\n .mat-option.mat-selected:not(.mat-active):not(:hover) {\n background: mat-color($background, card);\n\n &:not(.mat-option-disabled) {\n color: mat-color($foreground, text);\n }\n }\n }\n\n}\n\n@mixin mat-autocomplete-typography($config) { }\n\n// 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\n\n\n\n\n$mat-badge-font-size: 12px;\n$mat-badge-font-weight: 600;\n$mat-badge-default-size: 22px !default;\n$mat-badge-small-size: $mat-badge-default-size - 6;\n$mat-badge-large-size: $mat-badge-default-size + 6;\n\n// Mixin for building offset given different sizes\n@mixin _mat-badge-size($size) {\n .mat-badge-content {\n width: $size;\n height: $size;\n line-height: $size;\n\n @include cdk-high-contrast {\n outline: solid 1px;\n border-radius: 0;\n }\n }\n\n &.mat-badge-above {\n .mat-badge-content {\n top: -$size / 2;\n }\n }\n\n &.mat-badge-below {\n .mat-badge-content {\n bottom: -$size / 2;\n }\n }\n\n &.mat-badge-before {\n margin-left: $size;\n\n .mat-badge-content {\n left: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n margin-left: 0;\n margin-right: $size;\n\n .mat-badge-content {\n left: auto;\n right: -$size;\n }\n }\n\n &.mat-badge-after {\n margin-right: $size;\n\n .mat-badge-content {\n right: -$size;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n margin-right: 0;\n margin-left: $size;\n\n .mat-badge-content {\n right: auto;\n left: -$size;\n }\n }\n\n &.mat-badge-overlap {\n &.mat-badge-before {\n margin-left: $size / 2;\n\n .mat-badge-content {\n left: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-before {\n margin-left: 0;\n margin-right: $size / 2;\n\n .mat-badge-content {\n left: auto;\n right: -$size / 2;\n }\n }\n\n &.mat-badge-after {\n margin-right: $size / 2;\n\n .mat-badge-content {\n right: -$size / 2;\n }\n }\n\n [dir='rtl'] &.mat-badge-after {\n margin-right: 0;\n margin-left: $size;\n\n .mat-badge-content {\n right: auto;\n left: -$size / 2;\n }\n }\n }\n}\n\n@mixin mat-badge-theme($theme) {\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $primary: map-get($theme, primary);\n\n .mat-badge-content {\n color: mat-color($primary, default-contrast);\n background: mat-color($primary);\n }\n\n .mat-badge-accent {\n .mat-badge-content {\n background: mat-color($accent);\n color: mat-color($accent, default-contrast);\n }\n }\n\n .mat-badge-warn {\n .mat-badge-content {\n color: mat-color($warn, default-contrast);\n background: mat-color($warn);\n }\n }\n\n .mat-badge {\n position: relative;\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 // 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 _mat-badge-size($mat-badge-small-size);\n }\n .mat-badge-medium {\n @include _mat-badge-size($mat-badge-default-size);\n }\n .mat-badge-large {\n @include _mat-badge-size($mat-badge-large-size);\n }\n}\n\n@mixin mat-badge-typography($config) {\n .mat-badge-content {\n font-weight: $mat-badge-font-weight;\n font-size: $mat-badge-font-size;\n font-family: mat-font-family($config);\n }\n\n .mat-badge-small .mat-badge-content {\n font-size: $mat-badge-font-size / 2;\n }\n\n .mat-badge-large .mat-badge-content {\n font-size: $mat-badge-font-size * 2;\n }\n}\n\n\n\n\n@mixin mat-bottom-sheet-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-bottom-sheet-container {\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-bottom-sheet-typography($config) {\n .mat-bottom-sheet-container {\n // Note: we don't use the line-height, because it's way too big.\n font-family: mat-font-family($config);\n font-size: mat-font-size($config, subheading-2);\n font-weight: mat-font-weight($config, subheading-2);\n }\n}\n\n\n\n\n// Applies a focus style to an mat-button element for each of the supported palettes.\n@mixin _mat-button-focus-overlay-color($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n &.mat-primary .mat-button-focus-overlay {\n background-color: mat-color($primary, 0.12);\n }\n\n &.mat-accent .mat-button-focus-overlay {\n background-color: mat-color($accent, 0.12);\n }\n\n &.mat-warn .mat-button-focus-overlay {\n background-color: mat-color($warn, 0.12);\n }\n\n &[disabled] .mat-button-focus-overlay {\n background-color: transparent;\n }\n}\n\n@mixin _mat-button-ripple-color($theme, $hue, $opacity: 0.1) {\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 background-color: mat-color($primary, $hue, $opacity);\n }\n\n &.mat-accent .mat-ripple-element {\n background-color: mat-color($accent, $hue, $opacity);\n }\n\n &.mat-warn .mat-ripple-element {\n background-color: mat-color($warn, $hue, $opacity);\n }\n}\n\n// Applies a property to an mat-button element for each of the supported palettes.\n@mixin _mat-button-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}: mat-color($primary, $hue);\n }\n &.mat-accent {\n #{$property}: mat-color($accent, $hue);\n }\n &.mat-warn {\n #{$property}: mat-color($warn, $hue);\n }\n\n &.mat-primary, &.mat-accent, &.mat-warn, &[disabled] {\n &[disabled] {\n $palette: if($property == 'color', $foreground, $background);\n #{$property}: mat-color($palette, disabled-button);\n }\n }\n}\n\n@mixin mat-button-theme($theme) {\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-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 _mat-button-theme-property($theme, 'color', default);\n @include _mat-button-focus-overlay-color($theme);\n\n // Setup the ripple color to be based on the color palette. The opacity can be a bit weaker\n // than for icon-buttons, because normal and stroked buttons have a focus overlay.\n @include _mat-button-ripple-color($theme, default);\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: mat-color($foreground, text);\n background-color: mat-color($background, raised-button);\n\n @include _mat-button-theme-property($theme, 'color', default-contrast);\n @include _mat-button-theme-property($theme, 'background-color', default);\n @include _mat-button-ripple-color($theme, default-contrast);\n }\n\n // Since icon buttons don't have a focus overlay, the ripple opacity should be the higher\n // than the default value.\n .mat-icon-button {\n @include _mat-button-ripple-color($theme, default, 0.2);\n }\n}\n\n@mixin mat-button-typography($config) {\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: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n@mixin mat-button-toggle-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-button-toggle {\n color: mat-color($foreground, hint-text);\n\n .mat-button-toggle-focus-overlay {\n background-color: mat-color($background, focused-button);\n }\n }\n\n .mat-button-toggle-checked {\n background-color: mat-color($background, selected-button);\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-button-toggle-disabled {\n background-color: mat-color($background, disabled-button-toggle);\n color: mat-color($foreground, disabled-button);\n\n &.mat-button-toggle-checked {\n background-color: mat-color($background, selected-disabled-button);\n }\n }\n}\n\n@mixin mat-button-toggle-typography($config) {\n .mat-button-toggle {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n@mixin mat-card-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-card {\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n }\n\n .mat-card-subtitle {\n color: mat-color($foreground, secondary-text);\n }\n}\n\n@mixin mat-card-typography($config) {\n .mat-card {\n font-family: mat-font-family($config);\n }\n\n .mat-card-title {\n font: {\n size: mat-font-size($config, headline);\n weight: mat-font-weight($config, headline);\n }\n }\n\n .mat-card-subtitle,\n .mat-card-content,\n .mat-card-header .mat-card-title {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n@mixin mat-checkbox-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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\n\n // The color of the checkbox's checkmark / mixedmark.\n $checkbox-mark-color: mat-color($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: mat-color(map-get($theme, 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 attribute on the SVG in order\n // 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: mat-color($primary);\n }\n\n &.mat-accent .mat-checkbox-background {\n background-color: mat-color($accent);\n }\n\n &.mat-warn .mat-checkbox-background {\n background-color: mat-color($warn);\n }\n }\n\n .mat-checkbox-disabled {\n &.mat-checkbox-checked, &.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: $disabled-color;\n }\n }\n\n .mat-checkbox:not(.mat-checkbox-disabled) {\n &.mat-primary .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($primary, 0.26);\n }\n\n &.mat-accent .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($accent, 0.26);\n }\n\n &.mat-warn .mat-checkbox-ripple .mat-ripple-element {\n background-color: mat-color($warn, 0.26);\n }\n }\n}\n\n@mixin mat-checkbox-typography($config) {\n .mat-checkbox {\n font-family: mat-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: mat-line-height($config, body-2);\n }\n}\n\n\n\n\n\n// TODO(crisbeto): these values don't correspond to any of the typography breakpoints.\n$mat-chip-font-size: 13px;\n$mat-chip-line-height: 18px;\n$mat-chip-remove-font-size: 18px;\n\n@mixin mat-chips-theme-color($color) {\n @include mat-chips-color(mat-color($color, default-contrast), mat-color($color));\n}\n\n@mixin mat-chips-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 .mat-chip-remove:hover {\n opacity: 0.54;\n }\n}\n\n@mixin mat-chips-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\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 $unselected-background: mat-color($background, unselected-chip);\n $unselected-foreground: mat-color($foreground, text);\n\n\n .mat-chip.mat-standard-chip {\n @include mat-chips-color($unselected-foreground, $unselected-background);\n }\n\n .mat-chip.mat-standard-chip.mat-chip-selected {\n\n &.mat-primary {\n @include mat-chips-theme-color($primary);\n }\n\n &.mat-warn {\n @include mat-chips-theme-color($warn);\n }\n\n &.mat-accent {\n @include mat-chips-theme-color($accent);\n }\n }\n}\n\n@mixin mat-chips-typography($config) {\n .mat-chip {\n font-size: $mat-chip-font-size;\n line-height: $mat-chip-line-height;\n\n .mat-chip-trailing-icon.mat-icon,\n .mat-chip-remove.mat-icon {\n font-size: $mat-chip-remove-font-size;\n }\n }\n}\n\n\n\n\n\n@mixin mat-table-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-table {\n background: mat-color($background, 'card');\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: mat-color($foreground, divider);\n }\n\n .mat-header-cell {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-cell, .mat-footer-cell {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-table-typography($config) {\n .mat-table {\n font-family: mat-font-family($config);\n }\n\n .mat-header-cell {\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n\n .mat-cell, .mat-footer-cell {\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n\n\n$mat-datepicker-selected-today-box-shadow-width: 1px;\n$mat-datepicker-selected-fade-amount: 0.6;\n$mat-datepicker-today-fade-amount: 0.2;\n$mat-calendar-body-font-size: 13px !default;\n$mat-calendar-weekday-table-font-size: 11px !default;\n\n@mixin _mat-datepicker-color($palette) {\n .mat-calendar-body-selected {\n background-color: mat-color($palette);\n color: mat-color($palette, default-contrast);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-selected {\n background-color: fade-out(mat-color($palette), $mat-datepicker-selected-fade-amount);\n }\n\n .mat-calendar-body-today.mat-calendar-body-selected {\n box-shadow: inset 0 0 0 $mat-datepicker-selected-today-box-shadow-width\n mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-datepicker-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-calendar-arrow {\n border-top-color: mat-color($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-popup .mat-calendar-next-button,\n .mat-datepicker-popup .mat-calendar-previous-button {\n color: mat-color($foreground, icon);\n }\n\n .mat-calendar-table-header {\n color: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-table-header-divider::after {\n background: mat-color($foreground, divider);\n }\n\n .mat-calendar-body-label {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-calendar-body-cell-content {\n color: mat-color($foreground, text);\n border-color: transparent;\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover,\n .cdk-keyboard-focused .mat-calendar-body-active,\n .cdk-program-focused .mat-calendar-body-active {\n & > .mat-calendar-body-cell-content:not(.mat-calendar-body-selected) {\n background-color: mat-color($background, hover);\n }\n }\n\n .mat-calendar-body-today:not(.mat-calendar-body-selected) {\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: mat-color($foreground, hint-text);\n }\n\n .mat-calendar-body-disabled > .mat-calendar-body-today:not(.mat-calendar-body-selected) {\n border-color: fade-out(mat-color($foreground, hint-text), $mat-datepicker-today-fade-amount);\n }\n\n @include _mat-datepicker-color(map-get($theme, primary));\n\n .mat-datepicker-content {\n background-color: mat-color($background, card);\n color: mat-color($foreground, text);\n\n &.mat-accent {\n @include _mat-datepicker-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n @include _mat-datepicker-color(map-get($theme, warn));\n }\n }\n\n .mat-datepicker-toggle-active {\n color: mat-color(map-get($theme, primary));\n\n &.mat-accent {\n color: mat-color(map-get($theme, accent));\n }\n\n &.mat-warn {\n color: mat-color(map-get($theme, warn));\n }\n }\n}\n\n@mixin mat-datepicker-typography($config) {\n .mat-calendar {\n font-family: mat-font-family($config);\n }\n\n .mat-calendar-body {\n font-size: $mat-calendar-body-font-size;\n }\n\n .mat-calendar-body-label,\n .mat-calendar-period-button {\n font: {\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n\n .mat-calendar-table-header th {\n font: {\n size: $mat-calendar-weekday-table-font-size;\n weight: mat-font-weight($config, body-1);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-dialog-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-dialog-container {\n background: mat-color($background, dialog);\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-dialog-typography($config) {\n .mat-dialog-title {\n @include mat-typography-level-to-styles($config, title);\n }\n}\n\n\n\n\n\n@mixin mat-expansion-panel-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-expansion-panel {\n background: mat-color($background, card);\n color: mat-color($foreground, text);\n }\n\n .mat-action-row {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {\n &:not([aria-disabled='true']) {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background: mat-color($background, hover);\n }\n }\n }\n\n .mat-expansion-panel-header-title {\n color: mat-color($foreground, text);\n }\n\n .mat-expansion-panel-header-description,\n .mat-expansion-indicator::after {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-expansion-panel-header[aria-disabled='true'] {\n color: mat-color($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 mat-expansion-panel-typography($config) {\n .mat-expansion-panel-header {\n font: {\n family: mat-font-family($config, subheading-1);\n size: mat-font-size($config, subheading-1);\n weight: mat-font-weight($config, subheading-1);\n }\n }\n\n .mat-expansion-panel-content {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\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 mat-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 mat-line-base($secondary-font-size) {\n .mat-line {\n @include mat-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 mat-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 mat-line-wrapper-base() {\n @include mat-normalize-text();\n\n display: flex;\n flex-direction: column;\n width: 100%;\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\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-grid-list-theme($theme) { }\n\n@mixin mat-grid-list-typography($config) {\n .mat-grid-tile-header,\n .mat-grid-tile-footer {\n @include mat-line-base(mat-font-size($config, caption));\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n\n// Include this empty mixin for consistency with the other components.\n@mixin mat-icon-theme($theme) {\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-icon {\n &.mat-primary {\n color: mat-color($primary);\n }\n\n &.mat-accent {\n color: mat-color($accent);\n }\n\n &.mat-warn {\n color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-icon-typography($config) { }\n\n\n\n\n\n// Renders a gradient for showing the dashed line when the input is disabled.\n// Unlike using a border, a gradient allows us to adjust the spacing of the dotted line\n// to match the Material Design spec.\n@mixin mat-control-disabled-underline($color) {\n background-image: linear-gradient(to right, $color 0%, $color 33%, transparent 0%);\n background-size: 4px 100%;\n background-repeat: repeat-x;\n}\n\n// Figures out the color of the placeholder for a form control.\n// Used primarily to prevent the various form controls from\n// becoming out of sync since these colors aren't in a pallette.\n@function _mat-control-placeholder-color($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n @return mat-color($foreground, secondary-text, if($is-dark-theme, 0.5, 0.42));\n}\n\n\n/* stylelint-disable material/no-prefixes */\n@mixin user-select($value) {\n -webkit-user-select: $value;\n -moz-user-select: $value;\n -ms-user-select: $value;\n user-select: $value;\n}\n\n@mixin input-placeholder {\n &::placeholder {\n @content;\n }\n\n &::-moz-placeholder {\n @content;\n }\n\n &::-webkit-input-placeholder {\n @content;\n }\n\n &:-ms-input-placeholder {\n @content;\n }\n}\n\n@mixin cursor-grab {\n cursor: -webkit-grab;\n cursor: grab;\n}\n\n@mixin cursor-grabbing {\n cursor: -webkit-grabbing;\n cursor: grabbing;\n}\n\n@mixin backface-visibility($value) {\n -webkit-backface-visibility: $value;\n backface-visibility: $value;\n}\n/* stylelint-enable */\n\n\n\n@mixin mat-input-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $foreground: map-get($theme, foreground);\n\n .mat-input-element:disabled {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-input-element {\n caret-color: mat-color($primary);\n\n @include input-placeholder {\n color: _mat-control-placeholder-color($theme);\n }\n }\n\n .mat-accent .mat-input-element {\n caret-color: mat-color($accent);\n }\n\n .mat-warn .mat-input-element,\n .mat-form-field-invalid .mat-input-element {\n caret-color: mat-color($warn);\n }\n}\n\n@mixin mat-input-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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: -$line-spacing * 1em;\n }\n}\n\n\n\n\n\n\n\n@mixin mat-list-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-list, .mat-nav-list, .mat-selection-list {\n .mat-list-item {\n color: mat-color($foreground, text);\n }\n\n .mat-list-option {\n color: mat-color($foreground, text);\n }\n\n .mat-subheader {\n color: mat-color($foreground, secondary-text);\n }\n }\n\n .mat-list-item-disabled {\n background-color: mat-color($background, disabled-list-option);\n }\n\n .mat-list-option,\n .mat-nav-list .mat-list-item {\n &:hover, &.mat-list-item-focus {\n background: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-list-typography($config) {\n $font-family: mat-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, .mat-nav-list, .mat-selection-list {\n .mat-list-item {\n font-size: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, subheading-2);\n @include mat-line-base(mat-font-size($config, body-1));\n }\n\n .mat-subheader {\n font-family: mat-font-family($config, body-2);\n font-size: mat-font-size($config, body-2);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n\n // Dense list\n .mat-list[dense], .mat-nav-list[dense], .mat-selection-list[dense] {\n .mat-list-item {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-list-option {\n font-size: mat-font-size($config, caption);\n @include mat-line-base(mat-font-size($config, caption));\n }\n\n .mat-subheader {\n font-family: $font-family;\n font-size: mat-font-size($config, caption);\n font-weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-menu-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-menu-panel {\n background: mat-color($background, 'card');\n }\n\n .mat-menu-item {\n background: transparent;\n color: mat-color($foreground, 'text');\n\n &[disabled] {\n &, &::after {\n color: mat-color($foreground, 'disabled');\n }\n }\n }\n\n .mat-menu-item .mat-icon:not([color]),\n .mat-menu-item-submenu-trigger::after {\n color: mat-color($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: mat-color($background, 'hover');\n }\n }\n}\n\n@mixin mat-menu-typography($config) {\n .mat-menu-item {\n font: {\n family: mat-font-family($config, subheading-2);\n size: mat-font-size($config, subheading-2);\n weight: mat-font-weight($config, subheading-2);\n }\n }\n}\n\n\n\n\n\n\n@mixin mat-paginator-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n\n .mat-paginator {\n background: mat-color($background, 'card');\n }\n\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-paginator-decrement,\n .mat-paginator-increment {\n border-top: 2px solid mat-color($foreground, 'icon');\n border-right: 2px solid mat-color($foreground, 'icon');\n }\n\n .mat-paginator-first,\n .mat-paginator-last {\n border-top: 2px solid mat-color($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: mat-color($foreground, 'disabled');\n }\n }\n}\n\n@mixin mat-paginator-typography($config) {\n .mat-paginator,\n .mat-paginator-page-size .mat-select-trigger {\n font: {\n family: mat-font-family($config, caption);\n size: mat-font-size($config, caption);\n }\n }\n}\n\n\n\n\n\n@mixin mat-progress-bar-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-bar-background {\n fill: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($primary, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($primary);\n }\n\n .mat-progress-bar.mat-accent {\n .mat-progress-bar-background {\n fill: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($accent, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($accent);\n }\n }\n\n .mat-progress-bar.mat-warn {\n .mat-progress-bar-background {\n fill: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-buffer {\n background-color: mat-color($warn, lighter);\n }\n\n .mat-progress-bar-fill::after {\n background-color: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-bar-typography($config) { }\n\n\n\n\n\n\n@mixin mat-progress-spinner-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-progress-spinner, .mat-spinner {\n circle {\n stroke: mat-color($primary);\n }\n\n &.mat-accent circle {\n stroke: mat-color($accent);\n }\n\n &.mat-warn circle {\n stroke: mat-color($warn);\n }\n }\n}\n\n@mixin mat-progress-spinner-typography($config) { }\n\n\n\n\n\n@mixin _mat-radio-color($palette) {\n &.mat-radio-checked .mat-radio-outer-circle {\n border-color: mat-color($palette);\n }\n\n .mat-radio-inner-circle {\n background-color: mat-color($palette);\n }\n\n .mat-radio-ripple .mat-ripple-element {\n background-color: mat-color($palette, 0.26);\n }\n}\n\n@mixin mat-radio-theme($theme) {\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-radio-outer-circle {\n border-color: mat-color($foreground, secondary-text);\n }\n\n .mat-radio-disabled .mat-radio-outer-circle {\n border-color: mat-color($foreground, disabled);\n }\n\n .mat-radio-disabled {\n .mat-radio-ripple .mat-ripple-element, .mat-radio-inner-circle {\n background-color: mat-color($foreground, disabled);\n }\n\n .mat-radio-label-content {\n color: mat-color($foreground, disabled);\n }\n }\n\n .mat-radio-button {\n &.mat-primary {\n @include _mat-radio-color($primary);\n }\n\n &.mat-accent {\n @include _mat-radio-color($accent);\n }\n\n &.mat-warn {\n @include _mat-radio-color($warn);\n }\n }\n}\n\n@mixin mat-radio-typography($config) {\n .mat-radio-button {\n font-family: mat-font-family($config);\n }\n}\n\n\n\n\n\n\n\n@mixin mat-select-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n\n .mat-select-content, .mat-select-panel-done-animating {\n background: mat-color($background, card);\n }\n\n .mat-select-value {\n color: mat-color($foreground, text);\n }\n\n .mat-select-placeholder {\n color: _mat-control-placeholder-color($theme);\n }\n\n .mat-select-disabled .mat-select-value {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-select-arrow {\n color: mat-color($foreground, secondary-text);\n }\n\n .mat-select-panel {\n .mat-option.mat-selected:not(.mat-option-multiple) {\n background: mat-color($background, hover, 0.12);\n }\n }\n\n .mat-form-field {\n &.mat-focused {\n &.mat-primary .mat-select-arrow {\n color: mat-color($primary);\n }\n\n &.mat-accent .mat-select-arrow {\n color: mat-color($accent);\n }\n\n &.mat-warn .mat-select-arrow {\n color: mat-color($warn);\n }\n }\n\n .mat-select.mat-select-invalid .mat-select-arrow {\n color: mat-color($warn);\n }\n\n .mat-select.mat-select-disabled .mat-select-arrow {\n color: mat-color($foreground, disabled-text);\n }\n }\n}\n\n@mixin mat-select-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-line-height($config, input);\n\n .mat-select {\n font-family: mat-font-family($config);\n }\n\n .mat-select-trigger {\n height: $line-height * 1em;\n }\n}\n\n\n\n\n\n@mixin mat-sidenav-theme($theme) {\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 // We use invert() here to have the darken the background color expected to be used. If the\n // background is light, we use a dark backdrop. If the background is dark,\n // we use a light backdrop.\n $drawer-backdrop-color: invert(mat-color($background, card, 0.6)) !default;\n $drawer-background-color: mat-color($background, dialog) !default;\n $drawer-container-background-color: mat-color($background, background) !default;\n $drawer-push-background-color: mat-color($background, dialog) !default;\n\n .mat-drawer-container {\n background-color: $drawer-container-background-color;\n color: mat-color($foreground, text);\n }\n\n .mat-drawer {\n background-color: $drawer-background-color;\n color: mat-color($foreground, text);\n\n &.mat-drawer-push {\n background-color: $drawer-push-background-color;\n }\n }\n\n .mat-drawer-backdrop.mat-drawer-shown {\n background-color: $drawer-backdrop-color;\n }\n}\n\n@mixin mat-sidenav-typography($config) { }\n\n\n\n\n\n@mixin _mat-slide-toggle-checked($palette, $thumb-checked-hue) {\n // Do not apply the checked colors if the toggle is disabled, because the\n // specificity would be to high for the disabled styles.\n &.mat-checked:not(.mat-disabled) {\n .mat-slide-toggle-thumb {\n background-color: mat-color($palette, $thumb-checked-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: mat-color($palette, $thumb-checked-hue, 0.5);\n }\n }\n}\n\n// Applies the specified colors to the slide-toggle ripple elements.\n@mixin _mat-slide-toggle-ripple($palette, $ripple-unchecked-color, $ripple-checked-color) {\n &:not(.mat-checked) .mat-ripple-element {\n background-color: $ripple-unchecked-color;\n }\n .mat-ripple-element {\n background-color: $ripple-checked-color;\n }\n}\n\n@mixin mat-slide-toggle-theme($theme) {\n $is-dark: map_get($theme, is-dark);\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 // Color hues based on the specs, which prescribe different hues for dark and light themes\n // https://material.google.com/components/selection-controls.html#selection-controls-switch\n $thumb-normal-hue: if($is-dark, 400, 50);\n $thumb-checked-hue: if($is-dark, 200, 500);\n $thumb-disabled-hue: if($is-dark, 800, 400);\n\n $bar-normal-color: mat-color($foreground, disabled);\n $bar-disabled-color: if($is-dark, rgba(white, 0.12), rgba(black, 0.1));\n\n // Ripple colors are based on the current palette and the state of the slide-toggle.\n // See https://material.google.com/components/selection-controls.html#selection-controls-switch\n $ripple-checked-opacity: 0.12;\n $ripple-unchecked-color: mat-color($foreground, base, if($is-dark, 0.12, 0.06));\n $ripple-primary-color: mat-color($primary, $thumb-checked-hue, $ripple-checked-opacity);\n $ripple-accent-color: mat-color($accent, $thumb-checked-hue, $ripple-checked-opacity);\n $ripple-warn-color: mat-color($warn, $thumb-checked-hue, $ripple-checked-opacity);\n\n .mat-slide-toggle {\n @include _mat-slide-toggle-checked($accent, $thumb-checked-hue);\n @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-accent-color);\n\n &.mat-primary {\n @include _mat-slide-toggle-checked($primary, $thumb-checked-hue);\n @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-primary-color);\n }\n\n &.mat-warn {\n @include _mat-slide-toggle-checked($warn, $thumb-checked-hue);\n @include _mat-slide-toggle-ripple($accent, $ripple-unchecked-color, $ripple-warn-color);\n }\n\n }\n\n .mat-disabled {\n .mat-slide-toggle-thumb {\n // The thumb of the slide-toggle always uses the hue 400 of the grey palette in dark\n // or light themes. Since this is very specific to the slide-toggle component, we're not\n // providing it in the background palette.\n background-color: mat-color($mat-grey, $thumb-disabled-hue);\n }\n .mat-slide-toggle-bar {\n background-color: $bar-disabled-color;\n }\n }\n\n .mat-slide-toggle-thumb {\n background-color: mat-color($mat-grey, $thumb-normal-hue);\n }\n\n .mat-slide-toggle-bar {\n background-color: $bar-normal-color;\n }\n}\n\n@mixin mat-slide-toggle-typography($config) {\n .mat-slide-toggle-content {\n @include mat-typography-level-to-styles($config, body-1);\n }\n}\n\n\n\n\n\n@mixin _mat-slider-inner-content-theme($palette) {\n .mat-slider-track-fill,\n .mat-slider-thumb,\n .mat-slider-thumb-label {\n background-color: mat-color($palette);\n }\n\n .mat-slider-thumb-label-text {\n color: mat-color($palette, default-contrast);\n }\n}\n\n@mixin mat-slider-theme($theme) {\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-slider-off-color: mat-color($foreground, slider-off);\n $mat-slider-off-focused-color: mat-color($foreground, slider-off-active);\n $mat-slider-disabled-color: mat-color($foreground, slider-off);\n $mat-slider-labeled-min-value-thumb-color: mat-color($foreground, slider-min);\n $mat-slider-labeled-min-value-thumb-label-color: mat-color($foreground, slider-off);\n $mat-slider-focus-ring-color: mat-color($accent, default, 0.2);\n $mat-slider-focus-ring-min-value-color: mat-color($foreground, base, 0.12);\n $mat-slider-tick-color: mat-color($foreground, base, 0.7);\n $mat-slider-tick-size: 2px;\n\n .mat-slider-track-background {\n background-color: $mat-slider-off-color;\n }\n\n .mat-primary {\n @include _mat-slider-inner-content-theme($primary);\n }\n\n .mat-accent {\n @include _mat-slider-inner-content-theme($accent);\n }\n\n .mat-warn {\n @include _mat-slider-inner-content-theme($warn);\n }\n\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-color;\n }\n\n .mat-slider:hover,\n .cdk-focused {\n .mat-slider-track-background {\n background-color: $mat-slider-off-focused-color;\n }\n }\n\n .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-min-value {\n .mat-slider-focus-ring {\n background-color: $mat-slider-focus-ring-min-value-color;\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\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\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}\n\n@mixin mat-slider-typography($config) {\n .mat-slider-thumb-label-text {\n font: {\n family: mat-font-family($config);\n size: mat-font-size($config, caption);\n weight: mat-font-weight($config, body-2);\n }\n }\n}\n\n\n\n\n\n@mixin mat-stepper-theme($theme) {\n $foreground: map-get($theme, foreground);\n $background: map-get($theme, background);\n $primary: map-get($theme, primary);\n\n .mat-step-header {\n &.cdk-keyboard-focused,\n &.cdk-program-focused,\n &:hover {\n background-color: mat-color($background, hover);\n }\n\n .mat-step-label,\n .mat-step-optional {\n color: mat-color($foreground, disabled-text);\n }\n\n .mat-step-icon {\n background-color: mat-color($primary);\n color: mat-color($primary, default-contrast);\n }\n\n .mat-step-icon-not-touched {\n background-color: mat-color($foreground, disabled-text);\n color: mat-color($primary, default-contrast);\n }\n\n .mat-step-label.mat-step-label-active {\n color: mat-color($foreground, text);\n }\n }\n\n .mat-stepper-horizontal, .mat-stepper-vertical {\n background-color: mat-color($background, card);\n }\n\n .mat-stepper-vertical-line::before {\n border-left-color: mat-color($foreground, divider);\n }\n\n .mat-stepper-horizontal-line {\n border-top-color: mat-color($foreground, divider);\n }\n}\n\n@mixin mat-stepper-typography($config) {\n .mat-stepper-vertical, .mat-stepper-horizontal {\n font-family: mat-font-family($config);\n }\n\n .mat-step-label {\n font: {\n size: mat-font-size($config, body-1);\n weight: mat-font-weight($config, body-1);\n };\n }\n\n .mat-step-label-selected {\n font: {\n size: mat-font-size($config, body-2);\n weight: mat-font-weight($config, body-2);\n };\n }\n}\n\n\n\n\n\n@mixin mat-tabs-theme($theme) {\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 $header-border: 1px solid mat-color($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: mat-color($foreground, text);\n\n &.mat-tab-disabled {\n color: mat-color($foreground, disabled-text);\n }\n }\n\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($foreground, text);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($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 _mat-tab-label-focus($color);\n @include _mat-ink-bar($color);\n\n // Override ink bar when background color is the same\n &.mat-background-#{$name} {\n @include _mat-ink-bar($color, default-contrast);\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 _mat-tab-label-focus($color);\n @include _mat-tabs-background($color);\n }\n }\n }\n}\n\n@mixin _mat-ink-bar($color, $hue: default) {\n .mat-ink-bar {\n background-color: mat-color($color, $hue);\n }\n}\n\n@mixin _mat-tab-label-focus($tab-focus-color) {\n .mat-tab-label:not(.mat-tab-disabled):focus,\n .mat-tab-link:not(.mat-tab-disabled):focus {\n background-color: mat-color($tab-focus-color, lighter, 0.3);\n }\n}\n\n@mixin _mat-tabs-background($background-color) {\n // Set background color for the tab group\n .mat-tab-header, .mat-tab-links {\n background-color: mat-color($background-color);\n }\n\n // Set labels to contrast against background\n .mat-tab-label, .mat-tab-link {\n color: mat-color($background-color, default-contrast);\n\n &.mat-tab-disabled {\n color: mat-color($background-color, default-contrast, 0.4);\n }\n }\n\n // Set pagination chevrons to contrast background\n .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast);\n }\n\n .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {\n border-color: mat-color($background-color, default-contrast, 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-ripple-element {\n background-color: mat-color($background-color, default-contrast, 0.12);\n }\n}\n\n@mixin mat-tabs-typography($config) {\n .mat-tab-group {\n font-family: mat-font-family($config);\n }\n\n .mat-tab-label, .mat-tab-link {\n font: {\n family: mat-font-family($config, button);\n size: mat-font-size($config, button);\n weight: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n@mixin _mat-toolbar-color($palette) {\n background: mat-color($palette);\n color: mat-color($palette, default-contrast);\n}\n\n@mixin _mat-toolbar-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 mat-toolbar-theme($theme) {\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-toolbar {\n background: mat-color($background, app-bar);\n color: mat-color($foreground, text);\n\n &.mat-primary {\n @include _mat-toolbar-color($primary);\n }\n\n &.mat-accent {\n @include _mat-toolbar-color($accent);\n }\n\n &.mat-warn {\n @include _mat-toolbar-color($warn);\n }\n\n @include _mat-toolbar-form-field-overrides;\n }\n}\n\n@mixin mat-toolbar-typography($config) {\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 mat-typography-level-to-styles($config, title);\n margin: 0;\n }\n}\n\n\n\n\n\n$mat-tooltip-target-height: 22px;\n$mat-tooltip-font-size: 10px;\n$mat-tooltip-vertical-padding: ($mat-tooltip-target-height - $mat-tooltip-font-size) / 2;\n\n$mat-tooltip-handset-target-height: 32px;\n$mat-tooltip-handset-font-size: 14px;\n$mat-tooltip-handset-vertical-padding:\n ($mat-tooltip-handset-target-height - $mat-tooltip-handset-font-size) / 2;\n\n@mixin mat-tooltip-theme($theme) {\n .mat-tooltip {\n background: mat-color($mat-grey, 700, 0.9);\n }\n}\n\n@mixin mat-tooltip-typography($config) {\n .mat-tooltip {\n font-family: mat-font-family($config);\n font-size: $mat-tooltip-font-size;\n padding-top: $mat-tooltip-vertical-padding;\n padding-bottom: $mat-tooltip-vertical-padding;\n }\n\n .mat-tooltip-handset {\n font-size: $mat-tooltip-handset-font-size;\n padding-top: $mat-tooltip-handset-vertical-padding;\n padding-bottom: $mat-tooltip-handset-vertical-padding;\n }\n}\n\n\n\n\n@mixin mat-snack-bar-theme($theme) {\n $is-dark-theme: map-get($theme, is-dark);\n $accent: map-get($theme, accent);\n\n .mat-snack-bar-container {\n background: if($is-dark-theme, map-get($mat-grey, 50), #323232);\n color: if($is-dark-theme, $dark-primary-text, $light-primary-text);\n }\n\n .mat-simple-snackbar-action {\n color: if($is-dark-theme, inherit, mat-color($accent));\n }\n}\n\n@mixin mat-snack-bar-typography($config) {\n .mat-simple-snackbar {\n font: {\n family: mat-font-family($config, body-1);\n size: mat-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: mat-font-weight($config, button);\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Theme styles that only apply to the fill appearance of the form-field.\n\n@mixin mat-form-field-fill-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $fill-background: mat-color($foreground, base, if($is-dark-theme, 0.1, 0.04));\n $fill-disabled-background: mat-color($foreground, base, if($is-dark-theme, 0.05, 0.02));\n $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.5, 0.42));\n $label-disabled-color: mat-color($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$mat-form-field-fill-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-fill-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-fill-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-fill-dedupe;\n\n $mat-form-field-fill-dedupe: $mat-form-field-fill-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-fill-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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 _mat-form-field-fill-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 _mat-form-field-fill-label-floating(\n $subscript-font-scale, $infix-padding-top + $fill-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the legacy appearance of the form-field.\n\n@mixin mat-form-field-legacy-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $label-color: mat-color($foreground, secondary-text);\n $underline-color: mat-color($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 mat-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$mat-form-field-legacy-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-legacy-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 + $mat-form-field-legacy-dedupe);\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 -ms-transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-legacy-dedupe)\n scale($font-scale);\n\n width: 100% / $font-scale + $mat-form-field-legacy-dedupe;\n\n $mat-form-field-legacy-dedupe: $mat-form-field-legacy-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-legacy-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: ($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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 _mat-form-field-legacy-label-floating(\n $subscript-font-scale, $infix-padding, $infix-margin-top);\n }\n\n // @deletion-target 7.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 _mat-form-field-legacy-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 _mat-form-field-legacy-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% - #{$wrapper-padding-bottom / $subscript-font-scale});\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the outline appearance of the form-field.\n\n@mixin mat-form-field-outline-theme($theme) {\n $primary: map-get($theme, primary);\n $accent: map-get($theme, accent);\n $warn: map-get($theme, warn);\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $label-disabled-color: mat-color($foreground, disabled-text);\n $outline-color: mat-color($foreground, divider, if($is-dark-theme, 0.3, 0.12));\n $outline-color-hover: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $outline-color-primary: mat-color($primary);\n $outline-color-accent: mat-color($accent);\n $outline-color-warn: mat-color($warn);\n $outline-color-disabled: mat-color($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$mat-form-field-outline-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-outline-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-outline-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-outline-dedupe;\n\n $mat-form-field-outline-dedupe: $mat-form-field-outline-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-outline-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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: 1em * $line-height * $subscript-font-scale;\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: 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-outline {\n // We want the bottom of the outline to start at the end of the content box, not the padding\n // box, so we move it up by the padding amount.\n bottom: $wrapper-padding-bottom;\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 _mat-form-field-outline-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 _mat-form-field-outline-label-floating(\n $subscript-font-scale, $infix-padding + $outline-appearance-label-offset,\n $infix-margin-top);\n }\n }\n }\n}\n\n\n\n\n\n\n\n// Theme styles that only apply to the standard appearance of the form-field.\n\n@mixin mat-form-field-standard-theme($theme) {\n $foreground: map-get($theme, foreground);\n $is-dark-theme: map-get($theme, is-dark);\n\n $underline-color: mat-color($foreground, divider, if($is-dark-theme, 0.7, 0.42));\n\n .mat-form-field-appearance-standard {\n .mat-form-field-underline {\n background-color: $underline-color;\n }\n\n &.mat-form-field-disabled .mat-form-field-underline {\n @include mat-control-disabled-underline($underline-color);\n }\n }\n}\n\n@mixin mat-form-field-standard-typography($config) {}\n\n\n\n// Theme styles that apply to all appearances of the form-field.\n\n@mixin mat-form-field-theme($theme) {\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 $is-dark-theme: map-get($theme, is-dark);\n\n // Label colors. Required is used for the `*` star shown in the label.\n $label-color: mat-color($foreground, secondary-text, if($is-dark-theme, 0.7, 0.6));\n $focused-label-color: mat-color($primary);\n $required-label-color: mat-color($accent);\n\n // Underline colors.\n $underline-color-base: mat-color($foreground, divider, if($is-dark-theme, 1, 0.87));\n $underline-color-accent: mat-color($accent);\n $underline-color-warn: mat-color($warn);\n $underline-focused-color: mat-color($primary);\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 // 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 background-color: $underline-color-warn;\n }\n }\n\n .mat-error {\n color: $underline-color-warn;\n }\n\n @include mat-form-field-legacy-theme($theme);\n @include mat-form-field-standard-theme($theme);\n @include mat-form-field-fill-theme($theme);\n @include mat-form-field-outline-theme($theme);\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$mat-form-field-dedupe: 0;\n\n// Applies a floating label above the form field control itself.\n@mixin _mat-form-field-label-floating($font-scale, $infix-padding, $infix-margin-top) {\n transform: translateY(-$infix-margin-top - $infix-padding + $mat-form-field-dedupe)\n scale($font-scale);\n width: 100% / $font-scale + $mat-form-field-dedupe;\n\n $mat-form-field-dedupe: $mat-form-field-dedupe + 0.00001 !global;\n}\n\n@mixin mat-form-field-typography($config) {\n // The unit-less line-height from the font config.\n $line-height: mat-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 $infix-margin-top: 1em * $line-height * $subscript-font-scale;\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: 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 mat-typography-level-to-styles($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: $line-height * 1em;\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 _mat-form-field-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 _mat-form-field-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% - #{$wrapper-padding-bottom / $subscript-font-scale});\n }\n\n @include mat-form-field-legacy-typography($config);\n @include mat-form-field-standard-typography($config);\n @include mat-form-field-fill-typography($config);\n @include mat-form-field-outline-typography($config);\n}\n\n\n\n\n\n@mixin mat-tree-theme($theme) {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n .mat-tree {\n background: mat-color($background, 'card');\n }\n\n .mat-tree-node {\n color: mat-color($foreground, text);\n }\n}\n\n@mixin mat-tree-typography($config) {\n .mat-tree {\n font-family: mat-font-family($config);\n }\n\n .mat-tree-node {\n font-weight: mat-font-weight($config, body-1);\n font-size: mat-font-size($config, body-1);\n }\n}\n\n\n\n// Includes all of the typographic styles.\n@mixin angular-material-typography($config: null) {\n @if $config == null {\n $config: mat-typography-config();\n }\n\n @include mat-badge-typography($config);\n @include mat-base-typography($config);\n @include mat-autocomplete-typography($config);\n @include mat-bottom-sheet-typography($config);\n @include mat-button-typography($config);\n @include mat-button-toggle-typography($config);\n @include mat-card-typography($config);\n @include mat-checkbox-typography($config);\n @include mat-chips-typography($config);\n @include mat-table-typography($config);\n @include mat-datepicker-typography($config);\n @include mat-dialog-typography($config);\n @include mat-expansion-panel-typography($config);\n @include mat-form-field-typography($config);\n @include mat-grid-list-typography($config);\n @include mat-icon-typography($config);\n @include mat-input-typography($config);\n @include mat-menu-typography($config);\n @include mat-paginator-typography($config);\n @include mat-progress-bar-typography($config);\n @include mat-progress-spinner-typography($config);\n @include mat-radio-typography($config);\n @include mat-select-typography($config);\n @include mat-sidenav-typography($config);\n @include mat-slide-toggle-typography($config);\n @include mat-slider-typography($config);\n @include mat-stepper-typography($config);\n @include mat-tabs-typography($config);\n @include mat-toolbar-typography($config);\n @include mat-tooltip-typography($config);\n @include mat-list-typography($config);\n @include mat-option-typography($config);\n @include mat-optgroup-typography($config);\n @include mat-snack-bar-typography($config);\n @include mat-tree-typography($config);\n}\n\n\n// Mixin that renders all of the core styles that are not theme-dependent.\n@mixin mat-core($typography-config: null) {\n // Provides external CSS classes for each elevation value. Each CSS class is formatted as\n // `mat-elevation-z$zValue` where `$zValue` corresponds to the z-space to which the element is\n // elevated.\n @for $zValue from 0 through 24 {\n .#{$_mat-elevation-prefix}#{$zValue} {\n @include mat-elevation($zValue);\n }\n }\n\n @include angular-material-typography($typography-config);\n @include mat-ripple();\n @include cdk-a11y();\n @include cdk-overlay();\n @include cdk-text-field();\n}\n\n// Mixin that renders all of the core styles that depend on the theme.\n@mixin mat-core-theme($theme) {\n @include mat-ripple-theme($theme);\n @include mat-option-theme($theme);\n @include mat-optgroup-theme($theme);\n @include mat-pseudo-checkbox-theme($theme);\n\n // Wrapper element that provides the theme background when the user's content isn't\n // inside of a `mat-sidenav-container`. Note that we need to exclude the ampersand\n // selector in case the mixin is included at the top level.\n .mat-app-background#{if(&, ', &.mat-app-background', '')} {\n $background: map-get($theme, background);\n $foreground: map-get($theme, foreground);\n\n background-color: mat-color($background, background);\n color: mat-color($foreground, text);\n }\n\n // Marker that is used to determine whether the user has added a theme to their page.\n @at-root {\n .mat-theme-loaded-marker {\n display: none;\n }\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n@mixin mat-divider-theme($theme) {\n $foreground: map-get($theme, foreground);\n\n .mat-divider {\n border-top-color: mat-color($foreground, divider);\n }\n\n .mat-divider-vertical {\n border-right-color: mat-color($foreground, divider);\n }\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n// Create a theme.\n@mixin angular-material-theme($theme) {\n @include mat-core-theme($theme);\n @include mat-autocomplete-theme($theme);\n @include mat-badge-theme($theme);\n @include mat-bottom-sheet-theme($theme);\n @include mat-button-theme($theme);\n @include mat-button-toggle-theme($theme);\n @include mat-card-theme($theme);\n @include mat-checkbox-theme($theme);\n @include mat-chips-theme($theme);\n @include mat-table-theme($theme);\n @include mat-datepicker-theme($theme);\n @include mat-dialog-theme($theme);\n @include mat-divider-theme($theme);\n @include mat-expansion-panel-theme($theme);\n @include mat-form-field-theme($theme);\n @include mat-grid-list-theme($theme);\n @include mat-icon-theme($theme);\n @include mat-input-theme($theme);\n @include mat-list-theme($theme);\n @include mat-menu-theme($theme);\n @include mat-paginator-theme($theme);\n @include mat-progress-bar-theme($theme);\n @include mat-progress-spinner-theme($theme);\n @include mat-radio-theme($theme);\n @include mat-select-theme($theme);\n @include mat-sidenav-theme($theme);\n @include mat-slide-toggle-theme($theme);\n @include mat-slider-theme($theme);\n @include mat-stepper-theme($theme);\n @include mat-tabs-theme($theme);\n @include mat-toolbar-theme($theme);\n @include mat-tooltip-theme($theme);\n @include mat-tree-theme($theme);\n @include mat-snack-bar-theme($theme);\n}\n",null,"/* You can add global styles to this file, and also import other style files */\n@import './styles/ng-io-theme';\n@import './styles/main.scss';\n","body {\n font-family: $main-font;\n margin: 0;\n color: $darkgray;\n font-size: 14px;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\nh1 {\n font-size: 24px;\n font-weight: 500;\n margin: 8px 0px;\n\n @media screen and (max-width: 600px) {\n margin-top: 0;\n }\n}\n\nh2 {\n font-size: 22px;\n font-weight: 500;\n margin: 32px 0px 24px;\n clear: both;\n}\n\nh3 {\n font-size: 20px;\n font-weight: 400;\n margin: 24px 0px 12px;\n clear: both;\n}\n\nh4 {\n font-size: 18px;\n font-weight: 400;\n margin: 8px 0px;\n clear: both;\n}\n\nh5 {\n font-size: 16px;\n font-weight: 500;\n margin: 8px 0px;\n clear: both;\n}\n\nh6 {\n color: $mediumgray;\n font-size: 16px;\n font-weight: 500;\n margin: 8px 0px;\n clear: both;\n}\n\nh2, h3, h4, h5, h6 {\n a {\n font-size: inherit;\n }\n\n @media screen and (max-width: 600px) {\n margin: 8px 0;\n }\n}\n\n.mat-tab-body-wrapper h2 {\n margin-top: 0;\n}\n\np, ol, ul, ol, li, input, a {\n font-size: 14px;\n line-height: 24px;\n letter-spacing: 0.30px;\n font-weight: 400;\n & > em {\n letter-spacing: 0.30px;\n }\n}\n\nol {\n li, p {\n margin: 4px 0;\n }\n}\n\nli p {\n margin: 0;\n}\n\na {\n text-decoration: none;\n}\n\n.app-toolbar a {\n font-size: 16px;\n font-weight: 400;\n color: white;\n font-family: $main-font;\n text-transform: uppercase;\n padding: 21px 0;\n}\n\nstrong {\n font-weight: 500;\n}\n\ntable {\n border-collapse: collapse;\n border-radius: 2px;\n border-spacing: 0;\n margin: 12px 0 32px;\n}\n\ntable tbody th {\n max-width: 100px;\n padding: 13px 32px;\n text-align: left;\n}\n\ntd {\n font-weight: 400;\n padding: 8px 30px;\n letter-spacing: 0.30px;\n\n p {\n margin: 0;\n }\n}\n\nth {\n font-size: 16px;\n font-weight: 500;\n padding: 13px 32px;\n text-align: left;\n}\n\np > code, li > code, td > code, th > code {\n font-family: $code-font;\n font-size: 85%;\n color: $darkgray;\n letter-spacing: 0;\n line-height: 1;\n padding: 2px 0;\n background-color: $backgroundgray;\n border-radius: 4px;\n}\n\ncode {\n font-family: $code-font;\n font-size: 90%;\n}\n\n.sidenav-content a {\n color: $blue;\n &:hover {\n color: $mediumgray;\n }\n}\n","html, body {\n height: 100%;\n}\n\nbody {\n background-color: $offwhite;\n}\n\n.clearfix {\n content: \"\";\n display: table;\n clear: both;\n}\n\n.clear {\n clear: both;\n}\n\n.l-clearfix:after, .clearfix:after {\n content: \"\";\n display: table;\n clear: both;\n}\n\n.is-visible {\n display: block!important;\n}\n\n.l-flex-wrap {\n display: flex;\n flex-wrap: wrap;\n}\n\n.flex-center {\n display: flex;\n justify-content: center;\n}\n\n.center {\n text-align: center;\n}\n\n.visually-hidden {\n position: absolute !important;\n top: -9999px !important;\n left: -9999px !important;\n}\n\n.text-uppercase {\n text-transform: uppercase;\n}",".api-body {\n\n max-width: 1200px;\n\n table {\n margin: 12px 0 24px;\n\n th {\n text-transform: none;\n font-size: 16px;\n font-weight: bold;\n }\n\n tr {\n border-bottom: 1px solid $lightgray;\n }\n\n td {\n vertical-align: middle;\n }\n\n hr {\n margin: 16px 0;\n }\n\n tr:last-child {\n border-bottom: none;\n }\n\n &.item-table {\n td {\n padding: 32px;\n }\n }\n\n &.list-table {\n td {\n padding: 16px 24px;\n }\n }\n\n .short-description {\n margin-left: 0;\n }\n }\n}","aio-shell.page-docs {\n .sidenav-content {\n // padding: 6rem 3rem 3rem 3rem; // THIS CAUSES THE TOP NAV TOOLBAR TO JUMP BETWEEN DOCS AND OTHER PAGES\n margin: auto;\n }\n}\n\n.sidenav-content {\n min-height: 100vh;\n padding: 80px 3rem 1rem;\n}\n\n@media (max-width: 600px) {\n aio-menu {\n display: none;\n }\n\n .sidenav-content {\n min-height: 450px;\n padding: 80px 1rem 1rem;\n }\n}\n\n.sidenav-container {\n width: 100%;\n height: 100vh;\n}\n\n.sidenav-content button {\n min-width: 24px;\n}\n\n#guide-change-log h2::before {\n content: \"\";\n display: block;\n height: 1px;\n margin: 24px 0px;\n background: $lightgray;\n}\n",".no-animations aio-doc-viewer > * {\n // Disable view transition animations.\n transition: none !important;\n}\n","footer {\n position: relative;\n line-height: 24px;\n flex: 1;\n padding: 48px;\n z-index: 0;\n background-color: $blue;\n color: $offwhite;\n font-weight: 300;\n\n aio-footer {\n position: relative;\n z-index: 0;\n }\n\n .footer-block {\n margin: 0 24px;\n vertical-align: top;\n }\n\n a {\n color: $offwhite;\n font-weight: 300;\n text-decoration: none;\n z-index: 20;\n position: relative;\n &:hover {\n text-decoration: underline;\n }\n &:visited {\n text-decoration: none;\n }\n }\n a.action {\n cursor: pointer;\n }\n h3 {\n font-size: 16px;\n text-transform: uppercase;\n font-weight: 400;\n margin: 0 0 16px;\n }\n p {\n text-align: center;\n margin: 10px 0px 5px;\n\n @media (max-width: 480px) {\n text-align: left;\n }\n }\n\n div.grid-fluid {\n display: -ms-flexbox;\n display: -webkit-flex;\n display: flex;\n\n justify-content: center;\n\n text-align: left;\n margin: 0 0 40px;\n\n ul {\n list-style-position: inside;\n padding: 0px;\n margin: 0px;\n\n li {\n list-style-type: none;\n padding: 0px;\n text-align: left;\n }\n }\n\n @media (max-width: 480px) {\n flex-direction: column;\n .footer-block {\n margin: 8px 24px;\n }\n }\n }\n\n\n\n\n @media (max-width: 700px) {\n h3 {\n font-size: 110%;\n }\n }\n @media (max-width: 600px) {\n h3 {\n font-size: 100%;\n }\n }\n}\n\nfooter::after {\n content: \"\";\n position: absolute;\n z-index: -1;\n top: 0;\n bottom: 0;\n left: 0;\n right: 0;\n background:\n url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 0 left 0 repeat,\n url('../src/assets/images/logos/angular/angular_whiteTransparent_withMargin.png') top 80px left 160px repeat;\n opacity: 0.05;\n background-size: 320px auto;\n}\n",".hero {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n position: absolute;\n width: 100%;\n min-height: 480px;\n height: 80vh;\n max-height: 560px;\n box-sizing: border-box;\n padding: 48px 48px 32px 48px;\n overflow: hidden;\n transform: skewY(8deg);\n transform-origin: 100%;\n\n @media (max-width: 480px) {\n max-height: 486px;\n padding-top: 40px;\n transform: none;\n }\n\n .hero-title {\n display: inline-block;\n font-size: 28px;\n font-weight: 400;\n line-height: 48px;\n margin: 0 8px 0 0;\n text-transform: uppercase;\n\n &.is-standard-case {\n text-transform: none;\n }\n }\n}\n\nsection#intro {\n display: flex;\n align-items: center;\n position: relative;\n width: 900px;\n height: 480px;\n margin: 0 auto -32px;\n padding: 48px 0 0;\n color: white;\n\n @media (max-width: 780px) {\n flex-direction: column;\n justify-content: center;\n width: 100%;\n max-width: 100vw;\n padding: 40px 0 32px;\n\n button {\n margin: 0;\n height: 60px;\n }\n }\n\n .homepage-container {\n width: 100%;\n max-width: 1040px;\n margin: 0 auto;\n margin-top: -7%;\n padding-top: 0;\n padding-bottom: 0;\n\n @media (max-width: 780px) {\n display: flex;\n flex-direction: column;\n align-items: center;\n width: 100%;\n max-width: 100%;\n padding: 0;\n }\n }\n\n .hero-headline {\n font-size: 40px;\n line-height: 64px;\n font-weight: 500;\n margin: 32px 0;\n\n &:after {\n display: none;\n }\n\n @media (max-width: 780px) {\n text-align: center;\n }\n\n @media (max-width: 575px) {\n font-size: 32px;\n line-height: 50px;\n }\n }\n\n .hero-logo {\n display: flex;\n width: 400px;\n\n @media (max-width: 780px) {\n justify-content: center;\n }\n\n img {\n width: 400px;\n height: 400px;\n margin-bottom: 8px;\n padding: 0;\n filter: drop-shadow(0 2px 2px rgba($black, 0.24));\n\n @media (max-width: 780px) {\n width: 250px;\n height: 250px;\n }\n }\n }\n}\n\n.announcement-bar {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: space-around;\n align-items: center;\n max-width: 50vw;\n margin: 0 auto;\n padding: 16px;\n background-color: $white;\n border-radius: 4px;\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n box-sizing: border-box;\n transition: all 0.3s ease-in;\n\n @media (max-width: 992px) {\n flex-direction: column;\n text-align: center;\n padding: 32px 16px;\n }\n\n @media (max-width: 768px) {\n width: 100%;\n max-width: none;\n }\n\n & > * {\n margin: 8px;\n }\n\n .button {\n display: flex;\n justify-content: center;\n align-items: center;\n height: 40px;\n min-width: 160px;\n font-size: 16px;\n color: $white;\n background-color: $blue;\n border-radius: 48px;\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n box-sizing: border-box;\n cursor: pointer;\n\n &:hover {\n color: rgba($white, 0.7);\n }\n }\n\n .material-icons {\n display: none;\n right: 0;\n position: static;\n transition: all 0.3s ease-in;\n font-size: 16px;\n }\n\n p {\n font-size: 16px;\n margin: 8px;\n text-align: center;\n }\n}\n\n// ANGULAR LINE\n.background-sky {\n background-color: $blue;\n background: $bluegradient;\n color: $white;\n}\n\n.home-row .card {\n @include card(70%, auto);\n display: flex;\n flex-direction: row;\n align-items: center;\n position: relative;\n width: 70%;\n min-width: 350px;\n height: auto;\n margin: auto;\n padding: 24px;\n box-shadow: 0 6px 6px rgba(10, 16, 20, 0.15), 0 0 52px rgba(10, 16, 20, 0.12);\n\n @media (max-width: 600px) {\n margin: 16px auto 0;\n\n h2 {\n margin: 0;\n }\n\n img {\n max-width: none;\n height: 70px;\n }\n }\n\n @media (max-width: 1300px) {\n img {\n height: 70px;\n max-width: none;\n }\n }\n\n img {\n margin: 16px ;\n }\n\n .card-text-container {\n margin: 0 16px;\n\n p {\n text-align: left;\n color: $darkgray;\n margin: 0;\n padding: 8px 0;\n }\n }\n\n\n &:hover {\n h2 {\n color: $blue;\n }\n }\n}\n\n.button.hero-cta {\n display: flex;\n align-items: center;\n justify-content: center;\n width: 184px;\n height: 40px;\n padding: 0 24px;\n font-size: 18px;\n font-weight: 600;\n line-height: 40px;\n background-color: $white;\n border-radius: 48px;\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n box-sizing: border-box;\n cursor: pointer;\n\n &:hover {\n opacity: 0.9;\n }\n}\n\naio-shell {\n &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {\n section {\n padding: 0rem 0rem 3rem;\n }\n }\n\n &.page-home {\n section {\n padding: 0;\n }\n }\n\n &.page-home, &.page-resources, &.page-events, &.page-contribute {\n article {\n padding: 32px;\n\n @media (max-width: 800px) {\n padding: 24px;\n }\n }\n }\n\n &.page-features {\n article {\n padding: 0 3rem;\n }\n }\n\n &.page-home, &.page-resources, &.page-events, &.page-features {\n\n .content img {\n @media (max-width: 1300px) {\n max-width: none;\n }\n }\n\n .feature-section img {\n max-width: 70px;\n }\n\n @media (max-width: 600px) {\n mat-sidenav-container.sidenav-container {\n padding-top: 0;\n }\n }\n }\n\n .cta-bar .hero-cta {\n color: $blue;\n }\n}\n\n.cta-bar.announcement-bar {\n background: none;\n box-shadow: none;\n}\n\n.text-headline {\n font-size: 20px;\n font-weight: 500;\n color: $blue;\n margin-top: 10px;\n text-transform: uppercase;\n}\n\naio-shell:not(.view-SideNav) {\n mat-sidenav-container.sidenav-container {\n max-width: none;\n }\n}\n\ndiv[layout=row]{\n display: flex;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n\n @media (max-width: 480px) {\n display: block;\n }\n}\n\n.layout-row {\n flex-direction: row;\n}\n\n.home-rows {\n overflow: hidden;\n @media (max-width: 600px) {\n margin: 0;\n }\n}\n\n.background-superhero-paper {\n background-size: 100%;\n background-blend-mode: multiply;\n}\n\n.home-row {\n max-width: 920px;\n margin: 32px auto;\n\n .promo-img-container, .text-container {\n max-width: 50%;\n\n @media(max-width: 480px) {\n max-width: 100%;\n text-align: center;\n\n &:nth-child(even) {\n flex-direction: column-reverse;\n }\n }\n }\n\n .text-block {\n padding-right: 15%;\n\n @media(max-width: 600px) {\n padding: 0;\n }\n }\n\n .promo-img-container {\n\n img {\n max-width: 90% !important;\n }\n\n p {\n margin: 0 20px;\n }\n\n img {\n max-width: 90%;\n\n\n @media (max-width: 599px) {\n max-width: 100%;\n float: initial !important;\n }\n }\n }\n}\n\n.marketing-banner {\n background-color: lighten($blue, 10);\n margin-top: 64px;\n padding: 32px;\n\n @media (max-width: 600px) {\n margin-top: 56px;\n padding: 18px;\n }\n\n .banner-headline {\n text-transform: uppercase;\n font-size: 24px;\n font-weight: 300;\n color: white;\n margin: 0;\n -webkit-margin-before: 0;\n -webkit-margin-after: 0;\n\n @media (max-width: 600px) {\n font-size: 18px;\n font-weight: 400;\n }\n\n &:after {\n display: none;\n }\n }\n}\n.page-features .marketing-banner {\n margin-bottom: 20px;\n}\n","/************************************\n\n Media queries\n\n To use these, put this snippet in the appropriate selector:\n\n @include bp(tiny) {\n background-color: purple;\n }\n\n Replace \"tiny\" with \"medium\" or \"big\" as necessary.\n*************************************/\n\n@mixin bp($point) {\n\n $bp-xsmall: \"(min-width: 320px)\";\n $bp-teeny: \"(min-width: 480px)\";\n $bp-tiny: \"(min-width: 600px)\";\n $bp-small: \"(min-width: 650px)\";\n $bp-medium: \"(min-width: 800px)\";\n $bp-big: \"(min-width: 1000px)\";\n\n @if $point == big {\n @media #{$bp-big} { @content; }\n }\n @else if $point == medium {\n @media #{$bp-medium} { @content; }\n }\n @else if $point == small {\n @media #{$bp-small} { @content; }\n }\n @else if $point == tiny {\n @media #{$bp-tiny} { @content; }\n }\n @else if $point == teeny {\n @media #{$bp-teeny} { @content; }\n }\n @else if $point == xsmall {\n @media #{$bp-xsmall} { @content; }\n }\n}\n\n@mixin rotate($degrees) {\n -moz-transform: rotate($degrees);\n -webkit-transform: rotate($degrees);\n -o-transform: rotate($degrees);\n -ms-transform: rotate($degrees);\n transform: rotate($degrees);\n transition: transform 150ms;\n transition-timing-function: ease-in-out;\n}\n\n@mixin codeblock($bgcolor) {\n background-color: $bgcolor;\n border-radius: 5px;\n padding: 20px;\n margin: 0 auto; // was 24\n border: 0.5px solid $lightgray;\n}\n\n// INFO CARD SKELETON\n@mixin card($height, $width) {\n height: $height;\n width: $width;\n background-color: $white;\n border-radius: 4px;\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n box-sizing: border-box;\n transition: box-shadow .5s;\n\n &:hover {\n box-shadow: 0 8px 8px rgba($black, 0.24), 0 0 8px rgba($black, 0.12);\n text-decoration: none;\n }\n}","#file-not-found {\n padding: 3rem 3rem 3rem;\n}\n\n.nf-container {\n align-items: center;\n padding: 32px;\n}\n\n.nf-response {\n margin: 32px;\n height: 100%;\n flex-direction: column;\n\n h1 {\n font-size: 48px;\n color: $blue;\n text-transform: uppercase;\n margin: 8px 0;\n }\n}\n\n.nf-icon.material-icons {\n color: $blue;\n font-size: 100px;\n position: static;\n}\n","// Disable sidenav animations for the initial render.\n.starting.mat-drawer-transition .mat-drawer-content {\n transition: none;\n}\n\naio-nav-menu {\n display: block;\n margin: 0 auto;\n font-size: 13px;\n ul, a {\n padding: 0;\n margin: 0;\n }\n\n &:first-child {\n margin-top: 16px;\n }\n\n aio-nav-item div a {\n padding-left: 6px;\n }\n}\n\nmat-sidenav.mat-sidenav.sidenav {\n position: fixed;\n top: 64px;\n bottom: 0;\n left: 0;\n padding: 0;\n min-width: 260px;\n background-color: $offwhite;\n box-shadow: 6px 0 6px rgba(0,0,0,0.10);\n\n &.collapsed {\n top: 56px;\n }\n}\n\nmat-sidenav-container.sidenav-container {\n min-height: 100%;\n height: auto !important;\n max-width: 100%;\n margin: 0;\n transform: none;\n\n &.has-floating-toc {\n max-width: 82%;\n }\n}\n\nmat-sidenav-container div.mat-sidenav-content {\n height: auto;\n}\n\n.vertical-menu-item {\n box-sizing: border-box;\n color: $darkgray;\n cursor: pointer;\n display: block;\n max-width: 260px;\n overflow-wrap: break-word;\n padding-top: 4px;\n padding-bottom: 4px;\n text-decoration: none;\n text-align: left;\n width: 93%;\n word-wrap: break-word;\n\n &:hover {\n background-color: $lightgray;\n color: $blue;\n text-shadow: 0 0 5px #ffffff;\n }\n\n &:focus {\n outline: $accentblue auto 2px;\n }\n\n //icons _within_ nav\n .mat-icon {\n position: absolute;\n top: 0;\n right: 0;\n margin: 4px;\n }\n}\n\n.vertical-menu-item.selected {\n color: $blue;\n}\n\nbutton.vertical-menu-item {\n border: none;\n background-color: transparent;\n margin-right: 0;\n padding-left: 6px;\n padding-top: 8px;\n padding-bottom: 10px;\n}\n\n.heading {\n color: $darkgray;\n cursor: pointer;\n position: relative;\n text-transform: uppercase;\n}\n\n.heading-children.expanded {\n visibility: visible;\n opacity: 1;\n max-height: 4000px; // Arbitrary max-height. Can increase if needed. Must have measurement to transition height.\n transition: visibility 500ms, opacity 500ms, max-height 500ms;\n -webkit-transition-timing-function: ease-in-out;\n transition-timing-function: ease-in-out;\n}\n\n.heading-children.collapsed {\n visibility: hidden;\n opacity: 0;\n max-height: 1px; // Must have measurement to transition height.\n transition: visibility 275ms, opacity 275ms, max-height 280ms;\n -webkit-transition-timing-function: ease-out;\n transition-timing-function: ease-out;\n}\n\n.no-animations {\n .heading-children.expanded, .heading-children.collapsed {\n transition: none! important;\n }\n}\n\n.level-1 {\n font-family: $main-font;\n font-size: 14px;\n font-weight: 400;\n margin-left: 14px;\n transition: background-color 0.2s;\n text-transform: uppercase;\n}\n\n.level-2 {\n color: $mediumgray;\n font-family: $main-font;\n font-size: 14px;\n font-weight: 400;\n margin-left: 12px;\n text-transform: none;\n}\n\n.level-3 {\n color: $mediumgray;\n font-family: $main-font;\n font-size: 14px;\n margin-left: 10px;\n}\n\n.level-1.expanded .mat-icon, .level-2.expanded .mat-icon {\n @include rotate(90deg);\n}\n\n.level-1:not(.expanded) .mat-icon, .level-2:not(.expanded) .mat-icon {\n @include rotate(0deg);\n}\n\naio-nav-menu.top-menu {\n padding: 24px 0 0;\n\n aio-nav-item:last-child div {\n border-bottom: 1px solid rgba($mediumgray, 0.5);\n }\n\n aio-nav-item:first-child div {\n border-top: 1px solid rgba($mediumgray, 0.5);\n }\n}\n\n// Angular Version Selector\nmat-sidenav .doc-version {\n padding: 8px;\n border-top: 1px solid $lightgray;\n\n select {\n outline: none;\n width: 100%;\n background: rgba($lightgray, 0.5);\n height: 32px;\n border: 1px solid $lightgray;\n color: $darkgray;\n\n option {\n font-family: $main-font;\n font-size: 14px;\n }\n }\n}\n","nav#main-table-of-contents {\n width: 200px;\n height: 900px;\n position: fixed;\n right: 0;\n top: 50px;\n bottom: 100px;\n margin-left: 32px;\n background-color: $blue;\n}","// VARIABLES\n$hamburgerShownMargin: 0 8px 0 0;\n$hamburgerHiddenMargin: 0 16px 0 -88px;\n\n// DOCS PAGE / STANDARD: TOPNAV TOOLBAR FIXED\nmat-toolbar.mat-toolbar {\n position: fixed;\n top: 0;\n right: 0;\n left: 0;\n z-index: 10;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n\n mat-toolbar-row {\n padding: 0 16px 0 0;\n }\n\n mat-icon {\n color: $white;\n }\n}\n\n// HOME PAGE OVERRIDE: TOPNAV TOOLBAR\naio-shell.page-home mat-toolbar.mat-toolbar {\n background-color: $blue;\n\n @media (min-width: 481px) {\n &:not(.transitioning) {\n background-color: transparent;\n transition: background-color 0.2s linear;\n }\n }\n}\n\n// MARKETING PAGES OVERRIDE: TOPNAV TOOLBAR AND HAMBURGER\naio-shell.page-home mat-toolbar.mat-toolbar,\naio-shell.page-features mat-toolbar.mat-toolbar,\naio-shell.page-events mat-toolbar.mat-toolbar,\naio-shell.page-resources mat-toolbar.mat-toolbar {\n box-shadow: none;\n\n // FIXED TOPNAV TOOLBAR FOR SMALL MOBILE\n @media (min-width: 481px) {\n position: absolute;\n }\n}\n\n// DOCS PAGES OVERRIDE: HAMBURGER\naio-shell.folder-api mat-toolbar.mat-toolbar,\naio-shell.folder-docs mat-toolbar.mat-toolbar,\naio-shell.folder-guide mat-toolbar.mat-toolbar,\naio-shell.folder-tutorial mat-toolbar.mat-toolbar {\n @media (min-width: 992px) {\n .hamburger.mat-button {\n // Hamburger shown on non-marketing pages on large screens.\n margin: $hamburgerShownMargin;\n }\n }\n}\n\n// HAMBURGER BUTTON\n.hamburger.mat-button {\n height: 100%;\n margin: $hamburgerShownMargin;\n padding: 0;\n\n &:not(.starting) {\n transition-duration: 0.4s;\n transition-property: color, margin;\n transition-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);\n }\n\n @media (min-width: 992px) {\n // Hamburger hidden by default on large screens.\n // (Will be shown per doc.)\n margin: $hamburgerHiddenMargin;\n }\n\n &:hover {\n color: $offwhite;\n }\n\n & .mat-icon {\n color: white;\n position: inherit;\n }\n}\n\n// HOME NAV-LINK\n.nav-link.home {\n cursor: pointer;\n margin: 0 16px 0 0;\n padding: 21px 0;\n\n img {\n position: relative;\n margin-top: -21px;\n top: 12px;\n height: 40px;\n\n @media (max-width: 992px) {\n &:hover {\n transform: scale(1.1);\n }\n }\n }\n}\n\n// TOP MENU\naio-top-menu {\n display: flex;\n flex-direction: row;\n align-items: center;\n width: 80%;\n\n ul {\n display: flex;\n flex-direction: row;\n align-items: center;\n list-style-position: inside;\n padding: 0px;\n margin: 0px;\n\n li {\n padding-bottom: 2px;\n list-style-type: none;\n cursor: pointer;\n\n &:hover {\n opacity: 0.7;\n }\n\n &:focus {\n background-color: $accentblue;\n outline: none;\n }\n }\n }\n\n a.nav-link {\n margin: 0;\n padding: 24px 16px;\n cursor: pointer;\n\n &:focus {\n background: rgba($white, 0.15);\n border-radius: 4px;\n outline: none;\n padding: 8px 16px;\n }\n }\n}\n\n// SEARCH BOX\naio-search-box.search-container {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n width: 100%;\n min-width: 150px;\n height: 100%;\n\n input {\n color: $darkgray;\n border: none;\n border-radius: 100px;\n background-color: $offwhite;\n padding: 5px 16px;\n margin-left: 8px;\n width: 180px;\n max-width: 240px;\n height: 50%;\n -webkit-appearance: none;\n\n &:focus {\n outline: none;\n }\n\n @include bp(big) {\n transition: width 0.4s ease-in-out;\n\n &:focus {\n width: 50%;\n }\n }\n @media (max-width: 480px) {\n width: 150px;\n }\n }\n}\n\n// EXTERNAL LINK ICONS\n.app-toolbar {\n .toolbar-external-icons-container {\n display: flex;\n flex-direction: row;\n\n a {\n display: flex;\n align-items: center;\n margin-left: 16px;\n\n &:hover {\n opacity: 0.8;\n }\n\n img {\n height: 24px;\n }\n }\n }\n}\n","table {\n margin: 24px 0px;\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n border-radius: 2px;\n background: $offwhite;\n\n &.is-full-width {\n width: 100%;\n }\n\n &.is-fixed-layout {\n table-layout: fixed;\n }\n\n thead > {\n vertical-align: middle;\n border-color: inherit;\n\n tr {\n vertical-align: inherit;\n border-color: inherit;\n }\n\n tr > th {\n background: rgba($lightgray, 0.2);\n border-bottom: 1px solid $lightgray;\n color: $darkgray;\n font-size: 12px;\n font-weight: 500;\n padding: 8px 24px;\n text-align: left;\n text-transform: uppercase;\n line-height: 28px;\n }\n }\n\n tbody > tr > {\n th,\n td {\n border-bottom: 1px solid $lightgray;\n padding: 16px;\n text-align: left;\n line-height: 24px;\n vertical-align: top;\n\n @media (max-width: 480px) {\n &:before {\n // content: **ADD TABLE HEADER**;\n display: inline-block;\n }\n }\n\n }\n\n td {\n letter-spacing: 0.30px;\n\n tr td:first-child {\n @media (max-width: 480px) {\n background-color: $lightgray;\n }\n }\n\n }\n\n th {\n background: rgba($lightgray, 0.2);\n border-right: 1px solid $lightgray;\n font-weight: 600;\n max-width: 100px;\n }\n\n &:last-child td {\n border: none;\n\n @media (max-width: 480px) {\n border-bottom: 1px solid $lightgray;\n }\n }\n }\n}\n\n#cheatsheet {\n\n table tbody td {\n overflow: auto;\n }\n\n @media only screen and (max-width: 990px) {\n\n /* Force table to not be like tables anymore */\n table, thead, tbody, tfoot, tr, th, td {\n display: block;\n position: relative;\n max-width: 100%;\n\n code {\n padding: 0;\n background-color: inherit;\n }\n }\n\n th {\n border-right: none;\n }\n\n th, td {\n &:not(:last-child) {\n border-bottom: none;\n padding-bottom: 0px;\n }\n }\n }\n}\n",".alert {\n padding: 16px;\n margin: 24px 0px;\n font-size: 14px;\n color: $darkgray;\n width: 100%;\n box-sizing: border-box;\n clear: both;\n\n h1, h2, h3, h4, h5, h6 {\n font-weight: 500;\n }\n\n &.is-critical {\n border-left: 8px solid $brightred;\n background-color: rgba($brightred, 0.05);\n\n h1, h2, h3, h4, h5, h6 {\n color: $brightred;\n }\n }\n\n &.is-important {\n border-left: 8px solid $orange;\n background-color: rgba($orange, 0.05);\n\n h1, h2, h3, h4, h5, h6 {\n color: $orange;\n }\n }\n\n &.is-helpful {\n border-left: 8px solid $blue;\n background-color: rgba($blue, 0.05);\n\n h1, h2, h3, h4, h5, h6 {\n color: $blue;\n }\n }\n\n > * {\n margin: 8px 16px;\n }\n}\n",".github-links {\n float: right;\n .material-icons {\n border-radius: 4px;\n padding: 4px;\n font-size: 20px;\n &:hover {\n background-color: $mist;\n }\n }\n}\n\n.api-header {\n display: flex;\n align-items: center;\n\n @media screen and (max-width: 600px) {\n flex-direction: column;\n align-items: flex-start;\n }\n}\n\n.api-body {\n\n .class-overview {\n position: relative;\n\n code-example {\n clear: left;\n }\n }\n\n .method-table, .option-table, .list-table {\n .with-github-links {\n align-items: center;\n display: flex;\n justify-content: space-between;\n\n .github-links {\n a {\n color: $mediumgray;\n .material-icons:hover {\n background: none;\n color: $blue;\n }\n }\n }\n }\n\n h3 {\n margin: 6px 0;\n font-weight: bold;\n clear: left;\n }\n\n h4 {\n font-size: 14px;\n font-weight: bold;\n margin-top: 12px;\n }\n }\n\n .api-heading {\n padding: 5px 0;\n font-size: 16px;\n font-weight: bold;\n }\n\n .short-description {\n margin: 6px 0 0 10px;\n }\n\n .properties-table {\n font-size: 14px;\n\n thead th {\n &:nth-child(1) {\n width: 20%;\n }\n &:nth-child(2) {\n width: 20%;\n }\n }\n }\n\n .parameters-table {\n margin-top: 0;\n font-size: 14px;\n td:nth-child(1) {\n width: 20%;\n }\n }\n\n details.overloads {\n margin-left: -8px;\n\n summary {\n height: inherit;\n padding: 8px 12px;\n h4 {\n margin: 0;\n clear: left;\n }\n }\n}\n\n .from-constructor, .read-only-property {\n font-style: italic;\n color: $blue;\n }\n}\n","/* API EDIT ICON */\n#api {\n .api-filter .material-icons {\n right: 48px;\n }\n}\n\n/* API LIST STYLES */\n\naio-api-list {\n div.form-search i.material-icons {\n width: 20px;\n pointer-events: none;\n }\n\n .form-search input {\n width: 182px;\n }\n\n .api-list-container {\n display: flex;\n flex-direction: column;\n margin: 0 auto;\n\n h2 {\n margin-top: 16px;\n }\n }\n}\n\n.api-filter {\n display: flex;\n margin: 0 auto;\n\n @media (max-width: 600px) {\n flex-direction: column;\n margin: 16px auto;\n }\n\n .form-select-menu, .form-search {\n margin: 8px;\n }\n}\n\n/* LAYOUT */\n\n.docs-content {\n position: relative;\n}\n\n.l-content-small {\n padding: 16px;\n max-width: 1100px;\n margin: 0;\n\n @media handheld and (max-width: $phone-breakpoint),\n screen and (max-device-width: $phone-breakpoint),\n screen and (max-width: $tablet-breakpoint) {\n padding: 24px 0 0;\n }\n}\n\n/* SEARCH BAR */\n\n.form-search {\n position: relative;\n\n input {\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n box-sizing: border-box;\n border: 1px solid $white;\n color: $blue-600;\n font-size: 16px;\n height: 32px;\n line-height: 32px;\n outline: none;\n padding: 0 16px 0 32px;\n transition: all .2s;\n\n // PLACEHOLDER TEXT\n &::-webkit-input-placeholder { /* Chrome/Opera/Safari */\n color: $blue-grey-100;\n font-size: 14px;\n }\n &::-moz-placeholder { /* Firefox 19+ */\n color: $blue-grey-100;\n font-size: 14px;\n }\n &:-ms-input-placeholder { /* IE 10+ */\n color: $blue-grey-100;\n font-size: 14px;\n }\n &:-moz-placeholder { /* Firefox 18- */\n color: $blue-grey-100;\n font-size: 14px;\n }\n\n &:focus {\n border: 1px solid $blue-400;\n box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);\n }\n }\n\n .material-icons {\n color: $blue-grey-100;\n font-size: 20px;\n left: 8px;\n position: absolute;\n top: 6px;\n z-index: $layer-1;\n }\n}\n\n/* API SYMBOLS */\n\n/* SYMBOL CLASS */\n\n.symbol {\n border-radius: 2px;\n box-shadow: 0 1px 2px rgba($black, .24);\n color: $white;\n display: inline-block;\n font-size: 10px;\n font-weight: 600;\n line-height: 16px;\n text-align: center;\n width: 16px;\n\n // SYMBOL TYPES\n // Symbol mapping variables in *constants*\n @each $name, $symbol in $api-symbols {\n &.#{$name} {\n background: map-get($symbol, background);\n\n &:before {\n content: map-get($symbol, content);\n }\n }\n }\n}\n\n/* API HOMEE PAGE */\n\n/* API FILTER MENU */\n\n.api-filter {\n aio-select {\n width: 200px;\n\n .symbol {\n margin-right: 8px;\n }\n }\n\n .form-search {\n float: left;\n }\n}\n\n/* API CLASS LIST */\n\n.docs-content .api-list {\n list-style: none;\n margin: 0 0 32px -8px;\n padding: 0;\n overflow: hidden;\n\n @media screen and (max-width: 600px) {\n margin: 0 0 0 -8px;\n }\n\n li {\n font-size: 14px;\n margin: 8px 0;\n line-height: 14px;\n padding: 0;\n float: left;\n width: 33%;\n overflow: hidden;\n min-width: 220px;\n text-overflow: ellipsis;\n white-space: nowrap;\n\n .symbol {\n margin-right: 8px;\n }\n a {\n color: $blue-grey-600;\n display: inline-block;\n line-height: 16px;\n padding: 0 16px 0;\n text-decoration: none;\n transition: all .3s;\n overflow: hidden;\n text-overflow: ellipsis;\n\n &:hover {\n background: $blue-grey-50;\n color: $blue-500;\n }\n }\n }\n}\n\n.docs-content .h2-api-docs,\n.docs-content .h2-api-docs:first-of-type {\n font-size: 18px;\n line-height: 24px;\n margin-top: 0;\n}\n\n.code-links {\n a {\n code, .api-doc-code {\n color: #1E88E5 !important;\n }\n }\n}\n\n.openParens {\n margin-top: 15px;\n}\n\n.endParens {\n margin-bottom: 20px !important;\n}\n\np {\n\n &.selector {\n margin: 0;\n }\n\n &.location-badge {\n margin: 0 0 16px 16px !important;\n }\n\n .api-doc-code {\n border-bottom: 0;\n\n :hover {\n border-bottom: none;\n }\n }\n}\n\n.row-margin {\n margin-bottom: 36px;\n h2 {\n line-height: 28px;\n }\n}\n\n.code-margin {\n margin-bottom: 8px;\n}\n\n.no-bg {\n background: none;\n padding: 0;\n}\n\n.no-bg-with-indent {\n padding-top: 0;\n padding-bottom: 0;\n padding-left: 16px;\n margin-top: 6px;\n margin-bottom: 0;\n background: none;\n}\n\n.code-background {\n padding: 0 5px 0;\n\n span.pln {\n color: #1E88E5 !important;\n }\n}\n\n.code-anchor {\n cursor: pointer;\n text-decoration: none;\n font-size: inherit;\n\n &:hover {\n text-decoration: underline;\n }\n}\n\n.api-doc-code {\n font-size: 14px;\n color: #1a2326;\n\n // the last .pln (white space) creates additional spacing between sections of the api doc. Remove it.\n &.no-pln {\n .pln:last-child {\n display: none;\n }\n }\n}\n\n@media screen and (max-width: 600px) {\n .docs-content {\n // Overrides display flex from angular material.\n // This was added because Safari doesn't play nice with layout=\"column\".\n // Look of API doc in Chrome and Firefox remains the same, and is fixed for Safari.\n .layout-xs-column {\n display: block !important;\n }\n }\n\n .api-doc-code {\n font-size: 12px;\n }\n\n p.location-badge {\n position: relative;\n font-size: 11px;\n }\n}\n","/* Button Styles */\n\n.button,\na.button.mat-button {\n display: inline-block;\n line-height: 32px;\n padding: 0px 16px;\n font-size: 14px;\n font-weight: 400;\n border-radius: 3px;\n text-decoration: none;\n text-transform: uppercase;\n overflow: hidden;\n border: none;\n\n // SIZES\n &.button-small {\n font-size: 12px;\n line-height: 24px;\n padding: 0px 8px;\n }\n\n &.button-large {\n font-size: 15px;\n line-height: 48px;\n padding: 0px 24px;\n }\n\n &.button-x-large {\n font-size: 16px;\n line-height: 56px;\n padding: 0px 24px;\n }\n\n\n // COLORS\n\n &.button-secondary {\n background: $mediumgray;\n color: rgba($white, .87);\n }\n\n &.button-plain {\n background: $white;\n color: rgba($darkgray, .87);\n }\n\n &.button-subtle {\n background: $mediumgray;\n color: darken($offwhite, 10%);\n\n &:hover {\n color: rgba($white, 0.7);\n }\n }\n\n &.button-blue {\n background: $blue;\n color: rgba($white, .87);\n\n &:hover {\n color: rgba($white, 0.7);\n }\n }\n\n &.button-banner {\n background: $darkgray;\n color: rgba($white, .87);\n }\n\n &.button-shield,\n &.button-shield.mat-button {\n background-color: $blue;\n background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;\n color: rgba($white, .87);\n padding-left: 54px;\n background-size: 22px 22px;\n\n @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {\n background: $blue url('assets/images/logos/angular/angular_whiteTransparent.svg') 24px 13px no-repeat;\n background-size: 22px 22px;\n\n }\n }\n}\n\n.cta-bar {\n text-align: center;\n\n .button {\n margin: 0px 8px;\n box-shadow: 0 2px 5px 0 rgba(0,0,0,.26);\n transition: all .2s ease-in-out;\n &:hover {\n transform: scale(1.1);\n color: $offwhite;\n }\n }\n}\n\na.filter-button {\n width: 140px;\n font-size: 14px;\n padding: 0px 16px;\n margin: 8px;\n line-height: 48px;\n border: 2px solid $blue;\n border-radius: 4px;\n\n &:hover {\n background-color: $blue;\n color: white;\n }\n}\n\n[mat-button], [mat-raised-button], [mat-button], [mat-raised-button] {\n text-transform: uppercase;\n}\n",".callout {\n @extend .alert;\n padding: 0px;\n border-left: none !important;\n border-radius: 4px;\n\n header {\n color: $white;\n line-height: 24px;\n font-weight: 500;\n padding: 8px 16px;\n margin: 0;\n text-transform: uppercase;\n border-radius: 4px 4px 0 0;\n }\n\n p {\n padding: 16px;\n margin: 0px;\n font-size: 14px;\n }\n\n &.is-critical {\n border-color: $brightred;\n background: rgba($brightred, 0.05);\n\n header {\n background: $brightred;\n }\n }\n\n &.is-important {\n border-color: $orange;\n background: rgba($orange, 0.05);\n\n header {\n background: $amber-700;\n }\n }\n\n &.is-helpful {\n border-color: $blue;\n background: rgba($blue, 0.05);\n\n header {\n background: $blue;\n }\n }\n}\n",".card-container {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n margin: 24px 0;\n}\n\n.docs-card {\n @include card(194px, 30%);\n max-width: 340px;\n min-width: 262px;\n margin: 24px 8px;\n padding-bottom: 48px;\n position: relative;\n\n &:hover {\n text-decoration: none;\n\n section {\n color: $blue;\n }\n\n p {\n color: $darkgray;\n padding: 0 16px;\n }\n\n .card-footer {\n line-height: 32px;\n padding: 8px 16px;\n background-color: rgba($blue, 0.1);\n color: $blue;\n }\n }\n\n\n section {\n color: $darkgray;\n font-size: 20px;\n line-height: 24px;\n margin: 0;\n padding: 32px 0 24px;\n text-transform: none;\n text-align: center;\n }\n\n p {\n color: $darkgray;\n font-size: 13px;\n line-height: 24px;\n padding: 0 16px;\n margin: 0;\n text-align: center;\n }\n\n .card-footer {\n bottom: 0;\n border-top: 0.5px solid $lightgray;\n box-sizing: border-box;\n line-height: 48px;\n left: 0;\n position: absolute;\n right: 0;\n text-align: right;\n color: $mediumgray;\n\n a {\n color: $mediumgray;\n font-size: 13px;\n }\n }\n .card-footer.center {\n text-align: center;\n }\n}\n\n.card-section {\n @include card(auto, 90%);\n padding: 16px 32px;\n margin: 16px 0;\n display: flex;\n flex-direction: row;\n align-items: center;\n\n // Removes on-hover effect from card mixin\n &:hover {\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n }\n\n h1, h2, h3, h4, h5, h6 {\n margin: 8px 0;\n }\n\n a, .button, button {\n text-align: center;\n }\n\n}\n","code-example, code-tabs {\n clear: both;\n display: block;\n}\n\ncode-example {\n\n\n &:not(.no-box) {\n background-color: rgba($backgroundgray, 0.2);\n border: 0.5px solid $lightgray;\n border-radius: 5px;\n color: $darkgray;\n margin: 16px auto;\n }\n\n &.no-box {\n pre {\n margin: 0;\n }\n code {\n background-color: transparent;\n }\n }\n\n code {\n overflow: auto;\n }\n}\n\ncode-example, code-tabs {\n .mat-card {\n padding: 0;\n border-radius: 5px;\n }\n code {\n overflow: auto;\n }\n}\n\n// TERMINAL / SHELL TEXT STYLES\n\ncode-example.code-shell, code-example[language=sh], code-example[language=bash] {\n background-color: $darkgray;\n}\n\ncode-example header {\n background-color: $accentblue;\n border-radius: 5px 5px 0 0;\n color: $offwhite;\n font-size: 16px;\n padding: 8px 16px;\n}\n\ncode-example.avoid header,\ncode-example.avoidFile header {\n border: 2px solid $anti-pattern;\n background: $anti-pattern;\n}\n\ncode-example.avoid,\ncode-example.avoidFile,\ncode-tabs.avoid mat-tab-body,\ncode-tabs.avoidFile mat-tab-body {\n border: 0.5px solid $anti-pattern;\n}\n\ncode-tabs div .mat-tab-body-content {\n height: auto;\n}\n\ncode-tabs .mat-tab-body-wrapper mat-tab-body .mat-tab-body {\n overflow-y: hidden;\n}\n\ncode-tabs mat-tab-body-content .fadeIn {\n animation: opacity 2s ease-in;\n}\n\naio-code pre {\n display: flex;\n min-height: 32px;\n margin: 16px 24px;\n white-space: pre-wrap;\n align-items: center;\n\n code span {\n line-height: 24px;\n }\n}\n\n\n.code-missing {\n color: $darkred;\n}\n\n\n.copy-button {\n position: absolute;\n top: -7px;\n right: -19px;\n padding: 0;\n\n color: $blue-grey-200;\n background-color: transparent;\n border: none;\n cursor: pointer;\n &:hover {\n color: $mediumgray;\n }\n}\n\n.lang-sh .copy-button, .lang-bash .copy-button {\n color: $mediumgray;\n &:hover {\n color: $lightgray;\n }\n}\n\n.code-tab-group .mat-tab-label {\n &:hover {\n background: rgba(black, 0.04);\n }\n white-space: nowrap;\n}\n\n.code-tab-group .mat-tab-body-content {\n height: auto;\n transform: none;\n}\n\n\n[role=\"tabpanel\"] {\n transition: none;\n}\n\n.sidenav-content code a {\n color: inherit;\n font-size: inherit;\n}\n\n/* PRETTY PRINTING STYLES for prettify.js. */\n\n.prettyprint {\n position: relative;\n}\n\n/* Specify class=linenums on a pre to get line numbering */\nol.linenums {\n margin: 0;\n font-family: $main-font;\n color: #B3B6B7;\n li {\n margin: 0;\n font-family: $code-font;\n font-size: 90%;\n line-height: 24px;\n }\n}\n\n/* The following class|color styles are derived from https://github.com/google/code-prettify/blob/master/src/prettify.css*/\n\n/* SPAN elements with the classes below are added by prettyprint. */\n.pln { color: #000 } /* plain text */\n\n@media screen {\n .str { color: #800 } /* string content */\n .kwd { color: #00f } /* a keyword */\n .com { color: #060 } /* a comment */\n .typ { color: red } /* a type name */\n .lit { color: #08c } /* a literal value */\n /* punctuation, lisp open bracket, lisp close bracket */\n .pun, .opn, .clo { color: #660 }\n .tag { color: #008 } /* a markup tag name */\n .atn { color: #606 } /* a markup attribute name */\n .atv { color: #800 } /* a markup attribute value */\n .dec, .var { color: #606 } /* a declaration; a variable name */\n .fun { color: red } /* a function name */\n}\n\n/* Use higher contrast and text-weight for printable form. */\n@media print, projection {\n .str { color: #060 }\n .kwd { color: #006; font-weight: bold }\n .com { color: #600; font-style: italic }\n .typ { color: #404; font-weight: bold }\n .lit { color: #044 }\n .pun, .opn, .clo { color: #440 }\n .tag { color: #006; font-weight: bold }\n .atn { color: #404 }\n .atv { color: #060 }\n}\n\n/* SHELL / TERMINAL CODE BLOCKS */\n\ncode-example.code-shell, code-example[language=sh], code-example[language=bash] {\n .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {\n color: $codegreen;\n }\n}\n",".contribute-container {\n h2 {\n margin: 0;\n }\n\n .card-section {\n justify-content: space-between;\n max-width: 880px;\n\n > :first-child {\n margin-right: 2rem;\n width: 60%;\n }\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n","aio-contributor-list {\n @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n .grid-fluid{\n width: auto;\n }\n }\n\n @media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n .grid-fluid{\n margin-left: 20px;\n margin-right: 20px;\n float: none;\n display: block;\n width: auto;\n }\n }\n}\n\n.group-buttons {\n margin: 32px auto;\n\n a {\n &.selected {\n background-color: $blue;\n color: white;\n }\n }\n}\n\n.contributor-group {\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n justify-content: center;\n}\n\naio-contributor {\n background: $white;\n margin: 8px;\n position: relative;\n cursor: pointer;\n border-radius: 4px;\n box-shadow: 0 2px 2px rgba(10, 16, 20, 0.24), 0 0 2px rgba(10, 16, 20, 0.12);\n transition: all .3s;\n perspective: 800px;\n\n &:hover {\n transform: translate3d(0,-3px,0);\n box-shadow: 0 8px 8px rgba(10, 16, 20, 0.24), 0 0 8px rgba(10, 16, 20, 0.12);\n\n .contributor-image {\n transform: scale(1.05);\n }\n\n .contributor-info {\n opacity: 1;\n }\n }\n\n .contributor-info {\n background: rgba($darkgray, 0.5);\n height: 168px;\n width: 168px;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n text-align: center;\n opacity: 0;\n border-radius: 50%;\n\n [mat-button] {\n color: $white;\n font-size: 14px;\n font-weight: 500;\n margin: 8px;\n padding: 0;\n\n &:hover {\n color: $lightgray;\n }\n\n &.icon {\n min-width: 20px;\n width: 20px;\n\n .fa-2x {\n font-size: 20px;\n }\n }\n }\n }\n\n div.contributor-card {\n width: 250px;\n height: 270px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: space-between;\n position: relative;\n overflow: hidden;\n border-radius: 4px;\n transform-style:preserve-3d;\n transition:transform ease 500ms;\n\n h3 {\n margin: 8px 0;\n }\n\n .card-front, .card-back {\n width: 100%;\n height: 100%;\n text-align: center;\n display: flex;\n flex-direction: column;\n box-sizing: border-box;\n }\n\n .card-front {\n justify-content: center;\n }\n\n .card-back {\n height: 100%;\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 16px 24px;\n transform:rotateY(180deg);\n\n section {\n display: none;\n }\n\n p {\n margin: 8px 0;\n font-size: 12px;\n line-height: 14px;\n text-align: left;\n }\n\n }\n\n &.flipped {\n transform:rotateY(180deg);\n .card-front {\n display: none;\n }\n }\n }\n\n .contributor-image {\n display: flex;\n justify-content: center;\n border-radius: 50%;\n align-items: center;\n height: 168px;\n width: 168px;\n background-size: cover;\n background-position: center;\n margin: 8px auto;\n border: 2px solid $lightgray;\n transition: all .2s ease-in-out;\n }\n\n section {\n font-size: 14px;\n font-weight: 500;\n padding: 8px;\n margin: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n text-transform: uppercase;\n }\n\n p {\n cursor: pointer;\n font-size: 14px;\n line-height: 18px;\n margin: 8px 16px;\n text-overflow: ellipsis;\n overflow: scroll;\n font-weight: 400;\n }\n}\n","/*\n * General styling to make detail/summary tags look a bit more material\n * To get the best out of it you should structure your usage like this:\n *\n * ```\n * <details>\n * <summary>Some title</summary>\n * <div class=\"details-content\">\n * Some content\n * </div>\n * </details>\n *\n */\n\nsummary {\n cursor: pointer;\n font-size: 16px;\n position: relative;\n padding: 16px 24px;\n color: $black;\n height: 16px;\n display: block; // Remove the built in details marker in FF\n\n &::-webkit-details-marker {\n display: none; // Remove the built in details marker in webkit\n }\n\n &::before {\n content: '\\E5CE'; // See https://material.io/icons/#ic_expand_less\n font-family: 'Material Icons';\n font-size: 24px;\n -webkit-font-smoothing: antialiased;\n @include rotate(0deg); // We will rotate 180 degrees when details is open\n float: right;\n }\n}\n\ndetails {\n box-shadow: 0 1px 4px 0 rgba($black, 0.37);\n\n .detail-contents {\n padding: 16px 24px;\n }\n\n &[open] > summary::before {\n @include rotate(180deg); // Rotate the icon\n }\n}\n",".edit-page-cta {\n font-weight: 400;\n font-size: 14px;\n color: $blue;\n text-align: right;\n margin-right: 32px;\n display: block;\n position: absolute;\n right: 0;\n}","// FEATURES MARKETING PAGE SPECIFIC STYLES\n\n.feature-section {\n margin: 0 0 32px;\n\n .feature-header, .text-headline {\n text-align: center;\n }\n\n .feature-header img {\n margin: 16px;\n }\n\n .feature-title {\n font-size: 16px;\n font-weight: 500;\n margin: 8px 0px;\n clear: both;\n }\n\n .feature-row {\n display: flex;\n flex-wrap: wrap;\n\n @media (max-width: 600px) {\n flex-direction: column;\n }\n\n .feature {\n max-width: 300px;\n margin: 0 16px; \n \n @media (max-width: 768px) {\n max-width: 100%;\n }\n }\n }\n}",".filetree {\n background: $offwhite;\n border: 4px solid $lightgray;\n border-radius: 4px;\n margin: 0 0 24px 0;\n padding: 16px 32px;\n\n .file {\n display: block;\n font-family: $main-font;\n letter-spacing: 0.3px;\n line-height: 32px;\n color: $darkgray;\n }\n\n .children {\n padding-left: 24px;\n position: relative;\n overflow: hidden;\n\n .file {\n position: relative;\n\n &:before {\n content: '';\n left: -18px;\n bottom: 16px;\n width: 16px;\n height: 9999px;\n position: absolute;\n border-width: 0 0 1px 1px;\n border-style: solid;\n border-color: $lightgray;\n border-radius: 0 0 0 3px;\n }\n }\n }\n}",".sidenav-content {\n h1, h2, h3, h4, h5, h6 {\n\n .header-link {\n color: $mediumgray;\n margin: 0 4px;\n text-decoration: none;\n user-select: none;\n visibility: hidden;\n display: inline-block;\n vertical-align: text-top;\n }\n\n &:hover .header-link {\n visibility: visible;\n }\n }\n}\n","hr {\n border: none;\n background: $lightgray;\n height: 1px;\n}\n\n.hr-margin {\n display: block;\n height: 1px;\n border: 0;\n margin-top: 16px;\n margin-bottom: 16px;\n padding: 0;\n}",".content {\n img {\n\n &.right {\n clear: both;\n float: right;\n margin-left: 20px;\n margin-bottom: 20px;\n }\n\n &.left {\n clear: both;\n float: left;\n margin-right: 20px;\n margin-bottom: 20px;\n }\n\n @media (max-width: 1300px) {\n max-width: 100%;\n height: auto;\n }\n\n @media (max-width: 600px) {\n float: none !important;\n &.right {\n margin-left: 0;\n }\n &.left {\n margin-right: 0;\n }\n }\n }\n\n figure {\n border-radius: 4px;\n background: $white;\n padding: 20px;\n display: inline-block;\n box-shadow: 2px 2px 5px 0 rgba(0, 0, 0, .2);\n margin: 0 0 14px 0;\n\n img {\n border-radius: 4px;\n }\n }\n}\n","$notificationHeight: 56px;\n\n// we need to override some of the toolbar styling\n.mat-toolbar mat-toolbar-row.notification-container {\n padding: 0;\n height: auto;\n overflow: hidden;\n}\n\naio-notification {\n background: $darkgray;\n display: flex;\n position: relative;\n align-items: center;\n width: 100%;\n height: $notificationHeight;\n justify-content: center;\n\n @media (max-width: 430px) {\n justify-content: flex-start;\n padding-left: 10px;\n }\n\n .close-button {\n position: absolute;\n top: 0;\n right: 0;\n width: $notificationHeight;\n height: $notificationHeight;\n background: $darkgray;\n }\n\n .content {\n display: flex;\n max-width: calc(100% - #{$notificationHeight});\n text-transform: none;\n padding: 0;\n\n .icon {\n margin-right: 10px;\n @media (max-width: 464px) {\n display: none;\n }\n }\n\n .message {\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .action-button {\n margin-left: 10px;\n background: $brightred;\n border-radius: 15px;\n text-transform: uppercase;\n padding: 0 10px;\n font-size: 12px;\n @media (max-width: 780px) {\n display: none;\n }\n }\n }\n}\n\n// Here are all the hacks to make the content and sidebars the right height\n// when the notification is visible\n.aio-notification-show {\n .sidenav-content {\n padding-top: 80px + $notificationHeight;\n }\n\n mat-sidenav.mat-sidenav.sidenav {\n top: 56px + $notificationHeight;\n\n @media (max-width: 600px) {\n top: 56px + $notificationHeight;\n }\n }\n\n .toc-container {\n top: 76px + $notificationHeight;\n }\n\n .search-results {\n padding-top: 68px + $notificationHeight;\n }\n\n &.page-home, &.page-resources, &.page-events, &.page-features, &.page-presskit, &.page-contribute {\n section {\n padding-top: $notificationHeight;\n }\n }\n}\n\n// Animate the content when the notification bar is dismissed\n// this should be kept in sync with the animation durations in\n// - aio/src/app/layout/notification/notification.component.ts\n// - aio/src/app/app.component.ts : notificationDismissed()\n.aio-notification-animating {\n .sidenav-content {\n transition: padding-top 250ms ease;\n }\n mat-sidenav.mat-sidenav.sidenav, .toc-container {\n transition: top 250ms ease;\n }\n}\n",".progress-bar-container {\n height: 2px;\n overflow: hidden;\n position: fixed;\n top: 0;\n width: 100vw;\n z-index: 11;\n}\n",".presskit-container {\n padding: 0 32px 32px 32px;\n\n h2 {\n color: #37474F;\n }\n\n .l-space-left-3 {\n margin-left: 3 * 8px;\n }\n\n .cc-by-anchor {\n text-decoration: underline;\n color: grey !important;\n }\n\n .presskit-row {\n margin: 48px 0;\n width: 100%;\n\n .presskit-inner {\n display: flex;\n align-items: center;\n\n @media(max-width: 599px) {\n flex-direction: column;\n }\n\n h3 {\n font-weight: 500;\n margin-top: 0;\n margin-bottom: 0;\n color: #455A64;\n\n @media(max-width: 599px) {\n padding-bottom: 16px;\n }\n }\n\n .transparent-img-bg {\n margin-top: 10px;\n border-radius: 4px;\n width: 128px;\n height: 128px;\n background-color: #34474F;\n }\n\n ul {\n padding: 0;\n list-style-type: none;\n\n @media(max-width: 599px) {\n padding: 0 !important;\n margin: 0 !important;\n }\n\n li {\n margin: 0 0 8px 0;\n }\n }\n }\n\n .presskit-image-container {\n\n @media(max-width: 599px) {\n text-align: center;\n }\n\n img {\n height: 128px;\n width: auto;\n margin-bottom: 8px * 2;\n }\n }\n }\n\n .presskit-row:first-child {\n margin-top: 0;\n\n @media(max-width: 599px) {\n margin-top: 48px;\n }\n }\n}\n",".showcase {\n width: 80%;\n}\n\n.c-resource-nav {\n width: 20%;\n}\n\n.resources-container {\n position: relative;\n}\n\n.grid-fixed:after, .grid-fixed:before {\n content: '.';\n clear: both;\n display: block;\n overflow: hidden;\n visibility: hidden;\n font-size: 0;\n line-height: 0;\n width: 0;\n height: 0;\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n .grid-fixed {\n width: auto;\n }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 900px) {\n .grid-fixed .c3, .grid-fixed .c8 {\n margin-left: 20px;\n margin-right: 20px;\n float: none;\n display: block;\n width: auto;\n }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px), screen and (max-width: 480px) {\n .grid-fixed .c3, .grid-fixed .c8 {\n margin-left: 0px;\n margin-right: 0px;\n float: none;\n display: block;\n width: auto;\n }\n}\n\n@media handheld and (max-width: 900px), screen and (max-width: 900px) {\n /* line 6, ../scss/_responsive.scss */\n .grid-fixed{\n margin: 0 auto;\n *zoom: 1;\n }\n .grid-fixed:after, .grid-fixed:before, {\n content: '.';\n clear: both;\n display: block;\n overflow: hidden;\n visibility: hidden;\n font-size: 0;\n line-height: 0;\n width: 0;\n height: 0;\n }\n}\n\n@media handheld and (max-width: 480px), screen and (max-width: 480px) {\n /* line 6, ../scss/_responsive.scss */\n .grid-fixed {\n margin: 0 auto;\n *zoom: 1;\n }\n .grid-fixed:after, .grid-fixed:before {\n content: '.';\n clear: both;\n display: block;\n overflow: hidden;\n visibility: hidden;\n font-size: 0;\n line-height: 0;\n width: 0;\n height: 0;\n }\n}\n\naio-resource-list {\n\n .shadow-1 {\n transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);\n box-shadow: 0 1px 4px 0 rgba($black, 0.37);\n }\n\n .showcase {\n margin-bottom: 8px * 6;\n border-radius: 4px;\n }\n\n .c-resource {\n h4 {\n margin: 0;\n line-height: 24px;\n }\n\n p {\n margin: 0;\n }\n }\n\n .c-resource-nav {\n position: fixed;\n top: 142px;\n right: 32px;\n width: 8px * 20;\n z-index: 1;\n background-color: #fff;\n border-radius: 2px;\n\n a {\n color: #373E41;\n text-decoration: none;\n }\n\n .category {\n padding: 10px 0;\n\n .category-link {\n display: block;\n margin: 2px 0;\n padding: 3px 14px;\n font-size: 18px !important;\n\n &:hover {\n background: #edf0f2;\n color: #2B85E7;\n }\n }\n }\n\n .subcategory {\n .subcategory-link {\n display: block;\n margin: 2px 0;\n padding: 4px 14px;\n\n &:hover {\n background: #edf0f2;\n color: #2B85E7;\n }\n }\n }\n }\n\n .h-anchor-offset {\n display: block;\n position: relative;\n top: -20px;\n visibility: hidden;\n }\n\n .l-flex--column {\n display: flex;\n flex-direction: column;\n }\n\n .c-resource-header {\n margin-bottom: 16px;\n }\n\n .c-contribute {\n margin-bottom: 24px;\n }\n\n .c-resource-header h2 {\n margin: 0;\n }\n\n .subcategory-title {\n padding: 16px 23px;\n margin: 0;\n background-color: $mist;\n color: #373E41;\n }\n\n .h-capitalize {\n text-transform: capitalize;\n }\n\n .h-hide {\n display: none;\n }\n\n .resource-row-link {\n color: #1a2326;\n border: transparent solid 1px;\n margin: 0;\n padding: 16px 23px 16px 23px;\n position: relative;\n text-decoration: none;\n transition: all .3s;\n }\n\n .resource-row-link:hover {\n color: #1a2326;\n text-decoration: none;\n border-color: #2B85E7;\n border-radius: 4px;\n box-shadow: 0 8px 8px rgba(1, 67, 163, .24), 0 0 8px rgba(1, 67, 163, .12), 0 6px 18px rgba(43, 133, 231, .12);\n transform: translateY(-2px);\n }\n\n @media(max-width: 900px) {\n .c-resource-nav {\n display: none;\n }\n }\n}\n","body::-webkit-scrollbar, mat-sidenav.sidenav::-webkit-scrollbar, .mat-sidenav-content::-webkit-scrollbar {\n height: 6px;\n width: 6px;\n}\n\nbody::-webkit-scrollbar-track, mat-sidenav.sidenav::-webkit-scrollbar-track, .mat-sidenav-content::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n}\n\nbody::-webkit-scrollbar-thumb, mat-sidenav.sidenav::-webkit-scrollbar-thumb, .mat-sidenav-content::-webkit-scrollbar-thumb {\n background-color: $mediumgray;\n outline: 1px solid $darkgray;\n}\n\n.search-results::-webkit-scrollbar, .toc-container::-webkit-scrollbar {\n height: 4px;\n width: 4px;\n}\n\n.search-results::-webkit-scrollbar-track, .toc-container::-webkit-scrollbar-track {\n -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);\n}\n\n.search-results::-webkit-scrollbar-thumb, .toc-container::-webkit-scrollbar-thumb {\n background-color: $mediumgray;\n outline: 1px solid slategrey;\n}\n","aio-search-results {\n z-index: 10;\n}\n\n.search-results {\n display: flex;\n flex-direction: row;\n justify-content: space-around;\n overflow: auto;\n padding: 68px 32px 0;\n color: $offwhite;\n width: auto;\n max-height: 95vh;\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 5;\n background-color: $darkgray;\n box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.3);\n box-sizing: border-box;\n\n @media (max-width: 480px) {\n display: block;\n .search-area {\n display: block;\n margin: 16px 16px;\n }\n }\n}\n\naio-search-results.embedded .search-results {\n padding: 0;\n color: inherit;\n width: auto;\n max-height: 100%;\n position: relative;\n background-color: inherit;\n box-shadow: none;\n box-sizing: border-box;\n\n .search-area a {\n color: lighten($darkgray, 10);\n &:hover {\n color: $accentblue;\n }\n }\n}\n\n.search-area {\n display: flex;\n flex-direction: column;\n margin: 16px 16px;\n height: 100%;\n\n h3 {\n font-size: 16px;\n font-weight: 400;\n margin: 10px 0px 5px;\n text-transform: uppercase;\n }\n\n ul {\n margin: 0;\n padding: 0;\n\n li {\n list-style: none;\n }\n }\n\n a {\n font-size: 14px;\n color: $lightgray;\n text-decoration: none;\n font-weight: normal;\n &:hover {\n color: $white;\n }\n &:visited {\n text-decoration: none;\n }\n\n span.symbol {\n margin-right: 8px;\n }\n }\n\n .priority-pages {\n padding: 0.5rem 0;\n a {\n font-weight: bold;\n }\n }\n\n @include bp(tiny) {\n display: block;\n }\n}\n",".toc-container {\n width: 18%;\n position: fixed;\n top: 76px;\n right: 0;\n bottom: 12px;\n overflow-y: auto;\n overflow-x: hidden;\n}\n\naio-toc.embedded {\n @media (min-width: 801px) {\n display: none;\n }\n\n .toc-inner {\n padding: 12px 0 0 0;\n\n .toc-heading {\n margin: 0 0 8px;\n }\n }\n}\n\n.toc-inner {\n font-size: 13px;\n overflow-y: visible;\n padding: 4px 0 0 10px;\n\n .toc-heading,\n .toc-list .h1 {\n font-size: 115%;\n }\n\n .toc-heading {\n font-weight: 500;\n margin: 0 0 16px 8px;\n padding: 0;\n }\n\n .toc-heading.secondary {\n position: relative;\n top: -8px;\n\n &:hover {\n color: $accentblue;\n }\n }\n\n button.toc-heading,\n button.toc-more-items {\n cursor: pointer;\n display: inline-block;\n background: 0;\n background-color: transparent;\n border: none;\n box-shadow: none;\n padding: 0;\n text-align: start;\n\n &.embedded:focus {\n outline: none;\n background: $lightgray;\n }\n }\n\n button.toc-heading {\n mat-icon.rotating-icon {\n height: 18px;\n width: 18px;\n position: relative;\n left: -4px;\n top: 5px;\n }\n\n &:hover:not(.embedded) {\n color: $accentblue;\n }\n }\n\n button.toc-more-items {\n color: $mediumgray;\n top: 10px;\n position: relative;\n\n &:hover {\n color: $accentblue;\n }\n }\n\n button.toc-more-items::after {\n content: 'expand_less';\n }\n\n button.toc-more-items.collapsed::after {\n content: 'more_horiz';\n }\n\n\n .mat-icon.collapsed {\n @include rotate(0deg);\n }\n\n .mat-icon:not(.collapsed) {\n @include rotate(90deg);\n // margin: 4px;\n }\n\n ul.toc-list {\n list-style-type: none;\n margin: 0;\n padding: 0 8px 0 0;\n\n @media (max-width: 800px) {\n width: auto;\n }\n\n li {\n box-sizing: border-box;\n font-size: 12px;\n line-height: 16px;\n padding: 3px 0 3px 12px;\n position: relative;\n transition: all 0.3s ease-in-out;\n\n &.h1:after {\n content: '';\n display: block;\n height: 1px;\n width: 40%;\n margin: 7px 0 4px 0;\n background: #DBDBDB;\n clear: both;\n }\n\n &.h3 {\n padding-left: 24px;\n }\n\n a {\n font-size: inherit;\n color: lighten($darkgray, 10);\n display:table-cell;\n overflow: visible;\n font-size: 12px;\n display: table-cell;\n }\n\n &:hover a {\n color: $accentblue;\n }\n\n &.active {\n a {\n color: $blue;\n font-weight: 500;\n\n &:before {\n content: '';\n border-radius: 50%;\n left: -3px;\n top: 12px;\n background: $blue;\n position: absolute;\n width: 6px;\n height: 6px;\n }\n }\n }\n }\n\n &:not(.embedded) li {\n &:before {\n border-left: 1px solid $lightgray;\n bottom: 0;\n content: '';\n left: 0;\n position: absolute;\n top: 0;\n }\n\n &:first-child:before {\n top: 13px;\n }\n\n &:last-child:before {\n bottom: calc(100% - 14px);\n }\n\n &:not(.active):hover a:before {\n content: '';\n border-radius: 50%;\n left: -3px;\n top: 12px;\n background: $lightgray;\n position: absolute;\n width: 6px;\n height: 6px;\n }\n }\n }\n\n}\n\naio-toc.embedded > div.collapsed li.secondary {\n display: none;\n}\n","/* SELECT MENU */\n\n.form-select-menu {\n position: relative;\n}\n\n.form-select-button {\n background: $white;\n box-shadow: 0 2px 2px rgba($black, 0.24), 0 0 2px rgba($black, 0.12);\n box-sizing: border-box;\n border: 1px solid $white;\n color: $blue-grey-600;\n font-size: 12px;\n font-weight: 400;\n height: 32px;\n line-height: 32px;\n outline: none;\n padding: 0 16px;\n text-align: left;\n width: 100%;\n cursor: pointer;\n\n strong {\n font-weight: 600;\n margin-right: 8px;\n text-transform: uppercase;\n }\n\n &:focus {\n border: 1px solid $blue-400;\n box-shadow: 0 2px 2px rgba($blue-400, 0.24), 0 0 2px rgba($blue-400, 0.12);\n }\n}\n\n.form-select-dropdown {\n background: $white;\n box-shadow: 0 16px 16px rgba($black, 0.24), 0 0 16px rgba($black, 0.12);\n border-radius: 4px;\n list-style-type: none;\n margin: 0;\n padding: 0;\n position: absolute;\n top: 0;\n width: 100%;\n z-index: $layer-2;\n\n li {\n cursor: pointer;\n font-size: 14px;\n line-height: 32px;\n margin: 0;\n padding: 0 16px 0 40px;\n position: relative;\n transition: all .2s;\n\n &:hover {\n background: $blue-grey-50;\n color: $blue-500;\n }\n\n &.selected {\n background-color: $blue-grey-100;\n }\n\n .symbol {\n left: 16px;\n position: absolute;\n top: 8px;\n z-index: $layer-5;\n }\n }\n}\n","\naio-shell.mode-archive {\n\n .mat-toolbar.mat-primary, footer {\n background: linear-gradient(145deg,#263238,#78909C);\n }\n\n .vertical-menu-item {\n &.selected, &:hover {\n color: #263238;\n }\n }\n\n .toc-inner ul.toc-list li.active a {\n color: #263238;\n\n &:before {\n background-color: #263238;\n }\n }\n\n .toc-inner ul.toc-list li:hover a {\n color: #263238;\n }\n}\n\naio-shell.mode-next {\n\n .mat-toolbar.mat-primary, footer {\n background: linear-gradient(145deg,#DD0031,#C3002F);\n }\n\n .vertical-menu-item {\n &.selected, &:hover {\n color: #DD0031;\n }\n }\n\n .toc-inner ul.toc-list li.active a {\n color: #DD0031;\n\n &:before {\n background-color: #DD0031;\n }\n }\n\n .toc-inner ul.toc-list li:hover a {\n color: #DD0031;\n }\n}\n","label.raised, .api-header label {\n border-radius: 4px;\n padding: 4px 16px;\n display: inline;\n font-size: 14px;\n color: white;\n margin-right: 8px;\n font-weight: 500;\n text-transform: uppercase;\n\n @media screen and (max-width: 600px) {\n display: block;\n margin: 8px 0;\n }\n\n &.page-label {\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items: center;\n background-color: $mist;\n color: $mediumgray;\n margin-bottom: 8px;\n width: 140px;\n\n .material-icons {\n margin-right: 8px;\n }\n }\n\n &.property-type-label {\n font-size: 12px;\n background-color: $darkgray;\n color: $white;\n text-transform: none;\n }\n}\n\n.api-header label {\n\n // The API badges should be a little smaller\n padding: 2px 10px;\n font-size: 12px;\n\n @media screen and (max-width: 600px) {\n margin: 4px 0;\n }\n\n &.api-status-label {\n background-color: $mediumgray;\n\n &.impure-pipe {\n background-color: $brightred;\n }\n }\n\n &.api-type-label {\n background-color: $accentblue;\n\n @each $name, $symbol in $api-symbols {\n &.#{$name} {\n background: map-get($symbol, background);\n }\n }\n\n }\n}",".find-missing-translations {\n [translation-result], code-tabs, code-example, img, code, pre, .filetree {\n display: none;\n }\n}\n\n[translation-result] + [translation-origin=off] {\n display: none;\n}\n\n[translation-result] + aio-toc + [translation-origin=off] {\n display: none;\n}\n\n[translation-origin=on] {\n border-top: 1px dashed #0273D4;\n}\n\n[id^=translations-cn] {\n aio-doc-viewer {\n blockquote {\n color: #455A64;\n margin: 0 0 32px 0;\n padding: 16px 32px;\n background: rgba(236, 239, 241, 0.24);\n border-left: 4px solid #00BCD4;\n }\n }\n}\n\nem {\n font-style: normal;\n font-weight: bold;\n}\n","@media print {\n\n // General Adjustments\n * {\n box-shadow: none !important;\n }\n\n body, mat-sidenav-container {\n background: none !important;\n }\n\n h1 {\n height: 40px !important;\n color: $darkgray !important;\n }\n\n h1, h2, h3, h4, h5, h6 {\n page-break-after: avoid;\n }\n\n ul, ol, img, code-example, table, tr, .alert, .feature {\n page-break-inside: avoid;\n }\n\n table tbody tr:last-child td {\n border-bottom: 1px solid $lightgray !important;\n }\n\n img {\n max-width: 100% !important;\n }\n\n p {\n widows: 4;\n }\n\n p > code, li > code, table code {\n color: $blue !important;\n }\n\n // No Print Class\n .no-print {\n display: none !important;\n }\n\n // Custom No Print for Sidenav Menu\n mat-sidenav.sidenav.mat-sidenav {\n display: none !important;\n }\n\n // Custom No Print Element Adjustments\n .mat-sidenav-content {\n margin: 0 !important;\n }\n\n mat-sidenav-container.sidenav-container {\n min-width: 100vw;\n }\n\n .sidenav-content {\n overflow: visible;\n }\n\n .filetree {\n max-width: 100%;\n }\n\n aio-code code {\n border: none !important;\n }\n\n code-example {\n &.code-shell, &[language=sh], &[language=bash] {\n background: none;\n\n .pnk, .blk, .pln, .otl, .kwd, .typ, .tag, .str, .atv, .atn, .com, .lit, .pun, .dec {\n color: $darkgray;\n }\n }\n\n header {\n background: none;\n border: 0.5px solid $lightgray;\n color: $darkgray;\n }\n }\n\n .content code {\n border: 0.5px solid $lightgray;\n }\n\n .mat-tab-labels {\n div.mat-tab-label {\n &:not(.mat-tab-label-active) span {\n font-style: italic;\n }\n\n &.mat-tab-label-active span {\n font-weight: bold;\n }\n }\n }\n\n .api-header label {\n color: $darkgray !important;\n font-weight: bold !important;\n margin: 2px !important;\n padding: 0 !important;\n display: block !important;\n }\n\n .feature-section img {\n max-width: 70px !important;\n }\n}\n"],"sourceRoot":""}