{"version":3,"sources":["../../base/utilities/_quirks.scss","../../components/_common/_igx-display-container.scss","../../components/_common/_igx-drag.scss","../../base/utilities/_bem.scss","../../components/icon/_icon-component.scss","../../components/radio/_radio-component.scss","../_core.scss","../../typography/_typography.scss","../../base/_variables.scss","../../typography/_base.scss","../../components/button/_button-theme.scss","../../components/bottom-nav/_bottom-nav-theme.scss","../../components/banner/_banner-theme.scss","../../components/calendar/_calendar-theme.scss","../../components/card/_card-theme.scss","../../components/checkbox/_checkbox-theme.scss","../../components/chip/_chip-theme.scss","../../components/column-hiding/_column-hiding-theme.scss","../../components/dialog/_dialog-theme.scss","../../components/drop-down/_drop-down-theme.scss","../../base/utilities/_mixins.scss","../../components/expansion-panel/_expansion-panel-theme.scss","../../components/grid/_excel-filtering-theme.scss","../../components/input/_input-group-theme.scss","../../components/navbar/_navbar-theme.scss","../../components/navdrawer/_navdrawer-theme.scss","../../components/list/_list-theme.scss","../../components/radio/_radio-theme.scss","../../components/snackbar/_snackbar-theme.scss","../../components/switch/_switch-theme.scss","../../components/tabs/_tabs-theme.scss","../../components/time-picker/_time-picker-theme.scss","../../components/toast/_toast-theme.scss","../../components/tooltip/_tooltip-theme.scss","../../components/_common/_igx-vhelper.scss","../../print/_index.scss","../../print/_grid-print.scss","../../components/ripple/_ripple-theme.scss","../../components/avatar/_avatar-theme.scss","../../components/badge/_badge-theme.scss","../../components/button-group/_button-group-theme.scss","../../base/animations/entrances/_scale.scss","../../base/animations/exits/_scale.scss","../../components/carousel/_carousel-theme.scss","../../base/animations/generic/_scale.scss","../../components/combo/_combo-theme.scss","../../components/date-picker/_date-picker-theme.scss","../../components/divider/_divider-theme.scss","../../components/grid/_grid-theme.scss","../../components/grid/_advanced-filtering-theme.scss","../../components/grid-summary/_grid-summary-theme.scss","../../components/grid-toolbar/_grid-toolbar-theme.scss","../../components/highlight/highlight-theme.scss","../../components/icon/_icon-theme.scss","../../base/animations/_easings.scss","../_palettes.scss","../../components/overlay/_overlay-theme.scss","../../components/paginator/_paginator-theme.scss","../../base/animations/generic/_rotate.scss","../../components/progress/_progress-theme.scss","../../components/slider/_slider-theme.scss"],"names":[],"mappings":"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","file":"../igniteui-dark-green.css","sourcesContent":["// Angular hack for binding to [hidden] property\n// not working \n[hidden] {\n    display: none !important;\n}\n","%display-container {\n    display: inherit;\n    position: relative;\n    width: 100%;\n    overflow: hidden;\n    flex-shrink: 0;\n}\n\n%display-container--inactive {\n    width: 100%;\n}\n\n@include b(igx-display-container) {\n    @extend %display-container !optional;\n\n    @include m(inactive) {\n        @extend %display-container--inactive !optional;\n    }\n}\n","%drag {\n    touch-action: none;\n}\n\n%drag--select-disabled {\n    user-select: none;\n}\n\n%drag-handle {\n    user-select: none;\n}\n\n@include b(igx-drag) {\n    @extend %drag !optional;\n\n    @include e(handle) {\n        @extend %drag-handle !optional;\n    }\n\n    @include m(select-disabled) {\n        @extend %drag--select-disabled !optional;\n    }\n}\n","////\n/// @group bem\n/// @author <a href=\"https://github.com/runningskull\" target=\"_blank\">Juan Patten</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @type String - The Element separator used. Default '__'.\n$bem--sep-elem: if(variable-exists(bem--sep-elem), $bem--sep-elem, '__');\n/// @type String - The Modifier separator used. Default '--'.\n$bem--sep-mod: if(variable-exists(bem--sep-mod), $bem--sep-mod, '--');\n/// @type String - The Modifier Value separator used. Default '-'.\n$bem--sep-mod-val: if(variable-exists(bem--sep-mod-val), $bem--sep-mod-val, '-');\n\n/// Converts a passed selector value into plain string.\n/// @access private\n/// @param {String} $s - The selector to be converted.\n/// @returns {String}\n@function bem--selector-to-string($s) {\n    @if $s == null {\n        @return '';\n    }\n    //cast to string\n    $s: inspect($s);\n    @if str-index($s, '(') {\n        // ruby sass => \"(selector,)\"\n        @return str-slice($s, 2, -3);\n    } @else {\n        // libsass => \"selector\"\n        @return str-slice($s, 1, -1);\n    }\n}\n\n/// Prepends a dot to the passed BEM selector.\n/// @access private\n/// @param {String} $x - The BEM selector to prepend a dot to.\n/// @returns {String}\n/// @example scss - Returns\n///   .#{$x}\n@function bem--with-dot($x) {\n    $first: str-slice($x, 0, 1);\n    @return if($first=='.', $x, '.'+$x);\n}\n\n/// Converts a key-value map into a modifier string.\n/// @access private\n/// @param {List} $m - The modifier list to get converted.\n/// @returns {String}\n@function bem--mod-str($m) {\n    @if type-of($m) == 'map' {\n        $mm: nth($m, 1);\n        @return nth($mm, 1) + $bem--sep-mod-val + nth($mm, 2);\n    } @else {\n        @return $m;\n    }\n}\n\n/// Prefixes the block name to an element selector string,\n/// with the element separator string used as a divider.\n/// @access private\n/// @param {String} $b - The block name.\n/// @param {String} $e - The element name.\n/// @returns {String}\n/// @example scss - Returns\n///   .block__element\n@function bem--elem-str($b, $e) {\n    @return $b + $bem--sep-elem + $e;\n}\n\n/// Returns a block selector string affixed by the modifier selector,\n/// followed by the element selector string.\n/// @access private\n/// @param {String} $block - The block name.\n/// @param {String} $elem - The sub-element name.\n/// @param {String} $mod - The modifier name.\n/// @returns {String}\n/// @example scss - Returns\n///   .block--modifier .block__element\n@function bem--bem-str($block, $elem, $mod) {\n    $elem: if($elem, ' ' + $elem, '');\n    @return ($block + $bem--sep-mod + bem--mod-str($mod) + $elem);\n}\n\n/// Checks if the element separator string is part of the passed string.\n/// @access private\n/// @param {String} $x - The string to check.\n/// @returns {number|null} Will return the index of the occurance,\n/// or null if the element separator name is not part of the passed string.\n@function bem--contains-elem($x) {\n    // if you set the separators to common strings, this could fail\n    @return str-index($x, $bem--sep-elem);\n}\n\n/// Checks if the modifier separator string is part of the passed string.\n/// @access private\n/// @param {String} $x - The string to check.\n/// @returns {number|null} Will return the index of the occurance,\n/// or null if the modifier separator string is not part of the passed string.\n@function bem--contains-mod($x) {\n    // if you set the separators to common strings, this could fail\n    @return str-index($x, $bem--sep-mod);\n}\n\n/// Checks if the passed selector string contains a colon.\n/// @access private\n/// @param {String} $x - The string to check for colons.\n/// @returns {number|null} Will return the index of the occurance,\n/// or null if the string does not contain any colons.\n@function bem--contains-pseudo($x) {\n    @return str-index($x, ':');\n}\n\n/// Returns the BEM block-name that generated `$x`. Does not include leading \".\".\n/// @access private\n/// @param {String} $x - The block name.\n@function bem--extract-block($x) {\n    @if bem--contains-mod($x) {\n        @return str-slice($x, 1, str-index($x, $bem--sep-mod)-1);\n    } @else if bem--contains-elem($x) {\n        @return str-slice($x, 1, str-index($x, $bem--sep-elem)-1);\n    } @else if bem--contains-pseudo($x) {\n        @return str-slice($x, 1, str-index($x, ':')-1);\n    }\n    @return $x;\n}\n\n/// Returns the first selector of a nested selector string.\n/// @access private\n/// @param {String} $x - The selector to search for.\n/// @returns {String}\n@function bem--extract-first-selector($x) {\n    $eow: str-index($x, ' ') or -1;\n    @return str-slice($x, 1, $eow);\n}\n\n/// Generates a full BEM selector.\n/// @access public\n/// @param {String} $block - Required. A string block name.\n/// @param {String|List} $elem - Optional. A sub-element name. If `$mod` is not present, it is\n/// joined with $block. If $mod is present, it is nested under `$block--$mod`.\n/// @param {String|Map} $mod - Optional. A block modifier.\n/// @example scss Include a block\n///   @include bem-selector(block); // outputs .block\n/// @example scss Include a block and an element\n///   @include bem-selector(block, $e:elem); // outputs .block__elem\n/// @example scss Include block, element, and element modifier\n///   @include bem-selector(block, $e:(elem,emod); // outputs .block__elem-emod\n/// @example scss Include block and block modifier\n///   @include bem-selector(block, $m:mod) // outputs .block--mod\n/// @example scss Include block and modifier value\n///   @include bem-selector(block, $m:(mod:val)); // outputs .block--mod-val\n/// @example scss Include block modifier followed by block sub-element\n///   @include bem-selector(block, $m:mod, $e:elem); // outputs .block--mod .block__elem\n@function bem-selector($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {\n    $block: bem--with-dot($block);\n    $elem: $e or $elem;\n    // Return early if possible\n    $mods: $m or $mod or $mods;\n    @if not ($elem or $mods) {\n        @return $block;\n    }\n    @if $elem {\n        // User passed an element-specific modifier\n        @if (type-of($elem) == list) and nth($elem, 2) {\n            // For now we don't support multiple elem-mods at once\n            @if type-of(nth($elem, 2)) == list {\n                @error 'Only one element-modifier allowed.';\n            }\n            $elem: str-slice(bem-selector(nth($elem, 1), $m: nth($elem, 2)), 2);\n        }\n        $elem: bem--elem-str($block, $elem);\n    }\n    @if not $mods {\n        @return bem--with-dot($elem);\n    }\n    @if type-of($mods) != list {\n        $mods: ($mods, );\n    }\n    $bemcls: '';\n    @for $i from 1 to length($mods) {\n        $bemcls: $bemcls + bem--bem-str($block, $elem, nth($mods, $i)) + ', ';\n    }\n    $bemcls: $bemcls + bem--bem-str($block, $elem, nth($mods, -1));\n    @return $bemcls;\n}\n\n/// Simply unrolls into a class-selector. The main purpose of using this mixin\n/// is to clearly denote the start of a BEM block.\n/// @access public\n/// @param {String} $block - The block name.\n@mixin bem-block($block) {\n    @at-root {\n        #{bem-selector($block)} {\n            @content;\n        }\n    }\n}\n\n/// Unrolls into a proper BEM element selector, depending on the context.\n/// Inside just a block, yields a root-level `.block__elem`.\n/// Inside a mod or pseudo-selector, yields a nested `.block--mod .block__elem`.\n/// If $mod is included, it is appended to the block selector. Multiple\n/// $mods are not supported.\n/// @access public\n/// @param {String} $elem - The sub-element name.\n/// @param {String} $m - The modifier name.\n/// @param {String} $mod - An alias of `$m`.\n@mixin bem-elem($elem, $m: null, $mod: null, $mods: null) {\n    $this: bem--selector-to-string(&);\n    $block: bem--extract-block($this);\n    $first: bem--extract-first-selector($this);\n    $nested: bem--contains-pseudo($this) or bem--contains-mod($this);\n\n    $mod: $m or $mod;\n    $mx: ();\n\n    @if $this == '' {\n        @error 'Detected an Element that is not inside a Block: #{$elem}';\n    }\n\n    @if bem--contains-elem($this) {\n        @error 'Detected a multi-level nested Element (#{$this} #{$elem})! Bemerald doesn\\'t support nested ' + 'elements because they do not have BEM nature (www.getbem.com/faq/#css-nested-elements). ' + 'If you must do it, use a hardcoded selector like &__subsubelem ';\n    }\n\n    @if $mods != null and type-of($mods) == 'list' {\n        @each $i in $mods {\n            $mx: append($mx, #{bem-selector($block, $e: ($elem, $i))})\n        }\n    }\n\n    @if not($nested) {\n        // Normal case, no pseudo-selector present or mod, so no nesting.\n        // .block__elem { ... }\n        @at-root {\n            @if $mods == null {\n                #{bem-selector($block, $e: ($elem, $mod))} {\n                    @content;\n                }\n            } @else {\n                #{selector-append($mx...)} {\n                    @content;\n                }\n            }\n        }\n    } @else {\n        // pseudo-element or mod present, so we have nesting.\n        // .block:active .block__elem { ... }\n        // .block--mod .block__elem { ... }\n        @at-root {\n            $selector: $first + ' ' + bem-selector($block, $e: ($elem, $mod));\n\n            @if $mods == null {\n                #{$selector} {\n                    @content;\n                }\n            } @else {\n                #{$first} #{selector-append($mx...)} {\n                    @content;\n                }\n            }\n        }\n    }\n}\n\n/// Unrolls into a BEM block-modifier selector.\n/// This mixin does not generate element-modifiers, the bem-elem mixin instead.\n/// Nesting bem-mod inside a pseudo-selector is not supported, because what\n/// that should mean isn't clear.\n/// @access public\n/// @param {String} $mod - The modifier name.\n@mixin bem-mod($mod) {\n    $skip: false;\n    $this: bem--selector-to-string(&);\n    @if $this == '' {\n        @error 'Detected a Modifier that is not inside a Block: ' + $mod;\n    }\n    @if (bem--contains-elem($this)) {\n        @error 'Nesting a Modifier inside an Element (#{$this} #{$mod}) ' + 'is not supported. Instead, use bem-elem(myelem, elem-mod) syntax.';\n    }\n    @if (bem--contains-pseudo($this)) {\n        @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}';\n    }\n    @at-root {\n        #{bem-selector($this, $m: $mod)} {\n            @content;\n        }\n    }\n}\n\n/// Unrolls into a block--modifier.[block--modifier...] .block__el\n/// This mixin is useful when we want to apply classes to a block,\n/// or block element when two or more modifiers are applied in tandem\n/// @access public\n/// @param {List} $mods - A list of modifiers\n@mixin bem-mods($mods...) {\n    $this: bem--selector-to-string(&);\n    $mod-classes: ();\n    @each $mod in $mods {\n        @if $this == '' {\n            @error 'Detected a Modifier that is not inside a Block: ' + $mod;\n        }\n        @if (bem--contains-elem($this)) {\n            @error 'Nesting a Modifier inside an Element (#{$this} #{$mod}) ' + 'is not supported. Instead, use bem-elem(myelem, elem-mod) syntax.';\n        }\n        @if (bem--contains-pseudo($this)) {\n            @error 'Nesting a Modifier inside a pseudo-selector is not supported: #{$this} #{$mod}';\n        }\n        $mod-classes: append($mod-classes, #{bem-selector($block: $this, $m: $mod)})\n    }\n    @at-root {\n        #{selector-append($mod-classes...)} {\n            @content;\n        }\n    }\n}\n\n/// @alias bem-selector\n@mixin bem($block, $e: null, $elem: null, $m: null, $mod: null, $mods: null) {\n    #{bem-selector($block, $e: $e, $elem: $elem, $m: $m, $mod: $mod, $mods: $mods)} {\n        @content;\n    }\n}\n\n/// @alias bem-block\n@mixin block($block) {\n    @include bem-block($block) {\n        @content;\n    }\n}\n\n/// @alias bem-elem\n@mixin elem($elem, $m: null, $mod: null, $mods: null) {\n    @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {\n        @content;\n    }\n}\n\n/// @alias bem-mod\n@mixin mod($mod) {\n    @include bem-mod($mod) {\n        @content;\n    }\n}\n\n/// @alias bem-mods\n@mixin mods($mods...) {\n    @include bem-mods($mods...) {\n        @content;\n    }\n}\n\n/// @alias bem-block\n@mixin b($block) {\n    @include bem-block($block) {\n        @content;\n    }\n}\n\n/// @alias bem-elem\n@mixin e($elem, $m: null, $mod: null, $mods: null) {\n    @include bem-elem($elem, $m: $m, $mod: $mod, $mods: $mods) {\n        @content;\n    }\n}\n\n/// @alias bem-mod\n@mixin m($mod) {\n    @include bem-mod($mod) {\n        @content;\n    }\n}\n\n/// @alias bem-mods\n@mixin mx($mods...) {\n    @include bem-mods($mods...) {\n        @content;\n    }\n}\n","//// Icon\n/// @group components\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @requires {mixin} bem-block\n/// @requires {mixin} bem-elem\n/// @requires {mixin} bem-mod\n////\n@include b(igx-icon) {\n    $this: bem--selector-to-string(&);\n    @include register-component(str-slice($this, 2, -1));\n\n    @extend %igx-icon-display !optional;\n\n    @include m(inactive) {\n        @extend %igx-icon-display !optional;\n        @extend %igx-icon--inactive !optional;\n    }\n}\n\n@include b(igx-svg-container) {\n    visibility: hidden;\n    width: 0;\n    height: 0;\n    font-size: 0;\n    overflow: hidden;\n}\n","////\n/// @group components\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @requires {mixin} bem-block\n/// @requires {mixin} bem-elem\n/// @requires {mixin} bem-mod\n////\n@include b(igx-radio) {\n    $block: bem--selector-to-string(&);\n    @include register-component(igx-radio);\n\n    @extend %radio-display !optional;\n\n    &:hover {\n        @include e(composite) {\n            @extend %igx-radio-hover__composite !optional;\n        }\n\n        @include e(ripple) {\n            @extend %radio-ripple--hover !optional;\n            @extend %radio-ripple--hover-unchecked !optional;\n        }\n    }\n\n    &:active {\n        @include e(composite) {\n            @extend %igx-radio-hover__composite !optional;\n        }\n\n        @include e(ripple) {\n            @extend %radio-ripple--hover !optional;\n            @extend %radio-ripple--hover-unchecked !optional;\n            @extend %radio-ripple--pressed !optional;\n        }\n    }\n\n    @include e(input) {\n        @extend %radio-input !optional;\n    }\n\n    @include e(composite) {\n        @extend %radio-composite !optional;\n    }\n\n    @include e(label) {\n        @extend %radio-label !optional;\n        @extend %radio-label--after !optional;\n    }\n\n    @include e(label, $m: before) {\n        @extend %radio-label !optional;\n        @extend %radio-label--before !optional;\n    }\n\n    @include e(ripple) {\n        @extend %radio-ripple !optional;\n    }\n\n    @include m(focused) {\n        @include e(ripple) {\n            @extend %radio-ripple--focused !optional;\n        }\n    }\n\n    @include m(checked) {\n        @include e(composite) {\n            @extend %radio-composite--x !optional;\n        }\n\n        &:hover {\n            @include e(composite) {\n                @extend %igx-radio--checked-active__composite !optional;\n            }\n\n            @include e(ripple) {\n                @extend %radio-ripple--hover !optional;\n                @extend %radio-ripple--hover-checked !optional;\n            }\n        }\n\n        &:active {\n            @include e(composite) {\n                @extend %igx-radio--checked-active__composite !optional;\n            }\n\n            @include e(ripple) {\n                @extend %radio-ripple--hover !optional;\n                @extend %radio-ripple--hover-checked !optional;\n                @extend %radio-ripple--pressed !optional;\n            }\n        }\n    }\n\n    @include m(disabled) {\n        @extend %radio-display--disabled !optional;\n\n        @include e(composite) {\n            @extend %radio-composite--disabled !optional;\n        }\n    }\n\n    @include mx(focused, checked) {\n        @include e(ripple) {\n            @extend %radio-ripple--focused !optional;\n            @extend %radio-ripple--focused-checked !optional;\n        }\n    }\n\n    @include mx(checked, disabled) {\n        @include e(composite) {\n            @extend %radio-composite--x--disabled !optional;\n        }\n    }\n}\n\n@include b(igx-radio-group) {\n    display: block;\n}\n","////\n/// @group themes\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n// Anything imported here shouldn't affect\n// theme configuration\n\n// Import utilities\n@import './utilities';\n\n\n// Common component modules\n@import '../components/_common/igx-control';\n@import '../components/_common/igx-display-container';\n@import '../components/_common/igx-drag';\n@import '../components/_common/igx-vhelper';\n\n// Ensure the ripple is loaded before other component themes\n@import '../components/ripple/ripple-component';\n\n// Component composition styles\n@import '../components/avatar/avatar-component';\n@import '../components/badge/badge-component';\n@import '../components/bottom-nav/bottom-nav-component';\n@import '../components/button/button-component';\n@import '../components/divider/divider-component';\n@import '../components/button-group/button-group-component';\n@import '../components/banner/banner-component';\n@import '../components/calendar/calendar-component';\n@import '../components/card/card-component';\n@import '../components/carousel/carousel-component';\n@import '../components/checkbox/checkbox-component';\n@import '../components/chip/chip-component';\n@import '../components/column-hiding/column-hiding-component';\n@import '../components/combo/combo-component';\n@import '../components/date-picker/date-picker-component';\n@import '../components/dialog/dialog-component';\n@import '../components/drop-down/drop-down-component';\n@import '../components/expansion-panel/expansion-panel-component';\n@import '../components/grid/grid-component';\n@import '../components/grid-summary/grid-summary-component';\n@import '../components/paginator/paginator-component';\n@import '../components/grid-toolbar/grid-toolbar-component';\n@import '../components/highlight/highlight-component';\n@import '../components/icon/icon-component';\n@import '../components/input/input-group-component';\n@import '../components/list/list-component';\n@import '../components/navbar/navbar-component';\n@import '../components/navdrawer/navdrawer-component';\n@import '../components/overlay/overlay-component';\n@import '../components/progress/progress-component';\n@import '../components/radio/radio-component';\n@import '../components/slider/slider-component';\n@import '../components/snackbar/snackbar-component';\n@import '../components/switch/switch-component';\n@import '../components/tabs/tabs-component';\n@import '../components/toast/toast-component';\n@import '../components/tooltip/tooltip-component';\n@import '../components/time-picker/time-picker-component';\n@import '../print/index';\n\n/// Includes the base for each theme.\n\n[class^='igx-'] {\n    &,\n    *,\n    *::before,\n    *::after {\n        box-sizing: border-box;\n    }\n}\n\n@mixin igx-core($print-layout: true, $direction: ltr) {\n    @if $direction != ltr and $direction != rtl {\n        $direction: ltr !global;\n    } @else {\n        $direction: $direction !global;\n    }\n\n    @include igx-typography();\n    @include igx-vhelper();\n\n    @if $print-layout == true {\n        @include igx-print-layout();\n    }\n}\n","////\n/// @group typography\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n// Import the typography mixins from component themes\n// with typography support.\n@import '../components/bottom-nav/bottom-nav-theme';\n@import '../components/button/button-theme';\n@import '../components/calendar/calendar-theme';\n@import '../components/card/card-theme';\n@import '../components/checkbox/checkbox-theme';\n@import '../components/chip/chip-theme';\n@import '../components/column-hiding/column-hiding-theme';\n@import '../components/dialog/dialog-theme';\n@import '../components/drop-down/drop-down-theme';\n@import '../components/expansion-panel/expansion-panel-theme';\n@import '../components/grid/excel-filtering-theme';\n@import '../components/input/input-group-theme';\n@import '../components/navbar/navbar-theme';\n@import '../components/navdrawer/navdrawer-theme';\n@import '../components/list/list-theme';\n@import '../components/radio/radio-theme';\n@import '../components/snackbar/snackbar-theme';\n@import '../components/switch/switch-theme';\n@import '../components/tabs/tabs-theme';\n@import '../components/time-picker/time-picker-theme';\n@import '../components/toast/toast-theme';\n@import '../components/tooltip/tooltip-theme';\n\n/// Adds typography styles for h1-h6, paragraph and creates\n/// custom typography class selectors. The produces styles\n/// are based on the passed type scale. If omitted the\n/// default-type-scale will be used.\n/// @param {String} $font-family [\"'Titillium Web', sans-serif\"] - The font family to be used across all typographic elements.\n/// @param {Map} $type-scale [$default-type-scale] - A type scale map as produced by igx-type-scale.\n/// @param {String} $base-color [rgba(0, 0, 0, .74)] - The default color used across all typographic elements (Components define their own text colors).\n@mixin igx-typography(\n    $font-family: \"'Titillium Web', sans-serif\",\n    $type-scale: $default-type-scale,\n    $base-color: $igx-foreground-color\n) {\n    // Maps type scale typographic categories\n    // to native elements.\n    $category-element-map: (\n        h1: 'h1',\n        h2: 'h2',\n        h3: 'h3',\n        h4: 'h4',\n        h5: 'h5',\n        h6: 'h6',\n        body-1: 'p'\n    );\n\n    $this: bem--selector-to-string(&);\n    $scope: if(is-root(), 'igx-typography', #{str-slice($this, 2, -1)});\n\n    // Use the BEM notation to create a link\n    // between the igx-typography class selector\n    // and all typographic elements.\n    @include b($scope) {\n        font-family: unquote($font-family);\n        font-size: $browser-context;\n        line-height: $browser-line-height;\n        color: $base-color;\n        font-size-adjust: 100%;\n        -webkit-font-smoothing: antialiased;\n        -moz-osx-font-smoothing: grayscale;\n\n        @each $category, $type-style in $type-scale {\n            // Get the native element that uses typographic styles directly\n            // as mapped in the $category-element-map\n            $e: map-get($category-element-map, $category);\n\n            // Create a placeholder selector with styles for each\n            // typographic style to be able to easily extend it\n            // elsewhere.\n            %#{$category} {\n                @include igx-type-style($type-scale, $category);\n            }\n\n            // Add native element typographic styles.\n            @if $e != null {\n                #{$e} {\n                    @extend %#{$category};\n                }\n            }\n\n            // Add class selector typographic styles.\n            @include e(#{$category}) {\n                $selector: bem--selector-to-string(&);\n\n                @extend %#{$category};\n            }\n        }\n\n        // Call the individual component styles with the type scale\n        @include igx-button-typography($type-scale);\n        @include igx-bottom-nav-typography($type-scale);\n        @include igx-banner-typography($type-scale);\n        @include igx-calendar-typography($type-scale);\n        @include igx-card-typography($type-scale);\n        @include igx-checkbox-typography($type-scale);\n        @include igx-chip-typography($type-scale);\n        @include igx-column-hiding-typography($type-scale);\n        @include igx-dialog-typography($type-scale);\n        @include igx-drop-down-typography($type-scale);\n        @include igx-expansion-panel-typography($type-scale);\n        @include _excel-filtering-typography($type-scale);\n        @include igx-input-group-typography($type-scale);\n        @include igx-navbar-typography($type-scale);\n        @include igx-navdrawer-typography($type-scale);\n        @include igx-list-typography($type-scale);\n        @include igx-radio-typography($type-scale);\n        @include igx-snackbar-typography($type-scale);\n        @include igx-switch-typography($type-scale);\n        @include igx-tabs-typography($type-scale);\n        @include igx-time-picker-typography($type-scale);\n        @include igx-toast-typography($type-scale);\n        @include igx-tooltip-typography($type-scale);\n    }\n}\n","////\n/// @group base\n/// @access private\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// The default font size used globally.\n/// @type String\n$browser-context: 16px !default;\n\n/// The default line height used globally.\n/// @type String\n$browser-line-height: 27px !default;\n\n/// The global keyframes registry map.\n/// @type List\n$keyframes: () !default;\n\n/// The global component registry map.\n/// @type List\n$components: () !default;\n\n/// The global themes registry map.\n$themes: () !default;\n\n/// The global background color.\n$igx-background-color: #fff !default;\n$igx-foreground-color: rgba(0, 0, 0, .87) !default;\n","////\n/// @group typography\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// In interface-like type style map.\n/// @access public\n/// @param {String} $font-family [null] - The font size of the type style.\n/// @param {String} $font-size [null] - The font size of the type style.\n/// @param {Number|String} $font-weight [null] - The font weight of the type style.\n/// @param {Number|string} $line-height [null] - The line height of the type style.\n/// @param {Number|String} $letter-spacing [null] - The letter spacing of the type style.\n/// @param {String} $text-transform [null] - The text-transform property of the type style.\n/// @returns {Map} - A map of all defined type style properties.\n@function igx-type-style(\n    $font-family: null,\n    $font-size: null,\n    $font-weight: null,\n    $line-height: null,\n    $letter-spacing: null,\n    $text-transform: null,\n    $margin-top: null,\n    $margin-bottom: null\n) {\n    @return (\n        font-family: $font-family,\n        font-weight: $font-weight,\n        font-size: $font-size,\n        letter-spacing: $letter-spacing,\n        text-transform: $text-transform,\n        line-height: $line-height,\n        margin-top: $margin-top,\n        margin-bottom: $margin-bottom,\n    );\n}\n\n/// Creates a type scale map containing type style definitions for:\n/// - h1\n/// - h2\n/// - h3\n/// - h4\n/// - h5\n/// - h6\n/// - subtitle-1\n/// - subtitle-2\n/// - body-1\n/// - body-2\n/// - button\n/// - caption\n/// - overline\n/// @access public\n/// @param {Map} $h1 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h1 elements and elements with `igx-font-h1` class.\n/// @param {Map} $h2 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h2 elements and elements with `igx-font-h2` class.\n/// @param {Map} $h3 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h3 elements and elements with `igx-font-h3` class.\n/// @param {Map} $h4 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h4 elements and elements with `igx-font-h4` class.\n/// @param {Map} $h5 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h5 elements and elements with `igx-font-h5` class.\n/// @param {Map} $h6 [null] - A map containing type style properties as produced by the igx-type-style function. This type scale styles h6 elements and elements with `igx-font-h6` class.\n/// @param {Map} $subtitle-1 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-subtitle-1` class.\n/// @param {Map} $subtitle-2 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-subtitle-2` class.\n/// @param {Map} $body-1 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-body-1` class.\n/// @param {Map} $body-2 [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-body-2` class.\n/// @param {Map} $button [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-button` class.\n/// @param {Map} $caption [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-caption` class.\n/// @param {Map} $overline [null] - A map containing type style properties as produces by the igx-type-style function. This type scale styles elements with `igx-font-overline` class.\n/// @requires igx-type-style\n/// @returns {Map} - A map of all defined type scales.\n@function igx-type-scale(\n    $h1: (),\n    $h2: (),\n    $h3: (),\n    $h4: (),\n    $h5: (),\n    $h6: (),\n    $subtitle-1: (),\n    $subtitle-2: (),\n    $body-1: (),\n    $body-2: (),\n    $button: (),\n    $caption: (),\n    $overline: ()\n) {\n    $default-scale: (\n        h1: igx-type-style(\n            $font-size: rem(96px),\n            $font-weight: 300,\n            $letter-spacing: rem(-1.5px),\n            $line-height: rem(112px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: rem(56px)\n        ),\n        h2: igx-type-style(\n            $font-size: rem(60px),\n            $font-weight: 300,\n            $letter-spacing: rem(-.5px),\n            $line-height: rem(71px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: rem(28px)\n        ),\n        h3: igx-type-style(\n            $font-size: rem(48px),\n            $font-weight: 400,\n            $letter-spacing: 0,\n            $line-height: rem(57px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: 0\n        ),\n        h4: igx-type-style(\n            $font-size: rem(34px),\n            $font-weight: 400,\n            $letter-spacing: rem(.25px),\n            $line-height: rem(40px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: 0\n        ),\n        h5: igx-type-style(\n            $font-size: rem(24px),\n            $font-weight: 400,\n            $letter-spacing: 0,\n            $line-height: rem(28px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: 0\n        ),\n        h6: igx-type-style(\n            $font-size: rem(20px),\n            $font-weight: 600,\n            $letter-spacing: rem(.15px),\n            $line-height: rem(24px),\n            $text-transform: none,\n            $margin-top: 0,\n            $margin-bottom: 0\n        ),\n        subtitle-1: igx-type-style(\n            $font-size: rem(16px),\n            $font-weight: 400,\n            $letter-spacing: rem(.15px),\n            $line-height: rem(24px),\n            $text-transform: none\n        ),\n        subtitle-2: igx-type-style(\n            $font-size: rem(14px),\n            $letter-spacing: rem(.1px),\n            $font-weight: 600,\n            $line-height: rem(24px),\n            $text-transform: none\n        ),\n        body-1: igx-type-style(\n            $font-size: rem(16px),\n            $font-weight: 400,\n            $letter-spacing: rem(.5px),\n            $line-height: rem(28px),\n            $text-transform: none,\n            $margin-top: rem(28px),\n            $margin-bottom: rem(16)\n        ),\n        body-2: igx-type-style(\n            $font-size: rem(14px),\n            $font-weight: 400,\n            $letter-spacing: rem(.25px),\n            $line-height: rem(20px),\n            $text-transform: none\n        ),\n        button: igx-type-style(\n            $font-size: rem(14px),\n            $font-weight: 600,\n            $letter-spacing: rem(.75px),\n            $line-height: rem(16px),\n            $text-transform: uppercase\n        ),\n        caption: igx-type-style(\n            $font-size: rem(12px),\n            $font-weight: 400,\n            $letter-spacing: rem(.4px),\n            $line-height: rem(16px),\n            $text-transform: none\n        ),\n        overline: igx-type-style(\n            $font-size: rem(10px),\n            $font-weight: 400,\n            $letter-spacing: rem(1.5px),\n            $line-height: rem(16px),\n            $text-transform: uppercase\n        )\n    );\n\n    @return (\n        h1: extend(map-get($default-scale, 'h1'), $h1),\n        h2: extend(map-get($default-scale, 'h2'), $h2),\n        h3: extend(map-get($default-scale, 'h3'), $h3),\n        h4: extend(map-get($default-scale, 'h4'), $h4),\n        h5: extend(map-get($default-scale, 'h5'), $h5),\n        h6: extend(map-get($default-scale, 'h6'), $h6),\n        subtitle-1: extend(map-get($default-scale, 'subtitle-1'), $subtitle-1),\n        subtitle-2: extend(map-get($default-scale, 'subtitle-2'), $subtitle-2),\n        body-1: extend(map-get($default-scale, 'body-1'), $body-1),\n        body-2: extend(map-get($default-scale, 'body-2'), $body-2),\n        button: extend(map-get($default-scale, 'button'), $button),\n        caption: extend(map-get($default-scale, 'caption'), $caption),\n        overline: extend(map-get($default-scale, 'overline'), $overline)\n    );\n}\n\n/// Get type scale category config.\n/// @param {Map} $scale - A type scale map reference as produces by igx-type-scale.\n/// @param {String} $category - The scale category you want config for. For instance - 'h1';\n/// @example scss Get the type scale category config for the `h1` scale.\n///   $h1-type-scale: igx-type-scale-category($default-type-scale, 'h1');\n/// @returns {Map} - The config map for the selected category in the type scale.\n@function igx-type-scale-category($scale, $category) {\n    @return map-get($scale, $category);\n}\n\n/// Assigns type scale category config properties\n/// as style rules wherever this mixin is included.\n/// @param {Map} $scale - A type scale map reference as produces by igx-type-scale.\n/// @param {String} $category - The type scale category config you want to use as CSS style rules.\n/// @example scss Add the `h1` styles to custom CSS selector.\n///   .fancy-h1 {\n///      @include igx-type-style($default-type-scale, 'h1');\n///      font-family: 'GT Walsheim';\n///      color: mediumvioletred;\n///   }\n@mixin igx-type-style($scale, $category) {\n    $type-category: map-get($scale, $category);\n    @each $key, $value in $type-category {\n        #{$key}: #{$value};\n    }\n    @content;\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n/// Does ___not___ apply for disabled state colors.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for the component theme.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {border-radius} $flat-border-radius [null] - The border radius used for flat button.\n/// @param {border-radius} $raised-border-radius [null] - The border radius used for raised button.\n/// @param {border-radius} $outlined-border-radius [null] - The border radius used for outlined button.\n/// @param {border-radius} $fab-border-radius [null] - The border radius used for fab button.\n/// @param {border-radius} $icon-border-radius [null] - The border radius used for icon button.\n/// @param {Color} $flat-background [null] - The background color of a flat button.\n/// @param {Color} $flat-text-color [null] - The idle text color of a flat button.\n/// @param {Color} $flat-hover-background [null] - The hover background color of a flat button.\n/// @param {Color} $flat-hover-text-color [null] - The hover text color of a flat button.\n/// @param {Color} $flat-focus-background [null] - The focus background color of a flat button.\n/// @param {Color} $flat-focus-text-color [null] - The focus text color of a flat button.\n/// @param {Color} $flat-icon-color [null] - The color of a flat button icon.\n/// @param {Color} $flat-hover-icon-color [null] - The hover color of a flat button icon.\n/// @param {Color} $flat-focus-icon-color [null] - The focus color of a flat button icon.\n///\n/// @param {Color} $outlined-background [null] - The background color of an outlined button.\n/// @param {Color} $outlined-text-color [null] - The idle text color of an outlined button.\n/// @param {Color} $outlined-outline-color [null] - The outline color of an outlined button.\n/// @param {Color} $outlined-disabled-outline-color [null] - The outline color of an outlined, disabled button.\n/// @param {Color} $outlined-hover-background [null] - The hover background color of an outlined button.\n/// @param {Color} $outlined-hover-text-color [null] - The hover text color of an outlined button.\n/// @param {Color} $outlined-focus-background [null] - The focus background color of an outlined button.\n/// @param {Color} $outlined-focus-text-color [null] - The focus text color of an outlined button.\n/// @param {Color} $outlined-icon-color [null] - The color of a outlined button icon.\n/// @param {Color} $outlined-hover-icon-color [null] - The hover color of a outlined button icon.\n/// @param {Color} $outlined-focus-icon-color [null] - The focus color of a outlined button icon.\n///\n/// @param {Color} $raised-background [null] - The background color of a raised button.\n/// @param {Color} $raised-text-color [null] - The idle text color of a raised button.\n/// @param {Color} $raised-hover-background [null] - The hover background of a raised button.\n/// @param {Color} $raised-hover-text-color [null] - The hover text color of a raised button.\n/// @param {Color} $raised-focus-background [null] - The focus background color of a raised button.\n/// @param {Color} $raised-focus-text-color [null] - The focus text color of a raised button.\n/// @param {Color} $raised-icon-color [null] - The color of a raised button icon.\n/// @param {Color} $raised-hover-icon-color [null] - The hover color of a raised button icon.\n/// @param {Color} $raised-focus-icon-color [null] - The focus color of a raised button icon.\n///\n/// @param {box-shadow} $raised-resting-shadow [null] - The shadow color of the raised button in its resting state.\n/// @param {box-shadow} $raised-hover-shadow [null] - The shadow color of the raised button in its hover state.\n/// @param {box-shadow} $raised-focus-shadow [null] - The shadow color of the raised button in its focus state.\n///\n/// @param {Color} $fab-background [null] - The background color of a floating action button.\n/// @param {Color} $fab-text-color [null] - The text color of a floating action button.\n/// @param {Color} $fab-hover-background [null] - The hover background color of a floating action button.\n/// @param {Color} $fab-hover-text-color [null] - The hover text color of a floating action button.\n/// @param {Color} $fab-focus-background [null] - The focus background color of floating action button.\n/// @param {Color} $fab-focus-text-color [null] - The focus text color of a floating action button.\n///\n/// @param {box-shadow} $fab-resting-shadow [null] - The shadow color of the floating action button in its resting state.\n/// @param {box-shadow} $fab-hover-shadow [null] - The shadow color of the floating action button in its hover state.\n/// @param {box-shadow} $fab-focus-shadow [null] - The shadow color of the floating action button in its focus state.\n///\n/// @param {Color} $icon-color [null] - The icon color of an icon button.\n/// @param {Color} $icon-hover-color [null] - The hover icon color of an icon button.\n/// @param {Color} $icon-background [null] - The background color of the an icon button.\n/// @param {Color} $icon-hover-background [null] - The hover background color of an icon button.\n/// @param {Color} $icon-focus-color [null] - The focus icon color of an icon button.\n/// @param {Color} $icon-focus-background [null] - The focus background color an icon button.\n///\n/// @param {Color} $disabled-color [null] - The disabled text/icon color of a button.\n/// @param {Color} $disabled-background [null] - The disabled background color of raised, fab, or icon buttons.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the background and text colors in raised buttons\n///   $my-button-theme: igx-button-theme(\n///     $raised-text-color: white,\n///     $raised-background: black\n///   );\n///   // Pass the theme to the igx-button component mixin\n///   @include igx-button($my-button-theme);\n@function igx-button-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $flat-border-radius: null,\n    $raised-border-radius: null,\n    $fab-border-radius: null,\n    $icon-border-radius: null,\n    $outlined-border-radius: null,\n\n    $flat-text-color: null,\n    $flat-background: null,\n    $flat-hover-background: null,\n    $flat-hover-text-color: null,\n    $flat-focus-background: null,\n    $flat-focus-text-color: null,\n    $flat-icon-color: null,\n    $flat-hover-icon-color: null,\n    $flat-focus-icon-color: null,\n\n    $outlined-text-color: null,\n    $outlined-outline-color: null,\n    $outlined-disabled-outline-color: null,\n    $outlined-background: null,\n    $outlined-hover-background: null,\n    $outlined-hover-text-color: null,\n    $outlined-focus-background: null,\n    $outlined-focus-text-color: null,\n    $outlined-icon-color: null,\n    $outlined-hover-icon-color: null,\n    $outlined-focus-icon-color: null,\n\n    $raised-text-color: null,\n    $raised-background: null,\n    $raised-hover-background: null,\n    $raised-hover-text-color: null,\n    $raised-focus-background: null,\n    $raised-focus-text-color: null,\n    $raised-icon-color: null,\n    $raised-hover-icon-color: null,\n    $raised-focus-icon-color: null,\n\n    $raised-resting-shadow: null,\n    $raised-hover-shadow: null,\n    $raised-focus-shadow: null,\n\n    $fab-text-color: null,\n    $fab-background: null,\n    $fab-hover-background: null,\n    $fab-hover-text-color: null,\n    $fab-focus-background: null,\n    $fab-focus-text-color: null,\n\n    $fab-resting-shadow: null,\n    $fab-hover-shadow: null,\n    $fab-focus-shadow: null,\n\n    $icon-color: null,\n    $icon-background: null,\n    $icon-hover-background: null,\n    $icon-hover-color: null,\n    $icon-focus-background: null,\n    $icon-focus-color: null,\n\n    $disabled-color: null,\n    $disabled-background: null\n) {\n    $name: 'igx-button';\n    $button-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $button-schema: map-get($schema, $name);\n    } @else {\n        $button-schema: $schema;\n    }\n\n    $theme: apply-palette($button-schema, $palette);\n\n    $flat-border-radius: round-borders(\n        if($flat-border-radius, $flat-border-radius, map-get($button-schema, 'flat-border-radius')), 0, 20px\n    );\n\n    $raised-border-radius: round-borders(\n        if($raised-border-radius, $raised-border-radius, map-get($button-schema, 'raised-border-radius')), 0, 20px\n    );\n\n    $fab-border-radius: round-borders(\n        if($fab-border-radius, $fab-border-radius, map-get($button-schema, 'fab-border-radius')), 12, 28px\n    );\n\n    $icon-border-radius: round-borders(\n        if($icon-border-radius, $icon-border-radius, map-get($button-schema, 'icon-border-radius')), 0, 20px\n    );\n\n    $outlined-border-radius: round-borders(\n        if($outlined-border-radius, $outlined-border-radius, map-get($button-schema, 'outlined-border-radius')), 0, 20px\n    );\n\n    @if not($flat-text-color) and $flat-background {\n        $flat-text-color: text-contrast($flat-background);\n    }\n\n    @if not($flat-hover-background) and $flat-background {\n        $flat-hover-background: lighten-color($flat-background, 5%);\n    }\n\n    @if not($flat-focus-background) and $flat-background {\n        $flat-focus-background: lighten-color($flat-background, 5%);\n    }\n\n    @if not($flat-hover-text-color) and $flat-hover-background {\n        $flat-hover-text-color: text-contrast($flat-hover-background);\n    }\n\n    @if not($flat-focus-text-color) and $flat-focus-background {\n        $flat-focus-text-color: text-contrast($flat-focus-background);\n    }\n\n    @if not($outlined-text-color) and $outlined-background {\n        $outlined-text-color: text-contrast($outlined-background);\n    }\n\n    @if not($outlined-hover-background) and $outlined-background {\n        $outlined-hover-background: lighten-color($outlined-background, 5%);\n    }\n\n    @if not($outlined-focus-background) and $outlined-background {\n        $outlined-focus-background: lighten-color($outlined-background, 5%);\n    }\n\n    @if not($outlined-hover-text-color) and $outlined-hover-background {\n        $outlined-hover-text-color: text-contrast($outlined-hover-background);\n    }\n\n    @if not($outlined-focus-text-color) and $outlined-focus-background {\n        $outlined-focus-text-color: text-contrast($outlined-focus-background);\n    }\n\n    @if not($raised-text-color) and $raised-background {\n        $raised-text-color: text-contrast($raised-background);\n    }\n\n    @if not($raised-hover-background) and $raised-background {\n        $raised-hover-background: lighten-color($raised-background, 5%);\n    }\n\n    @if not($raised-focus-background) and $raised-background {\n        $raised-focus-background: lighten-color($raised-background, 5%);\n    }\n\n    @if not($raised-hover-text-color) and $raised-hover-background {\n        $raised-hover-text-color: text-contrast($raised-hover-background);\n    }\n\n    @if not($raised-focus-text-color) and $raised-focus-background {\n        $raised-focus-text-color: text-contrast($raised-focus-background);\n    }\n\n    @if not($fab-text-color) and $fab-background {\n        $fab-text-color: text-contrast($fab-background);\n    }\n\n    @if not($fab-hover-background) and $fab-background {\n        $fab-hover-background: lighten-color($fab-background, 5%);\n    }\n\n    @if not($fab-focus-background) and $fab-background {\n        $fab-focus-background: lighten-color($fab-background, 5%);\n    }\n\n    @if not($fab-hover-text-color) and $fab-hover-background {\n        $fab-hover-text-color: text-contrast($fab-hover-background);\n    }\n\n    @if not($fab-focus-text-color) and $fab-focus-background {\n        $fab-focus-text-color: text-contrast($fab-focus-background);\n    }\n\n    @if not($icon-color) and $icon-background {\n        $icon-color: text-contrast($icon-background);\n    }\n\n    @if not($icon-hover-background) and $icon-background {\n        $icon-hover-background: lighten-color($icon-background, 5%);\n    }\n\n    @if not($icon-focus-background) and $icon-background {\n        $icon-focus-background: lighten-color($icon-background, 5%);\n    }\n\n    @if not($icon-focus-color) and $icon-focus-background {\n        $icon-focus-color: text-contrast($icon-focus-background);\n    }\n\n    @if not($icon-hover-color) and $icon-hover-background {\n        $icon-hover-color: text-contrast($icon-hover-background);\n    }\n\n    @if not($fab-resting-shadow) {\n        $fab-resting-elevation: map-get($button-schema, 'fab-resting-elevation');\n        $fab-resting-shadow: igx-elevation($elevations, $fab-resting-elevation);\n    }\n\n    @if not($fab-hover-shadow) {\n        $fab-hover-elevation: map-get($button-schema, 'fab-hover-elevation');\n        $fab-hover-shadow: igx-elevation($elevations, $fab-hover-elevation);\n    }\n\n    @if not($fab-focus-shadow) {\n        $fab-focus-elevation: map-get($button-schema, 'fab-focus-elevation');\n        $fab-focus-shadow: igx-elevation($elevations, $fab-focus-elevation);\n    }\n\n    @if not($raised-resting-shadow) {\n        $raised-resting-elevation: map-get($button-schema, 'raised-resting-elevation');\n        $raised-resting-shadow: igx-elevation($elevations, $raised-resting-elevation);\n    }\n\n    @if not($raised-hover-shadow) {\n        $raised-hover-elevation: map-get($button-schema, 'raised-hover-elevation');\n        $raised-hover-shadow: igx-elevation($elevations, $raised-hover-elevation);\n    }\n\n    @if not($raised-focus-shadow) {\n        $raised-focus-elevation: map-get($button-schema, 'raised-focus-elevation');\n        $raised-focus-shadow: igx-elevation($elevations, $raised-focus-elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n\n        flat-border-radius: $flat-border-radius,\n        raised-border-radius: $raised-border-radius,\n        fab-border-radius: $fab-border-radius,\n        icon-border-radius: $icon-border-radius,\n        outlined-border-radius: $outlined-border-radius,\n\n        flat-text-color: $flat-text-color,\n        flat-background: $flat-background,\n        flat-hover-background: $flat-hover-background,\n        flat-hover-text-color: $flat-hover-text-color,\n        flat-focus-background: $flat-focus-background,\n        flat-focus-text-color: $flat-focus-text-color,\n        flat-icon-color: $flat-icon-color,\n        flat-hover-icon-color: $flat-hover-icon-color,\n        flat-focus-icon-color: $flat-focus-icon-color,\n\n        outlined-text-color: $outlined-text-color,\n        outlined-outline-color: $outlined-outline-color,\n        outlined-disabled-outline-color: $outlined-disabled-outline-color,\n        outlined-background: $outlined-background,\n        outlined-hover-background: $outlined-hover-background,\n        outlined-hover-text-color: $outlined-hover-text-color,\n        outlined-focus-background: $outlined-focus-background,\n        outlined-focus-text-color: $outlined-focus-text-color,\n        outlined-icon-color: $outlined-icon-color,\n        outlined-hover-icon-color: $outlined-hover-icon-color,\n        outlined-focus-icon-color: $outlined-focus-icon-color,\n\n        raised-text-color: $raised-text-color,\n        raised-background: $raised-background,\n        raised-hover-background: $raised-hover-background,\n        raised-hover-text-color: $raised-hover-text-color,\n        raised-focus-background: $raised-focus-background,\n        raised-focus-text-color: $raised-focus-text-color,\n        raised-icon-color: $raised-icon-color,\n        raised-hover-icon-color: $raised-hover-icon-color,\n        raised-focus-icon-color: $raised-focus-icon-color,\n\n        fab-text-color: $fab-text-color,\n        fab-background: $fab-background,\n        fab-hover-background: $fab-hover-background,\n        fab-hover-text-color: $fab-hover-text-color,\n        fab-focus-background: $fab-focus-background,\n        fab-focus-text-color: $fab-focus-text-color,\n\n        icon-color: $icon-color,\n        icon-background: $icon-background,\n        icon-hover-background: $icon-hover-background,\n        icon-hover-color: $icon-hover-color,\n        icon-focus-background: $icon-focus-background,\n        icon-focus-color: $icon-focus-color,\n\n        disabled-color: $disabled-color,\n        disabled-background: $disabled-background,\n\n        raised-resting-shadow: $raised-resting-shadow,\n        raised-hover-shadow: $raised-hover-shadow,\n        raised-focus-shadow: $raised-focus-shadow,\n\n        fab-resting-shadow: $fab-resting-shadow,\n        fab-hover-shadow: $fab-hover-shadow,\n        fab-focus-shadow: $fab-focus-shadow,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-button($theme) {\n    @include igx-root-css-vars($theme);\n\n    $button-border: 1px solid transparent;\n    $button-width: rem(88px);\n\n    $button-transition: background .15s $ease-in-out-cubic,\n        color .15s $ease-in-out-cubic,\n        border .15s $ease-in-out-cubic;\n\n    $button-disabled-shadow: none;\n\n    $button-floating-width: rem(56px);\n    $button-floating-height: $button-floating-width;\n\n    $button-icon-width: rem(36px, 16px);\n    $button-icon-height: $button-icon-width;\n    $button-icon-font-size: rem(24px, 24px);\n    $button-icon-padding: 0;\n\n    $button-padding-material: (\n        comfortable: rem(9px, 16px) rem(16px, 16px),\n        cosy: rem(6px, 16px) rem(16px, 16px),\n        compact: rem(3px, 16px) rem(16px, 16px)\n    );\n\n    $button-padding-fluent: (\n        comfortable: 0 rem(16px, 16px),\n        cosy: 0 rem(16px, 16px),\n        compact: 0 rem(16px, 16px)\n    );\n\n    $button-padding: map-get((\n        material: $button-padding-material,\n        fluent: $button-padding-fluent\n    ), map-get($theme, variant));\n\n    $button--size-material: (\n        comfortable: rem(36px),\n        cosy: rem(30px),\n        compact: rem(24px)\n    );\n\n    $button--size-fluent: (\n        comfortable: rem(32px),\n        cosy: rem(28px),\n        compact: rem(24px)\n    );\n\n    $button-size: map-get((\n        material: $button--size-material,\n        fluent: $button--size-fluent\n    ), map-get($theme, variant));\n\n\n    $button-floating-padding: (\n        comfortable: rem(15px),\n        cosy: rem(11px),\n        compact: rem(7px)\n    );\n\n    $button-floating-size: (\n        comfortable: rem(56px),\n        cosy: rem(48px),\n        compact: rem(40px)\n    );\n\n    $icon-in-button-size: rem(18px);\n\n    %igx-button-display {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        min-width: $button-width;\n        padding: map-get($button-padding, 'comfortable');\n        min-height: map-get($button-size, 'comfortable');\n        border: none;\n        cursor: pointer;\n        user-select: none;\n        outline-style: none;\n        -webkit-tap-highlight-color: transparent;\n        overflow: hidden;\n        white-space: nowrap;\n        transition: $button-transition;\n        font-family: inherit;\n        margin: 0;\n\n        %igx-icon-display {\n            width: $icon-in-button-size;\n            height: $icon-in-button-size;\n            font-size: $icon-in-button-size;\n        }\n    }\n\n    %igx-button-display--cosy {\n        padding: map-get($button-padding, 'cosy');\n        min-height: map-get($button-size, 'cosy');\n    }\n\n    %igx-button-display--compact {\n        padding: map-get($button-padding, 'compact');\n        min-height: map-get($button-size, 'compact');\n    }\n\n    %igx-button--flat {\n        background: --var($theme, 'flat-background');\n        color: --var($theme, 'flat-text-color');\n        border-radius: --var($theme, 'flat-border-radius');\n\n        %igx-icon-display {\n            color: --var($theme, 'flat-icon-color')\n        }\n\n        &:hover {\n            background: --var($theme, 'flat-hover-background');\n            color: --var($theme, 'flat-hover-text-color');\n\n            %igx-icon-display {\n                color: --var($theme, 'flat-hover-icon-color')\n            }\n        }\n\n        &:focus,\n        &:active {\n            background: --var($theme, 'flat-focus-background');\n            color: --var($theme, 'flat-focus-text-color');\n\n            %igx-icon-display {\n                color: --var($theme, 'flat-focus-icon-color')\n            }\n        }\n    }\n\n    %igx-button--outlined {\n        border: $button-border;\n        border-color: --var($theme, 'outlined-outline-color');\n        background: --var($theme, 'outlined-background');\n        color: --var($theme, 'outlined-text-color');\n        border-radius: --var($theme, 'outlined-border-radius');\n\n        %igx-icon-display {\n            color: --var($theme, 'outlined-icon-color')\n        }\n\n        &:hover {\n            background: --var($theme, 'outlined-hover-background');\n            color: --var($theme, 'outlined-hover-text-color');\n\n            %igx-icon-display {\n                color: --var($theme, 'outlined-hover-icon-color')\n            }\n        }\n\n        &:focus,\n        &:active {\n            background: --var($theme, 'outlined-focus-background');\n            color: --var($theme, 'outlined-focus-text-color');\n\n            %igx-icon-display {\n                color: --var($theme, 'outlined-focus-icon-color')\n            }\n        }\n    }\n\n    %igx-button--raised {\n        color: --var($theme, 'raised-text-color');\n        background: --var($theme, 'raised-background');\n        box-shadow: --var($theme, 'raised-resting-shadow');\n        border-radius: --var($theme, 'raised-border-radius');\n\n        %igx-icon-display {\n            color: --var($theme, 'raised-icon-color')\n        }\n\n        &:focus,\n        &:hover {\n            color: --var($theme, 'raised-hover-text-color');\n            background: --var($theme, 'raised-hover-background');\n            box-shadow: --var($theme, 'raised-hover-shadow');\n\n\n            %igx-icon-display {\n                color: --var($theme, 'raised-hover-icon-color')\n            }\n        }\n\n        &:active {\n            color: --var($theme, 'raised-focus-text-color');\n            background: --var($theme, 'raised-focus-background');\n            box-shadow: --var($theme, 'raised-focus-shadow');\n\n            %igx-icon-display {\n                color: --var($theme, 'raised-focus-icon-color')\n            }\n        }\n    }\n\n    %igx-button--round {\n        display: inline-flex;\n        position: relative;\n        flex-direction: row;\n        justify-content: center;\n        align-items: center;\n        border: $button-border;\n        border-radius: --var($theme, 'fab-border-radius');\n        outline: none;\n        cursor: pointer;\n        transition: $button-transition;\n        user-select: none;\n        -webkit-tap-highlight-color: transparent;\n        overflow: hidden;\n        // hack to allow circular overflow in safari...\n        filter: blur(0);\n    }\n\n    %igx-button--fab {\n        padding: map-get($button-floating-padding, 'comfortable');\n        min-width: map-get($button-floating-size, 'comfortable');\n        min-height: map-get($button-floating-size, 'comfortable');\n        line-height: unset;\n        white-space: nowrap;\n        color: --var($theme, 'fab-text-color');\n        background: --var($theme, 'fab-background');\n        box-shadow: --var($theme, 'fab-resting-shadow');\n        border-radius: --var($theme, 'fab-border-radius');\n\n        &:hover {\n            color: --var($theme, 'fab-hover-text-color');\n            background: --var($theme, 'fab-hover-background');\n            box-shadow: --var($theme, 'fab-hover-shadow');\n        }\n\n        &:focus,\n        &:active {\n            color: --var($theme, 'fab-focus-text-color');\n            background: --var($theme, 'fab-focus-background');\n            box-shadow: --var($theme, 'fab-focus-shadow');\n        }\n    }\n\n    %igx-button--fab-cosy {\n        padding: map-get($button-floating-padding, 'cosy');\n        min-width: map-get($button-floating-size, 'cosy');\n        min-height: map-get($button-floating-size, 'cosy');\n    }\n\n    %igx-button--fab-compact {\n        padding: map-get($button-floating-padding, 'compact');\n        min-width: map-get($button-floating-size, 'compact');\n        min-height: map-get($button-floating-size, 'compact');\n    }\n\n    %igx-button--icon {\n        width: $button-icon-width;\n        height: $button-icon-width;\n        font-size: $button-icon-font-size;\n        padding: $button-icon-padding;\n        color: --var($theme, 'icon-color');\n        background: --var($theme, 'icon-background');\n        border-radius: --var($theme, 'icon-border-radius');\n\n        &:hover {\n            transition: $button-transition;\n            color: --var($theme, 'icon-hover-color');\n            background: --var($theme, 'icon-hover-background');\n        }\n\n        &:focus,\n        &:active {\n            color: --var($theme, 'icon-focus-color');\n            background: --var($theme, 'icon-focus-background');\n        }\n    }\n\n    %igx-button--disabled {\n        pointer-events: none;\n        box-shadow: none;\n\n        &%igx-button--flat,\n        &%igx-button--outlined,\n        &%igx-button--raised,\n        &%igx-button--fab,\n        &%igx-button--icon {\n            color: --var($theme, 'disabled-color');\n        }\n\n        &%igx-button--raised,\n        &%igx-button--fab {\n            background: --var($theme, 'disabled-background');\n        }\n\n        &%igx-button--flat,\n        &%igx-button--outlined {\n            background: transparent;\n        }\n\n        &%igx-button--outlined {\n            border-color: --var($theme, 'outlined-disabled-outline-color');\n        }\n\n        &:focus {\n            box-shadow: none;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-button component.\n/// Uses the 'button' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {String} $categories [(text: 'button')] - The category from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-button-typography($type-scale, $categories: (text: 'button')) {\n    $text: map-get($categories, 'text');\n\n    %igx-button-display {\n        @include igx-type-style($type-scale, $text) {\n            text-align: center;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified,\n/// the idle item color will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {Color} $background [null] - The background color used for the toast.\n/// @param {Color} $idle-item-color [null] - The text-color used for the idle color.\n/// @param {Color} $active-item-color [null] - The text-color used for the active color.\n/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the bar.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n///\n/// @example scss Set a custom background color\n///   $my-tabbar-theme: igx-toast-theme($background: black);\n///   // Pass the theme to the igx-bottom-nav component mixin\n///   @include igx-bottom-nav($my-tabbar-theme);\n@function igx-bottom-nav-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $background: null,\n    $idle-item-color: null,\n    $active-item-color: null,\n    $shadow: null\n) {\n    $name: 'igx-bottom-nav';\n    $bottom-nav-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $bottom-nav-schema: map-get($schema, $name);\n    } @else {\n        $bottom-nav-schema: $schema;\n    }\n\n    $theme: apply-palette($bottom-nav-schema, $palette);\n\n    @if not($idle-item-color) and $background {\n        @if type-of($background) == 'color' {\n            $idle-item-color: rgba(text-contrast($background), .7);\n        }\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($bottom-nav-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background: $background,\n        idle-item-color: $idle-item-color,\n        active-item-color: $active-item-color,\n        shadow: $shadow\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} ellipsis\n/// @requires igx-bottom-nav-theme\n/// @requires igx-color\n/// @requires extend\n/// @requires rem\n/// @requires $ease-in-out-quad\n/// @requires --var\n@mixin igx-bottom-nav($theme) {\n    @include igx-root-css-vars($theme);\n\n    $menu-height: 56px;\n    $item-min-width: 80px;\n    $item-max-width: 168px;\n    $item-padding: 0 rem(12px, 16px);\n\n    %igx-tab-panel {\n        display: none;\n    }\n\n    %igx-tab-panel--selected {\n        display: block;\n    }\n\n    %igx-bottom-nav-menu {\n        display: flex;\n        position: fixed;\n        justify-content: center;\n        align-items: center;\n        left: 0;\n        right: 0;\n        height: $menu-height;\n        background: --var($theme, 'background');\n        overflow: hidden;\n        z-index: 8;\n    }\n\n    %igx-bottom-nav-menu--top {\n        top: 0;\n        bottom: inherit;\n        box-shadow: --var($theme, 'shadow');\n    }\n\n    %igx-bottom-nav-menu--bottom {\n        top: inherit;\n        bottom: 0;\n        box-shadow: --var($theme, 'shadow');\n    }\n\n    %igx-bottom-nav-menu-item {\n        display: flex;\n        position: relative;\n        flex-flow: column nowrap;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        min-width: $item-min-width;\n        max-width: $item-max-width;\n        height: 100%;\n        color: --var($theme, 'idle-item-color');\n        cursor: pointer;\n        user-select: none;\n        overflow: hidden;\n        padding: $item-padding;\n        -webkit-tap-highlight-color: transparent;\n        outline: 0;\n    }\n\n    %igx-bottom-nav-menu-item--disabled {\n        opacity: .5;\n        cursor: default;\n    }\n\n    %igx-active-tab {\n        color: --var($theme, 'active-item-color');\n        transition: color .15s $ease-in-out-quad, opacity .25s $ease-in-out-quad;\n    }\n\n    %igx-tab-label {\n        @include ellipsis();\n        padding-top: 4px;\n        max-width: 100%;\n        text-align: center;\n        transform: translateZ(0);\n        transition: transform .15s $ease-in-out-quad;\n        z-index: 1;\n    }\n\n    %igx-tab-icon {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        height: 24px;\n        padding: 0 8px;\n        transform: translateZ(0);\n        transition: transform .15s $ease-in-out-quad;\n        z-index: 1;\n\n        igx-badge {\n            position: absolute;\n            top: -6px;\n            right: -6px;\n            padding: 1px;\n        }\n    }\n\n    %igx-tab-icon--selected {\n        @extend %igx-active-tab;\n        transform: translateY(-2px);\n    }\n\n    %igx-tab-label--selected {\n        @extend %igx-active-tab;\n        transform: translateY(-2px) scale(1.166667);\n    }\n}\n\n/// Adds typography styles for the igx-bottom-nav component.\n/// Uses the 'caption'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'caption')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-bottom-nav-typography($type-scale, $categories: (label: 'caption')) {\n    $label: map-get($categories, 'label');\n\n    %igx-tab-label {\n        @include igx-type-style($type-scale, $label) {\n            margin: 0\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $banner-background [null]- The background color used banner background.\n/// @param {Color} $banner-message-color [null]- The color used for banner label.\n/// @param {Color} $banner-border-color [null] - The border color used banner border.\n/// @param {Color} $banner-illustration-background [null] - The background color used for banner illustration.\n/// @param {Color} $banner-illustration-color [null] - The color used banner illustration.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n///\n/// @example scss Change the background in banner\n///   $my-banner-theme: igx-banner-theme($banner-background: #000);\n///   // Pass the theme to the igx-banner component mixin\n///   @include igx-banner($my-banner-theme);\n@function igx-banner-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $banner-background: null,\n    $banner-message-color: null,\n    $banner-border-color: null,\n    $banner-illustration-color: null\n) {\n    $name: 'igx-banner';\n    $banner-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $banner-schema: map-get($schema, $name);\n    } @else {\n        $banner-schema: $schema;\n    }\n\n    $theme: apply-palette($banner-schema, $palette);\n\n    @if not($banner-message-color) and $banner-background {\n        $banner-message-color: text-contrast($banner-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        banner-background: $banner-background,\n        banner-message-color: $banner-message-color,\n        banner-border-color: $banner-border-color,\n        banner-illustration-color: $banner-illustration-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-banner($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $banner-padding: (\n        comfortable: rem(8),\n        cosy: rem(8),\n        compact: rem(8)\n    );\n\n    %igx-banner,\n    %igx-banner__illustration,\n    %igx-banner__message {\n        display: flex;\n        align-items: center;\n    }\n\n    %igx-banner {\n        padding-#{$right}: map-get($banner-padding, 'comfortable');\n        padding-#{$left}: 0;\n        padding-top: map-get($banner-padding, 'comfortable');\n        padding-bottom: map-get($banner-padding, 'comfortable');\n        background: --var($theme, 'banner-background');\n        align-items: center;\n        position: relative;\n        flex-wrap: wrap;\n        justify-content: flex-end;\n    }\n\n    %igx-banner__illustration {\n        justify-content: center;\n        width: rem(40);\n        min-width: rem(40);\n        height: rem(40);\n        margin-#{$left}: rem(16);\n        color: --var($theme, 'banner-illustration-color');\n    }\n\n    %igx-banner__border-top {\n        border-top: 1px solid --var($theme, 'banner-border-color');\n        top: -1px\n    }\n\n    %igx-banner__border-bottom {\n        border-bottom: 1px solid --var($theme, 'banner-border-color');\n        top: 0;\n    }\n\n    %igx-banner__text {\n        color: --var($theme, 'banner-message-color');\n        flex: 1 0 0%;\n        margin-#{$left}: rem(24);\n    }\n\n    %igx-banner--cosy {\n        padding: map-get($banner-padding, 'cosy');\n    }\n\n    %igx-banner--compact {\n        padding: map-get($banner-padding, 'compact');\n    }\n\n    %igx-banner__message {\n        min-width: rem(220);\n        flex: 1 0 0%;\n        margin-#{$right}: rem(90);\n    }\n\n    %igx-banner__row {\n        display: flex;\n    }\n\n    %igx-banner__actions {\n        display: flex;\n        flex-direction: column;\n        align-self: flex-end;\n        justify-content: center;\n        min-height: rem(40);\n    }\n}\n\n/// Adds typography styles for the igx-banner component.\n/// Uses the 'body-2' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-banner-typography($type-scale, $categories: (\n    message: 'body-2')\n) {\n    $message: map-get($categories, 'message');\n\n    %igx-banner__text {\n        @include igx-type-style($type-scale, $message) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only header background color is specified, that color will be\n/// used as the leading color for all accented elements, such as:\n/// - current date color\n/// - selected date background\n/// - picker elements hover colors\n/// - year/month hover/selected colors\n/// If only background colors are specified, text/icon colors\n/// will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $content-background [null] - The main content background color.\n/// @param {Color} $content-text-color [null] - The main content text color.\n///\n/// @param {Color} $header-background [null] - The header background color.\n/// @param {Color} $header-text-color [null] - The header text color.\n///\n/// @param {Color} $picker-arrow-color [null] - The idle picker arrow color.\n/// @param {Color} $picker-arrow-hover-color [null] - The picker hover arrow color.\n///\n/// @param {Color} $picker-text-color [null]- The idle picker month/year color.\n/// @param {Color} $picker-text-hover-color [null]-  The hover picker month/year color.\n///\n/// @param {Color} $inactive-text-color [null] - The text color for weekday labels and other month dates.\n/// @param {Color} $weekend-text-color [null] - The text color for weekend days.\n///\n/// @param {Color} $year-current-text-color [null] - The text color for the current/selected year.\n/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.\n///\n/// @param {Color} $year-hover-text-color [null] - The year hover text color.\n/// @param {Color} $month-hover-text-color [null] - The month hover text color.\n/// @param {Color} $month-hover-background [null] - The month hover background color.\n///\n/// @param {Color} $date-selected-background [null] - The background color for the selected date.\n/// @param {Color} $date-selected-text-color [null] - The text color for the selected date.\n///\n/// @param {Color} $date-current-text-color [null] - The text color for the current date.\n/// @param {Color} $date-current-bg-color [null] - The background color for the current date.\n/// @param {Color} $date-hover-background [null] - The hover date background color.\n///\n/// @param {Color} $date-special-background [null] - The background color used for special dates.\n/// @param {Color} $date-special-text-color [null] - The text color used for special dates.\n///\n/// @param {Color} $date-disabled-text-color [null] - The text color for disabled dates.\n/// @param {Color} $date-disabled-background [null] - The background color for disabled dates in a range.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for the outline of the calendar.\n/// @param {border-radius} $date-border-radius [null] - The border radius used for the outline outline of the date.\n/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires round-borders\n/// @requires extend\n///\n/// @example scss Change the header and content background colors\n///   $my-calendar-theme: igx-calendar-theme(\n///     $header-background: purple,\n///     $content-background: black\n///   );\n///   // Pass the theme to the igx-calendar component mixin\n///   @include igx-calendar($my-calendar-theme);\n@function igx-calendar-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $content-background: null,\n    $content-text-color: null,\n\n    $border-radius: null,\n    $date-border-radius: null,\n    $month-border-radius: null,\n\n    $header-background: null,\n    $header-text-color: null,\n\n    $picker-arrow-color: null,\n    $picker-arrow-hover-color: null,\n\n    $picker-text-color: null,\n    $picker-text-hover-color: null,\n\n    $inactive-text-color: null,\n    $weekend-text-color: null,\n\n    $year-current-text-color: null,\n    $month-current-text-color: null,\n\n    $year-hover-text-color: null,\n    $month-hover-text-color: null,\n    $month-hover-background: null,\n\n    $date-selected-background: null,\n    $date-selected-text-color: null,\n\n    $date-current-text-color: null,\n    $date-current-bg-color: null,\n    $date-hover-background: null,\n\n    $date-special-background: null,\n    $date-special-text-color: null,\n\n    $date-disabled-text-color: null,\n    $date-disabled-background: null,\n) {\n    $name: 'igx-calendar';\n    $calendar-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $calendar-schema: map-get($schema, $name);\n    } @else {\n        $calendar-schema: $schema;\n    }\n\n    $theme: apply-palette($calendar-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($calendar-schema, 'border-radius')), 0, 20px\n    );\n\n    $date-border-radius: round-borders(\n        if($date-border-radius, $date-border-radius, map-get($calendar-schema, 'date-border-radius')), 0, 20px\n    );\n\n    $month-border-radius: round-borders(\n        if($month-border-radius, $month-border-radius, map-get($calendar-schema, 'month-border-radius')), 0, 20px\n    );\n\n    @if not($content-text-color) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $content-text-color: text-contrast($content-background);\n        }\n    }\n\n    @if not($weekend-text-color) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $weekend-text-color: rgba($content-text-color, .7);\n        }\n    }\n\n    @if not($inactive-text-color) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $inactive-text-color: rgba($content-text-color, .5);\n        }\n    }\n\n    @if not($picker-arrow-color) and $content-background {\n        $picker-arrow-color: $content-text-color;\n    }\n\n    @if not($picker-arrow-hover-color) and $header-background {\n        @if type-of($header-background) == 'color' {\n            $picker-arrow-hover-color: $header-background;\n        }\n    }\n\n    @if not($picker-text-color) and $content-background {\n        $picker-text-color: $content-text-color;\n    }\n\n    @if not($picker-text-hover-color) and $header-background {\n        $picker-text-hover-color: $header-background;\n    }\n\n    @if not($header-text-color) and $header-background {\n        $header-text-color: text-contrast($header-background);\n    }\n\n    @if not($date-selected-background) and $header-background {\n        $date-selected-background: $header-background;\n    }\n\n    @if not($date-selected-text-color) and $date-selected-background {\n        $date-selected-text-color: $content-background;\n    }\n\n    @if not($date-hover-background) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $date-hover-background: rgba(text-contrast($content-background), .12);\n        }\n    }\n\n    @if not($date-current-bg-color) and $header-background {\n        $date-current-bg-color: $header-background;\n    }\n\n    @if not($date-current-text-color) and $date-current-bg-color {\n        $date-current-text-color: $date-current-bg-color;\n    }\n\n    @if not($date-special-background) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $date-special-background: rgba(text-contrast($content-background), .04);\n        }\n    }\n\n    @if not($date-special-text-color) and $date-special-background {\n        $date-special-text-color: text-contrast($date-special-background);\n    }\n\n    @if not($year-hover-text-color) and $header-background {\n        $year-hover-text-color: $header-background;\n    }\n\n    @if not($month-hover-text-color) and $month-hover-background {\n        @if type-of($month-hover-text-color) == 'color' {\n            $month-hover-text-color: text-contrast($month-hover-background);\n        }\n    }\n\n    @if not($year-current-text-color) and $header-background {\n        $year-current-text-color: $header-background;\n    }\n\n    @if not($month-current-text-color) and $header-background {\n        @if $header-background == 'color' {\n            $month-current-text-color: $header-background;\n        }\n    }\n\n    @if not($date-disabled-text-color) and $date-disabled-background {\n        $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        content-background: $content-background,\n        content-text-color: $content-text-color,\n\n        header-background: $header-background,\n        header-text-color: $header-text-color,\n\n        border-radius: $border-radius,\n        date-border-radius: $date-border-radius,\n        month-border-radius: $month-border-radius,\n\n        picker-arrow-color: $picker-arrow-color,\n        picker-arrow-hover-color: $picker-arrow-hover-color,\n\n        picker-text-color: $picker-text-color,\n        picker-text-hover-color: $picker-text-hover-color,\n\n        weekend-text-color: $weekend-text-color,\n        inactive-text-color: $inactive-text-color,\n\n        year-current-text-color: $year-current-text-color,\n        month-current-text-color: $month-current-text-color,\n\n        year-hover-text-color: $year-hover-text-color,\n        month-hover-text-color: $month-hover-text-color,\n        month-hover-background: $month-hover-background,\n\n        date-selected-background: $date-selected-background,\n        date-selected-text-color: $date-selected-text-color,\n\n        date-current-text-color: $date-current-text-color,\n        date-current-bg-color: $date-current-bg-color,\n        date-hover-background: $date-hover-background,\n\n        date-special-text-color: $date-special-text-color,\n        date-special-background: $date-special-background,\n\n        date-disabled-text-color: $date-disabled-text-color,\n        date-disabled-background: $date-disabled-background,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {function} text-contrast\n/// @requires {mixin} igx-root-css-vars\n/// @requires em\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires --var\n@mixin igx-calendar($theme) {\n    @include igx-root-css-vars($theme);\n\n    $cal-header-year-margin: 0;\n    $cal-header-date-margin: 0;\n    $cal-header-padding: em(16px);\n\n    $cal-picker-padding: em(16px);\n\n    $cal-value-w: em(40px);\n    $cal-value-h: $cal-value-w;\n    $cal-value-br: $cal-value-w / 2;\n    $cal-value-fw: 600;\n\n    $cal-value-month-margin: 0 em(12px);\n    $cal-value-month-height: em(91px);\n\n    $cal-row-padding: 0;\n    $cal-row-margin: em(2px) 0;\n    $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));\n\n    $current-color-variant: map-get((\n        material: --var($theme, 'date-selected-background'),\n        fluent:--var($theme, 'date-current-bg-color')\n    ), map-get($theme, variant));\n\n    $current-text-color-variant: map-get((\n        material: --var($theme, 'date-selected-text-color'),\n        fluent:--var($theme, 'date-current-text-color')\n    ), map-get($theme, variant));\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n    $before: if-ltr(before, after);\n    $after: if-ltr(after, before);\n\n    %cal-display {\n        display: flex;\n        flex-flow: column nowrap;\n        width: 100%;\n        background: --var($theme, 'content-background');\n        overflow: hidden;\n        outline: none;\n        border-radius: --var($theme, 'border-radius');\n    }\n\n    %cal-display + %cal-display {\n        margin-#{$left}: 1rem;\n    }\n\n    %cal-display--vertical {\n        flex-flow: row nowrap;\n\n        %cal-header-display {\n            min-width: em(168px);\n        }\n    }\n\n    %cal-header-display {\n        background: --var($theme, 'header-background');\n        color: --var($theme, 'header-text-color');\n        padding: $cal-header-padding;\n    }\n\n    %cal-header-year {\n        margin: $cal-header-year-margin;\n        color: currentColor;\n        opacity: .8;\n    }\n\n    %cal-header-date {\n        display: flex;\n        margin: $cal-header-date-margin;\n\n        > span {\n            @include ellipsis();\n        }\n    }\n\n    %cal-header-date--vertical {\n        flex-flow: column nowrap;\n    }\n\n    %cal-picker-display {\n        display: flex;\n        height: em(56px);\n        justify-content: space-between;\n        align-items: center;\n        padding-bottom: $cal-picker-padding;\n        position: relative;\n\n        div {\n            text-align: center;\n        }\n    }\n\n    %cal-picker-dates {\n        display: flex;\n        justify-content: center;\n    }\n\n    %cal-picker-arrow {\n        position: absolute;\n        display: inline-flex;\n        justify-content: center;\n        color: --var($theme, 'picker-arrow-color');\n        user-select: none;\n        outline: none;\n        cursor: pointer;\n        height: calc(100% - #{$cal-picker-padding});\n        align-items: center;\n        top: 0;\n\n        &:focus,\n        &:hover {\n            color: --var($theme, 'picker-arrow-hover-color');\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %cal-picker-arrow__prev {\n        #{$left}: 0;\n    }\n\n    %cal-picker-arrow__next {\n        #{$right}: 0;\n    }\n\n    %cal-picker-date {\n        color: --var($theme, 'picker-text-color');\n        text-align: center;\n        outline: none;\n        padding: 0 rem(2px);\n\n        &:hover,\n        &:focus {\n            color: --var($theme, 'picker-text-hover-color');\n            cursor: pointer;\n        }\n    }\n\n    %cal-body-display {\n        flex: 1 1 auto;\n        padding-top: $cal-picker-padding;\n        padding-bottom: $cal-picker-padding;\n        overflow: hidden;\n    }\n\n    %cal-row-display {\n        display: flex;\n        justify-content: space-between;\n        margin: $cal-row-margin;\n        padding: $cal-row-padding;\n\n        %cal-value {\n            &:first-of-type {\n                padding-left: em(8px);\n            }\n\n            &:last-of-type {\n                padding-right: em(8px);\n            }\n        }\n    }\n\n    %cal-row-display--wrap {\n        flex-wrap: wrap;\n    }\n\n    %cal-column-display {\n        display: flex;\n        flex-flow: column nowrap;\n        justify-content: space-between;\n        align-items: center;\n    }\n\n    %cal-column-year {\n        %cal-value--year {\n            flex: 1 0 0;\n        }\n    }\n\n    %cal-value {\n        position: relative;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-grow: 1;\n        flex-basis: 14.28%;\n        color: --var($theme, 'content-text-color');\n        cursor: pointer;\n        outline: none;\n        // transition: background .15s ease-out;\n\n        &:hover,\n        &:focus {\n            @extend %cal-value--hover;\n        }\n    }\n\n    %cal-value-content {\n        position: relative;\n        width: $cal-value-w;\n        height: $cal-value-h;\n        min-width: 2ch;\n        line-height: $cal-value-h;\n        text-align: center;\n        border-radius: --var($theme, 'date-border-radius');\n        z-index: 0;\n        // transition: background .15s ease-out;\n\n        &::after {\n            position: absolute; content: '';\n            width: calc(100% - 4px);\n            height: calc(100% - 4px);\n            top: 2px;\n            left: 2px;\n            border-radius: inherit;\n            z-index: -1;\n        }\n    }\n\n    %cal-value--label {\n        color: --var($theme, 'inactive-text-color');\n        cursor: default;\n        border-radius: 0;\n        flex-basis: 14.28%;\n        // 100 divided by the number of weekdays\n    }\n\n    %cal-value--weekend {\n        color: --var($theme, 'weekend-text-color');\n    }\n\n    %cal-value--year {\n        margin: 0;\n        min-width: 8ch;\n        line-height: rem(52px);\n    }\n\n    %cal-value--year-current {\n        color: --var($theme, 'year-current-text-color');\n    }\n\n    %cal-value--year-hover {\n        color: --var($theme, 'year-hover-text-color');\n    }\n\n    %cal-value--month-hover {\n        color: --var($theme, 'month-hover-text-color');\n\n        &::after {\n            background: --var($theme, 'month-hover-background');\n        }\n    }\n\n    %cal-value--month {\n        position: relative;\n        display: flex;\n        margin: $cal-value-month-margin;\n        flex: 1 0 25%;\n        justify-content: center;\n        align-items: center;\n        height: $cal-value-month-height;\n        z-index: 1;\n\n        &::after {\n            position: absolute;\n            content: '';\n            top: 50%;\n            left: 0;\n            right: 0;\n            transform: translateY(-50%);\n            height: 48px;\n            background: transparent;\n            border-radius: --var($theme, 'month-border-radius');\n            transition: background-color .15s ease-out;\n            z-index: -1;\n        }\n    }\n\n    %cal-value--month-current {\n        color: --var($theme, 'month-current-text-color') ;\n    }\n\n    %cal-value--inactive {\n        cursor: pointer;\n        color: --var($theme, 'inactive-text-color');\n    }\n\n    %cal-value--special {\n        %cal-value-content {\n            background: --var($theme, 'date-special-background');\n            color: --var($theme, 'date-special-text-color');\n            font-weight: 900;\n        }\n    }\n\n    %cal-value--selected {\n        position: relative;\n        background: --var($theme, 'date-selected-background');\n\n        %cal-value-content {\n            color: --var($theme, 'date-selected-text-color');\n            background: --var($theme, 'date-selected-background') ;\n        }\n    }\n\n    %cal-value--current {\n        %cal-value-content {\n            color: --var($theme, 'date-current-text-color');\n            font-weight: $cal-value-fw ;\n            background: --var($theme, 'date-current-bg-color');\n\n            &:hover {\n                background: --var($theme, 'date-current-bg-color');\n            }\n\n            &:focus {\n                background: --var($theme, 'date-current-bg-color');\n            }\n        }\n    }\n\n    %cal-value--current--selected {\n        %cal-value-content {\n            color: $current-text-color-variant;\n            background: $current-color-variant;\n\n            &:hover {\n                background: $current-color-variant;\n            }\n\n            &:focus {\n                background: $current-color-variant;\n            }\n        }\n    }\n\n    %cal-value--disabled {\n        pointer-events: none;\n        cursor: not-allowed;\n        color: --var($theme, 'date-disabled-text-color');\n    }\n\n    %cal-value--hover {\n        %cal-value-content::after {\n            background: --var($theme, 'date-hover-background');\n        }\n\n        &%cal-value--selected %cal-value-content::after {\n            background: rgba($selected-hover-color, .18);\n        }\n    }\n\n    %cal-value--single {\n        background: transparent;\n\n        &::before,\n        &::after {\n            background: transparent;\n        }\n    }\n\n    %cal-value--disabled-range {\n        background: --var($theme, 'date-disabled-background') !important;\n\n        %cal-value-content {\n            color: --var($theme, 'date-disabled-text-color');\n            background: transparent !important;\n        }\n    }\n\n    %cal-value--hidden%cal-value--disabled-range {\n        background: transparent !important;\n\n        &::after,\n        &::before {\n            background: transparent !important;\n        }\n    }\n\n    %cal-value--range%cal-value--inactive%cal-value--selected {\n        background: transparent !important;\n\n        %cal-value-content {\n            color: --var($theme, 'date-disabled-text-color');\n            background: transparent !important;\n        }\n    }\n\n    %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {\n        background: transparent !important;\n\n        %cal-value-content {\n            color: --var($theme, 'date-selected-text-color');\n            background: --var($theme, 'date-selected-background') !important;\n        }\n    }\n\n    %cal-value--inactive%cal-value--selected%cal-value--first {\n        &::after {\n            background: transparent !important;\n        }\n    }\n\n    %cal-value--inactive%cal-value--selected%cal-value--last {\n        &::before {\n            background: transparent !important;\n        }\n    }\n\n    %cal-value--first {\n        position: relative;\n        background: transparent;\n        z-index: 0;\n\n        &::after {\n            position: absolute;\n            content: '';\n            width: 50%;\n            top: 0;\n            #{$left}: 50%;\n            bottom: 0;\n            background: --var($theme, 'date-selected-background');\n            z-index: -1;\n        }\n    }\n\n    %cal-value--last {\n        position: relative;\n        background: transparent;\n        z-index: 0;\n\n        &::before {\n            position: absolute;\n            content: '';\n            width: 50%;\n            top: 0;\n            #{$right}: 50%;\n            bottom: 0;\n            background: --var($theme, 'date-selected-background');\n            z-index: -1;\n        }\n    }\n\n    %cal-value--hidden {\n        %cal-value-content {\n            visibility: hidden;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-calendar component.\n/// Uses the 'h4', 'subtitle-1' and 'body-1'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(header-year: 'subtitle-1', header-date: 'h4', picker-date: 'subtitle-1', content: 'body-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-calendar-typography($type-scale, $categories: (\n    header-year: 'subtitle-1',\n    header-date: 'h4',\n    picker-date: 'subtitle-1',\n    content: 'body-1')\n) {\n    $header-year: map-get($categories, 'header-year');\n    $header-date: map-get($categories, 'header-date');\n    $picker-date: map-get($categories, 'picker-date');\n    $content: map-get($categories, 'content');\n\n    %cal-header-year {\n        @include igx-type-style($type-scale, $header-year) {\n            margin: 0;\n        }\n    }\n\n    %cal-header-date {\n        @include igx-type-style($type-scale, $header-date) {\n            line-height: rem(42px);\n            margin: 0;\n        }\n    }\n\n    %cal-picker-date {\n        @include igx-type-style($type-scale, $picker-date) {\n            margin: 0;\n        }\n    }\n\n    %cal-value {\n        @include igx-type-style($type-scale, $content) {\n            margin: 0;\n        }\n    }\n\n    %cal-value--year-current {\n        @include igx-type-style($type-scale, $content) {\n            font-size: rem(24px);\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {Color} $background [null] - The card background color.\n/// @param {Color} $outline-color [null] - The color of the outline for outlined type cards.\n/// @param {Color} $card-border-color [null] - The color of the card border.\n/// @param {Color} $header-text-color [null] - The text color of the card title.\n/// @param {Color} $subtitle-text-color [null] - The text color of the card subtitle.\n/// @param {Color} $content-text-color [null] - The text color of the card content.\n/// @param {Color} $actions-text-color [null] - The text color of the card buttons.\n/// @param {box-shadow} $resting-shadow [null] - The shadow of the card in its resting state.\n/// @param {box-shadow} $hover-shadow [null] - The shadow of the card in its hover state.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for card component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the background and content text colors in card\n///   $my-card-theme: igx-card-theme(\n///     $background: #fff,\n///     $content-text-color: rgba(0, 0, 0, .8)\n///   );\n///   // Pass the theme to the igx-card component mixin\n///   @include igx-card($my-card-theme);\n@function igx-card-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n    $background: null,\n    $outline-color: null,\n    $header-text-color: null,\n    $subtitle-text-color: null,\n    $content-text-color: null,\n    $actions-text-color: null,\n    $resting-shadow: null,\n    $hover-shadow: null,\n    $card-border-color: null\n) {\n    $name: 'igx-card';\n    $card-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $card-schema: map-get($schema, $name);\n    } @else {\n        $card-schema: $schema;\n    }\n\n    $theme: apply-palette($card-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($card-schema, 'border-radius')),0 ,24px\n    );\n\n    @if not($header-text-color) and $background {\n        $header-text-color: text-contrast($background);\n    }\n\n    @if not($actions-text-color) and $background {\n        @if type-of($background) == 'color' {\n            $actions-text-color: rgba(text-contrast($background), .5);\n        }\n    }\n\n    @if not($content-text-color) and $background {\n        @if type-of($background) == 'color' {\n            $content-text-color: rgba(text-contrast($background), .7);\n        }\n    }\n\n    @if not($subtitle-text-color) and $background {\n        @if type-of($background) == 'color' {\n            $subtitle-text-color: rgba(text-contrast($background), .7);\n        }\n    }\n\n    @if not($resting-shadow) {\n        $resting-elevation: map-get($card-schema, 'resting-elevation');\n        $resting-shadow: igx-elevation($elevations, $resting-elevation);\n    }\n\n    @if not($hover-shadow) {\n        $hover-elevation: map-get($card-schema, 'hover-elevation');\n        $hover-shadow: igx-elevation($elevations, $hover-elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background: $background,\n        outline-color: $outline-color,\n        border-radius: $border-radius,\n        header-text-color: $header-text-color,\n        subtitle-text-color: $subtitle-text-color,\n        content-text-color: $content-text-color,\n        actions-text-color: $actions-text-color,\n        resting-shadow: $resting-shadow,\n        hover-shadow: $hover-shadow,\n        card-border-color: $card-border-color\n    ));\n}\n\n/// Card Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires em\n/// @requires --var\n@mixin igx-card($theme) {\n    @include igx-root-css-vars($theme);\n\n    $card-title-fz: em(24px, 16px);\n    $card-title-line-height: em(24px, 16px);\n    $card-subtitle-line-height: em(24px, 16px);\n    $card-content-fz: em(14px, 16px);\n    $card-content-lh: (20px, 16px);\n\n    $card-heading-padding: em(16px, 16px);\n    $card-heading-compact-padding: em(16px, 16px);\n    $card-heading-margin: 0;\n    $card-content-padding: em(16px, 16px);\n    $card-content-margin: 0;\n    $card-actions-padding: em(8px, 16px);\n    $card-subtitle-margin: 0;\n    $card-tgroup-margin: 0 em(16px);\n    $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %igx-card-display {\n        display: flex;\n        flex-direction: column;\n        box-shadow: --var($theme, 'resting-shadow');\n        overflow: hidden;\n        border-radius: --var($theme, 'border-radius');\n        background: --var($theme, 'background');\n        transition: $card-transitions;\n        backface-visibility: hidden;\n        border: 1px solid --var($theme, 'card-border-color');\n\n        &:hover {\n            box-shadow: --var($theme, 'hover-shadow');\n        }\n    }\n\n    %igx-card--outlined {\n        box-shadow: none;\n        border-color: --var($theme, 'outline-color');\n\n        &:hover {\n            box-shadow: none;\n        }\n    }\n\n\n    %igx-card--horizontal {\n        flex-direction: row;\n    }\n\n    %igx-card-header {\n        display: flex;\n        flex: 1 1 auto;\n        flex-flow: row wrap;\n        align-content: flex-start;\n        width: 100%;\n        padding: $card-heading-padding;\n        color: --var($theme, 'header-text-color');\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-header--vertical {\n        flex-flow: column nowrap;\n\n        %igx-card-header-titles {\n            text-align: center;\n        }\n\n        %igx-card-header-thumbnail {\n            display: flex;\n            justify-content: center;\n            align-self: unset;\n            margin-#{$right}: 0;\n            margin-bottom: rem(16px);\n        }\n    }\n\n    %igx-card-header--compact {\n        padding: $card-heading-compact-padding;\n    }\n\n    %igx-card-header-thumbnail {\n        align-self: flex-start;\n        margin-#{$right}: rem(16px);\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-header-titles {\n        display: flex;\n        flex-flow: column nowrap;\n        overflow: hidden;\n        flex: 1 1 auto;\n        justify-content: center;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-header-title {\n        margin: $card-heading-margin;\n    }\n\n    %igx-card-header-subtitle {\n        margin: $card-subtitle-margin;\n        color: --var($theme, 'subtitle-text-color');\n    }\n\n    %igx-card-tgroup {\n        margin: $card-tgroup-margin;\n    }\n\n    %igx-card-content {\n        width: 100%;\n        flex: 1 1 auto;\n        padding: $card-content-padding;\n        color: --var($theme, 'content-text-color');\n    }\n\n    %igx-card-content-text {\n        margin: $card-content-margin;\n    }\n\n    %igx-card-media {\n        display: block;\n        overflow: hidden;\n\n        > * {\n            width: 100%;\n            height: 100%;\n            object-fit: cover;\n        }\n    }\n\n    %igx-card-media--right {\n        width: auto;\n        margin-#{$left}: auto;\n        order: 9999;\n    }\n\n    %igx-card-actions {\n        display: flex;\n        flex-flow: row wrap;\n        justify-content: space-between;\n        flex: 0 1 auto;\n        align-items: center;\n        padding: $card-actions-padding;\n\n        [igxButton] ~ [igxButton] {\n            margin-#{$left}: rem(8px);\n        }\n    }\n\n    %igx-card-actions--vertical {\n        flex-direction: column;\n\n        @include if-rtl() {\n            order: -1;\n        }\n    }\n\n    %igx-card-actions__icons {\n        display: flex;\n        align-items: center;\n        order: 1;\n        color: --var($theme, 'actions-text-color');\n        margin-#{$left}: auto;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-actions__buttons {\n        display: flex;\n        align-items: center;\n        order: 0;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-actions__buttons--justify,\n    %igx-card-actions__icons--justify {\n        justify-content: space-around;\n        flex-grow: 1;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-card-actions__icons--vertical,\n    %igx-card-actions__buttons--vertical {\n        flex-direction: column;\n\n        [igxButton] ~ [igxButton] {\n            margin-#{$left}: 0;\n            margin-top: rem(8px);\n        }\n    }\n\n    %igx-card-actions__icons--vertical {\n        margin-top: auto;\n        margin-#{$left}: 0;\n    }\n\n    %igx-card-actions__icons--reverse {\n        order: 0;\n        margin-#{$left}: 0;\n    }\n\n    %igx-card-actions__buttons--reverse {\n        order: 1;\n        margin-#{$left}: auto;\n    }\n\n    %igx-card-actions__icons--vertical-reverse {\n        margin: 0;\n        margin-bottom: auto;\n    }\n\n    %igx-card-actions__buttons--vertical-reverse {\n        margin: 0;\n        margin-top: auto;\n    }\n\n    %igx-card-actions-bgroup {\n        display: flex;\n        flex-flow: row nowrap;\n\n        [igxButton] ~ [igxButton] {\n            margin-#{$left}: 8px;\n        }\n    }\n\n    %igx-card-actions-igroup {\n        display: flex;\n        flex-flow: row nowrap;\n\n        %igx-button--icon {\n            color: --var($theme, 'actions-text-color');\n        }\n    }\n\n    %igx-card-actions-igroup--start {\n        margin-#{$right}: auto;\n    }\n\n    %igx-card-actions-igroup--end {\n        margin-#{$left}: auto;\n    }\n}\n\n/// Adds typography styles for the igx-card component.\n/// Uses the 'h5', 'subtitle-2' and 'body-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(title: 'h5', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-card-typography($type-scale, $categories: (\n    title: 'h6',\n    title-small: 'subtitle-2',\n    subtitle: 'subtitle-2',\n    content: 'body-2')\n) {\n    $title: map-get($categories, 'title');\n    $title-small: map-get($categories, 'title-small');\n    $subtitle: map-get($categories, 'subtitle');\n    $content: map-get($categories, 'content');\n\n    %igx-card-header-title {\n        @include igx-type-style($type-scale, $title) {\n            margin: 0;\n        }\n    }\n\n    %igx-card-header-title--small {\n        @include igx-type-style($type-scale, $title-small) {\n            margin: 0;\n        }\n    }\n\n    %igx-card-header-subtitle {\n        @include igx-type-style($type-scale, $subtitle) {\n            margin: 0;\n        }\n    }\n\n    %igx-card-content,\n    %igx-card-content > p {\n        @include igx-type-style($type-scale, $content) {\n            margin: 0;\n        }\n    }\n}\n","@import '../ripple/ripple-theme';\n@import '../ripple/ripple-component';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Checkbox Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $label-color [null]- The text color used for the label text.\n/// @param {Color} $empty-color [null] - The unchecked border color.\n/// @param {Color} $fill-color [null] - The checked border and fill colors.\n/// @param {Color} $tick-color [null] - The checked mark color.\n/// @param {Color} $disabled-color [null] - The disabled border and fill colors.\n/// @param {border-radius} $border-radius [null] - The border radius used for checkbox component.\n/// @param {border-radius} $border-radius-ripple [null] - The border radius used for checkbox ripple.\n/// Set to light when the surrounding area is dark.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the checked fill color\n///   $my-checkbox-theme: igx-checkbox-theme($fill-color: magenta);\n///   // Pass the theme to the igx-checkbox component mixin\n///   @include igx-checkbox($my-checkbox-theme);\n@function igx-checkbox-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $border-radius: null,\n    $label-color: null,\n    $empty-color: null,\n    $fill-color: null,\n    $tick-color: null,\n    $disabled-color: null,\n    $disabled-color-label: null,\n    $border-radius-ripple: null\n) {\n    $name: 'igx-checkbox';\n    $checkbox-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $checkbox-schema: map-get($schema, $name);\n    } @else {\n        $checkbox-schema: $schema;\n    }\n\n    $theme: apply-palette($checkbox-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($checkbox-schema, 'border-radius')), 0, 10px\n    );\n\n    $border-radius-ripple: round-borders(\n        if($border-radius-ripple, $border-radius-ripple, map-get($checkbox-schema, 'border-radius-ripple')), 0, 24px\n    );\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        label-color: $label-color,\n        empty-color: $empty-color,\n        fill-color: $fill-color,\n        tick-color: $tick-color,\n        disabled-color: $disabled-color,\n        disabled-color-label: $disabled-color-label,\n        border-radius: $border-radius,\n        border-radius-ripple: $border-radius-ripple\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} hide-default\n/// @requires {mixin} igx-css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} igx-ripple\n/// @requires igx-ripple-theme\n/// @requires rem\n/// @requires em\n/// @requires --var\n@mixin igx-checkbox($theme) {\n    @include igx-root-css-vars($theme);\n\n    @include scale-in-out($start-scale: .9);\n\n    // If updating the WIDTH of the checkbox here, please update it in the grid theme as well.\n    // It is under the name of $cbx-size\n    $size: em(20px);\n    $checkbox-radius: $size / 2;\n\n    $border-width: map-get((\n        material: 2px,\n        fluent: 1px\n    ), map-get($theme, variant));\n\n    $ripple-display: map-get((\n        material: block,\n        fluent: none\n    ), map-get($theme, variant));\n\n    $label-margin: em(8px);\n    $radius: 2px;\n\n    $mark-stroke: map-get((\n        material: 3,\n        fluent: 1\n    ), map-get($theme, variant));\n\n    $mark-offset: map-get((\n        material: 0,\n        fluent: -1px\n    ), map-get($theme, variant));\n\n    $mark-length: 24;\n    $mark-x-factor: $mark-stroke / $mark-length;\n\n    $ripple-size: em(48px);\n    $ripple-radius: $ripple-size / 2;\n\n    $ripple-theme: igx-ripple-theme(\n        $color: --var($theme, 'fill-color')\n    );\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    @include scale-in-center();\n\n    %cbx-display {\n        position: relative;\n        display: inline-flex;\n        flex-flow: row nowrap;\n        align-items: center;\n        outline-style: none;\n    }\n\n    %cbx-display--disabled {\n        user-select: none;\n        pointer-events: none;\n        cursor: initial;\n    }\n\n    %cbx-input {\n        @include hide-default();\n    }\n\n    %cbx-composite-wrapper {\n        position: relative;\n        width: $size;\n        height: $size;\n    }\n\n    %cbx-composite {\n        position: relative;\n        display: inline-block;\n        cursor: pointer;\n        width: $size;\n        height: $size;\n        min-width: $size;\n        border-width: rem($border-width);\n        border-style: solid;\n        border-color: --var($theme, 'empty-color');\n        border-radius: --var($theme, 'border-radius');\n        -webkit-tap-highlight-color: transparent;\n        transition: border-color .2s $ease-out-quad;\n        overflow: hidden;\n\n        &::after {\n            position: absolute;\n            content: '';\n            top: 0;\n            right: 0;\n            bottom: 0;\n            left: 0;\n            transition: background .2s $ease-out-quad;\n        }\n    }\n\n    %cbx-composite--x {\n        border-color: --var($theme, 'fill-color');\n        background: --var($theme, 'fill-color');\n\n        &::after {\n            background: --var($theme, 'fill-color');\n        }\n    }\n\n    %cbx-composite--disabled {\n        border-color: --var($theme, 'disabled-color');\n        background: transparent;\n    }\n\n    %cbx-composite--x--disabled {\n        background: --var($theme, 'disabled-color');\n\n        &::after {\n            background: --var($theme, 'disabled-color');\n        }\n    }\n\n    %cbx-composite-mark {\n        position: absolute;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        stroke: --var($theme, 'tick-color');\n        stroke-linecap: square;\n        stroke-width: $mark-stroke;\n        stroke-dasharray: $mark-length;\n        stroke-dashoffset: $mark-length;\n        fill: none;\n        opacity: 0;\n        z-index: 1;\n        transition: opacity .1s $ease-out-quad;\n    }\n\n    %igx-checkbox--indeterminate {\n        %cbx-composite-mark {\n            top: $mark-offset;\n            left: $mark-offset;\n        }\n    }\n\n    %cbx-composite-mark--x {\n        stroke-dashoffset: 0;\n        opacity: 1;\n        transition: all .2s $ease-out-quad, opacity .2s $ease-out-quad;\n    }\n\n    %cbx-composite-mark--in {\n        stroke-dashoffset: 41; /* length of path - adjacent line length */\n        opacity: 1;\n        transform: rotate(45deg) translateX(-#{$mark-x-factor}em);\n    }\n\n    %cbx-label {\n        display: inline-block;\n        color: --var($theme, 'label-color');\n        cursor: pointer;\n        user-select: none;\n        word-wrap: break-all;\n\n        &:empty {\n            margin: 0;\n        }\n    }\n\n    %cbx-label-pos--before,\n    %cbx-label-pos--after {\n        &:empty {\n            margin: 0;\n        }\n    }\n\n    %cbx-label-pos--after {\n        margin-#{$left}: $label-margin;\n    }\n\n    %cbx-label-pos--before {\n        margin-#{$right}: $label-margin;\n        order: -1;\n    }\n\n    %cbx-label--disabled {\n        color: --var($theme, 'disabled-color-label');\n    }\n\n    %cbx-ripple {\n        @include igx-ripple($ripple-theme);\n        @include igx-css-vars($ripple-theme);\n        display: $ripple-display;\n        position: absolute;\n        top: calc(50% - #{$ripple-radius});\n        right: calc(100% - #{$ripple-radius} - #{$checkbox-radius});\n        width: $ripple-size;\n        height: $ripple-size;\n        border-radius: --var($theme, 'border-radius-ripple');\n        overflow: hidden;\n        pointer-events: none;\n        filter: opacity(1);\n    }\n\n    %cbx-ripple--focused {\n        @include animation('scale-in-out' 1s $ease-out-quad infinite);\n        background: --var($theme, 'empty-color');\n        transition: background .2s $ease-out-quad;\n        opacity: .12;\n    }\n\n    %cbx-ripple--focused-checked {\n        background: --var($theme, 'fill-color');\n    }\n\n    %cbx-ripple--hover {\n        &::after {\n            position: absolute;\n            content: '';\n            opacity: .06;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n    }\n\n    %cbx-ripple--hover-unchecked {\n        &::after {\n            background: --var($theme, 'empty-color');\n        }\n    }\n\n    %cbx-ripple--hover-checked {\n        &::after {\n            background: --var($theme, 'fill-color');\n        }\n    }\n\n    %cbx-ripple--pressed {\n        &::after {\n            opacity: .12;\n        }\n    }\n\n    %cbx-display--plain {\n        %cbx-composite,\n        %cbx-composite::after,\n        %cbx-composite-mark,\n        %cbx-composite-mark--x {\n            transition: none;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-checkbox component.\n/// Uses the 'subtitle-1' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-checkbox-typography(\n    $type-scale,\n    $categories: (label: 'subtitle-1')\n) {\n    $label: map-get($categories, 'label');\n\n    %cbx-label {\n        @include igx-type-style($type-scale, $label) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Chip Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {String} $border-radius [null] - The chip border-radius.\n///\n/// @param {Color} $text-color [null] - The chip text color.\n/// @param {Color} $background [null] - The chip background color.\n/// @param {Color} $border-color [null] - The chip border color.\n///\n/// @param {Color} $hover-text-color [null] - The chip text hover color.\n/// @param {Color} $hover-background [null] - The chip hover background color.\n/// @param {Color} $hover-border-color [null] - The chip hover border color.\n///\n/// @param {color} $selected-text-color [null] - The selected chip text color.\n/// @param {color} $selected-background [null] - The selected chip background color.\n/// @param {color} $selected-border-color [null] The selected chip border color.\n///\n/// @param {color} $hover-selected-text-color [null] - The selected chip hover text color.\n/// @param {color} $hover-selected-background [null] - The selected chip hover background color.\n/// @param {color} $hover-selected-border-color [null] - The selected chip hover border color.\n///\n/// @param {color} $focus-selected-text-color [null] - The selected chip text focus color.\n/// @param {color} $focus-selected-background [null] - The selected chip focus background color.\n/// @param {color} $focus-selected-border-color [null] - The selected chip focus border color.\n///\n/// @param {color} $remove-icon-color [null] - The remove icon color for the chip.\n/// @param {color} $remove-icon-color-focus [null] - The remove icon color on focus for the chip.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires luminance\n///\n/// @example scss Change the background color\n///   $my-chip-theme: igx-chip-theme($background: black);\n///   // Pass the theme to the igx-chip component mixin\n///   @include igx-chip($my-chip-theme);\n@function igx-chip-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n    $border-radius: null,\n\n    $text-color: null,\n    $background: null,\n    $border-color: null,\n    $ghost-background: null,\n\n    $hover-text-color: null,\n    $hover-background: null,\n    $hover-border-color: null,\n\n    $focus-text-color: null,\n    $focus-background: null,\n    $focus-border-color: null,\n\n    $selected-text-color: null,\n    $selected-background: null,\n    $selected-border-color: null,\n\n    $hover-selected-text-color: null,\n    $hover-selected-background: null,\n    $hover-selected-border-color: null,\n\n    $focus-selected-text-color: null,\n    $focus-selected-background: null,\n    $focus-selected-border-color: null,\n\n    $ghost-shadow: null,\n    $remove-icon-color: null,\n    $remove-icon-color-focus: null,\n) {\n    $name: 'igx-chip';\n    $chip-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $chip-schema: map-get($schema, $name);\n    } @else {\n        $chip-schema: $schema;\n    }\n\n    $theme: apply-palette($chip-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($chip-schema, 'border-radius')), 0, 16px\n    );\n\n    @if not($text-color) and $background {\n        $text-color: text-contrast($background);\n    }\n\n    @if not($hover-background) and $background {\n        $luminance: luminance($background);\n\n        @if type-of($luminance) == 'color' and $luminance + .05 < .5 {\n            $hover-background: lighten-color($background, 14%);\n        } @else {\n            $hover-background: darken-color($background, 4%);\n        }\n    }\n\n    @if not($hover-text-color) and $hover-background {\n        $hover-text-color: text-contrast(hexrgba($hover-background));\n    }\n\n    @if not($focus-background) and $background {\n        $luminance: luminance($background);\n\n        @if type-of($luminance) == 'color' and $luminance + .05 < .5 {\n            $focus-background: lighten-color($background, 22%);\n        } @else {\n            $focus-background: darken-color($background, 8%);\n        }\n    }\n\n    @if not($focus-text-color) and $focus-background {\n        $focus-text-color: text-contrast(hexrgba($focus-background));\n    }\n\n    @if not($selected-background) and $background {\n        $luminance: luminance($background);\n\n        @if type-of($luminance) == 'color' and $luminance + .05 < .5 {\n            $selected-background: lighten-color($background, 22%);\n        } @else {\n            $selected-background: darken-color($background, 8%);\n        }\n    }\n\n    @if not($selected-text-color) and $selected-background {\n        $selected-text-color: text-contrast(hexrgba($selected-background));\n    }\n\n    @if not($hover-selected-background) and $hover-background {\n        $hover-selected-background: $hover-background;\n    }\n\n    @if not($hover-selected-text-color) and $hover-selected-background {\n        $hover-selected-text-color: text-contrast(hexrgba($hover-selected-background));\n    }\n\n    @if not($focus-selected-background) and $selected-background {\n        $luminance: luminance($selected-background);\n\n        @if type-of($luminance) == 'color' and $luminance + .05 < .5 {\n            $focus-selected-background: lighten-color($background, 32%);\n        } @else {\n            $focus-selected-background: darken-color($background, 16%);\n        }\n    }\n\n    @if not($focus-selected-text-color) and $focus-selected-background {\n        $focus-selected-text-color: text-contrast(hexrgba($focus-selected-background));\n    }\n\n    @if not($hover-border-color) and $border-color {\n        $hover-border-color: $border-color;\n    }\n\n    @if not($focus-border-color) and $border-color {\n        $focus-border-color: $border-color;\n    }\n\n    @if not($selected-border-color) and $border-color {\n        $selected-border-color: $border-color;\n    }\n\n    @if not($hover-selected-border-color) and $border-color {\n        $hover-selected-border-color: $border-color;\n    }\n\n    @if not($focus-selected-border-color) and $border-color {\n        $focus-selected-border-color: $border-color;\n    }\n\n    @if not($ghost-shadow) {\n        $ghost-elevation: map-get($chip-schema, 'ghost-elevation');\n        $ghost-shadow: igx-elevation($elevations, $ghost-elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        border-radius: $border-radius,\n\n        text-color: $text-color,\n        background: $background,\n        border-color: $border-color,\n        ghost-background: $ghost-background,\n\n        hover-text-color: $hover-text-color,\n        hover-background: $hover-background,\n        hover-border-color: $hover-border-color,\n\n        focus-text-color: $focus-text-color,\n        focus-background: $focus-background,\n        focus-border-color: $focus-border-color,\n\n        selected-text-color: $selected-text-color,\n        selected-background: $selected-background,\n        selected-border-color: $selected-border-color,\n\n        hover-selected-text-color: $hover-selected-text-color,\n        hover-selected-background: $hover-selected-background,\n        hover-selected-border-color: $hover-selected-border-color,\n\n        focus-selected-text-color: $focus-selected-text-color,\n        focus-selected-background: $focus-selected-background,\n        focus-selected-border-color: $focus-selected-border-color,\n\n        ghost-shadow: $ghost-shadow,\n        remove-icon-color: $remove-icon-color,\n        remove-icon-color-focus: $remove-icon-color-focus,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-chip($theme) {\n    @include igx-root-css-vars($theme);\n\n    $transition: all 120ms $ease-in-out-quad;\n    $chip-max-width: 32ch;\n\n    $chip-height-material: (\n        comfortable: rem(32px),\n        cosy: rem(24px),\n        compact: rem(18px)\n    );\n\n    $chip-height-fluent: (\n        comfortable: rem(26px),\n        cosy: rem(24px),\n        compact: rem(18px)\n    );\n\n    $chip-height: map-get((\n        material: $chip-height-material,\n        fluent: $chip-height-fluent\n    ), map-get($theme, variant));\n\n    $chip-padding: (\n        comfortable: 0 rem(8px),\n        cosy: 0 rem(4px),\n        compact: 0 rem(2px)\n    );\n\n    $item-padding: 4px;\n    $chip-item-padding: 0 rem($item-padding);\n\n    $chip-avatar-inset: map-get((\n        material: 0,\n        fluent: -$item-padding\n    ), map-get($theme, variant));\n\n    $chip-icon-size: (\n        comfortable: rem(18px),\n        cosy: rem(18px),\n        compact: rem(16px)\n    );\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %igx-chip-area {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        width: 100%;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-chip {\n        @extend  %igx-chip-custom-icon;\n\n        position: relative;\n        display: inline-flex;\n        flex-shrink: 0;\n        transition: $transition;\n        transition-property: top, left;\n        touch-action: none;\n\n        &:focus {\n            outline-style: none;\n        }\n\n        // We target the tag selector directly to\n        // avoid having to set custom classes on the prefix\n        // and suffix based on the host element.\n        igx-prefix,\n        [igxPrefix] {\n            @extend %igx-chip__prefix;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %igx-chip__suffix;\n        }\n    }\n\n    %igx-chip--cosy {\n        @extend  %igx-chip-custom-icon--cosy;\n    }\n\n    %igx-chip--compact {\n        @extend  %igx-chip-custom-icon--compact;\n    }\n\n    %igx-chip--disabled {\n        %igx-chip__item {\n            cursor: default;\n            pointer-events: none;\n        }\n    }\n\n    %igx-chip-custom-icon {\n        igx-icon {\n            width: map-get($chip-icon-size, 'comfortable');\n            height: map-get($chip-icon-size, 'comfortable');\n            font-size: map-get($chip-icon-size, 'comfortable');\n            outline-style: none;\n        }\n    }\n\n    %igx-chip-custom-icon--cosy {\n        igx-icon {\n            width: map-get($chip-icon-size, 'cosy');\n            height: map-get($chip-icon-size, 'cosy');\n            font-size: map-get($chip-icon-size, 'cosy');\n            outline-style: none;\n        }\n    }\n\n    %igx-chip-custom-icon--compact {\n        igx-icon {\n            width: map-get($chip-icon-size, 'compact');\n            height: map-get($chip-icon-size, 'compact');\n            font-size: map-get($chip-icon-size, 'compact');\n            outline-style: none;\n        }\n    }\n\n    %igx-chip__prefix,\n    %igx-chip__suffix {\n        @include ellipsis();\n        display: inline-block;\n        vertical-align: middle;\n        max-width: $chip-max-width;\n    }\n\n    %igx-chip__suffix {\n        + igx-suffix,\n        + [igxSuffix],\n        + %igx-chip__remove {\n            margin-#{$left}: rem(4px);\n        }\n    }\n\n    %igx-chip__prefix {\n        + igx-prefix,\n        + [igxPrefix] {\n            margin-#{$left}: rem(4px);\n\n            &%igx-avatar-display {\n                max-height: 100%;\n                max-width: 100%;\n                margin-#{$left}: $chip-avatar-inset!important;\n            }\n        }\n    }\n\n    %igx-chip__content {\n        @include ellipsis();\n        padding: map-get($chip-padding, 'comfortable');\n        max-width: $chip-max-width;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-chip__content--cosy {\n        padding: map-get($chip-padding, 'cosy');\n    }\n\n    %igx-chip__content--compact {\n        padding: map-get($chip-padding, 'compact');\n    }\n\n    %igx-chip__remove {\n        display: inline-flex;\n        margin-#{$right}: rem(4px);\n        color: --var($theme, 'remove-icon-color', currentColor);\n\n        &:empty {\n            display: none;\n        }\n\n        // FIX IE11 and Edge focus styles.\n        // [focus-within] is not supported by IE & Edge.\n        &:focus {\n            outline-style: none;\n\n            igx-icon {\n                outline-style: none;\n                color: --var($theme, 'remove-icon-color-focus');\n            }\n        }\n\n        igx-icon {\n            &:focus{\n                outline-style: none;\n            }\n        }\n    }\n\n    %igx-chip__select {\n        display: inline-flex;\n        align-items: center;\n        width: 18px;\n        opacity: 1;\n        z-index: 1;\n        transition: opacity 120ms $ease-out-quad, width 120ms $ease-out-quad;\n\n        > * {\n            width: inherit !important;\n        }\n\n        + igx-prefix,\n        + [igxPrefix] {\n            margin-#{$left}: rem(4px);\n        }\n    }\n\n    %igx-chip__select--hidden {\n        width: 0;\n        opacity: 0;\n        z-index: -1;\n\n        + igx-prefix,\n        + [igxPrefix] {\n            margin-#{$left}: 0;\n        }\n    }\n\n    %igx-chip__item {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 1 1 auto;\n        height: map-get($chip-height, 'comfortable');\n        padding: $chip-item-padding;\n        color: --var($theme, 'text-color');\n        background: --var($theme, 'background');\n        border-width: 1px;\n        border-style: solid;\n        border-color: --var($theme, 'border-color');\n        border-radius: --var($theme, 'border-radius');\n        user-select: none;\n        overflow: hidden;\n        cursor: pointer;\n        //hacking overflow hidden with border radius\n        // not playing nicely together\n        filter: opacity(1);\n    }\n\n    %igx-chip__item--hover {\n        color: --var($theme, 'hover-text-color');\n        background: --var($theme, 'hover-background');\n        border-color: --var($theme, 'hover-border-color');\n        transition: all 120ms ease-in;\n    }\n\n    %igx-chip__item--focus {\n        color: --var($theme, 'focus-text-color');\n        background: --var($theme, 'focus-background');\n        border-color: --var($theme, 'focus-border-color');\n        outline-style: none;\n    }\n\n    %igx-chip__item--selected {\n        color: --var($theme, 'selected-text-color');\n        background: --var($theme, 'selected-background');\n        border-color: --var($theme, 'selected-border-color');\n    }\n\n    %igx-chip__item--hover-selected {\n        color: --var($theme, 'hover-selected-text-color');\n        background: --var($theme, 'hover-selected-background');\n        border-color: --var($theme, 'hover-selected-border-color');\n        transition: $transition;\n    }\n\n    %igx-chip__item--focus-selected {\n        color: --var($theme, 'focus-selected-text-color');\n        background: --var($theme, 'focus-selected-background');\n        border-color: --var($theme, 'focus-selected-border-color');\n        transition: $transition;\n    }\n\n    %igx-chip__item--cosy {\n        height: map-get($chip-height, 'cosy');\n        padding: map-get($chip-padding, 'cosy');\n    }\n\n    %igx-chip__item--compact {\n        height: map-get($chip-height, 'compact');\n        padding: map-get($chip-padding, 'compact');\n    }\n\n    %igx-chip__ghost {\n        position: absolute;\n        z-index: 10;\n        box-shadow: --var($theme, 'ghost-shadow');\n        overflow: hidden;\n        background: --var($theme, 'ghost-background');\n\n        &:hover,\n        &:focus {\n            background: --var($theme, 'ghost-background');\n        }\n    }\n\n    %igx-chip__ghost--cosy {\n        height: map-get($chip-height, 'cosy');\n\n        %igx-chip__content {\n            padding: map-get($chip-padding, 'cosy');\n        }\n    }\n\n    %igx-chip__ghost--compact {\n        @extend  %igx-chip-custom-icon--compact;\n        height: map-get($chip-height, 'compact');\n\n        %igx-chip__content {\n            padding: map-get($chip-padding, 'compact');\n        }\n    }\n}\n\n/// Adds typography styles for the igx-chip component.\n/// Uses the 'body-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-chip-typography(\n    $type-scale,\n    $categories: (text: 'body-2'))\n{\n    $text: map-get($categories, 'text');\n\n    %igx-chip {\n        @include igx-type-style($type-scale, $text) {\n            font-weight: 600;\n        }\n    }\n\n    %igx-chip--compact,\n    %igx-chip__ghost--compact {\n        %igx-chip__content {\n            @include igx-type-style($type-scale, $text) {\n                font-size: 12px;\n                font-weight: 600;\n            }\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Column Hiding Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Color} $title-color [primary 500]- The text color used for the title of the list.\n/// @param {Color} $background-color [transparent] - The background color of the panel.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n///\n/// @example scss Change the title color\n///   $column-hiding-theme: igx-column-hiding-theme($title-color: black);\n///   // Pass the theme to the igx-column-hiding component mixin\n///   @include igx-column-hiding($column-hiding-theme);\n////\n@function igx-column-hiding-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $title-color: null,\n    $background-color: null\n) {\n    $name: 'igx-column-hiding';\n    $column-hiding-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $column-hiding-schema: map-get($schema, $name);\n    } @else {\n        $column-hiding-schema: $schema;\n    }\n\n    $theme: apply-palette($column-hiding-schema, $palette);\n\n    @if not($title-color) and $background-color {\n        $title-color: text-contrast($background-color);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        title-color: $title-color,\n        background-color: $background-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-column-hiding($theme) {\n    @include igx-root-css-vars($theme);\n\n    %column-hiding-display {\n        display: flex;\n        flex-flow: column nowrap;\n        background: --var($theme, 'background-color');\n        width: 100%;\n        flex: 1 1 auto;\n        min-width: rem(180px);\n    }\n\n    %column-hiding-title {\n        color: --var($theme, 'title-color');\n        margin: 0;\n        padding: rem(16px) rem(16px) rem(8px);\n    }\n\n    %column-hiding-input {\n        font-size: rem(16px) !important;\n        margin: -16px 0 0 !important;\n        padding: rem(8px) rem(16px);\n    }\n\n    %column-hiding-columns {\n        display: flex;\n        flex-flow: column nowrap;\n        overflow-y: auto;\n    }\n\n    %column-hiding-item {\n        padding: rem(16px);\n        min-height: rem(52px);\n    }\n\n    %column-hiding-buttons {\n        display: flex;\n        justify-content: flex-end;\n        padding: rem(8px) rem(16px);\n    }\n}\n\n/// Adds typography styles for the igx-column-hiding component.\n/// Uses the 'subtitle-1'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(title: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-column-hiding-typography($type-scale, $categories: (title: 'subtitle-1')) {\n    $title: map-get($categories, 'title');\n\n    %column-hiding-title {\n        @include igx-type-style($type-scale, $title) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Dialog Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {Color} $background [null] - The dialog background color.\n/// @param {Color} $title-color [null] - The dialog title text color.\n/// @param {Color} $message-color [null] - The dialog message text color.\n/// @param {box-shadow} $shadow [null] - The shadow used for the dialog.\n/// @param {border-radius} $border-radius [null] - The border radius used for dialog component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the background color\n///   $my-dialog-theme: igx-dialog-theme($background: black);\n///   // Pass the theme to the igx-dialog component mixin\n///   @include igx-dialog($my-dialog-theme);\n@function igx-dialog-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n\n    $background: null,\n    $title-color: null,\n    $message-color: null,\n    $shadow: null\n) {\n    $name: 'igx-dialog';\n    $dialog-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $dialog-schema: map-get($schema, $name);\n    } @else {\n        $dialog-schema: $schema;\n    }\n\n    $theme: apply-palette($dialog-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($dialog-schema, 'border-radius')), 0 , 36px\n    );\n\n    @if not($title-color) and $background{\n        $title-color: text-contrast($background);\n    }\n\n    @if not($message-color) and $background{\n        @if type-of($background) == 'color' {\n            $message-color: rgba(text-contrast($background), .8);\n        }\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($dialog-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        border-radius: $border-radius,\n        background: $background,\n        title-color: $title-color,\n        message-color: $message-color,\n        shadow: $shadow\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-dialog($theme) {\n    @include igx-root-css-vars($theme);\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $dialog-min-width: map-get((\n        material: rem(280px),\n        fluent: rem(288px)\n    ), map-get($theme, variant));\n\n    $dialog-title-padding: map-get((\n        material: rem(24px) rem(24px) rem(12px) rem(24px),\n        fluent: rem(16px) rem(24px) rem(24px) rem(24px)\n    ), map-get($theme, variant));\n\n    $dialog-message-padding: map-get((\n        material: rem(12px) rem(24px),\n        fluent: 0 rem(24px) rem(20px) rem(24px)\n    ), map-get($theme, variant));\n\n    $dialog-actions-padding: map-get((\n        material: rem(8px),\n        fluent: 0 rem(24px) rem(24px) rem(24px)\n    ), map-get($theme, variant));\n\n    %igx-dialog-display {\n        outline-style: none;\n    }\n\n    %igx-dialog--hidden {\n        display: none;\n    }\n\n    %igx-dialog-window {\n        position: relative;\n        min-width: $dialog-min-width;\n        border-radius: --var($theme, 'border-radius');\n        background: --var($theme, 'background');\n        box-shadow: --var($theme, 'shadow');\n        overflow: hidden;\n\n        .igx-calendar {\n            width: rem(320px);\n        }\n\n        .igx-calendar--vertical {\n            width: rem(496px);\n        }\n    }\n\n    %igx-dialog-title {\n        color: --var($theme, 'title-color');\n        padding: $dialog-title-padding;\n    }\n\n    %igx-dialog-content {\n        color: --var($theme, 'message-color');\n        max-width: 40ch;\n        padding: $dialog-message-padding;\n    }\n\n    %igx-dialog-actions {\n        display: flex;\n        flex-flow: row nowrap;\n        justify-content: flex-end;\n        padding: $dialog-actions-padding;\n\n        button + button {\n            margin-#{$left}: rem(8px);\n        }\n    }\n}\n\n/// Adds typography styles for the igx-dialog component.\n/// Uses the 'h6' and 'body-1' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(title: 'h6', content: 'body-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-dialog-typography($type-scale, $categories: (\n    title: 'h6',\n    content: 'body-1')\n) {\n    $title: map-get($categories, 'title');\n    $content: map-get($categories, 'content');\n\n    %igx-dialog-title {\n        @include igx-type-style($type-scale, $title) {\n            margin: 0;\n        }\n    }\n\n    %igx-dialog-content {\n        @include igx-type-style($type-scale, $content) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// Generates a drop-down theme.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {Color} $background-color [null] - The drop-down background color.\n/// @param {Color} $header-text-color [null] - The drop-down header text color.\n///\n/// @param {Color} $item-text-color [null] - The drop-down text color.\n/// @param {Color} $hover-item-text-color [null] - The drop-down hover text color.\n///\n/// @param {Color} $hover-item-background [null] - The drop-down hover item background color.\n///\n/// @param {Color} $focused-item-background [null] - The drop-down focused item background color.\n/// @param {Color} $focused-item-text-color [null] - The drop-down focused item text color.\n///\n/// @param {Color} $selected-item-background [null] - The drop-down selected item background color.\n/// @param {Color} $selected-item-text-color [null] - The drop-down selected item text color.\n///\n/// @param {Color} $selected-hover-item-background [null] - The drop-down selected item hover background color.\n/// @param {Color} $selected-hover-item-text-color [null] - The drop-down selected item hover text color.\n///\n/// @param {Color} $selected-focus-item-background [null] - The drop-down selected item focus background color.\n/// @param {Color} selected-focus-item-text-color [null] - The drop-down selected item focus text color.\n///\n/// @param {Color} $disabled-item-background [null] - The drop-down disabled item background color.\n/// @param {Color} $disabled-item-text-color [null] - The drop-down disabled item text color.\n/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the drop-down.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for drop-down component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n@function igx-drop-down-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n\n    $background-color: null,\n    $header-text-color: null,\n\n    $item-text-color: null,\n    $hover-item-text-color: null,\n\n    $hover-item-background: null,\n\n    $focused-item-background: null,\n    $focused-item-text-color: null,\n\n    $selected-item-background: null,\n    $selected-item-text-color: null,\n\n    $selected-hover-item-background: null,\n    $selected-hover-item-text-color: null,\n\n    $selected-focus-item-background: null,\n    $selected-focus-item-text-color: null,\n\n    $disabled-item-background: null,\n    $disabled-item-text-color: null,\n    $shadow: null\n) {\n    $name: 'igx-drop-down';\n    $drop-down-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $drop-down-schema: map-get($schema, $name);\n    } @else {\n        $drop-down-schema: $schema;\n    }\n\n    $theme: apply-palette($drop-down-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($drop-down-schema, 'border-radius')), 0, 20px\n    );\n\n    @if not($item-text-color) and $background-color {\n        $item-text-color: text-contrast($background-color);\n    }\n\n    @if not($hover-item-background) and $background-color {\n        $hover-item-text-color: text-contrast($background-color);\n\n        @if type-of($background-color) == 'color' {\n            $hover-item-background: rgba(text-contrast($background-color), .12);\n        }\n    }\n\n    @if not($hover-item-text-color) and $background-color {\n        $hover-item-text-color: text-contrast($background-color);\n    }\n\n    @if not($focused-item-background) and $background-color {\n        $focused-item-text-color: text-contrast($background-color);\n\n        @if type-of($background-color) == 'color' {\n            $focused-item-background: rgba(text-contrast($background-color), .12);\n        }\n    }\n\n    @if not($focused-item-text-color) and $focused-item-background {\n        $focused-item-text-color: text-contrast($focused-item-background);\n    }\n\n    @if not($selected-item-text-color) and $selected-item-background {\n        $selected-item-text-color: text-contrast($selected-item-background);\n    }\n\n    @if not($selected-hover-item-text-color) and $selected-hover-item-background {\n        $selected-hover-item-text-color: text-contrast($selected-hover-item-background);\n    }\n\n\n    @if not($selected-focus-item-text-color) and $selected-focus-item-background {\n        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);\n    }\n\n    @if not($selected-focus-item-text-color) and $selected-focus-item-background {\n        $selected-focus-item-text-color: text-contrast($selected-focus-item-background);\n    }\n\n\n    @if not($disabled-item-text-color) and $background-color {\n        @if type-of($background-color) == 'color' {\n            $disabled-item-text-color: rgba(text-contrast($background-color), .36);\n        }\n    }\n\n    @if not($disabled-item-text-color) and $disabled-item-background {\n        @if type-of($disabled-item-background) == 'color' {\n            $disabled-item-text-color: rgba(text-contrast($disabled-item-background), .36);\n        }\n    }\n\n    @if not($header-text-color) and $background-color {\n        @if type-of($background-color) == 'color' {\n            $header-text-color: rgba(text-contrast($background-color), .7);\n        }\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($drop-down-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background-color: $background-color,\n        border-radius: $border-radius,\n        header-text-color: $header-text-color,\n        item-text-color: $item-text-color,\n        hover-item-text-color: $hover-item-text-color,\n        hover-item-background: $hover-item-background,\n        focused-item-background: $focused-item-background,\n        focused-item-text-color: $focused-item-text-color,\n        selected-item-background: $selected-item-background,\n        selected-item-text-color: $selected-item-text-color,\n        selected-hover-item-background: $selected-hover-item-background,\n        selected-hover-item-text-color: $selected-hover-item-text-color,\n        selected-focus-item-background: $selected-focus-item-background,\n        selected-focus-item-text-color: $selected-focus-item-text-color,\n        disabled-item-background: $disabled-item-background,\n        disabled-item-text-color: $disabled-item-text-color,\n        shadow: $shadow,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-drop-down($theme) {\n    @include igx-root-css-vars($theme);\n\n    $item-height: (\n        comfortable: rem(40px),\n        cosy: rem(32px),\n        compact: rem(28px)\n    );\n\n    $item-padding-comfortable: rem(24px);\n    $item-padding-cosy: rem(20px);\n    $item-padding-compact: rem(16px);\n\n    $item-padding: (\n        comfortable: 0 $item-padding-comfortable,\n        cosy: 0 $item-padding-cosy,\n        compact: 0 $item-padding-compact\n    );\n\n    $header-item-padding: (\n        comfortable: 0 rem(16px),\n        cosy: 0 rem(12px),\n        compact: 0 rem(8px)\n    );\n\n    %igx-drop-down-wrapper {\n        box-shadow: --var($theme, 'shadow');\n        z-index: 1;\n    }\n\n    %igx-drop-down {\n        max-height: 100%;\n        position: absolute;\n        border-radius: --var($theme, 'border-radius');\n        overflow: hidden;\n    }\n\n    %igx-drop-down__list {\n        overflow-y: auto;\n        background: --var($theme, 'background-color');\n        box-shadow: --var($theme, 'shadow');\n        min-width: rem(128px);\n\n        &:empty {\n            box-shadow: none;\n        }\n\n        igx-input-group {\n            margin-top: -16px !important;\n        }\n    }\n\n    %igx-drop-down__list--select {\n        box-shadow: none;\n    }\n\n    %igx-drop-down__header,\n    %igx-drop-down__item {\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        width: 100%;\n        white-space: nowrap;\n        height: map-get($item-height, 'comfortable');\n    }\n\n    %igx-drop-down__item {\n        color: --var($theme, 'item-text-color');\n        cursor: pointer;\n        padding: map-get($item-padding, 'comfortable');\n\n        &:focus {\n            outline: 0;\n            outline-color: transparent;\n            background: --var($theme, 'focused-item-background');\n            color: --var($theme, 'focused-item-text-color');\n        }\n\n        &:hover {\n            background: --var($theme, 'hover-item-background');\n            color: --var($theme, 'hover-item-text-color');\n        }\n    }\n\n    %igx-drop-down__item--cosy {\n        height: map-get($item-height, 'cosy');\n        padding: map-get($item-padding, 'cosy');\n    }\n\n    %igx-drop-down__item--compact {\n        height: map-get($item-height, 'compact');\n        padding: map-get($item-padding, 'compact');\n    }\n\n    %igx-drop-down__header {\n        color: --var($theme, 'header-text-color');\n        pointer-events: none;\n        padding: map-get($header-item-padding, 'comfortable');\n    }\n\n    %igx-drop-down__header--cosy {\n        height: map-get($item-height, 'cosy');\n        padding: map-get($header-item-padding, 'cosy');\n    }\n\n    %igx-drop-down__header--compact {\n        height: map-get($item-height, 'compact');\n        padding: map-get($header-item-padding, 'compact');\n    }\n\n    %igx-drop-down__group {\n        pointer-events: auto;\n\n        label {\n            @extend %igx-drop-down__header;\n        }\n\n        %igx-drop-down__item {\n            text-indent: map-get($item-padding, 'comfortable');\n        }\n    }\n\n    %igx-drop-down__item--focused {\n        background: --var($theme, 'focused-item-background');\n        color: --var($theme, 'focused-item-text-color');\n\n        &:hover {\n            background: --var($theme, 'focused-item-background');\n        }\n    }\n\n    %igx-drop-down__item--selected {\n        background: --var($theme, 'selected-item-background');\n        color: --var($theme, 'selected-item-text-color');\n\n        &:hover {\n            background: --var($theme, 'selected-hover-item-background');\n            color: --var($theme, 'selected-hover-item-text-color');\n        }\n    }\n\n    %igx-drop-down__item--selected--focused {\n        background: --var($theme, 'selected-focus-item-background');\n        color: --var($theme, 'selected-focus-item-text-color');\n    }\n\n    %igx-drop-down__item--disabled {\n        background: --var($theme, 'disabled-item-background');\n        color: --var($theme, 'disabled-item-text-color');\n        cursor: default;\n        pointer-events: none;\n\n        &:hover {\n            background: --var($theme, 'disabled-item-background');\n        }\n    }\n}\n\n/// Adds typography styles for the igx-list component.\n/// Uses the 'caption' and 'subtitle-2'\n/// categories from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(header: 'overline', item: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-drop-down-typography(\n    $type-scale,\n    $categories: (\n        header: 'overline',\n        item: 'body-2',\n        select-item: 'subtitle-1'\n    )\n) {\n    $header: map-get($categories, 'header');\n    $item: map-get($categories, 'item');\n    $select-item: map-get($categories, 'select-item');\n\n    %igx-drop-down__header,\n    %igx-drop-down__group > label {\n        @include igx-type-style($type-scale, $header) {\n            margin: 0;\n        }\n    }\n\n    %igx-drop-down__item {\n        @include igx-type-style($type-scale, $item) {\n            margin: 0;\n        }\n    }\n\n    %igx-drop-down__list--select {\n        %igx-drop-down__item {\n            @include igx-type-style($type-scale, $select-item);\n            @include ellipsis()\n        }\n    }\n}\n","////\n/// @group Utilities\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// Help debug sass maps.\n/// @access privet\n/// @example scss - Sample usage\n///   input[type=\"checkbox\"] {\n///     @include hide-default();\n///   }\n\n//@mixin debug-map($map) {\n//    @at-root {\n//        @debug-map {\n//            __toString__: inspect($map);\n//            __length__: length($map);\n//            __keys__: map-keys($map);\n//\n//            __properties__ {\n//                @each $key, $value in $map {\n//                    #{$key}: inspect($value);\n//                }\n//            }\n//        }\n//    }\n//}\n\n/// Hides the element from the DOM.\n/// @access public\n/// @example scss - Sample usage\n///   input[type=\"checkbox\"] {\n///     @include hide-default();\n///   }\n@mixin hide-default {\n    position: absolute;\n    width: 1px;\n    height: 1px;\n    margin: -1px;\n    border: none;\n    clip: rect(0, 0, 0, 0);\n    outline: 0;\n    pointer-events: none;\n    overflow: hidden;\n    appearance: none;\n}\n\n/// Generates a linear gradient.\n/// @access public\n/// @param {string} $direction - The direction of the gradient.\n/// @param {List} $color-stops - A list of color stops to be used in the gradient.\n/// @example scss - Sample usage\n///   .bozo {\n///     background: @include linear-gradient(\"to right\", red, orange);\n///   }\n/// @outputs The CSS representation of linear-gradient.\n@mixin linear-gradient($direction, $color-stops...) {\n    // Direction has been omitted and happens to be a color-stop\n    @if is-direction($direction) == false {\n        $color-stops: $direction, $color-stops;\n        $direction: 180deg;\n    }\n    background: linear-gradient($direction, $color-stops);\n}\n\n/// Registers a keyframes animation in the global keyframes registry list.\n/// @access public\n/// @group animations\n/// @param {String} $name - The name of the keyframes animation.\n@mixin keyframes($name) {\n    $keyframe: map-get($keyframes, $name);\n\n    @if $keyframe == null {\n        $keyframe: unique-id();\n        $keyframes: map-merge($keyframes, (#{$name}: $keyframe)) !global;\n\n        @at-root {\n            @keyframes #{$name} {\n                @content;\n            }\n        }\n    }\n}\n\n/// Registers a component to the list of known components.\n/// @access private\n/// @param {String} $name - The component name to register.\n@mixin register-component($name) {\n    $component: map-get($components, $name);\n    @if $component == null {\n        $component: unique-id();\n        $components: map-merge($components, (#{$name}: $component)) !global;\n    }\n}\n\n/// Animates an element.\n/// @access public\n/// @group animations\n/// @param {List} $animate - The list of animation properties.\n/// @example scss - Animating an element\n///  @include fade-in(); // include the 'fade-in' keyframes animation mixin\n///\n///  .bozo {\n///     @include animation('fade-in' .3s ease-out);\n///  }\n@mixin animation($animate...) {\n    $max: length($animate);\n    $animations: '';\n    @for $i from 1 through $max {\n        $animations: #{$animations + nth($animate, $i)};\n        @if $i < $max {\n            $animations: #{$animations + ', '};\n        }\n    }\n    animation: $animations;\n}\n\n/// Applies text-overflow ellipsis to e text element.\n/// This won't work on display flex elements.\n/// @access public\n@mixin ellipsis() {\n    white-space: nowrap;\n    text-overflow: ellipsis;\n    overflow: hidden;\n}\n\n/// Generates a CSS class name for a color from a\n/// given name, variant, prefix and suffix\n/// @access private\n/// @param {string} $name - The main class name.\n/// @param {string} $variant - An additional string to be attached to the main class name.\n/// @param {string} $prefix - A prefix to be attached to the name and variant string.\n/// @param {string} $prefix - A suffix to be attached to the name and variant string.\n@mixin gen-color-class($name, $variant, $prefix, $suffix) {\n    $prefix: if($prefix, '#{$prefix}-', '');\n    $suffix: if($suffix, '-#{$suffix}', '');\n\n    .#{$prefix}#{$name}-#{$variant}#{$suffix} {\n        @content;\n    }\n}\n\n/// Generates CSS class names for all colors from\n/// the color palette for a given property, with\n/// optional prefix and suffix attached to the class name.\n/// @access private\n/// @param {string} $prop - The CSS property to assign the palette color to.\n/// @param {string} $prefix - A prefix to be attached to the class name.\n/// @param {string} $suffix - A suffix to be attached to the class name.\n/// @example scss Generate background classes with colors from the palette.\n///   // Will generate class names like\n///   // .my-primary-500-bg { ... };\n///   @include gen-color-classes(\n///     $prop: 'background-color',\n///     $prefix: 'my', $suffix: 'bg'\n///   );\n/// @requires {mixin} gen-color-class\n@mixin gen-color-classes($prop, $prefix, $suffix) {\n    @each $palette-name, $sub-palette in $default-palette {\n        @each $variant, $color in $sub-palette {\n            @if type-of($color) != 'map' {\n                @include gen-color-class($palette-name, $variant, $prefix, $suffix) {\n                    #{$prop}: $color;\n                }\n            }\n        }\n    }\n}\n\n/// Generates CSS variables for a given palette.\n/// @access private\n/// @param {Map} $palette - The igx palette to use to generate css variables for.\n///\n/// @example scss Generate css variables for the `$default-palette`.\n///   @include css-vars-from-palette($default-palette);\n///\n@mixin css-vars-from-palette($palette) {\n    @each $palette-name, $sub-palette in $palette {\n        @each $variant, $color in $sub-palette {\n            @if type-of($color) != 'map' {\n                --igx-#{$palette-name}-#{$variant}: #{$color};\n            }\n        }\n    }\n}\n\n/// Generates CSS variables for a given palette.\n/// @access public\n/// @param {Map} $palette - The igx palette to use to generate css variables for.\n///\n/// @example scss Generate css variables for the `$default-palette`.\n///   @include css-vars-from-palette($default-palette);\n///\n/// @requires {mixin} css-vars-from-palette\n@mixin igx-palette-vars($palette) {\n    $scope: if(is-root(), ':root', '&');\n\n    #{$scope} {\n        @include css-vars-from-palette($palette);\n    }\n}\n\n/// Generates CSS class names for all colors from\n/// the color palette for a given property, with\n/// optional prefix and suffix attached to the class name.\n/// @access private\n/// @param {string} $prop - The CSS property to assign the palette color to.\n/// @param {string} $prefix [null] - A prefix to be attached to the class name.\n/// @param {string} $suffix [igx] - A suffix to be attached to the class name.\n/// @example scss Generate background classes with colors from the palette.\n///   // Will generate class names like\n///   // .igx-primary-500-bg { ... };\n///   @include igx-color-classes(\n///     $prop: 'background-color',\n///     $suffix: 'bg'\n///   );\n/// @requires {mixin} gen-color-classes\n@mixin igx-color-classes($prop, $suffix: null, $prefix: 'igx') {\n    @include gen-color-classes($prop, $prefix, $suffix);\n}\n\n/// Parses a map of key value pairs\n/// from component themes to css variables.\n/// @access private\n/// @param {map} $theme - The component theme to be used to generate css variables.\n/// @example scss Convert theme colors to css variables.\n///   $my-theme: igx-avatar-theme($icon-color: red);\n///   :root {\n///     @include css-vars-from-theme($my-theme);\n///   }\n@mixin css-vars-from-theme($theme) {\n    $prefix: map-get($theme, 'name');\n\n    @each $key, $value in $theme {\n        @if $key != 'name' and $key != 'palette' and type-of($value) != 'map' {\n            --#{$prefix}-#{$key}: #{$value};\n        }\n    }\n}\n\n/// Add theme colors to the global root scope\n/// Ensures the operation is done only once.\n/// @access private\n/// @param {map} $theme - The component theme to register as css vars.\n/// @requires {mixin} css-vars-from-theme\n@mixin igx-root-css-vars($theme) {\n    $scope: &;\n\n    @if map-get($themes, $scope) == null {\n        $id: unique-id();\n        $themes: map-merge($themes, (#{$scope}: $id)) !global;\n        @include igx-css-vars($theme);\n    }\n}\n\n/// Add theme colors to a scope.\n/// @access public\n/// @param {map} $theme - The component theme to get the\n/// @requires {mixin} css-vars-from-theme\n@mixin igx-css-vars($theme) {\n    $scope: if(is-root(), ':root', '&');\n\n    #{$scope} {\n        @include css-vars-from-theme($theme);\n    }\n}\n\n/// Scopes CSS rules to a predefined top-level parent selector.\n/// Respects specificity and selector scopes.\n/// @access private\n/// @param {String} $parent - The selector to be used as top level scope.\n/// @example scss Apply mixin style rules only when '.igx-typography' selector is present.\n///    @mixin igx-card-typography {\n///       @include igx-scope('.igx-typography') {\n///         // style rules...\n///       }\n///    }\n///\n///    // Later\n///    .my-selector {\n///      @include igx-card-typography();\n///    }\n///\n///    // Generated CSS\n///    // .igx-typography .my-selector {\n///    //    ...styles rules as output by igx-card-typography mixin\n///    // }\n@mixin igx-scope($parent) {\n    @each $selector in & {\n        $len: length($selector);\n        @if $len == null {\n            $parent: $parent;\n        } @else {\n            @for $i from 1 through $len {\n                $parent: append($parent, nth($selector, $i));\n            }\n        }\n\n        @at-root #{$parent} {\n            @content;\n        }\n    }\n}\n\n/// Compiles the passed content to CSS only if\n/// the global $direction variable is set to 'ltr'.\n/// @example scss Include content only if $direction is set to ltr (default)\n///    @include if-ltr {\n///      margin-right: 8px;\n///    }\n@mixin if-ltr {\n    $dir: if(global-variable-exists('direction'), $direction, 'ltr');\n\n    @if $dir != 'rtl' {\n        @content;\n    }\n}\n\n/// Compiles the passed content to CSS only if\n/// the global $direction variable is set to 'rtl'.\n/// @example scss Include content only if $direction is set to rtl\n///    @include if-rtl {\n///      margin-left: 8px;\n///    }\n@mixin if-rtl {\n    $dir: if(global-variable-exists('direction'), $direction, 'ltr');\n\n    @if $dir == 'rtl' {\n        @content;\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Expansion panel Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $header-background [null] - The panel header background color.\n/// @param {Color} $header-focus-background [null] - The panel header focus background color.\n/// @param {Color} $header-title-color [null] - The panel header title text color.\n/// @param {Color} $header-description-color [null] - The panel header description text color.\n/// @param {Color} $header-icon-color [null] - The panel header icon color.\n/// @param {Color} $body-color [null] - The panel body text color.\n/// @param {Color} $body-background [null] - The panel body background color.\n/// @param {Color} $disabled-color [null] - The panel body disabled text color.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for expansion-panel component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires round-borders\n///\n/// @example scss Change the background color\n///   $my-expansion-panel-theme: igx-expansion-panel($header-background: black);\n///   // Pass the theme to the igx-expansion-panel component mixin\n///   @include igx-expansion-panel($my-igx-expansion-panel-theme);\n@function igx-expansion-panel-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $border-radius:null,\n    $header-background: null,\n    $header-focus-background: null,\n    $header-title-color: null,\n    $header-description-color: null,\n    $header-icon-color: null,\n    $body-color: null,\n    $body-background: null,\n    $disabled-color: null\n) {\n    $name: 'igx-expansion-panel';\n    $expansion-panel-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $expansion-panel-schema: map-get($schema, $name);\n    } @else {\n        $expansion-panel-schema: $schema;\n    }\n\n    $theme: apply-palette($expansion-panel-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($expansion-panel-schema, 'border-radius')), 0, 16px\n    );\n\n\n    @if not($header-title-color) and $header-background {\n        $header-title-color: text-contrast($header-background);\n    }\n\n    @if not($header-description-color) and $header-background {\n        @if type-of($header-background) == 'color' {\n            $header-description-color: rgba(text-contrast($header-background), .8);\n        }\n    }\n\n    @if not($header-icon-color) and $header-background {\n        $header-icon-color: text-contrast($header-background);\n    }\n\n    @if not($body-color) and $body-background {\n        $body-color: text-contrast($body-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        header-background: $header-background,\n        border-radius: $border-radius,\n        header-focus-background: $header-focus-background,\n        header-title-color: $header-title-color,\n        header-description-color: $header-description-color,\n        header-icon-color: $header-icon-color,\n        body-color: $body-color,\n        body-background: $body-background,\n        disabled-color: $disabled-color,\n    ));\n}\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-expansion-panel($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $panel-padding: em(16px, 16px);\n    $panel-compact-padding: em(16px, 16px);\n    $panel-cosy-padding: em(8px, 16px);\n\n    %igx-expansion-panel {\n        display: flex;\n        flex-direction: column;\n        border-radius: --var($theme, 'border-radius');\n        overflow: hidden;\n    }\n\n    %igx-expansion-panel__header-title {\n        color: --var($theme, 'header-title-color');\n        margin-#{$right}: rem(16px, 16px);\n    }\n\n    %igx-expansion-panel__header-description {\n        color: --var($theme, 'header-description-color');\n    }\n\n    %igx-expansion-panel__header-title,\n    %igx-expansion-panel__header-description {\n        text-overflow: ellipsis;\n        overflow: hidden;\n        white-space: nowrap;\n    }\n\n    %igx-expansion-panel__header-inner {\n        display: flex;\n        align-items: center;\n        padding: $panel-padding;\n        cursor: pointer;\n        background: --var($theme, 'header-background');\n\n        &:focus,\n        &:active\n        {\n            background: --var($theme, 'header-focus-background');\n            outline: transparent;\n        }\n    }\n\n    %igx-expansion-panel__title-wrapper {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        flex: 1 0 0%;\n        overflow: hidden;\n    }\n\n    %igx-expansion-panel__header-icon--end {\n        order: 1;\n        margin-#{$left}: rem(16px, 16px);\n    }\n\n    %igx-expansion-panel__header-icon--start {\n        order: -1;\n        margin-#{$right}: rem(16px, 16px);\n    }\n\n    %igx-expansion-panel__header-icon--none {\n        display: none;\n    }\n\n    %igx-expansion-panel__header-icon--end,\n    %igx-expansion-panel__header-icon--start {\n        display: flex;\n        align-content: center;\n        justify-content: center;\n        user-select: none;\n\n        color: --var($theme, 'header-icon-color');\n\n        igx-icon {\n            color: --var($theme, 'header-icon-color');\n        }\n    }\n\n    %igx-expansion-panel__body {\n        color: --var($theme, 'body-color');\n        background: --var($theme, 'body-background');\n        overflow: hidden;\n    }\n\n    %igx-expansion-panel--disabled {\n        %igx-expansion-panel__header-title,\n        %igx-expansion-panel__header-description {\n            color: --var($theme, 'disabled-color')\n        }\n\n        %igx-expansion-panel__header-icon--start,\n        %igx-expansion-panel__header-icon--end {\n            igx-icon {\n                color: --var($theme, 'disabled-color');\n            }\n        }\n    }\n}\n\n/// Adds typography styles for the igx-expansion-panel component.\n/// Uses the 'body-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(title: 'h5', description: 'subtitle-2', body: 'subtitle-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-expansion-panel-typography($type-scale, $categories: (\n    title: 'h5',\n    description: 'subtitle-2',\n    body: 'body-2')\n) {\n    $title: map-get($categories, 'title');\n    $description: map-get($categories, 'description');\n    $body: map-get($categories, '$body');\n\n    %igx-expansion-panel__header-title {\n        @include igx-type-style($type-scale, $title) {\n            margin: 0;\n        }\n    }\n\n    %igx-expansion-panel__header-description {\n        @include igx-type-style($type-scale, $description) {\n            margin: 0;\n        }\n    }\n\n    %igx-expansion-panel__body {\n        @include igx-type-style($type-scale, $body) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access private\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $theme - The grid theme used to style the component.\n/// @param {Map} $palette - The palette map used as base for the component.\n/// @requires igx-color\n/// @requires rem\n/// @requires --var\n@mixin _excel-filtering($theme, $palette) {\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %grid-excel-filter {\n        display: block;\n    }\n\n    %grid-excel-filter--inline {\n        width: 100%;\n        flex-grow: 1;\n        overflow: auto;\n\n        %grid-excel-menu {\n            display: flex;\n            flex-direction: column;\n            width: 100%;\n            height: 100%;\n            box-shadow: none;\n\n            %grid-excel-main {\n                display: flex;\n                flex-direction: column;\n                flex-grow: 1;\n                overflow: hidden;\n            }\n\n            %grid-excel-main igx-list {\n                flex-grow: 1;\n                overflow: hidden;\n            }\n        }\n    }\n\n    %igx-excel-filter__loading {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n    }\n\n    %grid-excel-icon {\n        cursor: pointer;\n\n        &.igx-icon {\n            width: rem(15px);\n            height: rem(15px);\n            font-size: rem(15px);\n        }\n    }\n\n    %grid-excel-icon--filtered {\n        &.igx-icon {\n            color: igx-color($palette, 'secondary');\n        }\n    }\n\n    %grid-excel-menu {\n        width: 320px;\n        min-width: 320px;\n        background: --var($theme, 'filtering-row-background');\n        box-shadow: igx-elevation($elevations, 12);\n        border-radius: 4px;\n\n        @include igx-button-group(igx-button-group-theme(\n            $shadow: none,\n            $schema: $dark-schema,\n            $item-background: --var($theme, 'filtering-row-background'),\n            $item-hover-background: igx-color($palette, 'grays', 100),\n            $item-selected-background: igx-color($palette, 'grays', 100),\n            $item-text-color: igx-color($palette, 'grays', 700),\n            $item-hover-text-color: igx-color($palette, 'grays', 800),\n            $item-selected-text-color: igx-color($palette, 'secondary', 500),\n            $item-border-color: transparent,\n            $item-selected-border-color: transparent\n        ));\n    }\n\n    %grid-excel-menu__header {\n        display: flex;\n        align-items: center;\n        padding: rem(16px);\n        color: igx-color($palette, 'grays', 700);\n    }\n\n    %grid-excel-menu__header-actions {\n        display: flex;\n        margin-#{$left}: auto;\n\n        [igxButton] + [igxButton] {\n            margin-#{$left}: rem(4px);\n        }\n    }\n\n    %grid-excel-menu__footer {\n        display: flex;\n        justify-content: space-between;\n        padding: rem(8px) rem(16px);\n\n        [igxButton] {\n            flex-grow: 1;\n\n            + [igxButton] {\n                margin-#{$left}: rem(16px);\n            }\n        }\n    }\n\n    %grid-excel-sort {\n        display: block;\n        padding: rem(8px) rem(16px);\n\n        header {\n            color: igx-color($palette, 'grays', 700);\n            margin-bottom: rem(4px);\n        }\n\n        igx-icon {\n            font-size: rem(18px);\n            width: rem(18px);\n            height: rem(18px);\n            margin-right: rem(8px);\n        }\n\n        @include if-rtl() {\n            igx-icon {\n                margin-left: rem(8px);\n            }\n        }\n    }\n\n    %grid-excel-action--compact {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        header {\n            color: igx-color($palette, 'grays', 700);\n            margin-#{$right}: auto;\n        }\n    }\n\n    %grid-excel-actions {\n        padding: rem(8px) rem(16px);\n    }\n\n    %grid-excel-move {\n        margin-bottom: rem(8px);\n\n        header {\n            color: igx-color($palette, 'grays', 700);\n            margin-bottom: rem(4px);\n        }\n    }\n\n    %grid-excel-move__buttons {\n        display: flex;\n        justify-content: space-between;\n\n        [igxButton] {\n            flex-grow: 1;\n            width: rem(104px);\n\n            @include if-rtl() {\n                &:last-of-type {\n                    order: -1;\n                }\n\n                &:last-of-type > igx-icon {\n                    order: -1;\n                }\n\n                &:first-of-type > igx-icon {\n                    order: 2;\n                }\n            }\n        }\n\n        igx-icon {\n            font-size: rem(18px);\n            width: rem(18px);\n            height: rem(18px);\n        }\n\n        igx-icon + span,\n        span + igx-icon {\n            margin-left: rem(8px);\n        }\n    }\n\n    %grid-excel-actions__action {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        padding: rem(8px) rem(16px);\n        margin: 0 -#{rem(16px)};\n        cursor: pointer;\n        color: igx-color($palette, 'grays', 700);\n        outline-style: none;\n\n        &:hover,\n        &:focus {\n            background: igx-color($palette, 'grays', 100);\n        }\n\n        @include if-rtl() {\n            igx-icon {\n                transform: scaleX(-1);\n            }\n        }\n    }\n\n    %grid-excel-actions__action--disabled {\n        color: igx-color($palette, 'grays', 400);\n        pointer-events: none;\n    }\n\n    %grid-excel-main {\n        display: block;\n        padding: 0 rem(16px);\n\n        igx-list {\n            margin: rem(8px) -#{rem(16px)} 0;\n            border-top: 1px dashed igx-color($palette, 'grays', 300);\n            border-bottom: 1px dashed igx-color($palette, 'grays', 300);\n        }\n    }\n\n    %grid-excel-menu--cosy {\n        %grid-excel-menu__header {\n            justify-content: space-between;\n            padding: rem(8px);\n        }\n\n        %grid-excel-sort {\n            padding: rem(8px);\n        }\n\n        %grid-excel-actions {\n            padding: rem(8px);\n        }\n\n        %grid-excel-actions__action {\n            padding: rem(8px);\n            margin: 0 -#{rem(8px)};\n        }\n\n        %grid-excel-main {\n            padding: 0 rem(8px);\n        }\n\n        igx-list {\n            margin: rem(8px) -#{rem(8px)} 0;\n        }\n\n        %grid-excel-menu__footer {\n            padding: rem(8px);\n        }\n    }\n\n    %grid-excel-menu--compact {\n        %grid-excel-menu__header {\n            justify-content: space-between;\n            padding: rem(4px);\n        }\n\n        %grid-excel-sort {\n            padding: rem(4px);\n\n            @extend %grid-excel-action--compact;\n\n            igx-buttongroup {\n                width: rem(208px);\n\n                [igxButton] > igx-icon + span {\n                    margin-#{$left}: rem(8px);\n                }\n            }\n        }\n\n        %grid-excel-move {\n            @extend %grid-excel-action--compact;\n            margin-bottom: 0;\n        }\n\n        %grid-excel-actions {\n            padding: rem(4px);\n        }\n\n        %grid-excel-actions__action {\n            padding: rem(4px);\n            margin: 0 -#{rem(4px)};\n        }\n\n        %grid-excel-main {\n            padding: 0 rem(4px);\n        }\n\n        igx-list {\n            margin: rem(8px) -#{rem(4px)} 0;\n        }\n\n        %grid-excel-menu__footer {\n            padding: rem(8px) rem(4px);\n        }\n    }\n\n    %grid-excel-menu__secondary {\n        width: 520px;\n        min-width: 520px;\n        background: --var($theme, 'filtering-row-background');\n        box-shadow: igx-elevation($elevations, 12);\n        border-radius: rem(4px);\n    }\n\n    %grid-excel-menu__secondary--cosy {\n        %grid-excel-menu__header {\n            padding: rem(8px);\n        }\n\n        %grid-excel-menu__condition {\n            padding: 0 rem(8px);\n        }\n\n        %grid-excel-menu__add-filter {\n            margin: 0 rem(8px) rem(8px);\n        }\n\n        %grid-excel-menu__footer {\n            padding: rem(8px);\n        }\n    }\n\n    %grid-excel-menu__secondary--compact {\n        %grid-excel-menu__header {\n            padding: rem(4px);\n        }\n\n        %grid-excel-menu__condition {\n            padding: 0 rem(4px);\n        }\n\n        %grid-excel-menu__add-filter {\n            margin: 0 rem(4px) rem(4px);\n        }\n\n        %grid-excel-menu__footer {\n            padding: rem(8px) rem(4px);\n        }\n    }\n\n    %grid-excel-menu__secondary-header {\n        border-bottom: 1px solid igx-color($palette, 'grays', 300);\n    }\n\n    %grid-excel-menu__secondary-main {\n        height: 232px;\n        overflow: auto;\n    }\n\n    %grid-excel-menu__secondary-footer {\n        border-top: 1px dashed igx-color($palette, 'grays', 300);\n\n        [igxButton] {\n            flex-grow: 0;\n        }\n    }\n\n    %grid-excel-menu__condition {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        padding: 0 rem(16px);\n\n        igx-input-group {\n            flex-grow: 1;\n            flex-basis: 40%;\n            margin: rem(16px) 0;\n\n            ~ igx-input-group,\n            ~ igx-date-picker {\n                margin-#{$left}: rem(16px);\n            }\n        }\n\n        [igxButton='icon'] {\n            margin-#{$left}: rem(16px);\n        }\n    }\n\n    %grid-excel-menu__add-filter {\n        margin: 0 rem(16px) rem(16px);\n\n        igx-icon {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n            margin-#{$right}: rem(8px);\n        }\n    }\n}\n\n/// Adds typography styles for the excel-style-filtering component.\n/// Uses the 'body-1', 'caption'\n/// category from the typographic scale.\n/// @group typography\n/// @access private\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(helper-text: 'caption', input-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin _excel-filtering-typography($type-scale, $categories: (\n    header-comfortable: 'overline',\n    header-compact: 'subtitle-1')\n) {\n    $header-comfortable: map-get($categories, 'header-comfortable');\n    $header-compact: map-get($categories, 'header-compact');\n\n\n    %grid-excel-menu {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'h6')\n        }\n    }\n\n    %grid-excel-menu__secondary {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'h6');\n        }\n    }\n\n    %grid-excel-sort,\n    %grid-excel-move {\n        header {\n            @include igx-type-style($type-scale, 'overline');\n        }\n    }\n\n    %grid-excel-menu--cosy {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'h6')\n        }\n    }\n\n    %grid-excel-menu--compact {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'subtitle-1')\n        }\n\n        %grid-excel-sort,\n        %grid-excel-move {\n            header {\n                @include igx-type-style($type-scale, 'body-2');\n                text-transform: capitalize;\n            }\n        }\n\n        %grid-excel-actions__action {\n            span {\n                @include igx-type-style($type-scale, 'body-2');\n            }\n        }\n\n        %cbx-label {\n            @include igx-type-style($type-scale, 'body-2');\n        }\n    }\n\n    %grid-excel-menu__secondary--cosy {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'h6');\n        }\n    }\n\n    %grid-excel-menu__secondary--compact {\n        %grid-excel-menu__header > h4 {\n            @include igx-type-style($type-scale, 'subtitle-1');\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $idle-text-color [null] - The input text color in the idle state.\n/// @param {Color} $filled-text-color [null] - The input text color in the filled state.\n/// @param {Color} $focused-text-color [null] - The input text color in the focused state.\n/// @param {Color} $disabled-text-color [null] - The input text color in the disabled state.\n///\n/// @param {Color} $input-prefix-color [null] - The input prefix color in the idle state.\n/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state.\n///\n/// @param {Color} $idle-secondary-color [null] - The label color in the idle state.\n/// @param {Color} $filled-secondary-color [null] - The label color in the filled state.\n/// @param {Color} $focused-secondary-color [null] - The label color in the focused state.\n///\n/// @param {Color} $idle-bottom-line-color [null] - The bottom line and border colors in the idle state.\n/// @param {Color} $hover-bottom-line-color [null] - The bottom line and border colors in the hover state.\n/// @param {Color} $focused-bottom-line-color [null] - The bottom line and border colors in the focused state.\n/// @param {Color} $interim-bottom-line-color [null] - The bottom line and border colors during the to-focused transition.\n/// @param {Color} $disabled-bottom-line-color [null] - The bottom line and border colors in the disabled state.\n///\n/// @param {Color} $border-color [null] - The border color for input groups of type border and fluent.\n/// @param {Color} $hover-border-color [null] - The hover input border for input groups of type border and fluent.\n/// @param {Color} $focused-border-color [null] - The focused input border color for input groups of type border and fluent.\n/// @param {Color} $disabled-border-color [null] - The disabled border color for input groups of type border and fluent.\n///\n/// @param {Color} $box-background [null] - The background color of an input group of type box.\n/// @param {Color} $box-disabled-background [null] - The background color of an input group of type box in the disabled state.\n///\n/// @param {Color} $border-background [null] - The background color of an input group of type border.\n/// @param {Color} $border-disabled-background [null] - The background color of an input group of type border in the disabled state.\n///\n/// @param {Color} $search-background [null] - The background color of an input group of type search.\n/// @param {Color} $search-disabled-background [null] - The background color of an input group of type search in the disabled state.\n///\n/// @param {box-shadow} $search-resting-shadow [null] - The shadow color of an input group of type search in its resting state.\n/// @param {box-shadow} $search-hover-shadow [null] - The shadow color of an input group of type search in its hover state.\n/// @param {box-shadow} $search-disabled-shadow [null] - The shadow color of an input group of type search in its disabled state.\n///\n/// @param {Color} $success-secondary-color [null] - The success color used in the valid state.\n/// @param {Color} $warning-secondary-color [null] - The warning color used in the warning state.\n/// @param {Color} $error-secondary-color [null] - The error color used in the error state.\n///\n/// @param {border-radius} $box-border-radius [null] - The border radius used for box input.\n/// @param {border-radius} $border-border-radius [null] - The border radius used for border input.\n/// @param {border-radius} $search-border-radius [null] - The border radius used for search input.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the focused border and label colors\n///   $my-input-group-theme: igx-input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);\n///   // Pass the theme to the igx-input-group component mixin\n///   @include igx-input-group($my-input-group-theme);\n@function igx-input-group-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $box-border-radius: null,\n    $border-border-radius: null,\n    $search-border-radius: null,\n\n    $idle-text-color: null,\n    $filled-text-color: null,\n    $focused-text-color: null,\n    $disabled-text-color: null,\n\n    $idle-secondary-color: null,\n    $filled-secondary-color: null,\n    $focused-secondary-color: null,\n\n    $idle-bottom-line-color: null,\n    $hover-bottom-line-color: null,\n    $focused-bottom-line-color: null,\n    $interim-bottom-line-color: null,\n    $disabled-bottom-line-color: null,\n\n    $border-color: null,\n    $hover-border-color: null,\n    $focused-border-color: null,\n    $disabled-border-color: null,\n\n    $box-background: null,\n    $box-disabled-background: null,\n    $border-background: null,\n    $border-disabled-background: null,\n\n    $search-background: null,\n    $search-disabled-background: null,\n\n    $search-resting-shadow: null,\n    $search-hover-shadow: null,\n    $search-disabled-shadow: null,\n\n    $success-secondary-color: null,\n    $warning-secondary-color: null,\n    $error-secondary-color: null,\n\n    $placeholder-color: null,\n    $disabled-placeholder-color: null,\n\n    $input-prefix-color: null,\n    $input-prefix-background: null,\n    $input-suffix-color: null,\n    $input-suffix-background: null\n) {\n    $name: 'igx-input-group';\n    $input-group-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $input-group-schema: map-get($schema, $name);\n    } @else {\n        $input-group-schema: $schema;\n    }\n\n    $theme: apply-palette($input-group-schema, $palette);\n\n    $box-border-radius: round-borders(\n        if($box-border-radius, $box-border-radius, map-get($input-group-schema, 'box-border-radius')), 0, 20px\n    );\n    $border-border-radius: round-borders(\n        if($border-border-radius, $border-border-radius, map-get($input-group-schema, 'border-border-radius')), 0, 20px\n    );\n    $search-border-radius: round-borders(\n        if($search-border-radius, $search-border-radius, map-get($input-group-schema, 'search-border-radius')), 0, 20px\n    );\n\n    $search-resting-elevation: map-get($input-group-schema, 'search-resting-elevation');\n    $search-hover-elevation: map-get($input-group-schema, 'search-hover-elevation');\n    $search-disabled-elevation: map-get($input-group-schema, 'search-disabled-elevation');\n\n    @if not($placeholder-color) and $box-background {\n        $placeholder-color: text-contrast($box-background);\n    }\n\n    @if not($placeholder-color) and $search-background {\n        $placeholder-color: text-contrast($search-background);\n    }\n\n    @if not($search-resting-shadow) {\n        $search-resting-shadow: igx-elevation($elevations, $search-resting-elevation);\n    }\n\n    @if not($search-hover-shadow) {\n        $search-hover-shadow: igx-elevation($elevations, $search-hover-elevation);\n    }\n\n    @if not($search-disabled-shadow) {\n        $search-disabled-shadow: igx-elevation($elevations, $search-disabled-elevation);\n    }\n\n    @return extend($theme, (\n        palette: $palette,\n        name: $name,\n\n        idle-text-color: $idle-text-color,\n        filled-text-color: $filled-text-color,\n        focused-text-color: $focused-text-color,\n        disabled-text-color: $disabled-text-color,\n\n        box-border-radius: $box-border-radius,\n        border-border-radius: $border-border-radius,\n        search-border-radius: $search-border-radius,\n\n        idle-secondary-color: $idle-secondary-color,\n        filled-secondary-color: $filled-secondary-color,\n        focused-secondary-color: $focused-secondary-color,\n\n        idle-bottom-line-color: $idle-bottom-line-color,\n        hover-bottom-line-color: $hover-bottom-line-color,\n        focused-bottom-line-color: $focused-bottom-line-color,\n        interim-bottom-line-color: $interim-bottom-line-color,\n        disabled-bottom-line-color: $disabled-bottom-line-color,\n\n        border-color: $border-color,\n        hover-border-color: $hover-border-color,\n        focused-border-color: $focused-border-color,\n        disabled-border-color: $disabled-border-color,\n\n        box-background: $box-background,\n        box-disabled-background: $box-disabled-background,\n\n        border-background: $border-background,\n        border-disabled-background: $border-disabled-background,\n\n        search-background: $search-background,\n        search-disabled-background: $search-disabled-background,\n\n        search-resting-shadow: $search-resting-shadow,\n        search-hover-shadow: $search-hover-shadow,\n        search-disabled-shadow: $search-disabled-shadow,\n\n        success-secondary-color: $success-secondary-color,\n        warning-secondary-color: $warning-secondary-color,\n        error-secondary-color: $error-secondary-color,\n        placeholder-color: $placeholder-color,\n        disabled-placeholder-color: $disabled-placeholder-color,\n\n        input-prefix-color: $input-prefix-color,\n        input-prefix-background: $input-prefix-background,\n        input-suffix-color: $input-suffix-color,\n        input-suffix-background: $input-suffix-background\n    ));\n}\n\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires --var\n@mixin igx-input-group($theme) {\n    @include igx-root-css-vars($theme);\n\n    $palette: map-get($theme, 'palette');\n\n    $transition-timing: .25s $ease-out-cubic;\n\n    $required-symbol: '*';\n    $required-symbol-margin: 2px;\n\n    // This creates an inverse relationship\n    // between the value of the base scale size and\n    // the sizing of all inner elements.\n    // i.e. the bigger the scale size,\n    // the smaller the padding of the inner items.\n    $base-scale-size: (\n        'comfortable': 16px,\n        'cosy': 19px,\n        'compact': 22px\n    );\n\n    $search-border-width: map-get((\n        material: 0,\n        fluent: 1px,\n    ), map-get($theme, variant));\n\n    $prefix-margin: map-get((\n        material: 0,\n        fluent: 8px,\n    ), map-get($theme, variant));\n\n    $prefix-height-cosy: map-get((\n        material: rem(32px, map-get($base-scale-size, 'cosy')),\n        fluent: auto,\n    ), map-get($theme, variant));\n\n    $prefix-height-compact: map-get((\n        material: rem(32px, map-get($base-scale-size, 'compact')),\n        fluent: auto,\n    ), map-get($theme, variant));\n\n    $prefix-height-comfortable: map-get((\n        material: rem(32px, map-get($base-scale-size, 'comfortable')),\n        fluent: auto,\n    ), map-get($theme, variant));\n\n    $hint-padding-top: rem(6px, map-get($base-scale-size, 'comfortable'));\n    $hint--box-margin: rem(12px, map-get($base-scale-size, 'comfortable'));\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %form-group-display {\n        position: relative;\n        display: block;\n        color: --var($theme, 'idle-text-color');\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix;\n            outline-style: none;\n        }\n\n        input,\n        textarea {\n            font: inherit;\n            margin: 0;\n        }\n\n        textarea {\n            overflow: auto;\n        }\n\n        // Don't show the number spinner\n        input[type='number']::-webkit-inner-spin-button {\n            -webkit-appearance: none;\n            height: auto;\n        }\n\n        input[type='search']::-webkit-search-cancel-button,\n        input[type='search']::-webkit-search-decoration {\n            -webkit-appearance: none;\n        }\n    }\n\n    %form-group-display--cosy {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--cosy;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix--cosy;\n        }\n    }\n\n    %form-group-display--compact {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--compact;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix--compact;\n        }\n    }\n\n    %form-group-display--no-margin {\n        margin-top: 0;\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--box;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix--box;\n        }\n    }\n\n    %form-group-display--no-margin-cosy {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--box-cosy;\n        }\n    }\n\n    %form-group-display--no-margin-compact {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--box-compact;\n        }\n    }\n\n    %form-group-display--error {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix--error;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix--error;\n        }\n    }\n\n    %form-group-box-wrapper {\n        border-radius: --var($theme, 'box-border-radius');\n        overflow: hidden;\n    }\n\n    %form-group-display--hover {\n        cursor: pointer;\n    }\n\n    %form-group-display--disabled {\n        pointer-events: none;\n        user-select: none;\n        color: --var($theme, 'disabled-text-color');\n    }\n\n    %form-group-bundle {\n        position: relative;\n        display: flex;\n        align-items: center;\n        flex-flow: row nowrap;\n        padding-top: rem(18px, map-get($base-scale-size, 'comfortable'));\n        box-shadow: inset 0 -1px 0 0 --var($theme, 'idle-bottom-line-color');\n        transition: box-shadow $transition-timing, color $transition-timing;\n    }\n\n    %form-group-bundle--cosy {\n        padding-top: rem(18px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-bundle--compact {\n        padding-top: rem(18px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-bundle--box {\n        padding: 0 rem(16px, map-get($base-scale-size, 'comfortable'));\n        background: --var($theme, 'box-background');\n        box-shadow: inset 0 -2px 0 0 --var($theme, 'idle-bottom-line-color');\n\n        %form-group-label--box + %form-group-input--box {\n            transform: translateY(0);\n        }\n    }\n\n    %form-group-bundle--box-cosy {\n        padding: 0 rem(16px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-bundle--box-compact {\n        padding: 0 rem(16px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-bundle--hover {\n        cursor: pointer;\n        box-shadow: inset 0 -2px 0 0 --var($theme, 'hover-bottom-line-color');\n    }\n\n    %form-group-bundle--focus {\n        caret-color: --var($theme, 'focused-secondary-color');\n        box-shadow: inset 0 -2px 0 0 --var($theme, 'interim-bottom-line-color');\n    }\n\n    %form-group-bundle--success {\n        caret-color: --var($theme, 'success-secondary-color');\n        box-shadow: inset 0 -1px 0 0 --var($theme, 'success-secondary-color');\n    }\n\n    %form-group-bundle--error {\n        caret-color: --var($theme, 'error-secondary-color');\n        box-shadow: inset 0 -1px 0 0 --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-bundle--disabled {\n        box-shadow: none;\n        background-image: linear-gradient(to #{$left}, --var($theme, 'disabled-bottom-line-color') 40%, transparent 10%);\n        background-position: bottom;\n        background-size: 4px 1px;\n        background-repeat: repeat-x;\n    }\n\n    %form-group-bundle--box-disabled {\n        background: --var($theme, 'box-disabled-background');\n    }\n\n    %form-group-bundle--border {\n        padding: 0 rem(16px, map-get($base-scale-size, 'comfortable'));\n        box-shadow: inset 0 0 0 1px --var($theme, 'border-color');\n        border-radius: --var($theme, 'border-border-radius');\n        background: --var($theme, 'border-background');\n\n        %form-group-label--box + %form-group-input--box {\n            transform: translateY(0);\n        }\n    }\n\n    %form-group-bundle--border-cosy {\n        padding: 0 rem(16px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-bundle--border-compact {\n        padding: 0 rem(16px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-bundle-border--hover {\n        box-shadow: inset 0 0 0 2px --var($theme, 'hover-border-color');\n    }\n\n    %form-group-bundle-border--focus {\n        box-shadow: inset 0 0 0 2px --var($theme, 'focused-border-color');\n    }\n\n    %form-group-bundle-border--error {\n        box-shadow: inset 0 0 0 2px --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-bundle-border--success {\n        box-shadow: inset 0 0 0 2px --var($theme, 'success-secondary-color');\n    }\n\n    %form-group-bundle-border--disabled {\n        background: --var($theme, 'border-disabled-background');\n        box-shadow: inset 0 0 0 1px --var($theme, 'disabled-border-color');\n    }\n\n\n    //// FLUENT /////\n    %igx-input-group-fluent {\n        display: flex;\n        flex-direction: column;\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent;\n            outline-style: none;\n        }\n\n        select {\n            width: calc(100% + #{rem(8px)});\n            margin-#{$left}: rem(-8px) !important;\n            cursor: pointer !important;\n        }\n    }\n\n    %igx-input-group-fluent-search {\n        display: flex;\n        flex-direction: column;\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent-search;\n            outline-style: none;\n            overflow: hidden;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent-search;\n            outline-style: none;\n        }\n    }\n\n    %igx-input-group-fluent-search--focused {\n        igx-prefix,\n        [igxPrefix] {\n            visibility: hidden;\n            width: 0;\n            padding-#{$left}: 0 !important;\n        }\n    }\n\n    %igx-input-group-fluent--cosy {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent--cosy;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent--cosy;\n            outline-style: none;\n        }\n    }\n\n    %igx-input-group-fluent-search--cosy {\n        display: flex;\n        flex-direction: column;\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent-search--cosy;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent-search--cosy;\n            outline-style: none;\n        }\n    }\n\n    %igx-input-group-fluent--compact {\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent--compact;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent--compact;\n            outline-style: none;\n        }\n    }\n\n    %igx-input-group-fluent-search--compact {\n        display: flex;\n        flex-direction: column;\n\n        igx-prefix,\n        [igxPrefix] {\n            @extend %form-group-prefix-fluent-search--compact;\n            outline-style: none;\n        }\n\n        igx-suffix,\n        [igxSuffix] {\n            @extend %form-group-suffix-fluent-search--compact;\n            outline-style: none;\n        }\n    }\n\n    %form-group-bundle-required--fluent {\n        &::after {\n            content: '*';\n            position: absolute;\n            top: rem(-8px);\n            #{$left}: calc(100% + #{rem(4px)});\n            color: --var($theme, 'error-secondary-color');\n        }\n    }\n\n    %fluent-label + %form-group-bundle-required--fluent {\n        &::after {\n            display: none;\n        }\n    }\n\n    // Bundle\n    %form-group-bundle--fluent {\n        padding: 0;\n        min-height: 32px;\n        border: 1px solid --var($theme, 'border-color');\n        box-shadow: none;\n        border-radius: --var($theme, 'border-border-radius');\n        background: --var($theme, 'border-background');\n        position: relative;\n    }\n\n    %form-group-bundle--fluent--hover {\n        border-color: --var($theme, 'hover-border-color');\n        box-shadow: none;\n    }\n\n    %form-group-bundle--fluent--focus {\n        border-color: --var($theme, 'focused-border-color');\n        box-shadow: none;\n    }\n\n    %form-group-bundle--fluent--hover-disabled,\n    %form-group-bundle--fluent-disabled {\n        border-color: --var($theme, 'disabled-border-color');\n        background: --var($theme, 'border-disabled-background');\n    }\n\n    %form-group-bundle-error--fluent--hover,\n    %form-group-bundle-error--fluent {\n        border-color: --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-bundle-success--fluent--hover,\n    %form-group-bundle-success--fluent {\n        border-color: --var($theme, 'success-secondary-color');\n    }\n\n    %fluent-input {\n        padding: 0;\n        margin: 0;\n        border: none;\n    }\n\n    %fluent-input-disabled {\n        color: --var($theme, 'disabled-text-color');\n    }\n\n    %form-group-bundle-main--fluent {\n        padding-#{$left}: rem(8px);\n    }\n\n    igx-prefix + %form-group-bundle-main--fluent,\n    [igx-prefix] + %form-group-bundle-main--fluent {\n        padding-#{$left}: 0;\n    }\n\n    %fluent-placeholder-label {\n        transform: translateY(0) scale(1);\n    }\n\n    %fluent-label {\n        padding: rem(5px) 0;\n        line-height: normal !important;\n        position: static;\n        transform: translateY(0);\n        transform-origin: top #{$left};\n        margin-top: 0 !important;\n        height: auto;\n        color: igx-color(map-get($theme, 'palette'), 'grays', 800);\n    }\n\n    %fluent-label-success {\n        color: --var($theme, 'idle-text-color');\n    }\n\n    %fluent-label-error {\n        color: --var($theme, 'idle-text-color');\n    }\n\n    %fluent-label-disabled {\n        color: igx-color(map-get($theme, 'palette'), 'grays', 500);\n    }\n\n    %fluent-label-filled {\n        transform: translateY(0);\n    }\n\n    %fluent-label-focused {\n        color: igx-color(map-get($theme, 'palette'), 'grays', 800);\n        transform: translateY(0) scale(1);\n    }\n\n    %fluent-textarea {\n        padding: 0;\n    }\n\n    %form-group-bundle--search {\n        padding: 0 rem(16px, map-get($base-scale-size, 'comfortable'));\n        border-radius: --var($theme, 'search-border-radius');\n        background: --var($theme, 'search-background');\n        box-shadow: --var($theme, 'search-resting-shadow');\n        border: $search-border-width solid --var($theme, 'border-color');\n\n        %form-group-label--box + %form-group-input--box {\n            transform: translateY(0);\n        }\n    }\n\n    %form-group-bundle--search-cosy {\n        padding: 0 rem(16px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-bundle--search-compact {\n        padding: 0 rem(16px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-bundle-search--hover {\n        box-shadow: --var($theme, 'search-hover-shadow');\n        border-color: --var($theme, 'hover-border-color');\n    }\n\n    %form-group-bundle-search--focus {\n        box-shadow: --var($theme, 'search-hover-shadow');\n        border-color: --var($theme, 'hover-border-color');\n    }\n\n    %form-group-bundle-search--error {\n        box-shadow: --var($theme, 'search-hover-shadow');\n        border-color: --var($theme, 'search-hover-shadow');\n    }\n\n    %form-group-bundle-search--success {\n        box-shadow: --var($theme, 'search-hover-shadow');\n        border-color: --var($theme, 'search-hover-shadow');\n    }\n\n    %form-group-bundle-search--disabled {\n        background: --var($theme, 'search-disabled-background');\n        box-shadow: --var($theme, 'search-disabled-shadow');\n        border-color: --var($theme, 'disabled-border-color');\n    }\n\n    %form-group-bundle-main {\n        position: relative;\n        flex-grow: 1;\n    }\n\n    %form-group-bundle-main--box {\n        padding-top: rem(18px, map-get($base-scale-size, 'comfortable'));\n    }\n\n    %form-group-bundle-main--box-cosy {\n        padding-top: rem(18px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-bundle-main--box-compact {\n        padding-top: rem(18px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-label {\n        @include ellipsis();\n        position: absolute;\n        width: 100%;\n        transform: translateY(50%); /* 8px, base is 16px */\n        line-height: 1 !important;\n        height: rem(18px);\n        backface-visibility: hidden;\n        will-change: transform;\n        transform-origin: top #{$left};\n        transition: transform $transition-timing, color $transition-timing, margin $transition-timing;\n    }\n\n    %form-group-label--cosy {\n        margin-top: rem(-2px);\n    }\n\n    %form-group-label--compact {\n        margin-top: rem(-4px);\n    }\n\n    %form-group-label--box {\n        transform: translateY(0);\n    }\n\n    %form-group-label--float {\n        overflow: visible;\n        transform: translateY(-50%) scale(.75);\n        margin-top: auto;\n    }\n\n    %form-group-label--fixed {\n        transition: color $transition-timing;\n    }\n\n    %form-group-label--focus {\n        color: --var($theme, 'focused-secondary-color');\n    }\n\n    %form-group-label--success {\n        color: --var($theme, 'success-secondary-color');\n    }\n\n    %form-group-label--error {\n        color: --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-label--required {\n        &::after {\n            content: '#{$required-symbol}';\n            font-size: inherit;\n            vertical-align: top;\n            margin-#{$left}: $required-symbol-margin; /* 2px base is 16px */\n            display: inline-block;\n        }\n    }\n\n    %form-group-input {\n        position: relative;\n        display: block;\n        border: none;\n        height: rem(32px, map-get($base-scale-size, 'comfortable'));\n        line-height: 0 !important; /* resets typography styles */\n        width: 100%;\n        min-width: 0;\n        overflow: visible;\n        background: transparent;\n        color: --var($theme, 'filled-text-color');\n        outline-style: none;\n        box-shadow: none;\n        border-top: rem(3px) solid transparent;\n        padding-bottom: rem(3px);\n\n        &::-webkit-input-placeholder {\n            line-height: normal;\n        }\n\n        &::placeholder {\n            color: --var($theme, 'placeholder-color');\n            opacity: 1;\n        }\n    }\n\n    %form-group-input--cosy {\n        height: rem(32px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-input--compact {\n        font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact'));\n        height: rem(32px, map-get($base-scale-size, 'compact'));\n    }\n\n    %chrome-autofill-fix {\n        &:-webkit-autofill,\n        &:-webkit-autofill:hover,\n        &:-webkit-autofill:focus,\n        &:-webkit-autofill:active { -webkit-transition-delay: 99999s; }\n    }\n\n    %edge-clear-icon-fix {\n        &::-ms-clear {\n            display: none;\n        }\n    }\n\n    %form-group-input--box {\n        transform: translateY(-25%);\n    }\n\n    %form-group-input--hover {\n        cursor: pointer;\n    }\n\n    %form-group-input--focus {\n        cursor: text;\n        color: --var($theme, 'focused-text-color');\n    }\n\n    %form-group-input--disabled {\n        color: --var($theme, 'disabled-text-color');\n\n        &::placeholder {\n            color: --var($theme, 'disabled-placeholder-color');\n        }\n    }\n\n    %form-group-textarea {\n        min-height: rem(82px, map-get($base-scale-size, 'comfortable')); /* 3 lines * 22px + 8px bottom padding + 8px top padding */\n        margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'comfortable'))}; /* this fixes resizing in chrome !?!? */\n        line-height: normal !important; /* resets typography styles */\n        height: auto;\n        resize: vertical;\n        overflow: hidden;\n    }\n\n    %form-group-textarea--cosy {\n        min-height: rem(82px, map-get($base-scale-size, 'cosy'));\n        margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'cosy'))};\n    }\n\n    %form-group-textarea--compact {\n        min-height: rem(82px, map-get($base-scale-size, 'compact'));\n        margin-#{$right}: -#{rem(16px, map-get($base-scale-size, 'compact'))};\n    }\n\n    %form-group-textarea--box {\n        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'comfortable')) * 2}); /* add the padding to the width */\n        margin: 0 -#{rem(16px, map-get($base-scale-size, 'comfortable'))};\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'comfortable'));\n    }\n\n    %form-group-textarea--box-cosy {\n        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'cosy')) * 2}); /* add the padding to the width */\n        margin: 0 -#{rem(16px, map-get($base-scale-size, 'cosy'))};\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-textarea--box-compact {\n        width: calc(100% + #{rem(16px, map-get($base-scale-size, 'compact')) * 2}); /* add the padding to the width */\n        margin: 0 -#{rem(16px, map-get($base-scale-size, 'compact'))};\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));\n        padding-#{$left}: rem(16px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-prefix,\n    %form-group-suffix {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        height: $prefix-height-comfortable;\n        transition: color $transition-timing;\n    }\n\n    %form-group-prefix {\n        @include if-ltr() {\n            padding: rem(8px, map-get($base-scale-size, 'comfortable'))\n                rem(8px, map-get($base-scale-size, 'comfortable'))\n                rem(8px, map-get($base-scale-size, 'comfortable'))\n                0;\n        }\n\n        @include if-rtl() {\n            padding: rem(8px, map-get($base-scale-size, 'comfortable'))\n                0\n                rem(8px, map-get($base-scale-size, 'comfortable'))\n                rem(8px, map-get($base-scale-size, 'comfortable'));\n        }\n    }\n\n    %form-group-suffix {\n        padding: rem(8px, map-get($base-scale-size, 'comfortable')) 0;\n    }\n\n    %form-group-prefix--cosy,\n    %form-group-suffix--cosy {\n        height: $prefix-height-cosy;\n    }\n\n    %form-group-prefix--compact,\n    %form-group-suffix--compact {\n        font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact'));\n        height: rem(32px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-prefix--cosy {\n        @include if-ltr() {\n            padding: rem(8px, map-get($base-scale-size, 'cosy'))\n                rem(8px, map-get($base-scale-size, 'cosy'))\n                rem(8px, map-get($base-scale-size, 'cosy'))\n                0;\n        }\n\n        @include if-rtl() {\n            padding: rem(8px, map-get($base-scale-size, 'cosy'))\n                0\n                rem(8px, map-get($base-scale-size, 'cosy'))\n                rem(8px, map-get($base-scale-size, 'cosy'));\n        }\n    }\n\n    %form-group-prefix--compact {\n        @include if-ltr() {\n            padding: rem(8px, map-get($base-scale-size, 'compact'))\n                rem(8px, map-get($base-scale-size, 'compact'))\n                rem(8px, map-get($base-scale-size, 'compact'))\n                0;\n        }\n\n        @include if-rtl() {\n            padding: rem(8px, map-get($base-scale-size, 'compact'))\n                0\n                rem(8px, map-get($base-scale-size, 'compact'))\n                rem(8px, map-get($base-scale-size, 'compact'));\n        }\n    }\n\n    %form-group-suffix--cosy {\n        padding: rem(8px, map-get($base-scale-size, 'cosy')) 0;\n    }\n\n    %form-group-suffix--compact {\n        padding: rem(8px, map-get($base-scale-size, 'compact')) 0;\n    }\n\n    %form-group-prefix-fluent {\n        color: --var($theme, 'input-prefix-color');\n        background: --var($theme, 'input-prefix-background');\n\n        %igx-icon-display {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n        }\n\n        &:last-of-type {\n            margin-#{$right}: $prefix-margin;\n        }\n\n        padding: rem(8px, map-get($base-scale-size, 'comfortable'));\n    }\n\n    %form-group-prefix-fluent-search {\n        %igx-icon-display {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n        }\n\n        padding: rem(8px, map-get($base-scale-size, 'comfortable'));\n\n        &:last-of-type {\n            margin-#{$right}: 0;\n        }\n    }\n\n    %form-group-suffix-fluent {\n        color: --var($theme, 'input-suffix-color');\n        background: --var($theme, 'input-suffix-background');\n\n        %igx-icon-display {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n        }\n\n        &:first-of-type {\n            margin-#{$left}: $prefix-margin;\n        }\n\n        padding: rem(8px, map-get($base-scale-size, 'comfortable'));\n    }\n\n    %form-group-suffix-fluent-search {\n        %igx-icon-display {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n        }\n        padding: rem(8px, map-get($base-scale-size, 'comfortable'));\n\n        &:first-of-type {\n            margin-#{$left}: 0;\n        }\n    }\n\n    %form-group-prefix-fluent-search--cosy,\n    %form-group-suffix-fluent-search--cosy,\n    %form-group-prefix-fluent--cosy,\n    %form-group-suffix-fluent--cosy {\n        height: $prefix-height-cosy;\n    }\n\n    %form-group-prefix-fluent-search--compact,\n    %form-group-suffix-fluent-search--compact,\n    %form-group-prefix-fluent--compact,\n    %form-group-suffix-fluent--compact {\n        font-size: rem(map-get($base-scale-size, 'compact') - 1px, map-get($base-scale-size, 'compact'));\n        height: $prefix-height-compact;\n    }\n\n    %form-group-prefix-fluent-search--cosy,\n    %form-group-prefix-fluent--cosy {\n        padding: rem(8px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-prefix-fluent-search--compact,\n    %form-group-prefix-fluent--compact {\n        padding: rem(8px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-suffix-fluent-search--cosy,\n    %form-group-suffix-fluent--cosy {\n        padding: rem(8px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-suffix-fluent-search--compact,\n    %form-group-suffix-fluent--compact {\n        padding: rem(8px, map-get($base-scale-size, 'compact'));\n    }\n\n    /// FLUENT END ///\n    %form-group-prefix--box {\n        @include if-ltr() {\n            padding: 0 rem(8px, map-get($base-scale-size, 'comfortable')) 0 0;\n        }\n\n        @include if-rtl() {\n            padding: 0 0 0 rem(8px, map-get($base-scale-size, 'comfortable')); /* 8px, base is 16px */\n        }\n    }\n\n    %form-group-prefix--box-cosy {\n        @include if-ltr() {\n            padding: 0 rem(8px, map-get($base-scale-size, 'cosy')) 0 0;\n        }\n\n        @include if-rtl() {\n            padding: 0 0 0 rem(8px, map-get($base-scale-size, 'cosy')); /* 8px, base is 16px */\n        }\n    }\n\n    %form-group-prefix--box-compact {\n        @include if-ltr() {\n            padding: 0 rem(8px, map-get($base-scale-size, 'compact')) 0 0;\n        }\n\n        @include if-rtl() {\n            padding: 0 0 0 rem(8px, map-get($base-scale-size, 'compact')); /* 8px, base is 16px */\n        }\n    }\n\n    %form-group-suffix--box {\n        padding: 0;\n    }\n\n    %form-group-prefix--error,\n    %form-group-suffix--error {\n        color: --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-border {\n        height: 2px; /* 2px, when base is 16px */\n        margin-top: -2px; /* 2px, when base is 16px */\n        transform: scaleX(0);\n        transform-origin: center;\n        background: --var($theme, 'focused-secondary-color');\n    }\n\n    %form-group-border--focus {\n        transform: scaleX(1);\n        transition: transform $transition-timing;\n    }\n\n    %form-group-border--success {\n        background: --var($theme, 'success-secondary-color');\n    }\n\n    %form-group-border--warning {\n        background: --var($theme, 'warning-secondary-color');\n    }\n\n    %form-group-border--error {\n        background: --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-border--hidden {\n        display: none;\n    }\n\n    %form-group-helper {\n        position: relative;\n        display: flex;\n        justify-content: space-between;\n        padding-top: rem(6px, map-get($base-scale-size, 'comfortable'));\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %form-group-help--cosy {\n        padding-top: rem(6px, map-get($base-scale-size, 'cosy'));\n    }\n\n    %form-group-help--compact {\n        padding-top: rem(6px, map-get($base-scale-size, 'compact'));\n    }\n\n    %form-group-helper--box {\n        margin-#{$left}: $hint--box-margin; /* 16px, base is 12px */\n        margin-#{$right}: $hint--box-margin; /* 16px, base is 12px */\n    }\n\n    %form-group-helper--success {\n        color: --var($theme, 'success-secondary-color');\n    }\n\n    %form-group-helper--error {\n        color: --var($theme, 'error-secondary-color');\n    }\n\n    %form-group-helper-item {\n        @include ellipsis();\n        position: relative;\n        min-width: 0;\n        max-width: 100%;\n    }\n\n    %form-group-helper-item--start {\n        order: 0;\n    }\n\n    %form-group-helper-item--end {\n        order: 1;\n    }\n}\n\n/// Adds typography styles for the igx-input-group component.\n/// Uses the 'body-1', 'caption'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(helper-text: 'caption', input-text: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-input-group-typography($type-scale, $categories: (\n    helper-text: 'caption',\n    input-text: 'subtitle-1')\n) {\n    $helper-text: map-get($categories, 'helper-text');\n    $input-text: map-get($categories, 'input-text');\n    $input-text-props: igx-type-scale-category($type-scale, $input-text);\n\n    %form-group-input {\n        @include igx-type-style($type-scale, $input-text) {\n            margin: 0;\n        }\n    }\n\n    %form-group-helper {\n        @include igx-type-style($type-scale, $helper-text) {\n            margin: 0;\n        }\n    }\n\n    %form-group-prefix,\n    %form-group-suffix {\n        @include igx-type-style($type-scale, $input-text) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $background [null] - The navbar background color.\n/// @param {Color} $text-color [null] - The navbar text color.\n/// @param {box-shadow} $shadow [null] - The shadow of the navbar.\n/// @param {Color} $idle-icon-color [null] - The navbar idle icon color.\n/// @param {Color} $hover-icon-color [null] - The navbar hover icon color.\n/// @param {Bool} $disable-shadow [true] - Sets the navbar shadow visibility.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevations\n/// @requires $elevations\n///\n/// @example scss Change the background color\n///   $my-navbar-theme: igx-navbar-theme($background: green);\n///   // Pass the theme to the igx-navbar component mixin\n///   @include igx-navbar($my-navbar-theme);\n@function igx-navbar-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $background: null,\n    $text-color: null,\n    $shadow: null,\n    $idle-icon-color: null,\n    $hover-icon-color: null,\n    $disable-shadow: false\n) {\n    $name: 'igx-navbar';\n    $navbar-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $navbar-schema: map-get($schema, $name);\n    } @else {\n        $navbar-schema: $schema;\n    }\n\n    $theme: apply-palette($navbar-schema, $palette);\n\n    @if not($text-color) and $background {\n        $text-color: text-contrast($background);\n    }\n\n    @if not($idle-icon-color) and $background {\n        $idle-icon-color: text-contrast($background);\n    }\n\n    @if not($hover-icon-color) and $background {\n        $hover-icon-color: text-contrast($background);\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($navbar-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @if $disable-shadow {\n        $shadow: none;\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background: $background,\n        text-color: $text-color,\n        idle-icon-color: $idle-icon-color,\n        hover-icon-color: $hover-icon-color,\n        shadow: $shadow\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires em\n/// @requires --var\n@mixin igx-navbar($theme) {\n    @include igx-root-css-vars($theme);\n\n    $navbar-padding: 0 em(16px);\n    $navbar-title-fz: em(18px, 16px);\n    $navbar-title-lh: em(18px, 16px);\n    $navbar-title-margin: 0;\n    $left: if-ltr(left, right);\n\n    %igx-navbar-display {\n        display: flex;\n        position: relative;\n        flex-flow: row nowrap;\n        align-items: center;\n        justify-content: space-between;\n        width: 100%;\n        height: 56px;\n        padding: $navbar-padding;\n        background: --var($theme, 'background');\n        color: --var($theme, 'text-color');\n        box-shadow: --var($theme, 'shadow');\n        z-index: 4;\n    }\n\n    %igx-navbar-title {\n        margin: $navbar-title-margin;\n    }\n\n    %igx-navbar-bundle {\n        display: flex;\n        align-items: center;\n        user-select: none;\n\n        > * + * {\n            margin-#{$left}: 16px;\n        }\n    }\n\n    %igx-navbar-icon-display {\n        igx-icon {\n            cursor: pointer;\n            color: --var($theme, 'idle-icon-color');\n            transition: color .15s $ease-out-quad;\n\n            &:hover {\n                color: --var($theme, 'hover-icon-color');\n            }\n        }\n    }\n\n    igx-action-icon {\n        display: flex;\n        align-items: center;\n    }\n}\n\n/// Adds typography styles for the igx-navbar component.\n/// Uses the 'body-1', 'caption'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(title: 'h6')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-navbar-typography($type-scale, $categories: (title: 'h6')) {\n    $title: map-get($categories, 'title');\n\n    %igx-navbar-title {\n        @include igx-type-style($type-scale, $title);\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $background [null] - The navigation drawer background color.\n/// @param {Color} $border-color [null] - The navigation drawer right border color.\n/// @param {Color} $item-header-text-color [null] - The header's idle text color.\n/// @param {Color} $item-text-color [null] - The item's idle text color.\n/// @param {Color} $item-icon-color [null] - The item's icon color.\n/// @param {Color} $item-active-text-color [null] - The item's active text color.\n/// @param {Color} $item-active-background [null] - The item's active background color.\n/// @param {Color} $item-active-icon-color [null] - The item's icon active color.\n/// @param {Color} $item-hover-background [null] - The item's hover background color.\n/// @param {Color} $item-hover-text-color [null] - The item's hover text color.\n/// @param {Color} $item-hover-icon-color [null] - The item's hover icon color.\n/// @param {Color} $shadow [null] - Sets a custom shadow to be used by the drawer.\n/// @param {border-radius} $border-radius [null] - The border radius used for the navdrawer.\n/// @param {border-radius} $item-border-radius [null] - The border radius used for the navdrawer item.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the background and item colors\n///   $navdrawer-theme: igx-navdrawer-theme(\n///     $background: #2d313a,\n///     $item-active-background: #ecc256,\n///     $item-icon-color: #ecc256\n///   );\n///   // Pass the theme to the igx-navdrawer component mixin\n///   @include igx-navdrawer($navdrawer-theme);\n@function igx-navdrawer-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n    $item-border-radius: null,\n\n    $background: null,\n    $border-color: null,\n\n    $item-header-text-color: null,\n    $item-text-color: null,\n    $item-icon-color: null,\n\n    $item-active-text-color: null,\n    $item-active-background: null,\n    $item-active-icon-color:null,\n\n    $item-hover-background: null,\n    $item-hover-text-color: null,\n    $item-hover-icon-color: null,\n    $shadow: null\n) {\n    $name: 'igx-navdrawer';\n    $navdrawer-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $navdrawer-schema: map-get($schema, $name);\n    } @else {\n        $navdrawer-schema: $schema;\n    }\n\n    $theme: apply-palette($navdrawer-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($navdrawer-schema, 'border-radius')), 0, 36px\n    );\n\n    $item-border-radius: round-borders(\n        if($item-border-radius, $item-border-radius, map-get($navdrawer-schema, 'item-border-radius')), 0, 24px\n    );\n\n    @if not($item-header-text-color) and $background {\n        $item-header-text-color: text-contrast($background);\n    }\n\n    @if not($item-text-color) and $background {\n        $item-text-color: text-contrast($background);\n    }\n\n    @if not($item-icon-color) and $background {\n        $item-icon-color: text-contrast($background);\n    }\n\n    @if not($item-active-background) and $background {\n        @if type-of($background) == 'color' {\n            $item-active-background: rgba(text-contrast($background), .24);\n        }\n    }\n\n    @if not($item-active-text-color) and $item-active-background {\n        $item-active-text-color: text-contrast($item-active-background);\n    }\n\n    @if not($item-active-icon-color) and $item-active-background {\n        $item-active-icon-color: text-contrast($item-active-background);\n    }\n\n    @if not($item-hover-background) and $background {\n        @if type-of($background) == 'color' {\n            $item-hover-background: rgba(text-contrast($background), .08);\n        }\n    }\n\n    @if not($item-hover-text-color) and $background {\n        $item-hover-text-color: text-contrast($background);\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($navdrawer-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        border-radius: $border-radius,\n        item-border-radius: $item-border-radius,\n        background: $background,\n        border-color: $border-color,\n        item-text-color:$item-text-color,\n        item-active-text-color: $item-active-text-color,\n        item-active-background: $item-active-background,\n        item-hover-background: $item-hover-background,\n        item-hover-text-color:$item-hover-text-color,\n        item-header-text-color:$item-header-text-color,\n        item-icon-color:$item-icon-color,\n        item-active-icon-color:$item-active-icon-color,\n        item-hover-icon-color: $item-hover-icon-color,\n        shadow: $shadow,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires $overlay-color\n/// @requires rem\n/// @requires --var\n@mixin igx-navdrawer($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $drawer-icon-size: rem(24px);\n    $drawer-item-margin: rem(8px);\n    $drawer-item-min-h: auto;\n    $drawer-item-max-h: rem(48px);\n    $drawer-item-min-w: rem(32px);\n\n\n    %animation {\n        transition: flex-basis;\n        transition-duration: .3s;\n        transition-timing-function: $ease-out-quad;\n    }\n\n    %aside {\n        position: fixed;\n        height: 100%;\n        max-width: 90%;\n        min-height: 100%;\n        overflow-x: hidden;\n        background: --var($theme, 'background');\n        top: 0;\n        bottom: 0;\n        #{$left}: 0;\n        z-index: 999;\n        transition: width, transform;\n        transition-timing-function: $ease-out-quad, $ease-out-quad;\n        box-shadow: --var($theme, 'shadow');\n        border-#{$right}: 1px solid --var($theme, 'border-color');\n        border-radius: --var($theme, 'border-radius');\n    }\n\n    %aside-panning {\n        overflow-x: hidden;\n        transition: none;\n    }\n\n    %aside--pinned {\n        position: relative;\n        max-width: 100%;\n        box-shadow: none;\n        z-index: 0;\n    }\n\n    %aside--collapsed--right {\n        transform: translate3d(300px, 0, 0);\n        box-shadow: none;\n    }\n\n    %igx-nav-drawer__aside--collapsed {\n        transform: none;\n        width: 0;\n        overflow: hidden;\n        border: none;\n    }\n\n    %aside--collapsed {\n        @include if-ltr() {\n            transform: translate3d(-300px, 0, 0);\n        }\n\n        @include if-rtl() {\n            transform: translate3d(300px, 0, 0);\n        }\n\n        box-shadow: none;\n    }\n\n    %aside--right {\n        left: auto;\n        right: 0;\n        border-#{$right}: none;\n        border-#{$left}: 1px solid --var($theme, 'border-color');\n    }\n\n    %aside--mini {\n        width: rem(60px);\n        transition-duration: .2s, .2s;\n\n        %item {\n            justify-content: center;\n        }\n    }\n\n    %aside--normal {\n        width: rem(242px);\n        transition-duration: .3s, .3s;\n    }\n\n    %overlay {\n        opacity: 1;\n        background: $overlay-color;\n        transition: opacity, visibility;\n        transition-duration: .25s, .25s;\n        transition-timing-function: ease-in, step-start;\n        transition-delay: 0s, 0s;\n        position: absolute;\n        #{$left}: 0;\n        top: 0;\n        width: 100%;\n        height: 100%;\n        visibility: visible;\n        z-index: 999;\n    }\n\n    %overlay-panning {\n        transform: translate3d(0, 0, 0);\n        transition: none;\n    }\n\n    %overlay--hidden {\n        transition-timing-function: ease-in-out, step-end;\n        visibility: hidden;\n        opacity: 0;\n    }\n\n    %overlay-panning--hidden {\n        /* must be visible during pan.. */\n        visibility: visible;\n    }\n\n    %item {\n        position: relative;\n        display: flex;\n        align-items: center;\n        flex-flow: row nowrap;\n        color: --var($theme, 'item-text-color');\n        max-height: $drawer-item-max-h;\n        min-width: $drawer-item-min-w;\n        padding: rem(12px) rem(8px);\n        cursor: pointer;\n        user-select: none;\n        outline: transparent;\n        white-space: nowrap;\n        border-radius: --var($theme, 'item-border-radius');\n        margin: $drawer-item-margin;\n        text-decoration: none;\n        width: calc(100% - #{$drawer-item-margin * 2});\n        border: none;\n        justify-content: flex-start;\n\n        > igx-icon + span {\n            margin-#{$left}: rem(32px);\n        }\n\n        igx-icon {\n            color: --var($theme, 'item-icon-color');\n        }\n\n        // Need this to override the igx-buttons\n        &[igxButton] {\n            background: transparent;\n            border: none;\n            box-shadow: none;\n\n            igx-icon {\n                width: $drawer-icon-size;\n                height: $drawer-icon-size;\n                font-size: $drawer-icon-size;\n                margin: 0;\n            }\n\n            &:hover,\n            &:focus {\n                box-shadow: none;\n                border: none;\n            }\n        }\n\n        &%igx-button--fab {\n            min-height: $drawer-item-min-h;\n        }\n\n        &%igx-button--icon {\n            height: auto;\n            transition: none;\n        }\n\n        &:hover,\n        &:focus {\n            background: --var($theme, 'item-hover-background');\n            color: --var($theme, 'item-hover-text-color');\n            box-shadow: none;\n\n            igx-icon {\n                color: --var($theme, 'item-hover-icon-color');\n            }\n        }\n    }\n\n    %item--active {\n        // should be app primary color\n        color: --var($theme, 'item-active-text-color');\n        background: --var($theme, 'item-active-background');\n\n        igx-icon {\n            color: --var($theme, 'item-active-icon-color');\n        }\n\n        // Need this to override the igx-buttons\n        &[igxButton] {\n            box-shadow: none;\n\n            igx-icon {\n                width: $drawer-icon-size;\n                height: $drawer-icon-size;\n                font-size: $drawer-icon-size;\n                margin: 0;\n            }\n\n            &:hover,\n            &:focus {\n                box-shadow: none;\n                border: none;\n            }\n        }\n\n        &:focus,\n        &:hover {\n            color: --var($theme, 'item-active-text-color');\n            background: --var($theme, 'item-active-background');\n\n            igx-icon {\n                color: --var($theme, 'item-active-icon-color');\n            }\n        }\n    }\n\n    %item--header {\n        display: block;\n        padding: rem(12px) rem(16px);\n        white-space: nowrap;\n        color: --var($theme, 'item-header-text-color');\n    }\n\n    %style-dummy {\n        height: 0;\n        background: none;\n        box-shadow: none;\n        transition: none;\n        visibility: hidden;\n    }\n}\n\n/// Adds typography styles for the igx-navdrawer component.\n/// Uses the 'subtitle-1', 'subtitle-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(item: 'subtitle-2', header: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-navdrawer-typography(\n    $type-scale,\n    $categories: (\n        item: 'subtitle-2',\n        header: 'subtitle-1'\n    )\n) {\n    $item: map-get($categories, 'item');\n    $header: map-get($categories, 'header');\n\n    %item {\n        @include igx-type-style($type-scale, $item);\n    }\n\n    %item--header {\n        @include igx-type-style($type-scale, $header) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background [null] - The list background color.\n/// @param {Color} $header-background [null] - The list header background color.\n/// @param {Color} $header-text-color [null] - The list header text color.\n///\n/// @param {Color} $item-background [null] - The list item background color.\n/// @param {Color} $item-background-hover [null] - The list item hover background color.\n/// @param {Color} $item-background-active [null] - The active list item background color.\n///\n/// @param {Color} $item-text-color [null] - The list item text color.\n/// @param {Color} $item-text-color-hover [null] - The list item hover text color.\n/// @param {Color} $item-text-color-active [null] - The active list item text color.\n///\n/// @param {Color} $item-title-color [null] - The list item title color.\n/// @param {Color} $item-title-color-hover [null] - The list item hover title color.\n/// @param {Color} $item-title-color-active [null] - The active list item title color.\n///\n/// @param {Color} $item-subtitle-color [null] - The list item subtitle color.\n/// @param {Color} $item-subtitle-color-hover [null] - The list item hover subtitle color.\n/// @param {Color} $item-subtitle-color-active [null] - The active list item subtitle color.\n///\n/// @param {Color} $item-action-color [null] - The list item action color.\n/// @param {Color} $item-action-color-hover [null] - The list item hover action color.\n/// @param {Color} $item-action-color-active [null] - The active list item action color.\n///\n/// @param {Color} $item-thumbnail-color [null] - The list item thumbnail color.\n/// @param {Color} $item-thumbnail-color-hover [null] - The list item hover thumbnail color.\n/// @param {Color} $item-thumbnail-color-active [null] - The active list item thumbnail color.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for list component.\n/// @param {border-radius} $item-border-radius [null] - The border radius used for list item.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires hexrgba\n/// @requires text-contrast\n/// @requires round-borders\n///\n/// @example scss Change the list background color\n///   $my-list-theme: igx-list-theme($background: black);\n///   // Pass the theme to the igx-list component mixin\n///   @include igx-list($my-list-theme);\n@function igx-list-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $border-radius: null,\n    $item-border-radius: null,\n    $background: null,\n    $header-background: null,\n    $header-text-color: null,\n    $item-background: null,\n    $item-background-hover: null,\n    $item-background-active: null,\n    $item-text-color: null,\n    $item-text-color-hover: null,\n    $item-text-color-active: null,\n    $item-title-color: null,\n    $item-title-color-hover: null,\n    $item-title-color-active: null,\n    $item-subtitle-color: null,\n    $item-subtitle-color-hover: null,\n    $item-subtitle-color-active: null,\n    $item-action-color: null,\n    $item-action-color-hover: null,\n    $item-action-color-active: null,\n    $item-thumbnail-color: null,\n    $item-thumbnail-color-hover: null,\n    $item-thumbnail-color-active: null\n) {\n    $name: 'igx-list';\n    $list-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $list-schema: map-get($schema, $name);\n    } @else {\n        $list-schema: $schema;\n    }\n\n    $theme: apply-palette($list-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($list-schema, 'border-radius')), 0, 24px\n    );\n\n    $item-border-radius: round-borders(\n        if($item-border-radius, $item-border-radius, map-get($list-schema, 'item-border-radius')), 0, 24px\n    );\n\n    @if not($header-background) and $background {\n        $header-background: $background;\n    }\n\n    @if not($header-background) and $item-background {\n        $header-background: $item-background;\n    }\n\n    @if not($item-background) and $background {\n        $item-background: $background;\n    }\n\n    @if not($background) and $item-background {\n        $background: $item-background;\n    }\n\n    @if not($item-background-hover) and $item-background {\n        @if type-of($item-background) == 'color' and luminance($item-background) < .5 {\n            $item-background-hover: lighten-color($item-background, 8%);\n        } @else {\n            $item-background-hover: darken-color($item-background, 8%);\n        }\n    }\n\n    @if not($item-background-active) and $item-background {\n        @if type-of($item-background) == 'color' and luminance($item-background) < .5 {\n            $item-background-active: lighten-color($item-background, 8%);\n        } @else {\n            $item-background-active: darken-color($item-background, 8%);\n        }\n    }\n\n    @if not($header-text-color) and $header-background {\n        $header-text-color: text-contrast($header-background);\n    }\n\n    @if not($item-text-color) and $item-background {\n        $item-text-color: text-contrast($item-background);\n    }\n\n    @if not($item-title-color) and $item-background {\n        $item-title-color: text-contrast($item-background);\n    }\n\n    @if not($item-action-color) and $item-background {\n        $item-action-color: text-contrast($item-background);\n    }\n\n    @if not($item-thumbnail-color) and $item-background {\n        $item-thumbnail-color: text-contrast($item-background);\n    }\n\n    @if not($item-subtitle-color) and $item-background {\n        $item-subtitle-color: rgba(text-contrast($item-background), .74);\n    }\n\n    @if not($item-subtitle-color) and $item-text-color {\n        $item-subtitle-color: $item-text-color;\n    }\n\n    @if not($item-text-color-hover) and $item-background-hover {\n        $item-text-color-hover: text-contrast($item-background-hover);\n    }\n\n    @if not($item-title-color-hover) and $item-background-hover {\n        $item-title-color-hover: text-contrast($item-background-hover);\n    }\n\n    @if not($item-action-color-hover) and $item-background-hover {\n        $item-action-color-hover: text-contrast($item-background-hover);\n    }\n\n    @if not($item-thumbnail-color-hover) and $item-background-hover {\n        $item-thumbnail-color-hover: text-contrast($item-background-hover);\n    }\n\n    @if not($item-subtitle-color-hover) and $item-background-hover {\n        $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);\n    }\n\n    @if not($item-subtitle-color-hover) and $item-text-color-hover {\n        $item-subtitle-color-hover: $item-text-color-hover;\n    }\n\n    @if not($item-text-color-active) and $item-background-active {\n        $item-text-color-active: text-contrast($item-background-active);\n    }\n\n    @if not($item-title-color-active) and $item-background-active {\n        $item-title-color-active: text-contrast($item-background-active);\n    }\n\n    @if not($item-action-color-active) and $item-background-active {\n        $item-action-color-active: text-contrast($item-background-active);\n    }\n\n    @if not($item-thumbnail-color-active) and $item-background-active {\n        $item-thumbnail-color-active: text-contrast($item-background-active);\n    }\n\n    @if not($item-subtitle-color-active) and $item-background-active {\n        $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);\n    }\n\n    @if not($item-subtitle-color-active) and $item-text-color-active {\n        $item-subtitle-color-active: $item-text-color-active;\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        border-radius: $border-radius,\n        item-border-radius: $item-border-radius,\n        background: $background,\n        header-background: $header-background,\n        header-text-color: $header-text-color,\n        item-background: $item-background,\n        item-background-hover: $item-background-hover,\n        item-background-active: $item-background-active,\n        item-text-color: $item-text-color,\n        item-text-color-hover: $item-text-color-hover,\n        item-text-color-active: $item-text-color-active,\n        item-title-color:$item-title-color,\n        item-title-color-hover:$item-title-color-hover,\n        item-title-color-active:$item-title-color-active,\n        item-subtitle-color: $item-subtitle-color,\n        item-subtitle-color-hover: $item-subtitle-color-hover,\n        item-subtitle-color-active: $item-subtitle-color-active,\n        item-action-color: $item-action-color,\n        item-action-color-hover: $item-action-color-hover,\n        item-action-color-active: $item-action-color-active,\n        item-thumbnail-color: $item-thumbnail-color,\n        item-thumbnail-color-hover: $item-thumbnail-color-hover,\n        item-thumbnail-color-active: $item-thumbnail-color-active\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires em\n/// @requires --var\n@mixin igx-list($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $list-empty-padding: (\n        comfortable: rem(16px),\n        cosy: rem(8px),\n        compact: rem(4px)\n    );\n\n    $list-item-padding: (\n        comfortable: rem(8px) rem(16px),\n        cosy: rem(4px) rem(8px),\n        compact: rem(2px) rem(4px)\n    );\n\n    $list-icon-margin: (\n        comfortable: rem(8px) rem(16px) rem(8px) 0,\n        cosy: rem(6px) rem(8px) rem(6px) 0,\n        compact: rem(4px) rem(4px) rem(4px) 0\n    );\n\n    $list-icon-margin-rtl: (\n        comfortable: rem(8px) 0 rem(8px) rem(16px),\n        cosy: rem(6px) 0 rem(6px) rem(8px),\n        compact: rem(4px) 0 rem(4px) rem(4px)\n    );\n\n    $list-line-margin: (\n        comfortable: 0 0 0 rem(16px),\n        cosy: 0 0 0 rem(12px),\n        compact: 0 0 0 rem(8px)\n    );\n\n    $list-line-margin-rtl: (\n        comfortable: 0 rem(16px) 0 0 ,\n        cosy: 0 rem(12px) 0 0 ,\n        compact: 0 rem(8px) 0 0\n    );\n\n    %igx-list {\n        position: relative;\n        display: flex;\n        flex-flow: column nowrap;\n        background: --var($theme, 'background');\n        height: 100%;\n        overflow: hidden;\n        z-index: 0;\n        border-radius: --var($theme, 'border-radius');\n    }\n\n    %igx-list-empty {\n        justify-content: center;\n        align-items: center;\n    }\n\n    %igx-list-empty-image {\n        width: auto;\n        max-height: 120px;\n    }\n\n    %igx-list-empty-message {\n        text-align: center;\n        color: --var($theme, 'item-text-color');\n        padding: map-get($list-empty-padding, 'comfortable');\n        z-index: 1;\n    }\n\n    %igx-list-empty-message--cosy {\n        padding: map-get($list-empty-padding, 'cosy');\n    }\n\n    %igx-list-empty-message--compact {\n        padding: map-get($list-empty-padding, 'compact');\n    }\n\n    %igx-list-header {\n        display: flex;\n        align-items: center;\n        color: --var($theme, 'header-text-color');\n        background: --var($theme, 'header-background');\n        padding: map-get($list-item-padding, 'comfortable');\n        user-select: none;\n    }\n\n    %igx-list-header--cosy {\n        padding: map-get($list-item-padding, 'cosy');\n    }\n\n    %igx-list-header--compact {\n        padding: map-get($list-item-padding, 'compact');\n    }\n\n    %igx-list-item-base {\n        display: flex;\n        flex-flow: column wrap;\n        justify-content: center;\n        border-radius: --var($theme, 'item-border-radius');\n        color: --var($theme, 'item-text-color');\n        background: --var($theme, 'item-background');\n\n        &:hover {\n            color: --var($theme, 'item-text-color-hover');\n            background: --var($theme, 'item-background-hover');\n\n            %igx-list__item-lines {\n                color: currentColor;\n            }\n\n            %igx-list__item-line-title {\n                color: --var($theme, 'item-title-color-hover');\n            }\n\n            %igx-list__item-line-subtitle {\n                color: --var($theme, 'item-subtitle-color-hover');\n            }\n\n            %igx-list__item-actions {\n                color: --var($theme, 'item-action-color-hover');\n\n                %igx-icon-display {\n                    color: --var($theme, 'item-action-color-hover')\n                }\n            }\n\n            %igx-list__item-thumbnail {\n                color: --var($theme, 'item-thumbnail-color-hover');\n\n                %igx-icon-display {\n                    color: --var($theme, 'item-thumbnail-color-hover')\n                }\n            }\n        }\n    }\n\n    %igx-list-item-pan {\n        position: absolute;\n        visibility: hidden;\n        display: flex;\n        z-index: 1;\n    }\n\n    %igx-list__item-lines {\n        color: currentColor;\n        display: flex;\n        flex-direction: column;\n        flex: 1 0 0%;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-list__item-line-subtitle {\n        color: --var($theme, 'item-subtitle-color');\n        opacity: .74\n    }\n\n    %igx-list__item-line-title {\n        color: --var($theme, 'item-title-color');\n    }\n\n    %igx-list__item-actions {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        color: --var($theme, 'item-action-color');\n\n        > * {\n            margin-#{$left}: rem(8px);\n        }\n\n        &:empty {\n            display: none;\n        }\n\n        %igx-icon-display {\n            color: --var($theme, 'item-action-color')\n        }\n    }\n\n    %igx-list-item-content {\n        display: flex;\n        align-items: center;\n        position: relative;\n        padding: map-get($list-item-padding, 'comfortable');\n        border-radius: --var($theme, 'item-border-radius');\n        background: inherit;\n        z-index: 2;\n    }\n\n    %igx-list-item-content--compact {\n        padding: map-get($list-item-padding, 'compact');\n    }\n\n    %igx-list-item-content--cosy {\n        padding: map-get($list-item-padding, 'cosy');\n    }\n\n    %igx-list__item-thumbnail {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        align-self: flex-start;\n        padding: 0;\n        color: --var($theme, 'item-thumbnail-color');\n\n        > %igx-icon-display {\n            @include if-ltr() {\n                margin: map-get($list-icon-margin, 'comfortable');\n            }\n\n            @include if-rtl() {\n                margin: map-get($list-icon-margin-rtl, 'comfortable');\n            }\n        }\n\n        > %igx-avatar-display {\n            > %igx-icon-display {\n                margin: 0;\n            }\n        }\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %igx-list__item-thumbnail:not(:empty) + %igx-list__item-lines {\n        @include if-ltr() {\n            margin: map-get($list-line-margin, 'comfortable');\n        }\n\n        @include if-rtl() {\n            margin: map-get($list-line-margin-rtl, 'comfortable');\n        }\n    }\n\n    %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines {\n        @include if-ltr() {\n            margin: map-get($list-line-margin, 'cosy');\n        }\n\n        @include if-rtl() {\n            margin: map-get($list-line-margin-rtl, 'cosy');\n        }\n    }\n\n    %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines {\n        @include if-ltr() {\n            margin: map-get($list-line-margin, 'compact');\n        }\n\n        @include if-rtl() {\n            margin: map-get($list-line-margin-rtl, 'compact');\n        }\n    }\n\n    %igx-list__item-thumbnail--cosy {\n        @include if-ltr() {\n            > %igx-icon-display {\n                margin: map-get($list-icon-margin, 'cosy');\n            }\n        }\n\n        @include if-rtl() {\n            > %igx-icon-display {\n                margin: map-get($list-icon-margin-rtl, 'cosy');\n            }\n        }\n    }\n\n    %igx-list__item-thumbnail--compact {\n        @include if-ltr() {\n            > %igx-icon-display {\n                margin: map-get($list-icon-margin, 'compact');\n            }\n        }\n\n        @include if-rtl() {\n            > %igx-icon-display {\n                margin: map-get($list-icon-margin-rtl, 'compact');\n            }\n        }\n    }\n\n    %igx-list__item-actions--cosy {\n        > * {\n            margin-#{$left}: rem(6px);\n        }\n    }\n\n    %igx-list__item-actions--compact {\n        > * {\n            margin-#{$left}: rem(4px);\n        }\n    }\n\n    %igx-list__item-lines + %igx-list__item-actions {\n        margin-#{$left}: rem(8px);\n    }\n\n    %igx-list-item-content--active {\n        %igx-list__item-line-title {\n            color: --var($theme, 'item-title-color-active')\n        }\n\n        %igx-list__item-line-subtitle {\n            color: --var($theme, 'item-subtitle-color-active')\n        }\n\n        %igx-list__item-actions {\n            color: --var($theme, 'item-action-color-active');\n\n            %igx-icon-display {\n                color: --var($theme, 'item-action-color-active')\n            }\n        }\n\n        %igx-list__item-thumbnail {\n            color: --var($theme, 'item-thumbnail-color-active');\n\n            %igx-icon-display {\n                color: --var($theme, 'item-thumbnail-color-active')\n            }\n        }\n\n        color: --var($theme, 'item-text-color-active');\n        background: --var($theme, 'item-background-active');\n        z-index: 3;\n    }\n\n    %igx-list-item-content--inactive {\n        transition: transform .3s $ease-out-quad;\n    }\n}\n\n/// Adds typography styles for the igx-list component.\n/// Uses the 'caption' and 'subtitle-1'\n/// categories from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(header: 'overline', item: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-list-typography(\n    $type-scale,\n    $categories: (\n        header: 'overline',\n        item: 'subtitle-1',\n        title: 'subtitle-1',\n        subtitle: 'caption'\n    )\n) {\n    $header: map-get($categories, 'header');\n    $item: map-get($categories, 'item');\n    $title: map-get($categories, 'title');\n    $subtitle: map-get($categories, 'subtitle');\n\n    %igx-list-header {\n        @include igx-type-style($type-scale, $header) {\n            margin: 0;\n        }\n    }\n\n    %igx-list-item {\n        @include igx-type-style($type-scale, $item) {\n            margin: 0;\n        }\n    }\n\n    %igx-list__item-lines,\n    %igx-list__item-line-title {\n        @include igx-type-style($type-scale, $title) {\n            margin: 0;\n        }\n    }\n\n    %igx-list__item-line-subtitle {\n        @include igx-type-style($type-scale, $subtitle) {\n            margin: 0;\n        }\n    }\n}\n","@import '../ripple/ripple-theme';\n@import '../ripple/ripple-component';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $label-color [null]- The text color used for the label text.\n/// @param {Color} $empty-color [null] - The unchecked border color.\n/// @param {Color} $fill-color [null] - The checked border and dot colors.\n/// @param {Color} $disabled-color [null] - The disabled border and dot colors.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// Set light to true when the surrounding area is dark.\n/// @example scss Change the checked dot and border colors\n///   $my-radio-theme: igx-radio-theme($fill-color: magenta);\n///   // Pass the theme to the igx-radio component mixin\n///   @include igx-radio($my-radio-theme);\n@function igx-radio-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $label-color: null,\n    $empty-color: null,\n    $fill-color: null,\n    $fill-hover-border-color:null,\n    $disabled-color: null,\n    $hover-color: null\n\n) {\n    $name: 'igx-radio';\n    $radio-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $radio-schema: map-get($schema, $name);\n    } @else {\n        $radio-schema: $schema;\n    }\n\n    $theme: apply-palette($radio-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        label-color: $label-color,\n        empty-color: $empty-color,\n        fill-color: $fill-color,\n        fill-hover-border-color: $fill-hover-border-color,\n        disabled-color: $disabled-color,\n        hover-color: $hover-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} igx-css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} igx-ripple\n/// @requires {mixin} hide-default\n/// @requires igx-ripple-theme\n/// @requires em\n/// @requires --var\n@mixin igx-radio($theme) {\n    @include igx-root-css-vars($theme);\n    @include scale-in-out($start-scale: .9);\n\n    $label-margin: em(8px);\n    $size: em(20px);\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $border-width: map-get((\n        material: 2px,\n        fluent: 1px\n    ), map-get($theme, variant));\n\n    $radio-hover-scale: map-get((\n        material: null,\n        fluent: scale3d(.5, .5, .5)\n    ), map-get($theme, variant));\n\n    $ripple-display: map-get((\n        material: block,\n        fluent: none\n    ), map-get($theme, variant));\n\n    $border-style: rem($border-width) solid;\n    $border-radius: 50% 50%;\n\n    $transition: all .2s ease-in;\n\n    $ripple-size: em(48px);\n    $ripple-radius: $ripple-size / 2;\n\n    $ripple-theme: igx-ripple-theme(\n        $color: --var($theme, 'fill-color')\n    );\n\n    %radio-display {\n        position: relative;\n        display: inline-flex;\n        flex-flow: row nowrap;\n        align-items: center;\n        color: --var($theme, 'label-color');\n    }\n\n    %radio-input {\n        @include hide-default();\n    }\n\n    %radio-display--disabled {\n        pointer-events: none;\n        color: --var($theme, 'disabled-color');\n        user-select: none;\n    }\n\n    %radio-composite {\n        position: relative;\n        display: inline-block;\n        width: $size;\n        height: $size;\n        min-width: $size;\n        line-height: $size;\n        cursor: pointer;\n        color: --var($theme, 'label-color');\n        user-select: none;\n\n        &::before,\n        &::after {\n            position: absolute;\n            content: '';\n            width: $size;\n            height: $size;\n            left: 0;\n            top: 0;\n            border-radius: $border-radius;\n        }\n\n        &::before {\n            backface-visibility: hidden;\n            transform: scale3d(0, 0, 0);\n            transition: $transition;\n        }\n\n        &::after {\n            border: $border-style --var($theme, 'empty-color');\n        }\n    }\n\n    %radio-composite--x {\n        &::before {\n            border: $border-style --var($theme, 'fill-color');\n            background: --var($theme, 'fill-color');\n            transform: scale3d(.5, .5, .5);\n        }\n\n        &::after {\n            border: $border-style --var($theme, 'fill-color');\n        }\n    }\n\n    %igx-radio-hover__composite {\n        &::before {\n            background: --var($theme, 'hover-color');\n            transform: $radio-hover-scale;\n        }\n    }\n\n    %igx-radio--checked-active__composite {\n        &::before {\n            border-color: --var($theme, 'fill-hover-border-color');\n            background: --var($theme, 'fill-hover-border-color');\n        }\n\n        &::after {\n            border-color: --var($theme, 'fill-hover-border-color');\n        }\n    }\n\n    %radio-composite--disabled {\n        &::after {\n            border: $border-style --var($theme, 'disabled-color');\n        }\n    }\n\n    %radio-composite--x--disabled {\n        &::after {\n            border: $border-style --var($theme, 'disabled-color');\n        }\n\n        &::before {\n            background: --var($theme, 'disabled-color');\n            border: $border-style transparent;\n        }\n    }\n\n    %radio-label {\n        color: currentColor;\n        cursor: pointer;\n        user-select: none;\n        word-wrap: break-all;\n\n        &:empty {\n            display: none;\n        }\n    }\n\n    %radio-label--after {\n        margin-#{$left}: $label-margin;\n    }\n\n    %radio-label--before {\n        order: -1;\n        margin-#{$right}: $label-margin;\n    }\n\n    %radio-label--before,\n    %radio-label--after {\n        &:empty {\n            margin: 0;\n        }\n    }\n\n    %radio-ripple {\n        @include igx-ripple($ripple-theme);\n        @include igx-css-vars($ripple-theme);\n        display: $ripple-display;\n        position: absolute;\n        top: calc(50% - #{$ripple-radius});\n        left: calc(50% - #{$ripple-radius});\n        width: $ripple-size;\n        height: $ripple-size;\n        border-radius: $ripple-radius;\n        overflow: hidden;\n        pointer-events: none;\n        filter: opacity(1);\n    }\n\n    %radio-ripple--focused {\n        @include animation('scale-in-out' 1s $ease-out-quad infinite);\n        background: --var($theme, 'empty-color');\n        transition: background .2s $ease-out-quad;\n        opacity: .12;\n    }\n\n    %radio-ripple--focused-checked {\n        background: --var($theme, 'fill-color');\n    }\n\n    %radio-ripple--hover {\n        &::after {\n            position: absolute;\n            content: '';\n            opacity: .06;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n    }\n\n    %radio-ripple--hover-unchecked {\n        &::after {\n            background: --var($theme, 'empty-color');\n        }\n    }\n\n    %radio-ripple--hover-checked {\n        &::after {\n            background: --var($theme, 'fill-color');\n        }\n    }\n\n    %radio-ripple--pressed {\n        &::after {\n            opacity: .12;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-radio component.\n/// Uses the 'subtitle-1' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-radio-typography(\n    $type-scale,\n    $categories: (label: 'subtitle-1')\n) {\n    $label: map-get($categories, 'label');\n\n    %radio-label {\n        @include igx-type-style($type-scale, $label) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If you specify a background color, but do not specify colors for either the\n/// button or the text, their colors will be set automatically to a contrasting color.\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $background [null] - The background color used in the snackbar.\n/// @param {Color} $text-color [null] - The text color used in the snackbar.\n/// @param {Color} $button-color [null] - The button color used in the snackbar.\n/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the snackbar.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for the snackbar component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Set a custom background color\n///   $my-snackbar-theme: igx-snackbar-theme($background: white);\n///   // Pass the theme to the igx-bottom-nav component mixin\n///   @include igx-snackbar($my-snackbar-theme);\n@function igx-snackbar-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n    $background: null,\n    $text-color: null,\n    $button-color: null,\n    $shadow: null\n) {\n    $name: 'igx-snackbar';\n    $snackbar-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $snackbar-schema: map-get($schema, $name);\n    } @else {\n        $snackbar-schema: $schema;\n    }\n\n    $theme: apply-palette($snackbar-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($snackbar-schema, 'border-radius')), 0, 24px\n    );\n\n    @if not($button-color) and $background {\n        $button-color: text-contrast($background);\n    }\n\n    @if not($text-color) and $background {\n        $text-color: text-contrast($background);\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($snackbar-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        border-radius: $border-radius,\n        background: $background,\n        text-color: $text-color,\n        button-color: $button-color,\n        shadow: $shadow\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-snackbar($theme) {\n    @include igx-root-css-vars($theme);\n\n    // @debug $theme;\n\n    $snackbar-min-height: rem(48px);\n    $snackbar-padding: rem(7px) rem(24px);\n    $snackbar-button-left-margin: rem(24px);\n    $snackbar-button-line-height: rem(16px);\n    $snackbar-button-font-weight: 600;\n    $left: if-ltr(left, right);\n\n    %igx-snackbar-display {\n        position: relative;\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: center;\n        justify-content: space-between;\n        min-height: $snackbar-min-height;\n        padding: $snackbar-padding;\n        margin: 8px;\n        color: --var($theme, 'text-color');\n        background: --var($theme, 'background');\n        backface-visibility: hidden;\n        box-shadow: --var($theme, 'shadow');\n        border-radius: --var($theme, 'border-radius')\n    }\n\n    %igx-snackbar-button {\n        background: transparent;\n        color: --var($theme, 'button-color');\n        border: 0;\n        line-height: $snackbar-button-line-height;\n        margin-#{$left}: $snackbar-button-left-margin;\n        text-transform: uppercase;\n        user-select: none;\n        font-weight: $snackbar-button-font-weight;\n        -webkit-tap-highlight-color: transparent;\n        outline: none;\n        transition: color .2s ease;\n        font-size: inherit;\n        font-family: inherit;\n        cursor: pointer;\n\n        &:hover {\n            color: --var($theme, 'button-color');\n        }\n    }\n}\n\n/// Adds typography styles for the igx-snackbar component.\n/// Uses the 'body-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-snackbar-typography($type-scale, $categories: (text: 'body-2')) {\n    $text: map-get($categories, 'text');\n\n    %igx-snackbar-message {\n        @include igx-type-style($type-scale, $text);\n    }\n}\n","@import '../ripple/ripple-theme';\n@import '../ripple/ripple-component';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $thumb-on-color [null] - The color of the thumb when the switch is on.\n/// @param {Color} $track-on-color [null] - The color of the track when the switch is on.\n/// @param {Color} $thumb-off-color [null] - The color of the thumb when the switch is off.\n/// @param {Color} $track-off-color [null] - The color of the track when the switch is off.\n/// @param {Color} $thumb-disabled-color [null] - The color of the thumb when the switch is disabled.\n/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled.\n/// @param {Color} $label-color [null] - The color of the switch label\n/// @param {Color} $label-disabled-color [null] - The color of the switch label when the switch is disabled\n/// @param {box-shadow} $resting-shadow [null] - The shadow used for the thumb in resting state of the switch.\n/// @param {box-shadow} $hover-shadow [null] - The shadow used for the thumb in hover state of the switch.\n/// @param {box-shadow} $disabled-shadow [null] - The shadow used for the thumb in disable state of the switch.\n///\n/// @param {border-radius} $border-radius-track [null] - The border radius used for switch track.\n/// @param {border-radius} $border-radius-thumb [null] - The border radius used for switch thumb.\n/// @param {border-radius} $border-radius-ripple [null] - The border radius used for switch ripple.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires igx-elevation\n/// @requires $elevations\n///\n/// @example scss Set custom track and thumb on colors\n///   $my-switch-theme: igx-toast-theme($thumb-on-color: black, $track-on-color: yellow);\n///   // Pass the theme to the igx-bottom-nav component mixin\n///   @include igx-switch($my-switch-theme);\n@function igx-switch-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $thumb-on-color: null,\n    $track-on-color: null,\n\n    $thumb-off-color: null,\n    $track-off-color: null,\n\n    $track-disabled-color: null,\n    $thumb-disabled-color: null,\n\n    $label-color: null,\n    $label-disabled-color: null,\n\n    $resting-shadow: null,\n    $hover-shadow: null,\n    $disabled-shadow: null,\n\n    $border-radius-track: null,\n    $border-radius-thumb: null,\n    $border-radius-ripple: null,\n    $border-color: null,\n    $border-hover-color: null,\n    $border-disabled-color: null,\n    $border-on-color: null,\n    $border-on-hover-color: null\n) {\n    $name: 'igx-switch';\n    $switch-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $switch-schema: map-get($schema, $name);\n    } @else {\n        $switch-schema: $schema;\n    }\n\n    $theme: apply-palette($switch-schema, $palette);\n\n    $border-radius-track: round-borders(\n        if($border-radius-track, $border-radius-track, map-get($switch-schema, 'border-radius-track')), 0, 7px\n    );\n\n    $border-radius-thumb: round-borders(\n        if($border-radius-thumb, $border-radius-thumb, map-get($switch-schema, 'border-radius-thumb')), 0, 10px\n    );\n\n    $border-radius-ripple: round-borders(\n        if($border-radius-ripple, $border-radius-ripple, map-get($switch-schema, 'border-radius-ripple')), 0, 24px\n    );\n\n    @if not($resting-shadow) {\n        $resting-elevation: map-get($switch-schema, 'resting-elevation');\n        $resting-shadow: igx-elevation($elevations, $resting-elevation);\n    }\n\n    @if not($hover-shadow) {\n        $hover-elevation: map-get($switch-schema, 'hover-elevation');\n        $hover-shadow: igx-elevation($elevations, $hover-elevation);\n    }\n\n    @if not($disabled-shadow) {\n        $disabled-elevation: map-get($switch-schema, 'disabled-elevation');\n        $disabled-shadow: igx-elevation($elevations, $disabled-elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n\n        thumb-on-color: $thumb-on-color,\n        track-on-color: $track-on-color,\n\n        thumb-off-color: $thumb-off-color,\n        track-off-color: $track-off-color,\n\n        track-disabled-color: $track-disabled-color,\n        thumb-disabled-color: $thumb-disabled-color,\n\n        label-color: $label-color,\n        label-disabled-color: $label-disabled-color,\n\n        resting-shadow: $resting-shadow,\n        hover-shadow: $hover-shadow,\n        disabled-shadow: $disabled-shadow,\n\n        border-radius-track: $border-radius-track,\n        border-radius-thumb: $border-radius-thumb,\n        border-radius-ripple: $border-radius-ripple,\n        border-color: $border-color,\n        border-hover-color: $border-hover-color,\n        border-disabled-color: $border-disabled-color,\n        border-on-color: $border-on-color,\n        border-on-hover-color: $border-on-hover-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} igx-css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} igx-ripple\n/// @requires {mixin} hide-default\n/// @requires igx-ripple-theme\n/// @requires em\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires --var\n@mixin igx-switch($theme) {\n    @include igx-root-css-vars($theme);\n    @include scale-in-out($start-scale: .9);\n\n    $switch-width: map-get((\n        material: 36px,\n        fluent: 40px,\n    ), map-get($theme, variant));\n\n    $switch-height: map-get((\n        material: 14px,\n        fluent: 20px\n    ), map-get($theme, variant));\n\n    $switch-thumb-width: map-get((\n        material: 20px,\n        fluent: 12px\n    ), map-get($theme, variant));\n\n    $switch-on-offset: map-get((\n        material: 1px,\n        fluent: $switch-thumb-width / 2\n    ), map-get($theme, variant));\n\n    $switch-off-offset: map-get((\n        material: -1px,\n        fluent: $switch-thumb-width / 3\n    ), map-get($theme, variant));\n\n    $ripple-display: map-get((\n        material: block,\n        fluent: none\n    ), map-get($theme, variant));\n\n    $thumb-resting-shadow: map-get((\n        material: --var($theme, 'resting-shadow'),\n        fluent: none\n    ), map-get($theme, variant));\n\n    $thumb-hover-shadow: map-get((\n        material: --var($theme, 'hover-shadow'),\n        fluent: none\n    ), map-get($theme, variant));\n\n    $thumb-disabled-shadow: map-get((\n        material: --var($theme, 'disabled-shadow'),\n        fluent: none\n    ), map-get($theme, variant));\n\n    $switch-thumb-height: $switch-thumb-width ;\n\n    $ripple-size: em(48px);\n    $ripple-radius: $ripple-size / 2;\n\n    $label-margin: em(8px);\n\n    $input-transition: all .2s $ease-in-out-quad;\n\n    $ripple-theme: igx-ripple-theme(\n        $color: --var($theme, 'thumb-on-color')\n    );\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %switch-display {\n        position: relative;\n        display: inline-flex;\n        flex-flow: row nowrap;\n        align-items: center;\n    }\n\n    %switch-input {\n        @include hide-default();\n    }\n\n    %switch-display--disabled {\n        user-select: none;\n        pointer-events: none;\n        cursor: initial;\n    }\n\n    %switch-composite {\n        display: flex;\n        align-items: center;\n        width: rem($switch-width);\n        height: rem($switch-height);\n        border: 1px solid --var($theme, 'border-color');\n        border-radius: --var($theme, 'border-radius-track');\n        background: --var($theme, 'track-off-color');\n        cursor: pointer;\n        user-select: none;\n        transition: $input-transition;\n\n        &:hover,\n        &:focus {\n            border-color: --var($theme, 'border-hover-color');\n        }\n    }\n\n    %switch-composite--x {\n        background: --var($theme, 'track-on-color');\n        border-color: --var($theme, 'border-on-color');\n\n        &:hover,\n        &:focus {\n            border-color: --var($theme, 'border-on-hover-color');\n        }\n    }\n\n    %switch-composite--disabled {\n        background: --var($theme, 'track-disabled-color');\n        border-color: --var($theme, 'border-disabled-color');\n    }\n\n    %switch-composite-thumb {\n        position: relative;\n        display: block;\n        width: rem($switch-thumb-width);\n        height: $switch-thumb-height;\n        min-width: rem($switch-thumb-width);\n        border-radius: --var($theme, 'border-radius-thumb');\n        background: --var($theme, 'thumb-off-color');\n        box-shadow: $thumb-resting-shadow;\n        transition: $input-transition;\n\n        @include if-ltr() {\n            transform: translateX(#{rem($switch-off-offset)});\n        }\n\n        @include if-rtl() {\n            transform: translateX(#{rem(-1 * $switch-off-offset)});\n        }\n\n        &:hover {\n            box-shadow: $thumb-hover-shadow;\n        }\n    }\n\n    %switch-composite-thumb--x {\n        background: --var($theme, 'thumb-on-color');\n\n        @include if-ltr() {\n            transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});\n        }\n\n        @include if-rtl() {\n            transform: translateX(-#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});\n        }\n    }\n\n    %switch-composite-thumb--disabled {\n        background: --var($theme, 'thumb-disabled-color');\n        box-shadow: $thumb-disabled-shadow;\n    }\n\n    %switch-ripple {\n        @include igx-ripple($ripple-theme);\n        @include igx-css-vars($ripple-theme);\n        display: $ripple-display;\n        position: absolute;\n        top: calc(50% - #{$ripple-radius});\n        left: calc(50% - #{$ripple-radius});\n        width: $ripple-size;\n        height: $ripple-size;\n        overflow: hidden;\n        pointer-events: none;\n        filter: opacity(1);\n        border-radius: --var($theme, 'border-radius-ripple');\n    }\n\n    %switch-ripple--focused {\n        @include animation('scale-in-out' 1s $ease-out-quad infinite);\n        background: --var($theme, 'track-off-color');\n        transition: background .2s $ease-out-quad;\n        opacity: .12;\n    }\n\n    %switch-ripple--focused-checked {\n        background: --var($theme, 'thumb-on-color');\n    }\n\n    %switch-label {\n        display: inline-block;\n        color: --var($theme, 'label-color');\n        cursor: pointer;\n        user-select: none;\n        word-wrap: break-all;\n\n        &:empty {\n            margin: 0;\n        }\n    }\n\n    %switch-label--before,\n    %switch-label--after {\n        &:empty {\n            margin: 0;\n        }\n    }\n\n    %switch-label--after {\n        margin-#{$left}: $label-margin;\n    }\n\n    %switch-label--before {\n        order: -1;\n        margin-#{$right}: $label-margin;\n    }\n\n    %switch-label--disabled {\n        color: --var($theme, 'label-disabled-color');\n    }\n\n    %switch-ripple--hover {\n        &::after {\n            position: absolute;\n            content: '';\n            opacity: .06;\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n    }\n\n    %switch-ripple--hover-unchecked {\n        &::after {\n            background: --var($theme, 'track-off-color');\n        }\n    }\n\n    %switch-ripple--hover-checked {\n        &::after {\n            background: --var($theme, 'thumb-on-color');\n        }\n    }\n\n    %switch-ripple--pressed {\n        &::after {\n            opacity: .12;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-checkbox component.\n/// Uses the 'subtitle-1' category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-switch-typography(\n    $type-scale,\n    $categories: (label: 'subtitle-1')\n) {\n    $label: map-get($categories, 'label');\n\n    %switch-label {\n        @include igx-type-style($type-scale, $label) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified,\n/// the idle item color will be assigned automatically to a contrasting color.\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $item-text-color [null] - The color used for the tab text color.\n/// @param {Color} $item-background [null] - The background color used for the tabs header.\n/// @param {Color} $item-hover-background [null] - The background used for the tabs on hover.\n/// @param {Color} $item-hover-color [null] - The text color used for the tabs on hover.\n///\n/// @param {Color} $item-active-color [null] - The color used for the active tabs text.\n/// @param {Color} $item-active-icon-color [null] - The color used for the active tabs icon.\n/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.\n///\n/// @param {Color} $indicator-color [null] - The color used for the active tab indicator.\n/// @param {Color} $button-color [null] - The color used for the button icon/text color.\n/// @param {Color} $button-hover-color [null] - The color used for the button icon/text color on hover.\n/// @param {Color} $button-background [null] - The color used for the button background.\n/// @param {Color} $button-hover-background [null] - The color used for the button background on hover.\n///\n/// @param {Color} $tab-ripple-color [null] - The color used for the button background.\n/// @param {Color} $button-ripple-color [null] - The color used for the button background on hover.\n/// @param {Bool} $disable-shadow [true] - Sets the tabs header shadow visibility.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires igx-elevation\n/// @requires text-contrast\n///\n/// @example scss Set a custom background color\n///   $my-tabs-theme: igx-tabs-theme(\n///      $item-background: orange\n///    );\n///   // Pass the theme to the igx-tabs component mixin\n///   @include igx-tabs($my-tabs-theme);\n\n@function igx-tabs-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $item-text-color: null,\n    $item-background: null,\n\n    $item-hover-background: null,\n    $item-hover-color: null,\n\n    $item-active-color: null,\n    $item-active-icon-color: null,\n    $item-active-background: null,\n    $indicator-color: null,\n\n    $button-color: null,\n    $button-background: null,\n    $button-hover-background: null,\n    $button-hover-color: null,\n\n    $tab-ripple-color: null,\n    $button-ripple-color: null,\n\n    $disable-shadow: true\n) {\n    $name: 'igx-tabs';\n    $tabs-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $tabs-schema: map-get($schema, $name);\n    } @else {\n        $tabs-schema: $schema;\n    }\n\n    $theme: apply-palette($tabs-schema, $palette);\n\n    $tab-area-shadow: if($disable-shadow == true, none, igx-elevation($elevations, 1));\n\n    @if not($item-text-color) and $item-background {\n        @if type-of($item-background) == 'color' {\n            $item-text-color: rgba(text-contrast($item-background), .54);\n        }\n    }\n\n    @if not($item-hover-color) and $item-background {\n        $item-hover-color: text-contrast($item-background);\n    }\n\n    @if not($item-hover-color) and $item-hover-background {\n        $item-hover-color: text-contrast($item-hover-background);\n    }\n\n    @if not($item-active-icon-color) and $item-active-background {\n        $item-active-icon-color: text-contrast($item-active-background);\n    }\n\n    @if not($item-active-icon-color) and $item-background {\n        $item-active-icon-color: text-contrast($item-background);\n    }\n\n    @if not($indicator-color) and $item-background {\n        $indicator-color: text-contrast($item-background);\n    }\n\n    @if not($item-active-color) and $item-active-icon-color {\n        $item-active-color: $item-active-icon-color;\n    }\n\n\n    // Button\n    @if not($button-color) and $item-background {\n        $button-color: text-contrast($item-background);\n    }\n\n    @if not($button-color) and $button-background {\n        $button-color: text-contrast($button-background);\n    }\n\n    @if not($button-color) and $item-background {\n        $button-background: transparent;\n    }\n\n    @if not($button-hover-color) and $button-hover-background {\n        $button-hover-color: text-contrast($button-hover-background);\n    }\n\n    @if not($button-hover-background) and $item-background {\n        $button-hover-color: text-contrast($item-background);\n    }\n\n    @if not($button-background) and $item-background {\n        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {\n            $button-background: transparent;\n        } @else {\n            $button-background: rgba(255, 255, 255 , .1);\n        }\n    }\n\n    @if not($button-hover-background) and $item-background {\n        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {\n            $button-hover-background: rgba(0, 0, 0, .05);\n        } @else {\n            $button-hover-background: rgba(255, 255, 255 , .14);\n        }\n    }\n\n    @if not($button-ripple-color) and $button-background {\n        @if type-of($item-background) == 'color' and lightness($item-background) > 50 {\n            $button-ripple-color: rgba(0, 0, 0, .4);\n        } @else {\n            $button-ripple-color: rgba(255, 255, 255, .4);\n        }\n    }\n\n    // Button end\n\n    @if not($tab-ripple-color) and $item-active-background {\n        $tab-ripple-color: text-contrast($item-active-background);\n    }\n\n    @if not($tab-ripple-color) and $item-background {\n        $tab-ripple-color: text-contrast($item-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        item-text-color: $item-text-color,\n        item-background: $item-background,\n        item-hover-color: $item-hover-color,\n        item-hover-background: $item-hover-background,\n        item-active-color: $item-active-color,\n        item-active-icon-color: $item-active-icon-color,\n        item-active-background: $item-active-background,\n        indicator-color: $indicator-color,\n        button-color: $button-color,\n        button-background: $button-background,\n        button-hover-background:$button-hover-background,\n        button-hover-color:$button-hover-color,\n        tab-ripple-color: $tab-ripple-color,\n        button-ripple-color: $button-ripple-color,\n        tab-area-shadow: $tab-area-shadow,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} igx-css-vars\n/// @requires {mixin} ellipsis\n/// @requires igx-ripple-theme\n/// @requires {mixin} igx-ripple\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires rem\n/// @requires --var\n@mixin igx-tabs($theme) {\n    @include igx-root-css-vars($theme);\n    $item-min-width: 90px;\n    $item-max-width: 360px;\n\n    $item-padding: 0 rem(16px);\n    $tabs-height: rem(48px);\n    $tabs-height-icon: rem(72px);\n    $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);\n    $icon-label-space: rem(12px);\n\n    $tabs-ripple-theme: igx-ripple-theme($color: --var($theme, 'tab-ripple-color'));\n    $button-ripple-theme: igx-ripple-theme($color: --var($theme, 'button-ripple-color'));\n\n    %igx-tabs {\n        display: flex;\n        flex-direction: column;\n    }\n\n    %igx-tabs__header {\n        display: flex;\n        align-items: center;\n        overflow: hidden;\n        background: --var($theme, 'item-background');\n        box-shadow: --var($theme, 'tab-area-shadow');\n    }\n\n    %igx-tabs__content-fixed,\n    %igx-tabs__header-wrapper-fixed {\n        flex: 1 1 auto;\n        overflow: hidden;\n    }\n\n    // ITEM HOLDER (The element that scrolls)\n    %igx-tabs__content-fluid,\n    %igx-tabs__header-wrapper-fluid {\n        position: relative;\n        flex-wrap: nowrap;\n        transition: transform .2s $tabs-animation-function;\n    }\n\n    %igx-tabs__header-wrapper-fluid {\n        display: inline-flex;\n        align-items: center;\n        min-width: 100%;\n    }\n\n    %igx-tabs__content-fluid {\n        display: flex;\n    }\n\n    // MENU ITEM\n    %igx-tabs__header-menu-item {\n        display: inline-flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        min-width: $item-min-width;\n        max-width: $item-max-width;\n        word-wrap: break-word;\n        height: $tabs-height;\n        // Flex basis & shrink are Needed for IE11\n        flex-basis: auto;\n        flex-shrink: 0;\n        padding: $item-padding;\n        overflow: hidden;\n        cursor: pointer;\n        position: relative;\n        transition: all .3s $tabs-animation-function;\n        user-select: none;\n        background: --var($theme, 'item-background');\n        color: --var($theme, 'item-text-color');\n        outline: 0;\n\n        &::-moz-focus-inner {\n            border: 0;\n        }\n\n        &:focus {\n            background: --var($theme, 'item-active-background');\n        }\n\n        &:hover {\n            background: --var($theme, 'item-hover-background');\n            color: --var($theme, 'item-hover-color');\n        }\n\n        @include igx-ripple($tabs-ripple-theme);\n        @include igx-css-vars($tabs-ripple-theme);\n    }\n\n    %igx-tabs__header-menu-item--selected {\n        outline: 0;\n        color: --var($theme, 'item-active-color');\n\n        &:focus {\n            background: --var($theme, 'item-active-background');\n            color: --var($theme, 'item-active-color');\n        }\n\n        &:hover {\n            background: --var($theme, 'item-active-background');\n            color: --var($theme, 'item-active-color');\n        }\n\n        %igx-tabs__header-menu-item-icon {\n            color: --var($theme, 'item-active-icon-color');\n\n            igx-icon {\n                color: --var($theme, 'item-active-icon-color');\n            }\n        }\n    }\n\n    %igx-tabs__header-menu-item--disabled {\n        outline: 0;\n        opacity: .5;\n        cursor: default;\n        pointer-events: none;\n    }\n\n    %igx-tabs__header-menu-item-icon {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        + %igx-tabs__item-label {\n            @include ellipsis();\n            padding-top: $icon-label-space;\n        }\n    }\n\n    %igx-tabs__header-menu-item-indicator {\n        position: absolute;\n        bottom: 0;\n        // We need to explicitly set the default for IE 11\n        left: 0;\n        transform: translateX(0);\n        height: 2px;\n        min-width: $item-min-width;\n        background: --var($theme, 'indicator-color');\n        transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;\n    }\n\n    // SCROLL BUTTONS\n    %igx-tabs__header-button {\n        z-index: 1;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        border: none;\n        padding: 0;\n        min-width: rem(48px);\n        width: rem(48px);\n        min-height: $tabs-height;\n        height: $tabs-height;\n        cursor: pointer;\n        position: relative;\n        background: --var($theme, 'button-background');\n        color: --var($theme, 'button-color');\n        outline: 0;\n        box-shadow: igx-elevation($elevations, 4);\n\n        &:hover {\n            background: --var($theme, 'button-hover-background');\n            color: --var($theme, 'button-hover-color');\n        }\n\n        &:focus {\n            outline: 0;\n            background: --var($theme, 'button-hover-background');\n        }\n\n        &::-moz-focus-inner {\n            // remove focus dotted border in firefox\n            border: 0;\n        }\n\n        @include igx-ripple($button-ripple-theme);\n        @include igx-css-vars($button-ripple-theme);\n    }\n\n    %igx-tabs__header-button--hidden {\n        visibility: hidden;\n    }\n\n    %igx-tabs__header-button--none {\n        display: none;\n    }\n\n    %igx-tabs__item-label {\n        word-break: break-word;\n        max-width: 100%;\n        text-align: center;\n\n        + %igx-tabs__header-menu-item-icon {\n            padding-top: $icon-label-space;\n        }\n    }\n\n    %igx-tabs__group {\n        display: inline-block;\n        min-width: 100%;\n    }\n\n    %igx-tabs--fixed {\n        %igx-tabs__header-menu-item {\n            flex: 1 1 auto;\n            width: 100%;\n        }\n    }\n\n    %igx-tabs--icons {\n        %igx-tabs__header-button,\n        %igx-tabs__header-menu-item {\n            min-height: $tabs-height-icon;\n            height: $tabs-height-icon;\n        }\n    }\n}\n\n/// Adds typography styles for the igx-tabs component.\n/// Uses the 'subtitle-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(label: 'button')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-tabs-typography($type-scale, $categories: (label: 'button')) {\n    $label: map-get($categories, 'label');\n\n    %igx-tabs__item-label {\n        @include igx-type-style($type-scale, $label) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n\n\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n/// Does ___not___ apply for disabled state colors.\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $text-color [null] - The text color of a open time picker.\n/// @param {Color} $hover-text-color [null] - The hover text color of a open time picker.\n/// @param {Color} $selected-text-color [null] -  The text color of a selected item in time picker.\n/// @param {Color} $active-item-background [null] - The background color for current item in focused column inside the time picker.\n/// @param {Color} $header-background [null] - The header background color of a time picker.\n/// @param {Color} $header-hour-text-color [null] - The header hour text color of a time picker.\n/// @param {Color} $header-time-period-color [null] - The header AM/PM text color of a time picker.\n/// @param {Color} $background-color [null] - The time-picker panel background color.\n/// @param {box-shadow} $modal-shadow [null] - The custom shadow to be used for the time picker in modal mode.\n/// @param {box-shadow} $dropdown-shadow [null] - The custom shadow to be used for the time picker in dropdown mode.\n/// @param {border-radius} $border-radius [null] - The border radius used for the outline of the picker.\n/// @param {border-radius} $active-item-border-radius [null] - The border radius used for the outline of the currently active item (hours, minutes, AM/PM).\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires extend\n///\n/// @example scss Change the background and text colors in  time picker\n///   $my-time-picker-theme: igx-time-picker-theme(\n///     $text-color: white,\n///     $background-color: black\n///   );\n///   // Pass the theme to the igx-time-picker component mixin\n///   @include igx-time-picker($my-time-picker-theme);\n@function igx-time-picker-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n    $active-item-border-radius: null,\n\n    $text-color: null,\n    $hover-text-color: null,\n    $selected-text-color: null,\n    $active-item-background: null,\n    $header-background: null,\n    $header-hour-text-color: null,\n    $header-time-period-color: null,\n    $background-color: null,\n    $modal-shadow: null,\n    $dropdown-shadow: null\n) {\n    $name: 'igx-time-picker';\n    $time-picker-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $time-picker-schema: map-get($schema, $name);\n    } @else {\n        $time-picker-schema: $schema;\n    }\n\n    $theme: apply-palette($time-picker-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($time-picker-schema, 'border-radius')), 0, 20px\n    );\n\n    $active-item-border-radius: round-borders(\n        if($active-item-border-radius, $active-item-border-radius, map-get($time-picker-schema, 'active-item-border-radius')), 0, 20px\n    );\n\n    @if not($text-color) and $background-color {\n        $text-color: text-contrast($background-color);\n    }\n\n    @if not($header-hour-text-color) and $header-background {\n        $header-hour-text-color: text-contrast($header-background);\n    }\n\n    @if not($header-time-period-color) and $header-background {\n        @if type-of($header-background) == 'color' {\n            $header-time-period-color: rgba(text-contrast($header-background), .8);\n        }\n    }\n\n    @if not($selected-text-color) and $active-item-background {\n        $selected-text-color: text-contrast($active-item-background);\n    }\n\n    @if not($active-item-background) and $background-color {\n        @if type-of($background-color) == 'color' {\n            $active-item-background: rgba(text-contrast($background-color), .12);\n        }\n    }\n\n    @if not($modal-shadow) {\n        $elevation: map-get($time-picker-schema, 'modal-elevation');\n        $modal-shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @if not($dropdown-shadow) {\n        $elevation: map-get($time-picker-schema, 'dropdown-elevation');\n        $dropdown-shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        text-color: $text-color,\n        hover-text-color: $hover-text-color,\n        selected-text-color: $selected-text-color,\n        active-item-background: $active-item-background,\n        header-background: $header-background,\n        header-hour-text-color: $header-hour-text-color,\n        header-time-period-color: $header-time-period-color,\n        background-color: $background-color,\n        modal-shadow: $modal-shadow,\n        dropdown-shadow: $dropdown-shadow,\n        border-radius: $border-radius,\n        active-item-border-radius: $active-item-border-radius,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-time-picker($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $vertical-header-width: rem(168px);\n\n    %time-picker-display {\n        display: flex;\n        flex-flow: column nowrap;\n        max-width: rem(340px);\n        min-width: rem(320px);\n        border-radius: --var($theme, 'border-radius');\n        box-shadow: --var($theme, 'modal-shadow');\n        overflow: hidden;\n    }\n\n    %time-picker-display--vertical {\n        flex-flow: row nowrap;\n        min-width: rem(540px);\n    }\n\n    %time-picker__main {\n        background: --var($theme, 'background-color');\n        flex: 1 1 auto;\n    }\n\n    %time-picker--dropdown {\n        min-width: rem(200px);\n        box-shadow: --var($theme, 'dropdown-shadow');\n    }\n\n    %time-picker__body {\n        display: flex;\n        padding: rem(10px) 0;\n        justify-content: center;\n    }\n\n    %time-picker-content {\n        width: 100%;\n        padding: 0;\n        color: inherit;\n        line-height: initial;\n    }\n\n    %time-picker-dialog-title {\n        display: none;\n    }\n\n    %time-picker-dialog-actions {\n        margin: 0;\n    }\n\n    %time-picker__hourList {\n        text-align: #{$right};\n\n        @include if-rtl() {\n            order: 2;\n        }\n    }\n\n    %time-picker__minuteList {\n        text-align: center;\n        @include if-rtl() {\n            order: 1;\n        }\n    }\n\n    %time-picker__secondsList {\n        text-align: center;\n    }\n\n    %time-picker__ampmList {\n        display: flex;\n        flex-direction: column;\n        padding-top: rem(48px);\n\n        @include if-rtl() {\n            order: 3;\n        }\n    }\n\n    %time-picker__column {\n        max-width: rem(64px);\n        height: rem(325px);\n        padding: 0;\n        cursor: pointer;\n        display: flex;\n        flex-flow: column nowrap;\n        justify-content: space-between;\n        align-items: center;\n        color: --var($theme, 'text-color');\n        overflow: hidden;\n\n        &:focus,\n        &:active {\n            outline: none;\n        }\n    }\n\n    %time-picker__item {\n        width: rem(54px);\n        padding: rem(5px) rem(10px);\n        border-radius: --var($theme, 'active-item-border-radius');\n        height: rem(48px);\n        display: flex;\n        justify-content: center;\n        align-items: center;\n\n        &:focus,\n        &:active {\n            outline: none;\n        }\n\n        &:hover {\n            color: --var($theme, 'hover-text-color');\n        }\n    }\n\n    %time-picker__item--selected {\n        font-size: rem(24px);\n        color: --var($theme, 'selected-text-color');\n    }\n\n    %time-picker__item--active {\n        background: --var($theme, 'active-item-background');\n    }\n\n    %time-picker__header {\n        background: --var($theme, 'header-background');\n        padding: rem(24px) rem(16px);\n    }\n\n    %time-picker__header-ampm {\n        color: --var($theme, 'header-time-period-color');\n    }\n\n    %time-picker__header--vertical {\n        width: $vertical-header-width;\n    }\n\n    %time-picker__header-hour {\n        display: flex;\n        color: --var($theme, 'header-hour-text-color');\n\n        @include if-rtl() {\n            flex-direction: row-reverse;\n            justify-content: flex-end;\n        }\n    }\n\n    %time-picker__header-ampm,\n    %time-picker__header-hour {\n        margin: 0;\n    }\n\n    %time-picker__buttons {\n        display: flex;\n        justify-content: flex-end;\n        height: rem(52px);\n        padding: rem(8px);\n\n        [igxButton] + [igxButton] {\n            margin-#{$left}: rem(8px);\n        }\n    }\n}\n\n/// Adds typography styles for the igx-calendar component.\n/// Uses the 'h4', 'subtitle-1' and 'body-1'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(header-time-period: 'subtitle-1', header-hour: 'h4', content: 'body-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-time-picker-typography($type-scale, $categories: (\n    header-time-period: 'subtitle-1',\n    header-hour: 'h4',\n    content: 'body-1')\n) {\n    $time-period: map-get($categories, 'header-time-period');\n    $header-hour: map-get($categories, 'header-hour');\n    $content: map-get($categories, 'content');\n\n    %time-picker__header-ampm {\n        @include igx-type-style($type-scale, $time-period);\n    }\n\n    %time-picker__header-hour {\n        @include igx-type-style($type-scale, $header-hour);\n    }\n\n    %time-picker__column {\n        @include igx-type-style($type-scale, $content) {\n            margin-top: 0;\n            margin-bottom: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified,\n/// the text-color will be assigned automatically to a contrasting color.\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background [null] - The background color used for the toast.\n/// @param {Color} $text-color [null] - The text-color used for the toast.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for the toast component.\n///\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n/// @requires round-borders\n///\n/// @example scss Set a custom background color\n///   $my-toast-theme: igx-toast-theme($background: green);\n///   // Pass the theme to the igx-toast component mixin\n///   @include igx-toast($my-toast-theme);\n@function igx-toast-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $border-radius: null,\n    $background: null,\n    $text-color: null\n) {\n    $name: 'igx-toast';\n    $toast-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $toast-schema: map-get($schema, $name);\n    } @else {\n        $toast-schema: $schema;\n    }\n\n    $theme: apply-palette($toast-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($toast-schema, 'border-radius')), 0, 26px\n    );\n\n    @if not($text-color) and $background {\n        $text-color: text-contrast($background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background: $background,\n        border-radius: $border-radius,\n        text-color: $text-color\n    ));\n}\n\n/// Toast Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-toast($theme) {\n    @include igx-root-css-vars($theme);\n\n    $toast-width: 52px;\n    $toast-padding: rem(16px) rem(24px);\n    $toast-margin: rem(42px) auto;\n\n    %igx-toast-display {\n        position: fixed;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        left: 50%;\n        transform: translate3d(-50%, 0, 0);\n        margin: $toast-margin;\n        padding: $toast-padding;\n        min-width: $toast-width;\n        color: --var($theme, 'text-color');\n        background: --var($theme, 'background');\n        border-radius: --var($theme, 'border-radius');\n        opacity: 0;\n        z-index: 999999;\n    }\n\n    %igx-toast--top {\n        top: 0;\n    }\n\n    %igx-toast--middle {\n        top: 50%;\n        transform: translate3d(-50%, -50%, 0);\n    }\n\n    %igx-toast--bottom {\n        bottom: 0;\n    }\n}\n\n/// Adds typography styles for the igx-toast component.\n/// Uses the 'body-2'\n/// category from the typographic scale.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(text: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} igx-type-style\n@mixin igx-toast-typography($type-scale, $categories: (text: 'body-2')) {\n    $text: map-get($categories, 'text');\n\n    %igx-toast-display {\n        @include igx-type-style($type-scale, $text) {\n            margin: 0;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// Returns a map containing all style properties related to the theming the tooltip directive.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background [null] - The background color of the tooltip.\n/// @param {Color} $text-color [null] - The text color of the tooltip.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for the tooltip component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires round-borders\n///\n/// @example scss Change the tooltip background\n///   $my-tooltip-theme: igx-tooltip-theme($background: magenta);\n///   // Pass the theme to the igx-tooltip component mixin\n///   @include igx-tooltip($my-checkbox-theme);\n@function igx-tooltip-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $border-radius: null,\n    $background: null,\n    $text-color: null\n) {\n    $name: 'igx-tooltip';\n    $tooltip-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $tooltip-schema: map-get($schema, $name);\n    } @else {\n        $tooltip-schema: $schema;\n    }\n\n    $theme: apply-palette($tooltip-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($tooltip-schema, 'border-radius')), 0, 16px\n    );\n\n    @if not($text-color) and $background {\n        $text-color: text-contrast($background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $default-palette,\n        background: $background,\n        border-radius: $border-radius,\n        text-color: $text-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires --var\n@mixin igx-tooltip($theme) {\n    @include igx-root-css-vars($theme);\n\n    %tooltip-display {\n        display: inline-flex;\n        justify-content: center;\n        flex-flow: column wrap;\n        background: --var($theme, 'background');\n        color: --var($theme, 'text-color');\n        border-radius: --var($theme, 'border-radius');\n        margin: 0 auto;\n    }\n\n    %tooltip--desktop {\n        padding: 0 rem(8px);\n        min-height: rem(24px);\n    }\n\n    %tooltip--mobile {\n        padding: 0 rem(16px);\n        min-height: rem(32px);\n    }\n\n    %tooltip--hidden {\n        display: none;\n    }\n}\n\n/// Adds typography styles for the igx-tooltip component.\n/// Uses the 'body-2' category from the typographic scale for mobile tooltips and custom typography for desktop tooltips.\n/// @group typography\n/// @param {Map} $type-scale - A typographic scale as produced by igx-type-scale.\n/// @param {Map} $categories [(text-desktop: null, text-mobile: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires rem\n/// @requires {mixin} igx-type-style\n@mixin igx-tooltip-typography(\n    $type-scale,\n    $categories: (text-desktop: null, text-mobile: 'body-2')\n) {\n    $text-desktop: map-get($categories, 'text-desktop');\n    $text-mobile: map-get($categories, 'text-mobile');\n\n    %tooltip--mobile {\n        @include igx-type-style($type-scale, $text-mobile);\n    }\n\n    @if $text-desktop != null {\n        %tooltip--desktop {\n            @include igx-type-style($type-scale, $text-desktop);\n        }\n    } @else {\n        %tooltip--desktop {\n            font-size: rem(10px);\n            font-weight: 600;\n        }\n    }\n}\n","@mixin igx-vhelper {\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %vhelper-display {\n        display: block;\n        overflow: auto;\n        z-index: 10001;\n    }\n\n    %vhelper--vertical {\n        position: absolute;\n        width: 18px;\n        top: 0;\n        #{$right}: 0;\n    }\n\n    %vhelper--horizontal {\n        width: 100%;\n    }\n\n    %vhelper-content--vertical {\n        width: 1px;\n    }\n\n    %vhelper-content--horizontal {\n        height: 1px;\n    }\n}\n\n@include b(igx-vhelper) {\n    @include m(vertical) {\n        @extend %vhelper-display !optional;\n        @extend %vhelper--vertical !optional;\n\n        @include e(placeholder-content) {\n            @extend %vhelper-content--vertical !optional;\n        }\n    }\n\n    @include m(horizontal) {\n        @extend %vhelper-display !optional;\n        @extend %vhelper--horizontal !optional;\n\n        @include e(placeholder-content) {\n            @extend %vhelper-content--horizontal !optional;\n        }\n    }\n}\n","@import 'grid-print';\n\n@mixin igx-print-layout {\n    @media print {\n        html,\n        body,\n        app-root {\n            min-height: 100vh;\n            min-width: 100vw;\n            margin: 0;\n            display: block;\n        }\n\n        * {\n            background: transparent !important;\n            background-color: transparent !important;\n            color: #000 !important;\n            box-shadow: none !important;\n            text-shadow: none !important;\n            -webkit-print-color-adjust: exact;\n        }\n\n        a[href^='http']::after {\n            content: '[' attr(href) ']';\n            color: blue;\n        }\n\n        .igx-no-print,\n        igx-nav-drawer {\n            display: none !important;\n        }\n\n        @include igx-grid-print();\n\n        %igx-bottom-nav-menu,\n        %igx-group-display,\n        %igx-ripple-display,\n        %igx-slider-display,\n        %igx-snackbar-display,\n        %form-group-display,\n        %cbx-display,\n        %radio-display,\n        %tooltip-display,\n        %igx-toast-display,\n        %igx-navbar-display,\n        %vhelper-display,\n        %igx-button--flat,\n        %igx-button--raised,\n        %igx-button--fab,\n        %igx-button--icon,\n        %igx-button--disabled,\n        %igx-tabs__header,\n        %switch-display,\n        %grid-tbody-scrollbar,\n        %grid__cbx-selection,\n        %circular-display,\n        %linear-display,\n        .igx-carousel__indicators,\n        .igx-carousel__arrow--prev,\n        .igx-carousel__arrow--next {\n            display: none !important;\n        }\n    }\n}\n","$border-color: #ddd;\n$border-pin-color: #999;\n$print-background: #f9f9f9;\n$print-background: #eee;\n\n@mixin igx-grid-print {\n    %grid-display {\n        %form-group-display,\n        %cbx-display,\n        %radio-display,\n        %igx-grid__grouparea,\n        %tooltip-display,\n        %aside,\n        %overlay-display,\n        %igx-ripple-display,\n        %igx-slider-display,\n        %igx-snackbar-display,\n        %switch-display,\n        %time-picker-display,\n        %igx-toast-display,\n        %igx-tabs,\n        %igx-navbar-display,\n        %igx-button--flat,\n        %igx-button--raised,\n        %igx-button--fab,\n        %igx-button--icon,\n        %igx-button--disabled,\n        %grid-tbody-scrollbar,\n        %vhelper-display,\n        %igx-paginator,\n        %igx-grid-toolbar__actions,\n        %grid__cbx-selection,\n        %igx-drop-area__icon,\n        %igx-drop-area__text,\n        %igx-grid__header-indentation,\n        %igx-grid__grouping-indicator,\n        %igx-grid__row-indentation,\n        %igx-grid__hierarchical-expander {\n            display: none !important;\n        }\n\n        %igx-grid__grouparea,\n        %igx-paginator,\n        %igx-grid-toolbar__actions,\n        %igx-drop-area__icon,\n        %igx-drop-area__text,\n        %igx-grid__header-indentation,\n        %igx-grid__grouping-indicator,\n        %igx-grid__row-indentation,\n        %igx-grid__hierarchical-expander,\n        %igx-expansion-panel__header-icon--end,\n        %igx-expansion-panel__header-icon--start,\n        %grid-summaries-patch {\n            display: none !important;\n        }\n\n\n        %igx-grid__grouping-indicator {\n            igx-icon {\n                display: none !important;\n            }\n        }\n\n        %igx-grid__filtering-cell {\n            height: 0 !important;\n            border-top: none !important;\n            border-right: none !important;\n        }\n\n        %grid-tfoot,\n        %igx-grid__grouparea,\n        %igx-grid__filtering-cell,\n        %igx-grid__group-row,\n        %grid-cell-header,\n        %igx-grid-toolbar,\n        %grid-thead-title,\n        %grid-row,\n        %grid-thead {\n            border-color: $border-color !important;\n        }\n\n        %grid-display {\n            igx-icon {\n                color: #666 !important;\n            }\n        }\n\n        %grid-thead,\n        %igx-grid-toolbar,\n        %igx-grid__group-row,\n        %grid-tfoot {\n            background: $print-background !important;\n        }\n\n        %grid-cell-header-title,\n        %grid-cell-text {\n            white-space: unset !important;\n            text-overflow: initial !important;\n            overflow: visible !important;\n        }\n\n        %grid-cell-display {\n            igx-icon {\n                display: none;\n            }\n        }\n\n        %grid-summaries-patch {\n            display: none;\n        }\n\n        %grid-cell--pinned-last {\n            border-right: 2px solid red !important;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $color [null] - The color of the ripple.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the color\n///   $my-ripple-theme: igx-ripple-theme($color: yellow);\n///   // Pass the theme to the igx-ripple component mixin\n///   igx-ripple($my-ripple-theme);\n@function igx-ripple-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $color: null\n) {\n    $name: 'igx-ripple';\n    $ripple-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $ripple-schema: map-get($schema, $name);\n    } @else {\n        $ripple-schema: $schema;\n    }\n\n    $theme: apply-palette($ripple-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        color: $color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires --var\n@mixin igx-ripple($theme, $palette: $default-palette) {\n    @include igx-root-css-vars($theme);\n\n    // @debug $theme;\n\n    %igx-ripple-display {\n        display: block;\n        position: absolute;\n        border-radius: 50%;\n        background: --var($theme, 'color');\n        pointer-events: none;\n        transform-origin: center;\n        transform: translate3d(0, 0, 0) scale(0);\n        will-change: opacity, transform;\n        opacity: .5;\n    }\n\n    %igx-ripple-wrapper {\n        overflow: hidden;\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $icon-background [null]- The background color used for avatars of type icon.\n/// @param {Color} $icon-color [null] - The icon color used for avatars of type icon.\n/// @param {Color} $initials-background [null] - The background color used for avatars of type initials.\n/// @param {Color} $initials-color [null] - The text color used for avatars of type initials.\n/// @param {Color} $image-background [null] - The background color used for avatars of type image.\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n///\n/// @example scss Change the background and icon colors in icon avatars\n///   $my-avatar-theme: igx-avatar-theme($icon-background: black, $icon-color: white);\n///   // Pass the theme to the igx-avatar component mixin\n///   @include igx-avatar($my-avatar-theme);\n@function igx-avatar-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $icon-background: null,\n    $icon-color: null,\n    $initials-background: null,\n    $initials-color: null,\n    $image-background: null\n) {\n    $name: 'igx-avatar';\n    $theme: ();\n\n    @if map-has-key($schema, $name) {\n        $theme: apply-palette(map-get($schema, $name), $palette);\n    } @else {\n        $theme: apply-palette($schema, $palette);\n    }\n\n    @if not($icon-color) and $icon-background {\n        $icon-color: text-contrast($icon-background);\n    }\n\n    @if not($initials-color) and $initials-background {\n        $initials-color: text-contrast($initials-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        icon-background: $icon-background,\n        icon-color: $icon-color,\n        initials-background: $initials-background,\n        initials-color: $initials-color,\n        image-background: $image-background\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-avatar($theme) {\n    @include igx-root-css-vars($theme);\n\n    $small-size: 40px;\n    $medium-size: 64px;\n    $large-size: 88px;\n\n    %igx-avatar-display {\n        position: relative;\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        user-select: none;\n        color: --var($theme, 'initials-color');\n        background: --var($theme, 'initials-background');\n        vertical-align: middle;\n    }\n\n    %igx-avatar--rounded {\n        border-radius: 50%;\n    }\n\n    %igx-avatar--small {\n        width: rem($small-size);\n        height: rem($small-size);\n        min-width: rem($small-size);\n    }\n\n    %igx-avatar--medium {\n        width: rem($medium-size);\n        height: rem($medium-size);\n        min-width: rem($medium-size);\n    }\n\n    %igx-avatar--large {\n        width: rem($large-size);\n        height: rem($large-size);\n        min-width: rem($large-size);\n    }\n\n    %igx-avatar-inner {\n        width: 100%;\n        height: 100%;\n        border-radius: inherit;\n    }\n\n    %igx-avatar-icon {\n        color: --var($theme, 'icon-color');\n        background: --var($theme, 'icon-background');\n    }\n\n    %igx-avatar-image {\n        background-color: --var($theme, 'image-background');\n        background-size: cover;\n        background-repeat: no-repeat;\n        background-position: center;\n    }\n\n    %igx-avatar-initials {\n        text-transform: uppercase;\n        color: --var($theme, 'initials-color');\n        background-color: --var($theme, 'initials-background');\n    }\n\n    %igx-avatar-initials--small {\n        font-size: rem($small-size / 2);\n        line-height: rem($small-size);\n    }\n\n    %igx-avatar-initials--medium {\n        font-size: rem($medium-size / 2);\n        line-height: rem($medium-size);\n    }\n\n    %igx-avatar-initials--large {\n        font-size: rem($large-size / 2);\n        line-height: rem($large-size);\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n///\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n/// @param {Color} $icon-color [null] - The icon color used.\n/// @param {Color} $text-color [null] - The text color used.\n/// @param {Color} $border-color [null] - The border color used.\n/// @param {Color} $background-color [null] - The background color used.\n/// @param {Bool} $disable-border [true] - Sets the badge border visibility.\n/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the badge.\n/// @param {border-radius} $border-radius [null] - The border radius used for badge component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires text-contrast\n/// @requires rem\n/// @requires round-borders\n/// @requires {variable} $elevations\n///\n/// @example scss Change the text and icon colors in a badge\n///   $my-badge-theme: igx-badge-theme($icon-color: black, $background-color: white);\n///   // IE Supported theme - Pass the theme to the igx-badge component mixin\n///   @include igx-badge($my-badge-theme);\n///\n///   // Theming using css variables (not supported in IE11):\n///   @include igx-css-vars($my-badge-theme);\n@function igx-badge-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $icon-color: null,\n    $text-color: null,\n\n    $border-color: null,\n    $border-radius: null,\n\n    $background-color: null,\n    $shadow: null,\n\n    $disable-border: true\n) {\n    $name: 'igx-badge';\n    $badge-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $badge-schema: map-get($schema, $name);\n    } @else {\n        $badge-schema: $schema;\n    }\n\n    $theme: apply-palette($badge-schema, $palette);\n    $border-width: if($disable-border == true, 0, rem(1px));\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($badge-schema, 'border-radius')), 0, 11px\n    );\n\n    @if not($icon-color) and $background-color {\n        $icon-color: text-contrast($background-color);\n    }\n\n    @if not($text-color) and $background-color {\n        $text-color: text-contrast($background-color);\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($badge-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        icon-color: $icon-color,\n        text-color: $text-color,\n        border-color: $border-color,\n        border-radius: $border-radius,\n        background-color: $background-color,\n        shadow: $shadow,\n        border-width: $border-width\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires igx-color\n/// @requires rem\n/// @requires --var\n@mixin igx-badge($theme) {\n    @include igx-root-css-vars($theme);\n\n    $palette: map-get($theme, 'palette');\n\n    $badge-width: 22px;\n    $badge-height: $badge-width;\n\n    $badge-font-size: rem(11px);\n    $badge-font-weight: normal;\n\n    $badge-icon-font-size: rem(12px);\n\n    $badge-value-padding: rem(4px);\n    $border-type: solid;\n\n    %igx-badge-display {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        min-width: $badge-width;\n        height: $badge-height;\n        font-size: $badge-font-size;\n        font-weight: $badge-font-weight;\n        color: --var($theme, 'text-color');\n        line-height: 1;\n\n        igx-icon {\n            display: inline-flex;\n            justify-content: center;\n            align-items: center;\n            width: $badge-width - 2px;\n            height: $badge-width - 2px;\n            font-size: $badge-icon-font-size;\n            font-weight: $badge-font-weight;\n            color: --var($theme, 'icon-color');\n        }\n    }\n\n    %igx-badge-value {\n        white-space: nowrap;\n        padding: $badge-value-padding;\n    }\n\n    %igx-badge--circle {\n        border-radius: --var($theme, 'border-radius');\n        box-shadow: --var($theme, 'shadow');\n        border-width: --var($theme, 'border-width');\n        border-color: --var($theme, 'border-color');\n        border-style: $border-type;\n        overflow: hidden;\n    }\n\n    %igx-badge--default {\n        background: --var($theme, 'background-color');\n    }\n\n    %igx-circle--success {\n        background: igx-color($palette, 'success');\n    }\n\n    %igx-badge--info {\n        background: igx-color($palette, 'info');\n    }\n\n    %igx-circle--warn {\n        background: igx-color($palette, 'warn');\n    }\n\n    %igx-circle--error {\n        background: igx-color($palette, 'error');\n    }\n\n    %igx-badge--hidden {\n        visibility: hidden;\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// If only background color is specified, text/icon color\n/// will be assigned automatically to a contrasting color.\n/// Does ___not___ apply for disabled state colors.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {box-shadow} $shadow [null] - The shadow to be applied for the button group.\n/// @param {Color} $item-text-color [null]- The text color for button group items.\n/// @param {Color} $item-background [null] - The background color for button group items .\n/// @param {Color} $item-border-color [null] - The border color between button group items.\n///\n/// @param {Color} $item-hover-text-color [null] - The hover text color for button group items.\n/// @param {Color} $item-hover-background [null] - The hover background color for button group items.\n///\n/// @param {Color} $disabled-text-color [null]- The text/icon color for a disabled item in the button group.\n/// @param {Color} $disabled-background-color [null] - The background color for a disabled item in the button group.\n///\n/// @param {Color} $item-selected-text-color [null]- The text color for a selected item in the button group.\n/// @param {Color} $item-selected-background [null] - The background color for a selected item in the button group.\n/// @param {Color} $item-selected-border-color [null] - The border color for a selected item from the button group.\n/// @param {Color} $item-selected-hover-background [null] - The background color for a selected item in hover or focus state in the button group.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for button-group component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires igx-elevation\n/// @requires round-borders\n/// @requires $elevations\n///\n/// @example scss Change the background, text, and border colors\n///   $my-button-group-theme: igx-button-group-theme(\n///     $item-text-color: white,\n///     $item-background: rgba(0, 0, 0, .8),\n///     $item-border-color: #dadada\n///   );\n///   // Pass the theme to the igx-button-group component mixin\n///   @include igx-button-group($my-button-group-theme);\n@function igx-button-group-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $shadow: null,\n    $item-text-color: null,\n    $item-background: null,\n    $item-border-color: null,\n    $item-disabled-border: null,\n    $border-radius: null,\n\n    $item-hover-text-color: null,\n    $item-hover-background: null,\n\n    $disabled-text-color: null,\n    $disabled-background-color: null,\n\n    $item-selected-text-color: null,\n    $item-selected-background: null,\n    $item-selected-border-color: null,\n    $item-selected-hover-background: null\n) {\n    $name: 'igx-button-group';\n    $button-group-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $button-group-schema: map-get($schema, $name);\n    } @else {\n        $button-group-schema: $schema;\n    }\n\n    $theme: apply-palette($button-group-schema, $palette);\n\n    $border: 1px solid map-get($theme, 'item-selected-border-color');\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($button-group-schema, 'border-radius')), 0, 20px\n    );\n\n    @if not($item-text-color) and $item-background {\n        @if type_of($item-background) == 'color' {\n            $item-text-color: text-contrast($item-background);\n        }\n    }\n\n    @if not($item-hover-text-color) and $item-hover-background {\n        @if type_of($item-hover-background) == 'color' {\n            $item-hover-text-color: text-contrast($item-hover-background);\n        }\n    }\n\n    @if not($item-selected-background) and $item-background {\n        @if type_of($item-background) == 'color' {\n            $item-selected-text-color: text-contrast($item-background);\n        }\n    }\n\n    @if not($item-selected-text-color) and $item-selected-background {\n        @if type_of($item-selected-background) == 'color' {\n            $item-selected-text-color: text-contrast($item-selected-background);\n        }\n    }\n\n    @if not($disabled-text-color) and $disabled-background-color {\n        @if type_of($disabled-background-color) == 'color' {\n            $disabled-text-color: rgba(text-contrast($item-background), .3);\n        }\n    }\n\n    @if map-get($button-group-schema, 'elevation') > 0 {\n        $border: none;\n    }\n\n    @if not($shadow) {\n        $elevation: map-get($button-group-schema, 'elevation');\n        $shadow: igx-elevation($elevations, $elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        item-text-color: $item-text-color,\n        item-background: $item-background,\n        item-border-color: $item-border-color,\n        item-disabled-border: $item-disabled-border,\n        border-radius: $border-radius,\n        item-hover-text-color: $item-hover-text-color,\n        item-hover-background: $item-hover-background,\n        disabled-text-color:$disabled-text-color,\n        disabled-background-color:$disabled-background-color,\n        item-selected-text-color: $item-selected-text-color,\n        item-selected-background: $item-selected-background,\n        item-selected-border-color: $item-selected-border-color,\n        item-selected-hover-background: $item-selected-hover-background,\n        border: $border,\n        shadow: $shadow\n    ));\n}\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires igx-color\n/// @requires --var\n@mixin igx-button-group($theme) {\n    @include igx-root-css-vars($theme);\n    $group-item-min-width: 24px;\n    $group-item-border-thickness: 1px;\n    $group-items-margin: rem(10px, 16px);\n    $transition: all 140ms $ease-in-out-quad;\n    $palette: map-get($theme, 'palette');\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %igx-group-display {\n        display: flex;\n        box-shadow: --var($theme, 'shadow');\n        transition: $transition;\n        border-radius: --var($theme, 'border-radius')\n    }\n\n    %igx-group-item {\n        @include ellipsis();\n        border: $group-item-border-thickness solid --var($theme, 'item-border-color');\n        color: --var($theme, 'item-text-color');\n        background: --var($theme, 'item-background');\n        min-width: $group-item-min-width;\n        display: flex;\n        flex: 1 0 0%;\n        justify-content: center;\n        align-items: center;\n        text-decoration: none;\n        cursor: pointer;\n        user-select: none;\n        position: relative;\n        z-index: 0;\n        transition: $transition;\n\n        &%igx-button--flat {\n            border-radius: 0;\n        }\n\n        %igx-icon-display {\n            color: currentColor;\n        }\n\n        &:not(:nth-child(0)) {\n            margin-#{$left}: -1px;\n        }\n\n        &:first-of-type {\n            border-top-#{$left}-radius: --var($theme, 'border-radius');\n            border-bottom-#{$left}-radius: --var($theme, 'border-radius');\n        }\n\n        &:last-of-type {\n            border-top-#{$right}-radius: --var($theme, 'border-radius');\n            border-bottom-#{$right}-radius: --var($theme, 'border-radius');\n        }\n\n        &%igx-button--disabled {\n            color: --var($theme, 'disabled-text-color') !important;\n            background: --var($theme, 'disabled-background-color') !important;\n            border-color: --var($theme, 'item-disabled-border');\n        }\n\n        &:hover,\n        &:focus {\n            %igx-icon-display {\n                color: currentColor;\n            }\n\n            color: --var($theme, 'item-hover-text-color');\n            background: --var($theme, 'item-hover-background');\n            z-index: 1;\n        }\n    }\n\n    %igx-group-item-vertical {\n        &:not(:nth-child(0)) {\n            margin-top: -1px;\n            margin-#{$left}: 0;\n        }\n\n        &:first-of-type {\n            border-top-#{$left}-radius: --var($theme, 'border-radius');\n            border-top-#{$right}-radius: --var($theme, 'border-radius');\n            border-bottom-#{$left}-radius: 0;\n            border-bottom-#{$right}-radius: 0;\n        }\n\n        &:last-of-type {\n            border-top-#{$left}-radius: 0;\n            border-top-#{$right}-radius: 0;\n            border-bottom-#{$left}-radius: --var($theme, 'border-radius');\n            border-bottom-#{$right}-radius: --var($theme, 'border-radius');\n        }\n    }\n\n    %igx-group-item-selected {\n        color: --var($theme, 'item-selected-text-color');\n        background: --var($theme, 'item-selected-background');\n        border-color: --var($theme, 'item-selected-border-color');\n        position: relative;\n        z-index: 1;\n\n        &:hover,\n        &:focus {\n            color: --var($theme, 'item-selected-text-color');\n            background: --var($theme, 'item-selected-hover-background');\n        }\n\n        &%igx-button--disabled {\n            position: relative;\n\n            &::before {\n                position: absolute;\n                content: '';\n                top: 0;\n                #{$right}: 0;\n                bottom: 0;\n                #{$left}: 0;\n                background: rgba(igx-color($palette, 'grays', 500), .06);\n            }\n        }\n    }\n\n    %igx-group-vertical {\n        flex-flow: column;\n    }\n\n    %igx-group-item-content {\n        display: flex;\n        flex-flow: row nowrap;\n        justify-content: center;\n        align-items: center;\n        text-align: center;\n\n        * ~ * {\n            margin-#{$left}: $group-items-margin;\n        }\n    }\n}\n\n","////\n/// @group animations\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @requires {mixin} keyframes\n@mixin scale-in-center {\n    @include keyframes(scale-in-center) {\n        0% {\n            transform: scale(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-bl {\n    @include keyframes(scale-in-bl) {\n        0% {\n            transform: scale(0);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-ver-center {\n    @include keyframes(scale-in-ver-center) {\n        0% {\n            transform: scaleY(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(1);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-top {\n    @include keyframes(scale-in-top) {\n        0% {\n            transform: scale(0);\n            transform-origin: 50% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 50% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-left {\n    @include keyframes(scale-in-left) {\n        0% {\n            transform: scale(0);\n            transform-origin: 0% 50%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 50%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-ver-top {\n    @include keyframes(scale-in-ver-top) {\n        0% {\n            transform: scaleY(0);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(1);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-tr {\n    @include keyframes(scale-in-tr) {\n        0% {\n            transform: scale(0);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-tl {\n    @include keyframes(scale-in-tl) {\n        0% {\n            transform: scale(0);\n            transform-origin: 0% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-ver-bottom {\n    @include keyframes(scale-in-ver-bottom) {\n        0% {\n            transform: scaleY(0);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(1);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-right {\n    @include keyframes(scale-in-right) {\n        0% {\n            transform: scale(0);\n            transform-origin: 100% 50%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 50%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-hor-center {\n    @include keyframes(scale-in-hor-center) {\n        0% {\n            transform: scaleX(0);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(1);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-br {\n    @include keyframes(scale-in-br) {\n        0% {\n            transform: scale(0);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-hor-left {\n    @include keyframes(scale-in-hor-left) {\n        0% {\n            transform: scaleX(0);\n            transform-origin: 0% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(1);\n            transform-origin: 0% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-bottom {\n    @include keyframes(scale-in-bottom) {\n        0% {\n            transform: scale(0);\n            transform-origin: 50% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 50% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-in-hor-right {\n    @include keyframes(scale-in-hor-right) {\n        0% {\n            transform: scaleX(0);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(1);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n    }\n}\n","////\n/// @group animations\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @requires {mixin} keyframes\n@mixin scale-out-center {\n    @include keyframes (scale-out-center) {\n        0% {\n            transform: scale(1);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-bl {\n    @include keyframes (scale-out-bl) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-vertical {\n    @include keyframes (scale-out-vertical) {\n        0% {\n            transform: scaleY(1);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(0);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-top {\n    @include keyframes (scale-out-top) {\n        0% {\n            transform: scale(1);\n            transform-origin: 50% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 50% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-left {\n    @include keyframes (scale-out-left) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0% 50%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 0% 50%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-ver-top {\n    @include keyframes (scale-out-ver-top) {\n        0% {\n            transform: scaleY(1);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(0);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-tr {\n    @include keyframes (scale-out-tr) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 100% 0%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-tl {\n    @include keyframes (scale-out-tl) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0 0;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 0 0;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-ver-bottom {\n    @include keyframes (scale-out-ver-bottom) {\n        0% {\n            transform: scaleY(1);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleY(0);\n            transform-origin: 0% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-right {\n    @include keyframes (scale-out-right) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 50%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 100% 50%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-horizontal {\n    @include keyframes (scale-out-horizontal) {\n        0% {\n            transform: scaleX(1);\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(0);\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-br {\n    @include keyframes (scale-out-br) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-hor-left {\n    @include keyframes (scale-out-hor-left) {\n        0% {\n            transform: scaleX(1);\n            transform-origin: 0 0;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(0);\n            transform-origin: 0 0;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-bottom {\n    @include keyframes (scale-out-bottom) {\n        0% {\n            transform: scale(1);\n            transform-origin: 50% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scale(0);\n            transform-origin: 50% 100%;\n            opacity: 1;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-out-hor-right {\n    @include keyframes (scale-out-hor-right) {\n        0% {\n            transform: scaleX(1);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n\n        100% {\n            transform: scaleX(0);\n            transform-origin: 100% 100%;\n            opacity: 1;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $slide-background [null] - The slide background color.\n/// @param {Color} $button-background [null] - The previous/next buttons idle background color.\n/// @param {Color} $button-hover-background [null] - The previous/next buttons hover background color.\n/// @param {Color} $button-disabled-background [null] - The previous/next buttons disabled background color.\n/// @param {Color} $button-arrow-color [null] - The previous/next buttons idle arrow color.\n/// @param {Color} $button-hover-arrow-color [null] - The previous/next buttons hover arrow color.\n/// @param {Color} $button-disabled-arrow-color [null] - The previous/next buttons disabled arrow color.\n/// @param {Color} $indicator-dot-color [null] - The active indicator dot color.\n/// @param {Color} $indicator-border-color [null] - The idle indicator border color.\n/// @param {Color} $indicator-active-border-color [null] - The active indicator border color.\n/// @param {box-shadow} $button-shadow [null] - Shadow underneath the previous/next buttons.\n///\n/// @param {border-radius} $border-radius [null] - The border radius used for carousel component.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires igx-elevation\n/// @requires text-contrast\n/// @requires $elevations\n/// @requires round-borders\n///\n/// @example scss Change the previous/next button colors\n///   $my-carousel-theme: igx-carousel-theme(\n///     $button-background: black,\n///     $button-hover-background: white\n///   );\n///   // Pass the carousel theme to the igx-carousel component mixin\n///   @include igx-carousel($my-carousel-theme);\n@function igx-carousel-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $border-radius: null,\n    $button-shadow: null,\n\n    $slide-background: null,\n\n    $button-background: null,\n    $button-hover-background: null,\n    $button-disabled-background: null,\n    $button-arrow-color: null,\n    $button-hover-arrow-color: null,\n    $button-disabled-arrow-color: null,\n\n    $indicator-dot-color: null,\n    $indicator-border-color: null,\n    $indicator-active-border-color: null,\n){\n    $name: 'igx-carousel';\n    $carousel-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $carousel-schema: map-get($schema, $name);\n    } @else {\n        $carousel-schema: $schema;\n    }\n\n    $theme: apply-palette($carousel-schema, $palette);\n\n    $border-radius: round-borders(\n        if($border-radius, $border-radius, map-get($carousel-schema, 'border-radius')),0 ,36px\n    );\n\n    @if not($button-shadow) {\n        $button-elevation: map-get($carousel-schema, 'button-elevation');\n        $button-shadow: igx-elevation($elevations, $button-elevation);\n    }\n\n    @if not($button-arrow-color) and $button-background {\n        $button-arrow-color: text-contrast($button-background);\n    }\n\n    @if not($button-hover-arrow-color) and $button-hover-background {\n        $button-hover-arrow-color: text-contrast($button-hover-background);\n    }\n\n    @if not($button-disabled-arrow-color) and $button-disabled-background {\n        $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n\n        slide-background: $slide-background,\n\n        border-radius: $border-radius,\n        button-shadow: $button-shadow,\n\n        button-background: $button-background,\n        button-disabled-background: $button-disabled-background,\n        button-hover-background: $button-hover-background,\n        button-arrow-color: $button-arrow-color,\n        button-hover-arrow-color: $button-hover-arrow-color,\n        button-disabled-arrow-color: $button-disabled-arrow-color,\n\n        indicator-dot-color: $indicator-dot-color,\n        indicator-border-color: $indicator-border-color,\n        indicator-active-border-color: $indicator-active-border-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires igx-color\n/// @requires igx-elevation\n/// @requires $elevations\n/// @requires {mixin} animation\n/// @requires {mixin} scale-in-center\n/// @requires {mixin} scale-out-center\n/// @requires --var\n@mixin igx-carousel($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    @include scale-in-center();\n    @include scale-out-center();\n\n    $carousel-arrow-margin: 0 16px;\n    $carousel-indicators-margin: 16px 0;\n    $carousel-indicators-padding: 0;\n    $carousel-indicator-margin: 0 5px;\n    $indicator-border-style: 2px solid;\n\n    %igx-carousel-display {\n        display: flex;\n        position: relative;\n        justify-content: center;\n        width: 100%;\n        height: 100%;\n        align-items: center;\n        flex-flow: column nowrap;\n    }\n\n    %igx-nav-arrow {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 46px;\n        height: 46px;\n        cursor: pointer;\n        border-radius: 50%;\n        outline-style: none;\n        transition: all .15s ease-in-out;\n        color: --var($theme, 'button-arrow-color');\n        background: --var($theme, 'button-background');\n        box-shadow: --var($theme, 'button-shadow');\n    }\n\n    %igx-nav-arrow--disabled {\n        background: --var($theme, 'button-disabled-background');\n        color: --var($theme, 'button-disabled-arrow-color');\n        pointer-events: none;\n        box-shadow: none;\n\n        igx-icon {\n            color: currentColor;\n        }\n    }\n\n    %igx-nav-arrow--hover {\n        color: --var($theme, 'button-hover-arrow-color');\n        background: --var($theme, 'button-hover-background');\n    }\n\n    %igx-carousel-arrow {\n        margin: $carousel-arrow-margin;\n        position: absolute;\n        top: 50%;\n        transform: translateY(-50%);\n        z-index: 3;\n        outline: none;\n        user-select: none;\n    }\n\n    %igx-carousel-arrow--next {\n        #{$right}: 0;\n    }\n\n    %igx-carousel-arrow--prev {\n        #{$left}: 0;\n    }\n\n    %igx-carousel-arrow--next,\n    %igx-carousel-arrow--prev {\n        @include if-rtl() {\n            igx-icon {\n                transform: scaleX(-1);\n            }\n        }\n    }\n\n    %igx-carousel-indicators {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: $carousel-indicators-margin;\n        padding: $carousel-indicators-padding;\n        list-style: none;\n        z-index: 10;\n        #{$left}: 50%;\n\n        @include if-ltr() {\n            transform: translateX(-50%);\n        }\n\n        @include if-rtl() {\n            transform: translateX(50%);\n        }\n    }\n\n    %igx-carousel-indicators--bottom {\n        bottom: 0;\n    }\n\n    %igx-carousel-indicators--top {\n        top: 0;\n    }\n\n    %igx-carousel-indicators-label {\n        align-items: center;\n        // TODO: this should be wrapped in carousel typogrpahy\n        font-size: rem(16px);\n    }\n\n    %igx-carousel-indicator {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin: $carousel-indicator-margin;\n        cursor: pointer;\n    }\n\n    %igx-nav-dot {\n        position: relative;\n        width: 12px;\n        height: 12px;\n        text-indent: -9999px;\n        border: $indicator-border-style;\n        border-color: --var($theme, 'indicator-border-color');\n        border-radius: 50%;\n        transition: all .15s $ease-out-quad;\n        box-shadow: igx-elevation($elevations, 1);\n        opacity: .7;\n\n        &::after {\n            @include animation('scale-out-center' .15s $ease-out-quad forwards);\n            content: '';\n            position: absolute;\n            top: 1px;\n            bottom: 1px;\n            #{$left}: 1px;\n            #{$right}: 1px;\n            border-radius: inherit;\n            background: --var($theme, 'indicator-dot-color');\n            opacity: 0;\n        }\n\n        &:hover {\n            opacity: 1;\n        }\n    }\n\n    %igx-nav-dot--active {\n        border: $indicator-border-style;\n        border-color: --var($theme, 'indicator-active-border-color');\n        opacity: 1;\n\n        &::after {\n            opacity: 1;\n            @include animation('scale-in-center' .15s $ease-out-quad forwards);\n        }\n    }\n\n    %igx-carousel-slide-wrapper {\n        position: relative;\n        width: 100%;\n        height: inherit;\n        overflow: hidden;\n        outline-style: none;\n        border-radius: --var($theme, 'border-radius');\n    }\n\n    %igx-carousel-slide {\n        position: absolute;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n        right: 0;\n        bottom: 0;\n        z-index: -1;\n        background: --var($theme, 'slide-background');\n        visibility: hidden;\n    }\n\n    %igx-carousel-slide--previous {\n        z-index: 1;\n        visibility: visible;\n    }\n\n    %igx-carousel-slide--current {\n        z-index: 2;\n        visibility: visible;\n    }\n\n    %igx-carousel-slide img {\n        width: inherit;\n        height: inherit;\n        object-fit: cover;\n        touch-action: none;\n        pointer-events: none;\n    }\n}\n","////\n/// @group animations\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @requires {mixin} keyframes\n@mixin scale-up-center {\n    @include keyframes(scale-up-center) {\n        0% {\n            transform: scale(.5)\n        }\n\n        100% {\n            transform: scale(1)\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-bl {\n    @include keyframes(scale-up-bl) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-ver-center {\n    @include keyframes(scale-up-ver-center) {\n        0% {\n            transform: scaleY(.4);\n        }\n\n        100% {\n            transform: scaleY(1);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-top {\n    @include keyframes(scale-up-top) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 50% 0%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 50% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-left {\n    @include keyframes(scale-up-left) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 0% 50%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 50%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-ver-top {\n    @include keyframes(scale-up-ver-top) {\n        0% {\n            transform: scaleY(.4);\n            transform-origin: 100% 0%;\n        }\n\n        100% {\n            transform: scaleY(1);\n            transform-origin: 100% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-tr {\n    @include keyframes(scale-up-tr) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 100% 0%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-tl {\n    @include keyframes(scale-up-tl) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-ver-bottom {\n    @include keyframes(scale-up-ver-bottom) {\n        0% {\n            transform: scaleY(.4);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: scaleY(1);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-right {\n    @include keyframes(scale-up-right) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 100% 50%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 50%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-hor-center {\n    @include keyframes(scale-up-hor-center) {\n        0% {\n            transform: scaleX(.4);\n        }\n\n        100% {\n            transform: scaleX(1);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-br {\n    @include keyframes(scale-up-br) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-hor-left {\n    @include keyframes(scale-up-hor-left) {\n        0% {\n            transform: scaleX(.4);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: scaleX(1);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-bottom {\n    @include keyframes(scale-up-bottom) {\n        0% {\n            transform: scale(.5);\n            transform-origin: 50% 100%;\n        }\n\n        100% {\n            transform: scale(1);\n            transform-origin: 50% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-up-hor-right {\n    @include keyframes(scale-up-hor-right) {\n        0% {\n            transform: scaleX(.4);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: scaleX(1);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-center {\n    @include keyframes(scale-down-center) {\n        0% {\n            transform: scale(1);\n        }\n\n        100% {\n            transform: scale(.5);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-bl {\n    @include keyframes(scale-down-bl) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-ver-center {\n    @include keyframes(scale-down-ver-center) {\n        0% {\n            transform: scaleY(1);\n        }\n\n        100% {\n            transform: scaleY(.3);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-top {\n    @include keyframes(scale-down-top) {\n        0% {\n            transform: scale(1);\n            transform-origin: 50% 0%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 50% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-left {\n    @include keyframes(scale-down-left) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0% 50%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 0% 50%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-ver-top {\n    @include keyframes(scale-down-ver-top) {\n        0% {\n            transform: scaleY(1);\n            transform-origin: 100% 0%;\n        }\n\n        100% {\n            transform: scaleY(.3);\n            transform-origin: 100% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-tr {\n    @include keyframes(scale-down-tr) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 0%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 100% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-tl {\n    @include keyframes(scale-down-tl) {\n        0% {\n            transform: scale(1);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-ver-top-bottom {\n    @include keyframes(scale-down-ver-to-bottom) {\n        0% {\n            transform: scaleY(1);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: scaleY(.3);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-right {\n    @include keyframes(scale-down-right) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 50%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 100% 50%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-hor-center {\n    @include keyframes(scale-down-hor-center) {\n        0% {\n            transform: scaleX(1);\n        }\n\n        100% {\n            transform: scaleX(.3);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-br {\n    @include keyframes(scale-down-br) {\n        0% {\n            transform: scale(1);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-hor-left {\n    @include keyframes(scale-down-hor-left) {\n        0% {\n            transform: scaleX(1);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: scaleX(.3);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-bottom {\n    @include keyframes(scale-down-bottom) {\n        0% {\n            transform: scale(1);\n            transform-origin: 50% 100%;\n        }\n\n        100% {\n            transform: scale(.5);\n            transform-origin: 50% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin scale-down-hor-right {\n    @include keyframes(scale-down-hor-right) {\n        0% {\n            transform: scaleX(1);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: scaleX(.3);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @param {number} $start-scale [.5] - The scale to start the animation from.\n/// @param {number} $end-scale [1] - The scale to end the animation at.\n/// @requires {mixin} keyframes\n@mixin scale-in-out($start-scale: .5, $end-scale: 1) {\n    @include keyframes(scale-in-out) {\n        50% {\n            transform: scale($start-scale);\n            transform-origin: 50% 50%;\n        }\n\n        100% {\n            transform: scale($end-scale);\n            transform-origin: 50% 50%;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $search-separator-border-color [null] - The combo search box separator color.\n/// @param {Color} $empty-list-placeholder-color [null] - The combo placeholder text color.\n/// @param {Color} $empty-list-background [null] - The combo list background color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n@function igx-combo-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $search-separator-border-color: null,\n    $empty-list-placeholder-color: null,\n    $empty-list-background: null\n) {\n    $name: 'igx-combo';\n    $combo-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $combo-schema: map-get($schema, $name);\n    } @else {\n        $combo-schema: $schema;\n    }\n\n    $theme: apply-palette($combo-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        search-separator-border-color: $search-separator-border-color,\n        empty-list-placeholder-color: $empty-list-placeholder-color,\n        empty-list-background: $empty-list-background\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-combo($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %igx-combo {\n        position: relative;\n        display: block;\n\n        %igx-button--icon {\n            width: rem(24px);\n            height: rem(24px);\n        }\n    }\n\n    %igx-combo__checkbox {\n        margin-#{$right}: rem(8);\n    }\n\n    %igx-combo__drop-down {\n        position: absolute;\n        width: 100%;\n\n        .igx-drop-down {\n            width: 100%;\n        }\n    }\n\n    %igx-combo__search {\n        padding: rem(8px) rem(16px);\n        margin: 0 !important;\n        z-index: 26;\n        border-bottom: 1px dashed --var($theme, 'search-separator-border-color');\n    }\n\n    %igx-combo__content {\n        position: relative;\n        overflow: hidden;\n\n        &:focus {\n            outline: transparent;\n        }\n    }\n\n    %igx-combo__add {\n        display: flex;\n        flex-direction: column;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        padding: rem(16px);\n        background: --var($theme, 'empty-list-background');\n    }\n\n    %igx-combo__empty {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        width: 100%;\n        color: --var($theme, 'empty-list-placeholder-color');\n        padding: 0 rem(24px);\n        font-size: rem(13px);\n    }\n\n    // TODO: make this part better\n    %igx-combo__add-item {\n        &%igx-drop-down__item {\n            width: auto !important;\n            padding: 0 !important;\n\n            &:hover {\n                background: transparent!important;\n            }\n        }\n\n        &%igx-drop-down__item--focused {\n            &:focus {\n                background: transparent!important;\n            }\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $theme - The calendar theme used to style the component.\n/// @requires $elevations\n/// @requires igx-elevation\n/// @requires rem\n@mixin igx-date-picker($theme) {\n    $selected-hover-color: text-contrast(map-get($theme, 'date-selected-background'));\n\n    %date-picker {\n        min-width: 200px;\n        box-shadow: igx-elevation($elevations, 24);\n        border-radius: --var($theme, 'border-radius');\n        background: --var($theme, 'content-background');\n        overflow: hidden;\n\n        %cal-display {\n            background: --var($theme, 'content-background');\n        }\n\n        %cal-header-display {\n            background: --var($theme, 'header-background');\n            color: --var($theme, 'header-text-color');\n        }\n\n        %cal-picker-arrow {\n            color: --var($theme, 'picker-arrow-color');\n\n            &:hover {\n                color: --var($theme, 'picker-arrow-hover-color');\n            }\n        }\n\n        %cal-picker-date {\n            color: --var($theme, 'picker-text-color');\n\n            &:hover,\n            &:focus {\n                color: --var($theme, 'picker-text-hover-color');\n            }\n        }\n\n        %cal-value {\n            color: --var($theme, 'content-text-color');\n            flex-basis: 14.28%;\n        }\n\n        %cal-value--label {\n            color: --var($theme, 'inactive-text-color');\n        }\n\n        %cal-value--weekend {\n            color: --var($theme, 'weekend-text-color');\n        }\n\n        %cal-value--special {\n            color: --var($theme, 'date-special-text-color');\n            background: --var($theme, 'date-special-background');\n        }\n\n        %cal-value--disabled {\n            color: --var($theme, 'date-disabled-text-color');\n        }\n\n        %cal-value--year-current {\n            color: --var($theme, 'year-current-text-color');\n        }\n\n        %cal-value--year-hover {\n            color: --var($theme, 'year-hover-text-color');\n        }\n\n        %cal-value--month-hover {\n            color: --var($theme, 'month-hover-text-color');\n        }\n\n        %cal-value--month-current {\n            color: --var($theme, 'month-current-text-color');\n        }\n\n        %cal-value--inactive {\n            color: --var($theme, 'inactive-text-color');\n        }\n\n        %cal-value--selected {\n            color: --var($theme, 'date-selected-text-color');\n            // background: --var($theme, 'date-selected-background') !important;\n        }\n\n        %cal-value--current {\n            color: --var($theme, 'date-current-text-color');\n        }\n\n        %cal-value--hover {\n            %cal-value-content::after {\n                background: --var($theme, 'date-hover-background');\n            }\n\n            &%cal-value--selected %cal-value-content::after {\n                background: rgba($selected-hover-color, .18);\n            }\n        }\n    }\n\n    %date-picker--vertical {\n        min-width: 368px; /* 168px for header + 200px for the content */\n        max-width: 540px;\n    }\n\n    %date-picker--dropdown {\n        display: flex;\n        flex: 1 0 0;\n        flex-direction: column;\n        box-shadow: igx-elevation($elevations, 3);\n    }\n\n    %date-picker__buttons {\n        display: flex;\n        justify-content: flex-end;\n        padding: rem(8px);\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $color [null] - The color of the divider. (Gradients are not supported for dashed dividers).\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the color of the divider\n///   $my-divider-theme: igx-divider-theme($color: orange);\n///   // Pass the theme to the igx-divider component mixin\n///   @include igx-divider($my-divider-theme);\n@function igx-divider-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $color: null\n) {\n    $name: 'igx-divider';\n    $divider-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $divider-schema: map-get($schema, $name);\n    } @else {\n        $divider-schema: $schema;\n    }\n\n    $theme: apply-palette($divider-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        color: $color\n    ));\n}\n\n///\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires --var\n///\n@mixin igx-divider($theme) {\n    @include igx-root-css-vars($theme);\n\n    %igx-divider-display {\n        display: block;\n        height: 1px;\n        background: --var($theme, 'color');\n    }\n\n    %igx-divider--dashed {\n        background: linear-gradient(to right, --var($theme, 'color') 50%, transparent 50%);\n        background-size: 10px 1px; /* dash size */\n    }\n\n    %igx-divider--vertical {\n        display: inline-block;\n        width: 1px;\n        min-width: 1px;\n        height: auto;\n    }\n\n    %igx-divider--vertical-dashed {\n        background: linear-gradient(to bottom, --var($theme, 'color') 50%, transparent 50%);\n        background-size: 1px 10px; /* dash size */\n    }\n}\n","@import './excel-filtering-theme';\n@import './advanced-filtering-theme';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Map} $elevations [$elevations] - The elevations (shadows) map to be used.\n///\n/// @param {Color} $header-background [null] - The table header background color.\n/// @param {Color} $header-text-color [null] - The table header text color.\n/// @param {String} $header-border-width [null] - The border width used for header borders.\n/// @param {String} $header-border-style [null] - The border style used for header borders.\n/// @param {Color} $header-border-color [null] - The color used for header borders.\n///\n/// @param {Color} $sorted-header-icon-color [null] - The sort icon color when sorted.\n/// @param {color} $sortable-header-icon-hover-color [null] - The icon color on hover in grid header when the column is sortable.\n///\n/// @param {Color} $content-background [null] - The table body background color.\n/// @param {Color} $content-text-color [null] - The table body text color.\n///\n/// @param {Color} $ghost-header-text-color [null] - The dragged header text color.\n/// @param {Color} $ghost-header-icon-color [null] - The dragged header icon color.\n/// @param {Color} $ghost-header-background [null] - The dragged header background color.\n///\n/// @param {Color} $row-odd-background [null] - The background color of odd rows.\n/// @param {Color} $row-even-background [null] - The background color of even rows.\n/// @param {Color} $row-odd-text-color [null] - The text color of odd rows.\n/// @param {Color} $row-even-text-color [null] - The text color of even rows.\n/// @param {Color} $row-selected-background [null] - The selected row background color.\n/// @param {Color} $row-selected-hover-background [null] - The selected row hover background color.\n/// @param {Color} $row-selected-text-color [null] - The selected row text color.\n/// @param {Color} $row-hover-background [null] - The hover row background color.\n/// @param {Color} $row-hover-text-color [null] - The hover row text color.\n/// @param {Color} $row-border-color [null] - The row bottom border color.\n///\n/// @param {String} $pinned-border-width [null] - The border width of the pinned border.\n/// @param {String} $pinned-border-style [null] - The CSS border style of the pinned border.\n/// @param {Color} $pinned-border-color [null] - The color of the pinned border.\n///\n/// @param {Color} $cell-active-border-color [null] - The border color for the currently active(focused) cell.\n/// @param {Color} $cell-selected-background [null] - The selected cell background color.\n/// @param {Color} $cell-selected-text-color [null] - The selected cell text color.\n/// @param {Color} $cell-editing-background [null] - The background color of the cell being edited.\n/// @param {Color} $cell-edited-value-color [null] - The text color of a sell that has been edited.\n///\n/// @param {Color} $edit-mode-color [null] - The color applied around the row when in editing mode.\n/// @param {Color} $edited-row-indicator [null] - The color applied to the edited row indicator line.\n///\n/// @param {Color} $resize-line-color [null] - The table header resize line color.\n/// @param {Color} $drop-indicator-color [null] - The color applied to the line between the columns when dragging a column.\n///\n/// @param {Color} $grouparea-background [null] - The grid group area background color.\n///\n/// @param {Color} $group-row-background [null] - The grid group row background color.\n/// @param {Color} $group-row-selected-background [null] - The drop area background on drop color.\n/// @param {Color} $group-label-column-name-text [null] - The grid group row column name text color.\n/// @param {Color} $group-label-icon [null] - The grid group row icon color.\n/// @param {Color} $group-label-text [null] - The grid group row text color.\n///\n/// @param {Color} $expand-all-icon-color [null] - The grid header expand all group rows icon color.\n/// @param {Color} $expand-all-icon-hover-color [null] - The grid header expand all group rows icon hover color.\n///\n/// @param {Color} $expand-icon-color [null] - The grid row expand icon color.\n/// @param {Color} $expand-icon-hover-color [null] - The grid row expand icon hover color.\n///\n/// @param {Color} $active-expand-icon-color [null] - The drop area background on drop color.\n/// @param {Color} $active-expand-icon-hover-color [null] - The drop area background on drop color.\n///\n/// @param {Color} $group-count-background [null] - The grid group row cont badge background color.\n/// @param {Color} $group-count-text-color [null] - The grid group row cont badge text color.\n///\n/// @param {Color} $drop-area-text-color [null] - The drop area text color.\n/// @param {Color} $drop-area-icon-color [null] - The drop area icon color.\n/// @param {Color} $drop-area-background [null] - The drop area background color.\n/// @param {Color} $drop-area-on-drop-background [null] - The drop area background on drop color.\n///\n/// @param {Color} $filtering-header-background [null] - The background color of the filtered column header.\n/// @param {Color} $filtering-header-text-color [null] - The text color color of the filtered column header.\n/// @param {Color} $filtering-row-background [null] - The background color of the filtering row.\n/// @param {Color} $filtering-row-text-color [null] - The text-color color of the filtering row.\n/// @param {Color} $tree-filtered-text-color [null] - grouping row background color on focus.\n///\n/// @param {Color} $body-summaries-background [null] - The background color of the summary groups located the body.\n/// @param {Color} $body-summaries-text-color [null] - The text color of the summary results located the body.\n/// @param {Color} $root-summaries-background [null] - The background color of the summary groups located the footer.\n/// @param {Color} $root-summaries-text-color [null] - The text color of the summary results located the footer.\n///\n/// @param {Color} $row-highlight [null] - The grid row highlight indication color.\n/// @param {box-shadow} $grid-shadow [null] - The shadow of the grid.\n/// @param {box-shadow} $drag-shadow [null] - The shadow used for movable elements (ex. column headers).\n/// @param {color} $row-ghost-background [null] - The dragged row background color.\n/// @param {color} $row-drag-color [null] - The row drag handle color.\n/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires luminance\n/// @requires text-contrast\n/// @requires hexrgba\n/// @requires extend\n/// @requires igx-elevation\n/// @requires $elevations\n@function igx-grid-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $elevations: $elevations,\n\n    $header-background: null,\n    $header-text-color: null,\n    $header-border-width: null,\n    $header-border-style: null,\n    $header-border-color: null,\n\n    $sorted-header-icon-color: null,\n\n    $content-background: null,\n    $content-text-color: null,\n\n    $ghost-header-text-color: null,\n    $ghost-header-icon-color: null,\n    $ghost-header-background: null,\n\n    $row-odd-background: null,\n    $row-even-background: null,\n    $row-odd-text-color: null,\n    $row-even-text-color: null,\n    $row-selected-background: null,\n    $row-selected-hover-background: null,\n    $row-selected-text-color: null,\n    $row-hover-background: null,\n    $row-hover-text-color: null,\n    $row-border-color: null,\n\n    $pinned-border-width: null,\n    $pinned-border-style: null,\n    $pinned-border-color: null,\n\n    $cell-active-border-color: null,\n    $cell-selected-background: null,\n    $cell-selected-text-color: null,\n    $cell-editing-background: null,\n    $cell-edited-value-color: null,\n\n    $edit-mode-color: null,\n    $edited-row-indicator: null,\n\n    $resize-line-color: null,\n    $drop-indicator-color: null,\n\n    $grouparea-background: null,\n\n    $group-row-background: null,\n    $group-row-selected-background: null,\n    $group-label-column-name-text: null,\n    $group-label-icon: null,\n    $group-label-text: null,\n\n    $expand-all-icon-color: null,\n    $expand-all-icon-hover-color: null,\n\n    $expand-icon-color: null,\n    $expand-icon-hover-color: null,\n\n    $active-expand-icon-color: null,\n    $active-expand-icon-hover-color: null,\n\n    $group-count-background: null,\n    $group-count-text-color: null,\n\n    $drop-area-text-color: null,\n    $drop-area-icon-color: null,\n    $drop-area-background: null,\n    $drop-area-on-drop-background: null,\n\n    $filtering-header-background: null,\n    $filtering-header-text-color: null,\n    $filtering-row-background: null,\n    $filtering-row-text-color: null,\n    $tree-filtered-text-color: null,\n\n    $body-summaries-background: null,\n    $body-summaries-text-color: null,\n    $root-summaries-background: null,\n    $root-summaries-text-color: null,\n\n    $row-highlight: null,\n    $grid-shadow: null,\n    $drag-shadow: null,\n    $row-ghost-background: null,\n    $row-drag-color: null,\n    $drop-area-border-radius: null,\n    $grid-border-color: null,\n    $sortable-header-icon-hover-color: null\n) {\n    $name: 'igx-grid';\n    $grid-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $grid-schema: map-get($schema, $name);\n    } @else {\n        $grid-schema: $schema;\n    }\n\n    $theme: apply-palette($grid-schema, $palette);\n\n    $drop-area-border-radius: round-borders(\n        if($drop-area-border-radius, $drop-area-border-radius, map-get($grid-schema, 'drop-area-border-radius')), 0, 16px\n    );\n\n\n    $tree-selected-filtered-row-text-color: rgba(text-contrast(map-get($theme, 'row-selected-background')), .5);\n    $tree-selected-filtered-cell-text-color: rgba(text-contrast(map-get($theme, 'cell-selected-background')), .5);\n    $row-selected-cell-background: darken-color(map-get($theme, 'row-selected-background'), 8%);\n\n    @if not($ghost-header-icon-color) and $ghost-header-background {\n        @if type-of($ghost-header-background) == 'color' {\n            $ghost-header-icon-color: rgba(text-contrast($ghost-header-background), .07);\n        }\n    }\n\n    @if not($ghost-header-text-color) and $ghost-header-background {\n        $ghost-header-text-color: text-contrast($ghost-header-background);\n    }\n\n    @if $header-background and alpha($header-background) < 1 {\n        $header-background: hexrgba($header-background, igx-color($palette, 'surface'));\n    }\n\n    @if not($header-text-color) and $header-background {\n        $header-text-color: text-contrast($header-background);\n    }\n\n    @if not($header-border-color) and $header-background {\n        @if type-of($header-background) == 'color' {\n            $header-border-color: rgba(text-contrast($header-background), .24);\n        }\n    }\n\n    @if not($content-text-color) and $content-background {\n        $content-text-color: text-contrast($content-background);\n    }\n\n    @if not($row-odd-background) and $content-background {\n        $row-odd-background: $content-background;\n    }\n\n    @if $row-odd-background and alpha($row-odd-background) != 1 {\n        $cbg: if($content-background, $content-background, map-get($theme, 'content-background'));\n\n        $row-odd-background: hexrgba($row-odd-background, $cbg);\n    }\n\n    @if not($row-odd-text-color) and $row-odd-background {\n        $row-odd-text-color: text-contrast($row-odd-background);\n    }\n\n    @if not($row-even-background) and $content-background {\n        $row-even-background: $content-background;\n    }\n\n    @if $row-even-background and alpha($row-even-background) != 1 {\n        $cbg: if($content-background, $content-background, map-get($theme, 'content-background'));\n\n        $row-even-background: hexrgba($row-even-background, $cbg);\n    }\n\n    @if not($row-even-text-color) and $row-even-background {\n        $row-even-text-color: text-contrast($row-even-background);\n    }\n\n    @if not($row-hover-background) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $row-hover-background: hexrgba(rgba(text-contrast($content-background), .08), $content-background)\n        }\n    }\n\n    @if not($row-hover-text-color) and $row-hover-background {\n        $row-hover-text-color: text-contrast($row-hover-background);\n    }\n\n    @if not($cell-selected-text-color) and $cell-selected-background {\n        $cell-selected-text-color: text-contrast($cell-selected-background);\n    }\n\n    @if not($row-selected-text-color) and $row-selected-background {\n        $row-selected-text-color: $row-selected-background;\n    }\n\n    @if not($row-selected-text-color) and $row-selected-hover-background {\n        $row-selected-text-color: $row-selected-hover-background;\n    }\n\n    @if not($row-border-color) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $row-border-color: rgba(text-contrast($content-background), .08)\n        }\n    }\n\n    @if not($pinned-border-color) and $content-background {\n        @if type-of($content-background) == 'color' {\n            $pinned-border-color: rgba(text-contrast($content-background), .08)\n        }\n    }\n\n    @if not($group-row-background) and $header-background {\n        $group-row-background: $header-background\n    }\n\n    @if not($expand-icon-color) and $group-row-background {\n        $expand-icon-color: text-contrast($group-row-background)\n    }\n\n    @if not($group-label-text) and $group-row-selected-background {\n        $group-label-text: text-contrast($group-row-selected-background)\n    }\n\n    @if not($expand-icon-color) and $group-row-selected-background {\n        $expand-icon-color: text-contrast($group-row-selected-background)\n    }\n\n    @if not($group-count-background) and $group-row-selected-background {\n        $group-count-background: text-contrast($group-row-selected-background);\n    }\n\n    @if not($expand-all-icon-color) and $header-background {\n        @if type-of($header-background) == 'color' {\n            $expand-all-icon-color: rgba(text-contrast($header-background), .87);\n        }\n    }\n\n    @if not($expand-all-icon-hover-color) and $header-background {\n        $expand-all-icon-hover-color: text-contrast($header-background);\n    }\n\n    @if not($group-label-text) and $group-row-background {\n        $group-label-text: text-contrast($group-row-background)\n    }\n\n    @if not($group-count-background) and $group-row-background {\n        $group-count-background: text-contrast($group-row-background);\n    }\n\n    @if not($group-count-text-color) and $group-count-background {\n        $group-count-text-color: text-contrast($group-count-background);\n    }\n\n    @if not($grouparea-background) and $header-background {\n        $grouparea-background: $header-background\n    }\n\n    @if not($drop-area-background) and $grouparea-background {\n        $drop-area-background: text-contrast($grouparea-background);\n    }\n\n    @if not($drop-area-on-drop-background) and $drop-area-background {\n        $drop-area-on-drop-background: $drop-area-background;\n    }\n\n    @if not($drop-area-text-color) and $drop-area-background {\n        $drop-area-text-color: text-contrast($drop-area-background)\n    }\n\n    @if not($drop-area-icon-color) and $drop-area-background {\n        $drop-area-icon-color: text-contrast($drop-area-background)\n    }\n\n    @if not($filtering-header-background) and $header-background {\n        @if type-of($header-background) == 'color' and luminance($header-background) < .5 {\n            $filtering-header-background: hexrgba(lighten-color($header-background, 5%));\n        } @else {\n            $filtering-header-background: hexrgba(darken-color($header-background, 5%));\n        }\n    }\n\n    @if not($filtering-header-text-color) and $filtering-header-background {\n        $filtering-header-text-color: text-contrast($filtering-header-background);\n    }\n\n    @if not($filtering-row-background) and $header-background {\n        @if type-of($header-background) == 'color' and luminance($header-background) < .5 {\n            $filtering-row-background: hexrgba(lighten-color($header-background, 5%));\n        } @else {\n            $filtering-row-background: hexrgba(darken-color($header-background, 5%));\n        }\n    }\n\n    @if not($filtering-row-text-color) and $filtering-row-background {\n        $filtering-row-text-color: text-contrast(hexrgba($filtering-row-background));\n    }\n\n    @if not($body-summaries-text-color) and $body-summaries-background {\n        $body-summaries-text-color: text-contrast($body-summaries-background);\n    }\n\n    @if not($root-summaries-text-color) and $root-summaries-background {\n        $root-summaries-text-color: text-contrast($root-summaries-background);\n    }\n\n    @if not($grid-shadow) {\n        $grid-elevation: map-get($grid-schema, 'grid-elevation');\n        $grid-shadow: igx-elevation($elevations, $grid-elevation);\n    }\n\n    @if not($drag-shadow) {\n        $drag-elevation: map-get($grid-schema, 'drag-elevation');\n        $drag-shadow: igx-elevation($elevations, $drag-elevation);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n\n        header-background: $header-background,\n        header-text-color: $header-text-color,\n        header-border-width: $header-border-width,\n        header-border-style: $header-border-style,\n        header-border-color: $header-border-color,\n\n        sorted-header-icon-color: $sorted-header-icon-color,\n\n        ghost-header-text-color: $ghost-header-text-color,\n        ghost-header-icon-color: $ghost-header-icon-color,\n        ghost-header-background: $ghost-header-background,\n\n        content-background: $content-background,\n        content-text-color: $content-text-color,\n\n        row-odd-background: $row-odd-background,\n        row-even-background: $row-even-background,\n        row-odd-text-color: $row-odd-text-color,\n        row-even-text-color: $row-even-text-color,\n        row-selected-background: $row-selected-background,\n        row-selected-hover-background: $row-selected-hover-background,\n        row-selected-text-color: $row-selected-text-color,\n        row-hover-background: $row-hover-background,\n        row-hover-text-color: $row-hover-text-color,\n        row-border-color: $row-border-color,\n\n        pinned-border-width: $pinned-border-width,\n        pinned-border-style: $pinned-border-style,\n        pinned-border-color: $pinned-border-color,\n\n        cell-active-border-color: $cell-active-border-color,\n        cell-selected-background: $cell-selected-background,\n        cell-editing-background: $cell-editing-background,\n        cell-selected-text-color: $cell-selected-text-color,\n\n        edit-mode-color: $edit-mode-color,\n        edited-row-indicator: $edited-row-indicator,\n        cell-edited-value-color: $cell-edited-value-color,\n\n        resize-line-color: $resize-line-color,\n\n        drop-indicator-color: $drop-indicator-color,\n\n        grouparea-background: $grouparea-background,\n        group-label-column-name-text: $group-label-column-name-text,\n        group-label-icon: $group-label-icon,\n        group-label-text: $group-label-text,\n\n        expand-all-icon-color: $expand-all-icon-color,\n        expand-all-icon-hover-color: $expand-all-icon-hover-color,\n\n        expand-icon-color: $expand-icon-color,\n        expand-icon-hover-color: $expand-icon-hover-color,\n        active-expand-icon-color: $active-expand-icon-color,\n        active-expand-icon-hover-color: $active-expand-icon-hover-color,\n\n        group-count-background: $group-count-background,\n        group-count-text-color: $group-count-text-color,\n\n        group-row-background: $group-row-background,\n        group-row-selected-background: $group-row-selected-background,\n\n        drop-area-text-color: $drop-area-text-color,\n        drop-area-icon-color: $drop-area-icon-color,\n        drop-area-on-drop-background: $drop-area-on-drop-background,\n        drop-area-background: $drop-area-background,\n\n        filtering-header-background: $filtering-header-background,\n        filtering-header-text-color: $filtering-header-text-color,\n        filtering-row-background: $filtering-row-background,\n        filtering-row-text-color: $filtering-row-text-color,\n\n        tree-filtered-text-color: $tree-filtered-text-color,\n        tree-selected-filtered-row-text-color: $tree-selected-filtered-row-text-color,\n        tree-selected-filtered-cell-text-color: $tree-selected-filtered-cell-text-color,\n\n        body-summaries-background: $body-summaries-background,\n        body-summaries-text-color: $body-summaries-text-color,\n        root-summaries-background: $root-summaries-background,\n        root-summaries-text-color: $root-summaries-text-color,\n        row-selected-cell-background: $row-selected-cell-background,\n\n        row-highlight: $row-highlight,\n        grid-shadow: $grid-shadow,\n        drag-shadow: $drag-shadow,\n        row-ghost-background: $row-ghost-background,\n        row-drag-color: $row-drag-color,\n        drop-area-border-radius: $drop-area-border-radius,\n        sortable-header-icon-hover-color: $sortable-header-icon-hover-color,\n        grid-border-color: $grid-border-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} ellipsis\n/// @requires {mixin} _excel-filtering\n/// @requires igx-color\n/// @requires igx-contrast-color\n/// @requires rem\n/// @requires --var\n@mixin igx-grid($theme) {\n    @include igx-root-css-vars($theme);\n\n    $palette: map-get($theme, 'palette');\n    $cbx-size: rem(20px);\n    $grid-shadow: --var($theme, 'grid-shadow');\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $grid-caption-fs: rem(20px);\n    $grid-caption-lh: rem(32px);\n    $grid-caption-padding: rem(16px) rem(24px);\n\n    $grid-head-fs: rem(12px);\n    $grid-head-fw: 600;\n    $transition: all 120ms $ease-in-out-cubic;\n\n    // Cell\n    $grid-cell-align-num: #{$right};\n    $grid-cell-fs: rem(13px);\n    $grid-cell-lh: rem(16px);\n    $grid-cell-pinned-style: 1px solid;\n    $grid-cell-pinned-border-color: igx-color($palette, 'grays', 300);\n\n    $grid-header-border: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color');\n\n    $cell-pin: (\n        style: --var($theme, 'pinned-border-width') --var($theme, 'pinned-border-style'),\n        color: --var($theme, 'pinned-border-color')\n    );\n\n    $grid-header-padding: (\n        comfortable: 0 rem(24px),\n        cosy: 0 rem(16px),\n        compact: 0 rem(12px)\n    );\n\n    $grid-cbx-padding: (\n        comfortable: rem(24px),\n        cosy: rem(16px),\n        compact: rem(12px)\n    );\n\n    $cbx-padding: map-get($grid-cbx-padding, 'comfortable');\n    $cbx-padding-cosy: map-get($grid-cbx-padding, 'cosy');\n    $cbx-padding-compact: map-get($grid-cbx-padding, 'compact');\n\n    $grid-header-height: (\n        comfortable: rem(50px),\n        cosy: rem(40px),\n        compact: rem(32px)\n    );\n\n    $drop-area-height: (\n        comfortable: rem(32px),\n        cosy: rem(24px),\n        compact: rem(24px)\n    );\n\n    $cell-padding-comfortable: rem(24px);\n    $cell-padding-cosy: rem(16px);\n    $cell-padding-compact: rem(12px);\n\n    $grid-cell-padding: (\n        comfortable: 0 $cell-padding-comfortable,\n        cosy: 0 $cell-padding-cosy,\n        compact: 0 $cell-padding-compact\n    );\n\n    $hierarchical-grid-indent: (\n        comfortable: rem(24px),\n        cosy: rem(16px),\n        compact: rem(12px)\n    );\n\n    $hierarchical-action-icon: 24px;\n\n    $grouparea-padding: (\n        comfortable: rem(8px) rem(24px),\n        cosy: rem(8px) rem(16px),\n        compact: rem(4px) rem(12px)\n    );\n\n    $grouparea-min-height: (\n        comfortable: rem(57px),\n        cosy: rem(49px),\n        compact: rem(41px)\n    );\n\n    $grid-grouping-indicator-padding: (\n        comfortable: rem(24px),\n        cosy: rem(16px),\n        compact: rem(12px)\n    );\n\n    $indicator-icon-width: rem(24px);\n    $drag-icon-size: rem(24px);\n    $grouping-padding-right: rem(12px);\n\n    $grid-border-width: map-get((\n        material: 0,\n        fluent: 1px\n    ), map-get($theme, variant));\n\n    $grid-header-weight: map-get((\n        material: 600,\n        fluent: 800\n    ), map-get($theme, variant));\n\n    %grid-display {\n        position: relative;\n        display: grid;\n        grid-template-rows: auto auto auto 1fr auto auto;\n        grid-template-columns: 1fr;\n        overflow: hidden;\n        box-shadow: $grid-shadow;\n        outline-style: none;\n        z-index: 1;\n        border: $grid-border-width solid --var($theme, 'grid-border-color');\n\n        %cbx-display {\n            min-width: rem(20px);\n        }\n    }\n\n    %grid-caption {\n        display: flex;\n        align-items: center;\n        font-size: $grid-caption-fs;\n        line-height: $grid-caption-lh;\n        padding: $grid-caption-padding;\n        grid-row: 1;\n    }\n\n    %grid-thead,\n    %grid-tfoot {\n        position: relative;\n        display: flex;\n        background: --var($theme, 'header-background');\n        color: --var($theme, 'header-text-color');\n        overflow: hidden;\n\n        %grid-row {\n            position: relative;\n            background: inherit;\n            color: inherit;\n            z-index: 2;\n\n            &:hover {\n                background: inherit;\n                color: inherit;\n            }\n        }\n    }\n\n    %grid-thead {\n        border-bottom: $grid-header-border;\n        z-index: 2;\n\n        %grid__group-indentation {\n            &::after {\n                display: none;\n            }\n        }\n\n        %grid__cbx-selection--push {\n            align-items: flex-start;\n            padding-top: (map-get($grid-header-height, 'comfortable') - rem(20px)) / 2;\n        }\n\n        %grid-row:last-of-type {\n            border-bottom: none;\n        }\n    }\n\n    %grid-thead-container {\n        grid-row: 3;\n        display: flex;\n        overflow: hidden;\n\n        %igx-grid__drag-indicator {\n            cursor: default;\n        }\n\n        %grid-row--mrl {\n            %igx-grid__hierarchical-expander--header,\n            %igx-grid__header-indentation,\n            %igx-grid__row-indentation,\n            %grid__cbx-selection {\n                border-bottom: --var($theme, 'header-border-width') --var($theme, 'header-border-style') --var($theme, 'header-border-color');\n            }\n        }\n    }\n\n    %grid-thead--cosy {\n        %grid__cbx-selection--push--cosy {\n            align-items: flex-start;\n            padding-top: (map-get($grid-header-height, 'cosy') - rem(20px)) / 2;\n        }\n    }\n\n    %grid-thead--compact {\n        %grid__cbx-selection--push--compact {\n            align-items: flex-start;\n            padding-top: (map-get($grid-header-height, 'compact') - rem(20px)) / 2;\n        }\n    }\n\n    %grid-thead-title {\n        flex-basis: auto !important;\n        align-items: center !important;\n        border-bottom: $grid-header-border;\n        height: map-get($grid-header-height, 'comfortable');\n    }\n\n    %grid-thead-title--pinned {\n        border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;\n    }\n\n    %grid-thead-title--cosy {\n        height: map-get($grid-header-height, 'cosy');\n        padding: map-get($grid-cell-padding, 'cosy');\n    }\n\n    %grid-thead-title--compact {\n        height: map-get($grid-header-height, 'compact');\n        padding: map-get($grid-cell-padding, 'compact');\n    }\n\n    %grid-thead-group {\n        display: flex;\n        flex-flow: row nowrap;\n    }\n\n    /* We set those with position relative\n    so that the drop indicators be scoped\n    to their respective group. The item\n    being the topmost element, while the\n    subgroup encapsulates children of each\n    thead item and group.\n    */\n    %grid-thead-item {\n        display: flex;\n        flex-flow: column nowrap;\n\n        %grid-thead-group {\n            flex: 1 1 auto;\n        }\n\n        %grid-cell-header {\n            flex: 1 1 auto;\n        }\n\n        %grid-thead-title {\n            flex: 0 0 auto;\n        }\n    }\n\n    %grid-thead-item,\n    %grid-thead-subgroup {\n        position: relative;\n    }\n\n    %grid-tfoot {\n        grid-row: 5;\n        border-top: $grid-header-border;\n        z-index: 10001;\n    }\n\n    %grid-footer {\n        grid-row: 7;\n    }\n\n    %grid-display-container-thead {\n        width: 100%;\n        overflow: visible;\n    }\n\n    %grid-display-container-tr {\n        width: 100%;\n        overflow: visible;\n    }\n\n    %grid-mrl-block {\n        display: grid;\n        background: inherit;\n\n        %grid-thead-item {\n            display: flex;\n        }\n\n        %grid-cell-header {\n            align-items: center;\n            flex-grow: 1;\n            border-bottom: $grid-header-border;\n        }\n\n        %grid-cell-display {\n            border-#{$right}: 1px solid --var($theme, 'row-border-color');\n            border-bottom: 1px solid --var($theme, 'row-border-color');\n        }\n    }\n\n    %grid-row--mrl {\n        &%grid-row {\n            border-bottom-color: transparent;\n        }\n\n        %grid__cbx-selection,\n        %igx-grid__row-indentation,\n        %igx-grid__drag-indicator {\n            border-bottom: 1px solid --var($theme, 'row-border-color');\n        }\n    }\n\n    %grid-tbody {\n        position: relative;\n        background: --var($theme, 'content-background');\n        color: --var($theme, 'content-text-color');\n        overflow: hidden;\n        z-index: 1;\n    }\n\n    %grid-tbody-container {\n        position: relative;\n        display: flex;\n        grid-row: 4;\n        overflow: hidden;\n    }\n\n    %grid-tbody-message {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        height: 100%;\n        color: --var($theme, 'content-text-color');\n    }\n\n    %igx-grid__loading {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 100%;\n        min-height: 100px;\n\n        > %circular-display {\n            width: rem(50);\n            height: rem(50);\n        }\n    }\n\n    %grid-scroll {\n        grid-row: 6;\n        display: flex;\n        flex-flow: row nowrap;\n        width: 100%;\n        background: --var($theme, 'header-background');\n        z-index: 10001;\n        overflow: hidden;\n    }\n\n    %grid-thead-thumb {\n        background: --var($theme, 'header-background');\n        border-#{$left}: 1px solid igx-color($palette, 'grays', 300);\n    }\n\n    %grid-tfoot-thumb {\n        background: --var($theme, 'header-background');\n        border-#{$left}: 1px solid igx-color($palette, 'grays', 300);\n    }\n\n    %grid-tbody-scrollbar {\n        border-#{$left}: 1px solid igx-color($palette, 'grays', 300);\n        position: relative;\n    }\n\n    %grid-scroll-start {\n        background: --var($theme, 'header-background');\n    }\n\n    %grid-scroll-main {\n        igx-display-container {\n            height: 0;\n        }\n\n        igx-horizontal-virtual-helper {\n            height: 100%;\n        }\n    }\n\n    %grid-row {\n        display: flex;\n        background: --var($theme, 'content-background');\n        border-bottom: 1px solid --var($theme, 'row-border-color');\n        outline-style: none;\n        position: relative;\n\n        &:hover {\n            background: --var($theme, 'row-hover-background');\n            color: --var($theme, 'row-hover-text-color');\n        }\n\n        &%igx-grid__tr--ghost {\n            background: --var($theme, 'row-ghost-background');\n            z-index: 1;\n        }\n    }\n\n    %igx-grid__drag-indicator {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding: map-get($grid-cell-padding, 'comfortable');\n        padding-#{$right}: 0;\n        // Fix for IE 11\n        min-width: calc(#{$drag-icon-size} + #{$cell-padding-comfortable});\n        background: inherit;\n        z-index: 4;\n        cursor: move;\n\n        %igx-icon-display {\n            width: $drag-icon-size;\n            height: $drag-icon-size;\n            font-size: $drag-icon-size;\n        }\n    }\n\n    %igx-grid__drag-indicator--cosy{\n        padding: map-get($grid-cell-padding, 'cosy');\n        // Fix for IE 11\n        min-width: calc(#{$drag-icon-size} + #{$cell-padding-cosy});\n        padding-#{$right}: 0;\n    }\n\n    %igx-grid__drag-indicator--compact {\n        padding: map-get($grid-cell-padding, 'compact');\n        // Fix for IE 11\n        min-width: calc(#{$drag-icon-size} + #{$cell-padding-compact});\n        padding-#{$right}: 0;\n    }\n\n    %igx-grid__drag-indicator--header {\n        border-#{$right}: $grid-header-border;\n    }\n\n    %igx-grid__hierarchical-expander + %igx-grid__drag-indicator {\n        padding-#{$left}: 0;\n        min-width: $drag-icon-size;\n    }\n\n    %igx-grid__drag-indicator--off {\n        color: --var($theme, 'row-drag-color');\n    }\n\n    %igx-grid__tr--drag {\n        opacity: .5;\n    }\n\n    %grid-row--odd {\n        background: --var($theme, 'row-odd-background');\n        color: --var($theme, 'row-odd-text-color');\n    }\n\n    %grid-row--even {\n        background: --var($theme, 'row-even-background');\n        color: --var($theme, 'row-even-text-color');\n    }\n\n    %grid-row--selected {\n        color: --var($theme, 'row-selected-text-color');\n        background: --var($theme, 'row-selected-background');\n\n        %grid-cell--selected,\n        %grid-cell--pinned-selected {\n            background: --var($theme, 'row-selected-cell-background');\n        }\n\n        &:hover {\n            background: --var($theme, 'row-selected-hover-background');\n            color: --var($theme, 'row-selected-text-color');\n        }\n\n        %igx-grid__tree-grouping-indicator {\n            color: --var($theme, 'row-selected-text-color');\n\n            &:hover {\n                color: --var($theme, 'row-selected-text-color');\n            }\n        }\n    }\n\n    %igx-grid__tr--expanded {\n        border-bottom: none;\n    }\n\n    %igx-grid__tr--edit {\n        border-bottom: 1px solid --var($theme, 'edit-mode-color');\n        position: relative;\n\n        &::after {\n            content: '';\n            position: absolute;\n            height: rem(1);\n            width: 100%;\n            top: rem(-1);\n            #{$left}: 0;\n            background: --var($theme, 'edit-mode-color');\n        }\n\n        &%grid-row {\n            border-bottom: 1px solid --var($theme, 'edit-mode-color');\n        }\n\n        %igx-grid__td--editing {\n            border: none;\n\n            %form-group-bundle--focus {\n                caret-color: --var($theme, 'edit-mode-color') !important;\n            }\n\n            %form-group-border {\n                background: --var($theme, 'edit-mode-color') !important;\n            }\n        }\n    }\n\n    %grid-row--edit-mrl {\n        &:first-of-type::after {\n            top: 0;\n            z-index: 5;\n        }\n    }\n\n    %igx-grid__tr--edited {\n        &::before {\n            content: '';\n            position: absolute;\n            width: rem(2);\n            height: 100%;\n            z-index: 10000;\n            background: --var($theme, 'edited-row-indicator');\n        }\n    }\n\n    %grid-row--group {\n        position: relative;\n        background: --var($theme, 'header-background') !important;\n    }\n\n    %igx-grid-row--filtered {\n        %grid-cell-text {\n            color: --var($theme, 'tree-filtered-text-color');\n        }\n\n        %igx-grid__tree-grouping-indicator {\n            color: --var($theme, 'tree-filtered-text-color');\n\n            &:hover {\n                color: --var($theme, 'tree-filtered-text-color');\n            }\n        }\n\n        %grid-cell--selected {\n            %grid-cell-text {\n                color: --var($theme, 'tree-selected-filtered-cell-text-color');\n            }\n\n            %igx-grid__tree-grouping-indicator {\n                color: --var($theme, 'tree-selected-filtered-cell-text-color');\n\n                &:hover {\n                    color: --var($theme, 'tree-selected-filtered-cell-text-color');\n                }\n            }\n        }\n    }\n\n    %grid-row--selected--filtered {\n        %grid-cell-text {\n            color: --var($theme, 'tree-selected-filtered-row-text-color');\n        }\n\n        %igx-grid__tree-grouping-indicator {\n            color: --var($theme, 'tree-selected-filtered-row-text-color');\n\n            &:hover {\n                color: --var($theme, 'tree-selected-filtered-row-text-color');\n            }\n        }\n\n        %grid-cell--selected {\n            %grid-cell-text {\n                color: --var($theme, 'tree-selected-filtered-cell-text-color');\n            }\n\n            %igx-grid__tree-grouping-indicator {\n                color: --var($theme, 'tree-selected-filtered-cell-text-color');\n\n                &:hover {\n                    color: --var($theme, 'tree-selected-filtered-cell-text-color');\n                }\n            }\n        }\n    }\n\n    %igx-grid__tree-grouping-indicator {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        user-select: none;\n        outline-style: none;\n        margin-#{$right}: rem(8);\n        cursor: pointer;\n\n        color: --var($theme, 'expand-icon-color');\n\n        &:hover {\n            color: --var($theme, 'expand-icon-hover-color')\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__tree-loading-indicator {\n        width: rem(24px, 16px);\n        height: rem(24px, 16px);\n        margin-#{$right}: rem(8px, 16px);\n\n        %circular-outer {\n            stroke: --var($theme, 'expand-icon-color');\n        }\n\n        > %circular-display {\n            width: rem(24);\n            height: rem(24);\n        }\n    }\n\n    %grid-cell-display {\n        position: relative;\n        display: flex;\n        flex: 1 1 0%;\n        align-items: center;\n        outline-style: none;\n        padding: map-get($grid-cell-padding, 'comfortable');\n        font-size: $grid-cell-fs;\n        line-height: $grid-cell-lh;\n        color: inherit;\n        text-align: #{$left};\n    }\n\n    %igx-grid__td--tree-cell {\n        overflow: hidden;\n    }\n\n    %grid-cell-text {\n        @include ellipsis();\n    }\n\n    %grid-cell-display--cosy {\n        padding: map-get($grid-cell-padding, 'cosy');\n    }\n\n    %grid-cell-display--compact {\n        padding: map-get($grid-cell-padding, 'compact');\n    }\n\n    %grid-cell--fixed-width {\n        flex-grow: 0;\n        outline-style: none;\n    }\n\n    %grid-cell--active {\n        box-shadow: inset 0 0 0 1px --var($theme, 'cell-active-border-color');\n    }\n\n    %grid-cell--selected {\n        color: --var($theme, 'cell-selected-text-color');\n        background: --var($theme, 'cell-selected-background');\n        // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981\n        // border-bottom: 0;\n\n        %igx-grid__tree-grouping-indicator {\n            color: --var($theme, 'cell-selected-text-color');\n\n            &:hover {\n                color: --var($theme, 'cell-selected-text-color');\n            }\n        }\n    }\n\n    %igx-grid__td--edited {\n        %grid-cell-text {\n            font-style: italic;\n            color: --var($theme, 'cell-edited-value-color');\n            padding: 0 1px;\n        }\n    }\n\n    %igx-grid__tr--deleted {\n        %grid-cell-text {\n            font-style: italic;\n            color: igx-color(map-get($theme, 'palette'), 'error');\n            text-decoration: line-through;\n        }\n    }\n\n    %igx-grid__td--editing {\n        background: --var($theme, 'cell-editing-background') !important;\n        box-shadow: inset 0 0 0 rem(2px) --var($theme, 'edit-mode-color');\n\n        igx-input-group {\n            width: 100%;\n            margin-top: -16px;\n        }\n\n        %form-group-input {\n            // ignore global typography\n            font-size: $grid-cell-fs !important;\n            line-height: $grid-cell-lh !important;\n        }\n    }\n\n    %grid-cell--pinned {\n        position: relative;\n        background: inherit;\n        z-index: 9999;\n    }\n\n    %grid-cell--pinned-selected {\n        color: --var($theme, 'cell-selected-text-color');\n        background: --var($theme, 'cell-selected-background');\n        // this is causing an issue https://github.com/IgniteUI/igniteui-angular/issues/4981\n        // border-bottom: 0;\n    }\n\n    %grid-cell--pinned-last {\n        border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color') !important;\n\n        &%grid-cell--editing {\n            border-#{$right}: map-get($cell-pin, 'style') --var($theme, 'cell-selected-background') !important;\n        }\n    }\n\n    %grid-cell-header {\n        flex-flow: row nowrap;\n        justify-content: space-between;\n        align-items: flex-end;\n        font-size: $grid-head-fs;\n        font-weight: $grid-head-fw;\n        min-width: 0;\n        padding: map-get($grid-header-padding, 'comfortable');\n        border-#{$right}: $grid-header-border;\n        outline-style: none;\n        overflow: hidden;\n        transition: color 250ms ease-in-out;\n    }\n\n    %grid-cell-header--filtering {\n        background: --var($theme, 'filtering-header-background');\n        color: --var($theme, 'filtering-header-text-color');\n        z-index: 3;\n    }\n\n    %grid-cell-header--cosy {\n        padding: map-get($grid-header-padding, 'cosy');\n        min-height: map-get($grid-header-height, 'cosy');\n    }\n\n    %grid-cell-header--compact {\n        padding: map-get($grid-header-padding, 'compact');\n        min-height: map-get($grid-header-height, 'compact');\n    }\n\n    %grid-cell-header-title {\n        @include ellipsis();\n        font-weight: $grid-header-weight;\n        min-width: 3ch;\n        user-select: none;\n        cursor: initial;\n        flex-grow: 1; /* hey IE, the text should take most of the space */\n        // align-self: flex-end; /* commenting out for now on external request */\n        line-height: map-get($grid-header-height, 'comfortable') / $grid-head-fs;\n        opacity: .7;\n        transition: opacity 250ms ease-in-out, color 250ms ease-in-out;\n    }\n\n    %grid-cell-header-title--cosy {\n        line-height: map-get($grid-header-height, 'cosy') / $grid-head-fs;\n    }\n\n    %grid-cell-header-title--compact {\n        line-height: map-get($grid-header-height, 'compact') / $grid-head-fs;\n    }\n\n    %grid-cell-header-icons {\n        display: inline-flex;\n        align-items: center;\n        justify-content: flex-end;\n        user-select: none;\n        min-width: 30px; /* sort-icon + filter icon width */\n        height: map-get($grid-header-height, 'comfortable');\n        align-self: flex-end;\n\n        &:empty {\n            min-width: 0;\n        }\n\n        .sort-icon {\n            width: rem(15px);\n            height: rem(15px);\n            min-width: rem(15px); /* yeah IE, it really needs to be 15px wide... */\n            font-size: rem(15px);\n        }\n    }\n\n\n    %igx-grid__th-expander {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        margin-#{$right}: rem(8px);\n        cursor: pointer;\n\n        igx-icon {\n            color: --var($theme, 'expand-icon-color');\n        }\n\n        &:hover {\n            igx-icon {\n                color: --var($theme, 'expand-icon-hover-color');\n            }\n        }\n    }\n\n    %igx-grid__th-group-title {\n        @include ellipsis();\n    }\n\n    %igx-grid__th--collapsible {\n        justify-content: normal;\n    }\n\n    %igx-grid__th--sortable {\n        &:hover {\n            cursor: pointer;\n\n            %grid-cell-header-title {\n                cursor: pointer;\n                opacity: 1;\n            }\n\n            .sort-icon {\n                opacity: .7;\n\n                &:hover {\n                    opacity: 1;\n                }\n            }\n        }\n    }\n\n    %igx-grid__th--sorted {\n        %grid-cell-header-title {\n            opacity: 1;\n        }\n\n        &:hover{\n            .sort-icon {\n                opacity: 1;\n            }\n        }\n\n        .sort-icon {\n            opacity: 1;\n            color: --var($theme, 'sorted-header-icon-color');\n\n            &:hover {\n                color: --var($theme, 'sortable-header-icon-hover-color');\n            }\n        }\n    }\n\n    %igx-grid__th--filtrable {\n        %grid-cell-header-title {\n            opacity: .7;\n        }\n    }\n\n    %igx-grid__th--filtrable-sortable {\n        .sort-icon {\n            &:hover {\n                opacity: 1;\n            }\n        }\n    }\n\n    .sort-icon {\n        opacity: 0;\n        transition: all 250ms ease-in-out;\n    }\n\n    %grid-cell-header-icons--cosy {\n        height: map-get($grid-header-height, 'cosy');\n    }\n\n    %grid-cell-header-icons--compact {\n        height: map-get($grid-header-height, 'compact');\n    }\n\n    %grid-cell-number {\n        text-align: $grid-cell-align-num;\n        justify-content: flex-end;\n\n        %grid-cell-header-icons {\n            justify-content: flex-start;\n            order: -1;\n\n            .sort-icon {\n                order: 1;\n            }\n        }\n    }\n\n    %grid__cbx-selection {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        border-#{$right}: --var($theme, 'header-border-width')\n            --var($theme, 'header-border-style')\n            --var($theme, 'header-border-color');\n        background: inherit;\n        z-index: 4;\n    }\n\n    %cbx-padding {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        // The min-width here plays the role of padding because of IE11\n        min-width: calc(#{$cbx-size} + (#{$cbx-padding} * 2));\n    }\n\n    %cbx-padding--cosy {\n        min-width: calc(#{$cbx-size} + (#{$cbx-padding-cosy} * 2));\n    }\n\n    %cbx-padding--compact {\n        min-width: calc(#{$cbx-size} + (#{$cbx-padding-compact} * 2));\n    }\n\n    %grid__resize-handle {\n        position: absolute;\n        width: 4px;\n        top: 0;\n        #{$right}: -2px;\n        height: 100%;\n        z-index: 2;\n    }\n\n    %grid__resize-line {\n        position: absolute;\n        cursor: col-resize;\n        width: 4px;\n        background: --var($theme, 'resize-line-color');\n        z-index: 2;\n\n        &::before,\n        &::after {\n            position: absolute;\n            content: '';\n            height: 100%;\n            width: 96px;\n        }\n\n        &::before {\n            #{$right}: 100%;\n        }\n\n        &::after {\n            #{$left}: 100%;\n        }\n    }\n\n    %grid-summaries {\n        display: flex;\n        overflow: hidden;\n        background: --var($theme, 'root-summaries-background');\n\n        %igx-grid-summary__result {\n            color: --var($theme, 'root-summaries-text-color');\n        }\n    }\n\n    %grid-summaries--body {\n        background: --var($theme, 'body-summaries-background');\n        border-bottom: 1px dashed --var($theme, 'row-border-color');\n\n        &:last-of-type {\n            border-bottom: none;\n        }\n\n        // %igx-grid-summary__label,\n        %igx-grid-summary__result {\n            color: --var($theme, 'body-summaries-text-color');\n        }\n    }\n\n    %grid-summaries-patch {\n        background: inherit;\n        position: relative;\n        z-index: 1;\n        border-#{$right}: 1px solid --var($theme, 'header-border-color');\n    }\n\n    // Column moving\n    %igx-grid__th-drop-indicator-left,\n    %igx-grid__th-drop-indicator-right {\n        position: absolute;\n        width: 1px;\n        height: 100%;\n        top: 0;\n        z-index: 1;\n    }\n\n    %igx-grid__th-drop-indicator-left {\n        #{$left}: -1px;\n    }\n\n    %igx-grid__th-drop-indicator-right {\n        #{$right}: -1px;\n    }\n\n    %igx-grid__th-drop-indicator--active {\n        &%igx-grid__th-drop-indicator-left,\n        &%igx-grid__th-drop-indicator-right {\n            border-#{$right}: 1px solid --var($theme, 'drop-indicator-color');\n        }\n\n        &::after,\n        &::before {\n            position: absolute;\n            content: '';\n            width: 0;\n            height: 0;\n            border-style: solid;\n            #{$left}: -3px;\n        }\n\n        &::before {\n            bottom: 0;\n            border-width: 0 4px 4px;\n            border-color: transparent transparent --var($theme, 'drop-indicator-color');\n        }\n\n        &::after {\n            top: 0;\n            border-width: 4px 4px 0;\n            border-color: --var($theme, 'drop-indicator-color') transparent transparent;\n        }\n    }\n\n    %grid__scroll-on-drag-left,\n    %grid__scroll-on-drag-right {\n        position: absolute;\n        width: 15px;\n        top: 0;\n        height: 100%;\n        z-index: 25;\n    }\n\n    %grid__scroll-on-drag-left {\n        #{$left}: 0;\n    }\n\n    %grid__scroll-on-drag-right {\n        #{$right}: 0;\n    }\n\n    %grid__scroll-on-drag-pinned {\n        position: absolute;\n        width: 15px;\n        height: 100%;\n        top: 0;\n        z-index: 25;\n    }\n\n    %grid__drag-ghost-image {\n        position: absolute;\n        display: flex;\n        align-items: center;\n        background: --var($theme, 'ghost-header-background');\n        color: --var($theme, 'ghost-header-text-color');\n        min-width: 168px;\n        max-width: 320px;\n        height: map-get($grid-header-height, 'comfortable');\n        min-height: map-get($grid-header-height, 'comfortable');\n        top: -99999px;\n        #{$left}: -99999px;\n        border: none;\n        box-shadow: --var($theme, 'drag-shadow');\n        overflow: hidden;\n        z-index: 20;\n\n        %grid-cell-header-title {\n            @include ellipsis();\n            flex: 1 0 0;\n            text-align: #{$right};\n        }\n\n        %grid-cell-header-icons {\n            display: none;\n        }\n\n        %grid-thead-title {\n            border: none;\n        }\n    }\n\n    %grid__drag-ghost-image--cosy {\n        height: map-get($grid-header-height, 'cosy');\n        min-height: map-get($grid-header-height, 'cosy');\n    }\n\n    %grid__drag-ghost-image--compact {\n        height: map-get($grid-header-height, 'compact');\n        min-height: map-get($grid-header-height, 'compact');\n    }\n\n    %grid__drag-ghost-image-icon {\n        color: --var($theme, 'ghost-header-icon-color');\n        margin-#{$right}: rem(12px);\n    }\n\n    %grid__drag-ghost-image-icon-group {\n        color: --var($theme, 'ghost-header-icon-color');\n        padding: --var($grid-header-padding, 'comfortable');\n        padding-#{$right}: 0;\n        margin-#{$right}: rem(8);\n    }\n\n    %igx-grid__drag-col-header {\n        background: --var($theme, 'header-background');\n\n        %grid-cell-header {\n            opacity: .4;\n        }\n    }\n\n    // Group by section\n    %igx-grid__group-row {\n        background: --var($theme, 'group-row-background');\n        display: flex;\n        outline-style: none;\n        border-bottom: 1px solid --var($theme, 'row-border-color');\n        min-height: map-get($grid-header-height, 'comfortable');\n    }\n\n    %igx-grid__group-row--active {\n        background: --var($theme, 'group-row-selected-background');\n\n        %igx-grid__grouping-indicator {\n            color: --var($theme, 'expand-icon-color');\n        }\n\n        &:hover {\n            background: --var($theme, 'group-row-selected-background');\n        }\n    }\n\n    %igx-grid__group-row--cosy {\n        min-height: map-get($grid-header-height, 'cosy');\n    }\n\n    %igx-grid__group-row--compact {\n        min-height: map-get($grid-header-height, 'compact');\n    }\n\n    %igx-group-label {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        line-height: rem(16px);\n\n        > * {\n            margin-#{$right}: rem(4px);\n\n            &:last-child {\n                margin-#{$right}: 0;\n            }\n        }\n    }\n\n    %igx-group-label__icon {\n        user-select: none;\n\n        &%igx-icon-display {\n            color: --var($theme, 'group-label-icon');\n            width: rem(16px);\n            height: rem(16px);\n            font-size: rem(16px);\n        }\n    }\n\n    %igx-group-label__column-name {\n        color: --var($theme, 'group-label-column-name-text');\n        font-weight: 600;\n        font-size: 12px;\n    }\n\n    %igx-group-label__count-badge {\n        > div {\n            background: --var($theme, 'group-count-background');\n            color: --var($theme, 'group-count-text-color');\n            font-size: $grid-head-fs;\n        }\n    }\n\n    %igx-group-label__text {\n        font-size: rem(13px);\n        color: --var($theme, 'group-label-text')\n    }\n\n    [dir='rtl'] {\n        %igx-grid__group-content {\n            padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        }\n\n        %igx-grid__group-content--cosy {\n            padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');\n        }\n\n        %igx-grid__group-content--compact{\n            padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');\n        }\n\n        %igx-group-label {\n            > * {\n                margin-#{$left}: rem(4px);\n\n                &:last-child {\n                    margin-#{$left}: 0;\n                }\n            }\n        }\n    }\n\n    %igx-grid__group-content {\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        flex: 1 1 auto;\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        min-height: map-get($grid-header-height, 'comfortable');\n\n        &:focus {\n            outline: transparent;\n        }\n    }\n\n    %igx-grid__group-content--cosy {\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');\n        min-height: map-get($grid-header-height, 'cosy');\n    }\n\n    %igx-grid__group-content--compact{\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');\n        min-height: map-get($grid-header-height, 'compact');\n    }\n\n    %igx-grid__row-indentation {\n        background: transparent;\n        z-index: 1;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        position: relative;\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        border-#{$right}: 1px solid transparent;\n\n        &::after {\n            content: '';\n            position: absolute;\n            width: 100%;\n            height: rem(1px);\n            bottom: -1px;\n            #{$left}: 0;\n            background: transparent;\n        }\n\n        %igx-button--icon {\n            width: rem(28px);\n            height: rem(28px);\n            color: --var($theme, 'expand-all-icon-color');\n        }\n\n        &:focus,\n        &:hover {\n            %igx-button--icon {\n                color: --var($theme, 'expand-all-icon-hover-color');\n            }\n        }\n    }\n\n    %igx-grid__row-indentation--cosy {\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'cosy')\n    }\n\n    %igx-grid__row-indentation--compact {\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'compact')\n    }\n\n    %igx-grid__grouparea {\n        grid-row: 2;\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        flex-wrap: wrap;\n        border-bottom: $grid-header-border;\n        background: --var($theme, 'grouparea-background');\n        min-height: map-get($grouparea-min-height, 'comfortable');\n        padding: map-get($grouparea-padding, 'comfortable');\n        z-index: 2;\n        height: 100%;\n        overflow: hidden;\n\n        &:focus {\n            outline-style: none;\n        }\n    }\n\n    %igx-grid__grouparea-connector {\n        display: inline-flex;\n        justify-content: center;\n        align-items: center;\n        margin: 0 rem(4px);\n\n        igx-icon {\n            width: 16px;\n            height: 16px;\n            font-size: 16px;\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__grouparea--cosy {\n        min-height: map-get($grouparea-min-height, 'cosy');\n        padding: map-get($grouparea-padding, 'cosy');\n    }\n\n    %igx-grid__grouparea--compact {\n        min-height: map-get($grouparea-min-height, 'compact');\n        padding: map-get($grouparea-padding, 'compact');\n    }\n\n    %igx-drop-area {\n        min-width: rem(80px);\n        display: flex;\n        align-items: center;\n        justify-content: flex-start;\n        height: map-get($drop-area-height, 'comfortable');\n        border-radius: --var($theme, 'drop-area-border-radius');\n        padding: map-get($grid-cell-padding, 'comfortable');\n        flex: 1 0 0%;\n        background: --var($theme, 'drop-area-background');\n\n        %igx-drop-area__icon {\n            color: --var($theme, 'drop-area-icon-color');\n            width: rem(16px);\n            height: rem(16px);\n            font-size: rem(16px);\n            margin-#{$right}: rem(8px);\n        }\n    }\n\n    %igx-drop-area--hover {\n        background: --var($theme, 'drop-area-on-drop-background');\n    }\n\n    %igx-drop-area--cosy {\n        height: map-get($drop-area-height, 'cosy');\n        border-radius: --var($theme, 'drop-area-border-radius');\n        padding: map-get($grid-cell-padding, 'cosy');\n    }\n\n    %igx-drop-area--compact {\n        height: map-get($drop-area-height, 'compact');\n        border-radius: --var($theme, 'drop-area-border-radius');\n        padding: map-get($grid-cell-padding, 'compact');\n    }\n\n    %igx-drop-area__text {\n        @include ellipsis();\n        color: --var($theme, 'drop-area-text-color');\n        font-size: rem(13px);\n    }\n\n    %igx-grid__grouping-indicator {\n        position: relative;\n        display: flex;\n        user-select: none;\n        justify-content: center;\n        align-items: center;\n        background: inherit;\n        z-index: 1;\n        cursor: pointer;\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        padding-#{$right}: $grouping-padding-right;\n        min-height: map-get($grid-header-height, 'comfortable');\n\n        igx-icon {\n            color: --var($theme, 'expand-icon-color');\n            width: $indicator-icon-width;\n        }\n\n        &:hover,\n        &:focus {\n            outline-style: none;\n\n            igx-icon {\n                color: --var($theme, 'expand-icon-hover-color');\n            }\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__grouping-indicator--cosy {\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'cosy');\n        min-height: map-get($grid-header-height, 'cosy');\n    }\n\n    %igx-grid__grouping-indicator--compact {\n        padding-#{$left}: map-get($grid-grouping-indicator-padding, 'compact');\n        min-height: map-get($grid-header-height, 'compact');\n    }\n\n    %igx-grid__header-indentation {\n        position: relative;\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'comfortable');\n        border-#{$right}: 1px solid --var($theme, 'header-border-color');\n        background: --var($theme, 'header-background');\n        z-index: 4;\n    }\n\n    %igx-grid__header-indentation--cosy {\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'cosy');\n    }\n\n    %igx-grid__header-indentation--compact {\n        padding-#{$right}: map-get($grid-grouping-indicator-padding, 'compact');\n    }\n\n    %igx-grid__group-expand-btn {\n        position: absolute;\n        cursor: pointer;\n        user-select: none;\n        top: calc(50% - 12px);\n        #{$left}: map-get($grid-grouping-indicator-padding, 'comfortable');\n\n        &:hover {\n            color: --var($theme, 'expand-icon-hover-color');\n        }\n\n        &%igx-grid__group-expand-btn--push {\n            top: (map-get($grid-header-height, 'comfortable') - rem(24px)) / 2;\n        }\n    }\n\n    %igx-grid__group-expand-btn--cosy {\n        #{$left}: map-get($grid-grouping-indicator-padding, 'cosy');\n\n        &%igx-grid__group-expand-btn--push {\n            top: (map-get($grid-header-height, 'cosy') - rem(24px)) / 2;\n        }\n    }\n\n    %igx-grid__group-expand-btn--compact {\n        #{$left}: map-get($grid-grouping-indicator-padding, 'compact');\n\n        &%igx-grid__group-expand-btn--push {\n            top: (map-get($grid-header-height, 'compact') - rem(24px)) / 2;\n        }\n    }\n\n    @for $i from 1 through 10 {\n        // COMFORTABLE\n        %igx-grid__row-indentation--level-#{$i} {\n            background: inherit;\n            padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width});\n        }\n\n        %igx-grid__group-row--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};\n        }\n\n        %igx-grid__tree-cell--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'comfortable')};\n        }\n\n        // COSY\n        %igx-grid__row-indentation-cosy--level-#{$i} {\n            padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});\n        }\n\n        %igx-grid__group-row-cosy--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};\n        }\n\n        %igx-grid__tree-cell-cosy--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'cosy')};\n        }\n\n        // COMPACT\n        %igx-grid__row-indentation-compact--level-#{$i} {\n            padding-#{$left}: calc(#{$i*map-get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});\n        }\n\n        %igx-grid__group-row-compact--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};\n        }\n\n        %igx-grid__tree-cell-compact--padding-level-#{$i} {\n            padding-#{$left}: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};\n        }\n    }\n\n    %igx-grid__outlet {\n        z-index: 10002;\n        position: fixed;\n    }\n\n    %igx-grid__loading-outlet {\n        z-index: 10003;\n\n        > %overlay-wrapper--modal {\n            background: none;\n        }\n\n        %circular-display {\n            width: rem(50);\n            height: rem(50);\n        }\n    }\n\n    %igx-grid__row-editing-outlet {\n        z-index: 10000;\n        position: absolute;\n\n        %overlay-wrapper {\n            /* Change wrapper position from 'fixed' to 'absolute' so that it is hidden when scrolled below the parent grid body content. */\n            position: absolute;\n        }\n    }\n\n    %igx-grid__filtering-cell {\n        display: flex;\n        align-items: center;\n        border-#{$right}: $grid-header-border;\n        border-top: $grid-header-border;\n        height: map-get($grid-header-height, 'comfortable');\n        padding: map-get($grid-header-padding, 'comfortable');\n        overflow: hidden;\n\n        igx-chips-area {\n            transition: transform .25s $ease-out-back;\n            flex-wrap: nowrap;\n\n            .igx-filtering-chips__connector {\n                font-size: rem(12px);\n                text-transform: uppercase;\n                font-weight: 600;\n                margin: 0 rem(8px);\n            }\n        }\n    }\n\n    %igx-grid__filtering-cell-indicator {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        padding-#{$right}: 8px;\n        margin-#{$left}: 8px;\n        cursor: pointer;\n        visibility: visible;\n\n        igx-icon {\n            width: 18px;\n            height: 18px;\n            font-size: 18px;\n        }\n\n        %igx-badge-display {\n            /* start of IE vertical alignment fix */\n            top: 50%;\n            transform: translateY(-50%);\n            /* end of IE vertical alignment fix */\n            position: absolute;\n            width: 14px;\n            height: 14px;\n            min-width: 14px;\n            font-size: 12px;\n            text-align: center;\n            #{$right}: 0;\n        }\n    }\n\n    %igx-grid__filtering-cell-indicator--hidden {\n        visibility: hidden;\n    }\n\n    %igx-grid__filtering-cell--cosy {\n        height: map-get($grid-header-height, 'cosy');\n        padding: map-get($grid-header-padding, 'comfortable');\n    }\n\n    %igx-grid__filtering-cell--compact {\n        height: map-get($grid-header-height, 'compact');\n        padding: map-get($grid-header-padding, 'comfortable');\n    }\n\n    %igx-grid__filtering-row {\n        position: absolute;\n        display: flex;\n        width: 100%;\n        height: map-get($grid-header-height, 'comfortable');\n        padding: map-get($grid-cell-padding, 'cosy');\n        align-items: center;\n        justify-content: space-between;\n        background: --var($theme, 'filtering-row-background');\n        color: --var($theme, 'filtering-row-text-color');\n        #{$left}: 0;\n        bottom: 0;\n        z-index: 3;\n\n        &::after {\n            display: block;\n            position: absolute;\n            content: '';\n            background: inherit;\n            #{$left}: 0;\n            #{$right}: 0;\n            top: 0;\n            bottom: 0;\n            box-shadow: 0 1px 0 --var($theme, 'filtering-row-background'),\n                0 4px 10px rgba(0, 0, 0, .12);\n            z-index: -1;\n        }\n\n        igx-input-group {\n            flex: 0 0 200px;\n        }\n\n        igx-prefix:focus {\n            color: igx-color(map-get($theme, 'palette'), 'secondary');\n        }\n\n        igx-suffix  {\n            igx-icon {\n                outline-style: none;\n\n                &:focus {\n                    color: igx-color($palette, 'secondary');\n                }\n\n                + igx-icon {\n                    margin-#{$left}: rem(4px);\n                }\n            }\n        }\n    }\n\n    %igx-grid__filtering-row--cosy {\n        height: map-get($grid-header-height, 'cosy');\n    }\n\n    %igx-grid__filtering-row--compact {\n        height: map-get($grid-header-height, 'compact');\n    }\n\n    %igx-grid__filtering-row-main {\n        display: flex;\n        flex: 1;\n        overflow: hidden;\n        max-width: calc(100% - 176px);\n\n        igx-chips-area {\n            transition: transform .25s $ease-out-back;\n            flex-wrap: nowrap;\n            margin: 0 rem(8px);\n        }\n\n        igx-chip {\n            margin: 0 rem(4px);\n        }\n\n        [igxButton] {\n            igx-icon {\n                position: absolute;\n                #{$left}: rem(12px);\n                /* IE fix for vertical alignment*/\n                top: 50%;\n                transform: translateY(-50%);\n            }\n\n            span {\n                margin-#{$left}: rem(16px);\n            }\n        }\n    }\n\n    %filtering-scroll-mask {\n        display: block;\n        position: absolute;\n        content: '';\n        top: -2px;\n        bottom: -2px;\n        width: 10px;\n    }\n\n    %igx-grid__filtering-scroll-start {\n        width: 24px;\n        height: 24px;\n        position: relative;\n        overflow: visible;\n        margin: 0 8px;\n        z-index: 1;\n\n        &::after {\n            @extend %filtering-scroll-mask;\n            #{$left}: calc(100% + 6px);\n            background: linear-gradient(to #{$right}, --var($theme, 'filtering-row-background'), transparent);\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__filtering-scroll-end {\n        width: 24px;\n        height: 24px;\n        position: relative;\n        overflow: visible;\n        margin: 0 8px;\n        z-index: 1;\n\n        &::before {\n            @extend %filtering-scroll-mask;\n            #{$right}: calc(100% + 6px);\n            background: linear-gradient(to left, --var($theme, 'filtering-row-background'), transparent);\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__tr--highlighted {\n        position: relative;\n\n        &::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            #{$left}: 0;\n            width: 4px;\n            height: 100%;\n            background: --var($theme, 'row-highlight');\n            z-index: 3;\n        }\n\n        %igx-grid__tr--edited {\n            &::before {\n                #{$left}: 4px;\n            }\n        }\n\n        &::before {\n            #{$left}: 4px;\n        }\n    }\n\n    %igx-grid__tr-container {\n        border-bottom: 1px solid --var($theme, 'row-border-color');\n    }\n\n    %igx-grid__hierarchical-expander {\n        user-select: none;\n        background: inherit;\n        padding-#{$left}: map-get($hierarchical-grid-indent, 'comfortable');\n        padding-#{$right}: map-get($hierarchical-grid-indent, 'comfortable');\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        cursor: pointer;\n        z-index: 3;\n        color: --var($theme, 'expand-icon-color');\n        border-#{$right}: 1px solid transparent;\n\n        &:focus {\n            outline: none;\n\n            igx-icon {\n                color: --var($theme, 'expand-icon-hover-color');\n            }\n        }\n\n        &:hover {\n            igx-icon {\n                color: --var($theme, 'expand-icon-hover-color');\n            }\n        }\n\n        igx-icon {\n            color: --var($theme, 'expand-icon-color');\n            max-width: $hierarchical-action-icon;\n            min-width: $hierarchical-action-icon;\n        }\n\n        @include if-rtl() {\n            transform: scaleX(-1);\n        }\n    }\n\n    %igx-grid__hierarchical-expander--cosy {\n        padding-#{$left}: map-get($hierarchical-grid-indent, 'cosy');\n        padding-#{$right}: map-get($hierarchical-grid-indent, 'cosy');\n    }\n\n    %igx-grid__hierarchical-expander--compact {\n        padding-#{$left}: map-get($hierarchical-grid-indent, 'compact');\n        padding-#{$right}: map-get($hierarchical-grid-indent, 'compact');\n    }\n\n    %igx-grid__hierarchical-expander--header {\n        background: inherit;\n        border-#{$right}: 1px solid --var($theme, 'header-border-color');\n        z-index: 3;\n\n        igx-icon {\n            display: flex;\n            align-items: center;\n        }\n    }\n\n    %igx-grid__hierarchical-expander--push {\n        align-items: flex-start;\n\n        igx-icon {\n            min-height: map-get($grid-header-height, 'comfortable');\n            max-height: map-get($grid-header-height, 'comfortable');\n        }\n    }\n\n    %igx-grid__hierarchical-expander--push--cosy {\n        igx-icon {\n            min-height: map-get($grid-header-height, 'cosy');\n        }\n    }\n\n    %igx-grid__hierarchical-expander--push--compact {\n        igx-icon {\n            min-height: map-get($grid-header-height, 'compact');\n        }\n    }\n\n    %igx-grid__hierarchical-expander--no-border,\n    %igx-grid__header-indentation--no-border {\n        border-#{$right}: 1px solid transparent;\n    }\n\n    %igx-grid__hierarchical-indent {\n        margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon});\n        margin-top: map-get($hierarchical-grid-indent, 'comfortable');\n        margin-#{$right}: map-get($hierarchical-grid-indent, 'comfortable');\n        margin-bottom: map-get($hierarchical-grid-indent, 'comfortable');\n\n        &--scroll {\n            margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'comfortable')} + 18px);\n        }\n    }\n\n    %igx-grid__hierarchical-indent--cosy {\n        margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon});\n        margin-top: map-get($hierarchical-grid-indent, 'cosy');\n        margin-#{$right}: map-get($hierarchical-grid-indent, 'cosy');\n        margin-bottom: map-get($hierarchical-grid-indent, 'cosy');\n\n        &--scroll {\n            margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'cosy')} + 18px);\n        }\n    }\n\n    %igx-grid__hierarchical-indent--compact {\n        margin-#{$left}: calc(2 * #{map-get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon});\n        margin-top: map-get($hierarchical-grid-indent, 'compact');\n        margin-#{$right}: map-get($hierarchical-grid-indent, 'compact');\n        margin-bottom: map-get($hierarchical-grid-indent, 'compact');\n\n        &--scroll {\n            margin-#{$right}: calc(#{map-get($hierarchical-grid-indent, 'compact')} + 18px);\n        }\n    }\n\n    @include _excel-filtering($theme, $palette);\n    @include _advanced-filtering($theme, $palette);\n}\n","////\n/// @group themes\n/// @access private\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $theme - The grid theme used to style the component.\n/// @param {Map} $palette - The palette map used as base for the component.\n/// @requires igx-color\n/// @requires rem\n/// @requires --var\n@mixin _advanced-filtering($theme, $palette) {\n    $vertical-space-comfortable: rem(16px);\n    $vertical-space-cosy: rem(12px);\n    $vertical-space-compact: rem(8px);\n    $horizontal-space-comfortable: rem(16px);\n    $horizontal-space-cosy: rem(12px);\n    $horizontal-space-compact: rem(8px);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %advanced-filter {\n        width: 660px;\n        min-width: 660px;\n        max-width: 720px;\n        background-color: --var($theme, 'filtering-row-background');\n        box-shadow: igx-elevation($elevations, 12);\n        border-radius: rem(4px);\n    }\n\n    %advanced-filter__header {\n        display: flex;\n        align-items: center;\n        padding: $vertical-space-comfortable;\n        color: igx-color($palette, 'grays', 700);\n        background-color: igx-color($palette, 'grays', 200);\n        user-select: none;\n        cursor: grab;\n    }\n\n    %advanced-filter__main {\n        display: block;\n        padding: rem(16px);\n        overflow: auto;\n        min-height: 214px;\n        max-height: 468px;\n\n        [igxButton] + [igxButton] {\n            margin-#{$left}: rem(8px);\n        }\n    }\n\n    %advanced-filter__outlet {\n        igx-select-item > igx-icon {\n            width: rem(18px);\n            height: rem(18px);\n            font-size: rem(18px);\n            margin-#{$right}: rem(8px);\n        }\n    }\n\n    %filter-tree {\n        display: flex;\n\n        + %filter-tree,\n        + %filter-tree__expression-item,\n        + %filter-tree__inputs {\n            margin-top: $vertical-space-comfortable;\n        }\n    }\n\n    %filter-tree__line {\n        width: rem(8px);\n        min-width: rem(8px);\n        background-color: white;\n        margin-#{$right}: $horizontal-space-comfortable;\n        outline-style: none;\n        border-radius: rem(4px);\n        cursor: pointer;\n    }\n\n    %filter-tree__line--and {\n        background-color: igx-color($palette, 'primary', 300);\n\n        &-selected {\n            background-color: igx-color($palette, 'primary', 700);\n        }\n\n        &:focus {\n            box-shadow: inset 0 0 0 2px igx-color($palette, 'primary', 700);\n        }\n    }\n\n    %filter-tree__line--or {\n        background-color: igx-color($palette, 'secondary', 300);\n\n        &-selected {\n            background-color: igx-color($palette, 'secondary', 700);\n        }\n\n        &:focus {\n            box-shadow: inset 0 0 0 2px igx-color($palette, 'secondary', 700);\n        }\n    }\n\n    %filter-tree__expression {\n        display: flex;\n        flex-direction: column;\n        align-items: flex-start;\n    }\n\n    %filter-tree__expression-item {\n        display: flex;\n        align-items: center;\n\n        + %filter-tree,\n        + %filter-tree__inputs,\n        + %filter-tree__expression-item {\n            margin-top: $vertical-space-comfortable;\n        }\n    }\n\n    %filter-tree__expression-column {\n        padding: 0 rem(8px);\n    }\n\n    %filter-tree__expression-actions {\n        display: inline-flex;\n        margin: 0 rem(8px);\n\n        igx-icon {\n            cursor: pointer;\n            color: igx-color($palette, 'grays', 500);\n            outline-style: none;\n\n            &:hover,\n            &:focus {\n                color: igx-color($palette, 'grays', 800);\n            }\n        }\n\n        igx-icon + igx-icon {\n            margin-#{$left}: rem(8px);\n        }\n    }\n\n    %filter-tree__expression-condition {\n        color: igx-color($palette, 'grays', 500);\n    }\n\n    %filter-tree__buttons {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        margin-top: $vertical-space-comfortable;\n\n        + %filter-tree,\n        + %filter-tree__expression-item,\n        + %filter-tree__inputs {\n            margin-top: $vertical-space-comfortable;\n        }\n    }\n\n    %filter-tree__inputs {\n        display: flex;\n        justify-content: space-between;\n\n        igx-select + igx-select,\n        igx-select + igx-input-group,\n        igx-select + igx-date-picker,\n        igx-input-group + igx-select {\n            margin-#{$left}: rem(8px);\n        }\n\n        + %filter-tree,\n        + %filter-tree__expression-item {\n            margin-top: $vertical-space-comfortable;\n        }\n    }\n\n    %filter-tree__inputs-actions {\n        display: flex;\n        margin: 0 rem(8px);\n        align-items: center;\n\n        [igxButton] + [igxButton] {\n            margin-#{$left}: rem(8px);\n        }\n    }\n\n    %filter-legend {\n        display: flex;\n        margin-#{$left}: auto;\n        pointer-events: none;\n    }\n\n    %filter-legend__item {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        font-size: rem(12px);\n\n        &::before {\n            content: '';\n            width: rem(24px);\n            height: rem(24px);\n            background: white;\n            border-radius: rem(4px);\n            margin-#{$right}: rem(8px);\n        }\n\n        + %filter-legend__item {\n            margin-#{$left}: rem(24px);\n        }\n    }\n\n    %filter-legend__item--and::before {\n        background-color: igx-color($palette, 'primary', 300);\n    }\n\n    %filter-legend__item--or::before {\n        background-color: igx-color($palette, 'secondary', 300);\n    }\n\n    %filter-con-menu {\n        position: relative;\n        display: flex;\n        flex-flow: column;\n        width: 196px;\n        background-color: --var($theme, 'filtering-row-background');\n        padding: rem(16px);\n        margin-#{$left}: rem(16px);\n        border-radius: rem(4px);\n        border: 1px solid igx-color($palette, 'grays', 200);\n\n        > [igxButton] + [igxButton],\n        igx-buttongroup + [igxButton],\n        [igxButton] + igx-buttongroup {\n            margin-top: $vertical-space-comfortable;\n        }\n\n        > [igxButton]%filter-con-menu__close-btn + [igxButton],\n        [igxButton]%filter-con-menu__close-btn + igx-buttongroup {\n            margin-top: 0;\n        }\n\n        [igxButton] > igx-icon + * {\n            margin-#{$left}: 8px;\n        }\n\n        igx-buttongroup > * {\n            box-shadow: none;\n        }\n    }\n\n    %filter-con-menu__delete-btn {\n        color: igx-color($palette, 'error');\n\n        &:hover,\n        &:focus {\n            color: igx-color($palette, 'error');\n        }\n    }\n\n    %filter-con-menu__close-btn {\n        position: absolute;\n        top: rem(-18px);\n        #{$right}: rem(-18px);\n        background-color: --var($theme, 'filtering-row-background');\n        border: 1px solid igx-color($palette, 'grays', 200);\n\n        &:hover,\n        &:focus {\n            background-color: --var($theme, 'filtering-row-background');\n        }\n    }\n\n    %filter-empty {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        height: 144px;\n    }\n\n    %filter-empty__title {\n        color: igx-color($palette, 'grays', 500);\n    }\n\n    %advanced-filter--cosy {\n        %advanced-filter__main {\n            min-height: 164px;\n            max-height: 394px;\n        }\n\n        %filter-empty {\n            height: 107px;\n        }\n\n        %advanced-filter__main,\n        %advanced-filter__header {\n            padding: $vertical-space-cosy rem(16px);\n        }\n\n        %filter-tree__expression-actions igx-icon {\n            font-size: rem(18px);\n            width: rem(18px);\n            height: rem(18px);\n        }\n\n        %filter-tree__line {\n            margin-#{$right}: $horizontal-space-cosy;\n        }\n\n        %filter-tree {\n            + %filter-tree,\n            + %filter-tree__expression-item,\n            + %filter-tree__inputs {\n                margin-top: $vertical-space-cosy;\n            }\n        }\n\n        %filter-tree__expression-item {\n            + %filter-tree,\n            + %filter-tree__inputs,\n            + %filter-tree__expression-item {\n                margin-top: $vertical-space-cosy;\n            }\n        }\n\n        %filter-tree__buttons {\n            margin-top: $vertical-space-cosy;\n\n            + %filter-tree,\n            + %filter-tree__expression-item,\n            + %filter-tree__inputs {\n                margin-top: $vertical-space-cosy;\n            }\n        }\n\n        %filter-tree__inputs {\n            + %filter-tree,\n            + %filter-tree__expression-item {\n                margin-top: $vertical-space-cosy;\n            }\n        }\n    }\n\n    %advanced-filter--compact {\n        %advanced-filter__main {\n            min-height: 138px;\n            max-height: 305px;\n        }\n\n        %filter-empty {\n            height: 92px;\n        }\n\n        %advanced-filter__main,\n        %advanced-filter__header {\n            padding: $vertical-space-compact rem(16px);\n        }\n\n        %filter-tree__expression-actions igx-icon {\n            font-size: rem(18px);\n            width: rem(18px);\n            height: rem(18px);\n        }\n\n        %filter-tree__line {\n            margin-#{$right}: $horizontal-space-compact;\n        }\n\n        %filter-tree {\n            + %filter-tree,\n            + %filter-tree__expression-item,\n            + %filter-tree__inputs {\n                margin-top: $vertical-space-compact;\n            }\n        }\n\n        %filter-tree__expression-item {\n            + %filter-tree,\n            + %filter-tree__inputs,\n            + %filter-tree__expression-item {\n                margin-top: $vertical-space-compact;\n            }\n        }\n\n        %filter-tree__buttons {\n            margin-top: $vertical-space-compact;\n\n            + %filter-tree,\n            + %filter-tree__expression-item,\n            + %filter-tree__inputs {\n                margin-top: $vertical-space-compact;\n            }\n        }\n\n        %filter-tree__inputs {\n            + %filter-tree,\n            + %filter-tree__expression-item {\n                margin-top: $vertical-space-compact;\n            }\n        }\n    }\n\n    %advanced-filter--inline {\n        display: flex;\n        flex-direction: column;\n        width: 100%;\n        max-width: 100%;\n        height: inherit;\n        max-height: inherit;\n        min-width: 480px;\n        box-shadow: none;\n\n        %advanced-filter__main {\n            min-height: initial;\n            max-height: initial;\n            flex-grow: 1;\n        }\n    }\n\n    %filter-con-menu--cosy {\n        > [igxButton] + [igxButton],\n        igx-buttongroup + [igxButton],\n        [igxButton] + igx-buttongroup {\n            margin-top: $vertical-space-cosy;\n        }\n    }\n\n    %filter-con-menu--compact {\n        > [igxButton] + [igxButton],\n        igx-buttongroup + [igxButton],\n        [igxButton] + igx-buttongroup {\n            margin-top: $vertical-space-compact;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background-color [null] - The summaries background color is inherited form igx-grid__tfoot\n/// @param {Color} $focus-background-color [null] - The background color when a summary item is on focus.\n/// @param {Color} $label-color [null] - The summaries label color.\n/// @param {Color} $result-color [null] - The summaries value/result color.\n/// @param {Color} $border-color [null] - The summaries border color.\n/// @param {Color} $pinned-border-width [null] - The border width of the summary panel.\n/// @param {Color} $pinned-border-style [null] - The border style of the summary panel.\n/// @param {Color} $pinned-border-color [null] - The border color of the summary panel.\n/// @param {Color} $label-hover-color [null] - The summaries hover label color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n///\n/// @example scss Change the summaries background nad labels color\n///   $my-summary-theme: igx-grid-summary-theme(\n///     $background-color: black,\n///     $label-color: white\n///   );\n///   // Pass the theme to the igx-grid-filtering component mixin\n///   @include igx-grid-summary($my-summary-theme);\n@function igx-grid-summary-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $background-color: null,\n    $focus-background-color: null,\n    $label-color: null,\n    $result-color: null,\n    $border-color: null,\n    $pinned-border-width: null,\n    $pinned-border-style: null,\n    $pinned-border-color: null,\n    $label-hover-color: null\n) {\n    $name: 'igx-grid-summary';\n    $grid-summary-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $grid-summary-schema: map-get($schema, $name);\n    } @else {\n        $grid-summary-schema: $schema;\n    }\n\n    $theme: apply-palette($grid-summary-schema, $palette);\n\n    @if not($result-color) and $background-color {\n        $result-color: text-contrast($background-color);\n    }\n\n    @if not($border-color) and $background-color {\n        $border-color: rgba(text-contrast($background-color), .26);\n    }\n\n    @if not($pinned-border-color) and $background-color {\n        $pinned-border-color: rgba(text-contrast($background-color), .26);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background-color: $background-color,\n        focus-background-color: $focus-background-color,\n        label-color: $label-color,\n        result-color: $result-color,\n        border-color: $border-color,\n        pinned-border-width: $pinned-border-width,\n        pinned-border-style: $pinned-border-style,\n        pinned-border-color: $pinned-border-color,\n        label-hover-color: $label-hover-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires --var\n@mixin igx-grid-summary($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $cell-pin: (\n        style: --var($theme, 'pinned-border-width') --var($theme, 'pinned-border-style'),\n        color: --var($theme, 'pinned-border-color')\n    );\n\n    $item-padding: (\n        comfortable: rem(6px) 0,\n        cosy: rem(2px) 0,\n        compact: 0\n    );\n\n    $summary-padding: (\n        comfortable: 0 rem(24px),\n        cosy: 0 rem(16px),\n        compact: 0 rem(12px)\n    );\n\n    %igx-grid-summary {\n        position: relative;\n        display: flex;\n        flex-direction: column;\n        flex: 1 1 0%;\n        padding: map-get($summary-padding, 'comfortable');\n        background: --var($theme, 'background-color', inherit);\n        overflow: hidden;\n        outline-style: none;\n\n        &::after {\n            position: absolute;\n            content: '';\n            top: 0;\n            bottom: 0;\n            left: 0;\n            right: 0;\n        }\n\n        &:focus::after {\n            background: --var($theme, 'focus-background-color');\n        }\n    }\n\n    %igx-grid-summary--cosy {\n        padding: map-get($summary-padding, 'cosy');\n    }\n\n    %igx-grid-summary--compact {\n        padding: map-get($summary-padding, 'compact');\n    }\n\n    %igx-grid-summary--pinned {\n        position: relative;\n        z-index: 1;\n    }\n\n    %grid-summary--fixed-width {\n        flex-grow: 0;\n    }\n\n    %igx-grid-summary--pinned-last {\n        border-#{$right}: map-get($cell-pin, 'style') map-get($cell-pin, 'color');\n        @media print {\n            border-right: map-get($cell-pin, 'style') #999;\n        }\n    }\n\n    %igx-grid-summary__item {\n        display: flex;\n        align-items: center;\n        padding: map-get($item-padding, 'comfortable');\n        font-size: rem(12px);\n        position: relative;\n    }\n\n    %igx-grid-summary__item--cosy {\n        padding: map-get($item-padding, 'cosy');\n    }\n\n    %igx-grid-summary__item--compact {\n        padding: map-get($item-padding, 'compact');\n    }\n\n    %igx-grid-summary__label {\n        color: --var($theme, 'label-color');\n        min-width: rem(30px);\n        margin-#{$right}: rem(3px);\n\n        &:hover {\n            color: --var($theme, 'label-hover-color');\n        }\n    }\n\n    %igx-grid-summary__result {\n        color: --var($theme, 'result-color');\n        font-weight: 600;\n        flex: 1 1 auto;\n        text-align: #{$right};\n    }\n\n    %igx-grid-summary__label,\n    %igx-grid-summary__result {\n        @include ellipsis();\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background-color [null] - The toolbar background color.\n/// @param {Color} $title-text-color [null] - The toolbar title text color.\n/// @param {Color} $dropdown-background [null] - The toolbar drop-down background color.\n/// @param {Color} $item-text-color [null] - The toolbar drop-down item text color.\n/// @param {Color} $item-hover-background [null] - The toolbar drop-down item hover background color.\n/// @param {Color} $item-hover-text-color [null] - The toolbar drop-down item hover text color.\n/// @param {Color} $item-focus-background [null] - The toolbar drop-down item focus background color.\n/// @param {Color} $item-focus-text-color [null] - The toolbar drop-down item focus text color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n///\n/// @example scss Change the toolbar background color\n///   $my-toolbar-theme: igx-grid-toolbar-theme(\n///     $background-color: black\n///   );\n///   // Pass the theme to the igx-grid-filtering component mixin\n///   @include igx-grid-toolbar($my-toolbar-theme);\n\n@function igx-grid-toolbar-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $background-color: null,\n    $title-text-color: null,\n\n    $dropdown-background: null,\n    $item-text-color: null,\n    $item-hover-background: null,\n    $item-hover-text-color: null,\n    $item-focus-background: null,\n    $item-focus-text-color: null\n) {\n    $name: 'igx-grid-toolbar';\n    $grid-toolbar-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $grid-toolbar-schema: map-get($schema, $name);\n    } @else {\n        $grid-toolbar-schema: $schema;\n    }\n\n    $theme: apply-palette($grid-toolbar-schema, $palette);\n\n    @if not($title-text-color) and $background-color {\n        $title-text-color: text-contrast($background-color);\n    }\n\n    @if not($item-text-color) and $dropdown-background {\n        $item-text-color: text-contrast($dropdown-background);\n    }\n\n    @if not($item-hover-text-color) and $dropdown-background {\n        $item-hover-text-color: text-contrast($dropdown-background);\n    }\n\n    @if not($item-focus-text-color) and $dropdown-background {\n        $item-focus-text-color: text-contrast($dropdown-background);\n    }\n\n    @if not($item-hover-text-color) and $item-hover-background {\n        $item-hover-text-color: text-contrast($item-hover-background);\n    }\n\n    @if not($item-focus-text-color) and $item-focus-background {\n        $item-focus-text-color: text-contrast($item-focus-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n\n        background-color: $background-color,\n        title-text-color: $title-text-color,\n\n        item-text-color: $item-text-color,\n        dropdown-background: $dropdown-background,\n        item-hover-background: $item-hover-background,\n        item-hover-text-color: $item-hover-text-color,\n        item-focus-background: $item-focus-background,\n        item-focus-text-color: $item-focus-text-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires igx-color\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires em\n/// @requires --var\n@mixin igx-grid-toolbar($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    // Caption\n    $grid-toolbar-fs: rem(16px);\n\n    $grid-toolbar-padding: (\n        comfortable: 0 rem(16px) 0 rem(24px),\n        cosy: 0 rem(12px) 0 rem(16px),\n        compact: 0 rem(8px) 0 rem(12px)\n    );\n\n    $grid-toolbar-padding-rtl: (\n        comfortable: 0 rem(24px) 0 rem(16px),\n        cosy: 0 rem(16px) 0 rem(12px),\n        compact: 0 rem(12px) 0 rem(8px)\n    );\n\n    $grid-toolbar-height: (\n        comfortable: rem(58px),\n        cosy: rem(52px),\n        compact: rem(44px)\n    );\n\n    %igx-grid-toolbar {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        grid-row: 1;\n        font-size: $grid-toolbar-fs;\n        border-bottom: 1px solid igx-color(map-get($theme, 'palette'), 'grays', 300);\n        background: --var($theme, 'background-color');\n        height: map-get($grid-toolbar-height, 'comfortable');\n\n        @include if-ltr(){\n            padding: map-get($grid-toolbar-padding, 'comfortable');\n        }\n\n        @include if-rtl(){\n            padding: map-get($grid-toolbar-padding-rtl, 'comfortable');\n        }\n\n        %igx-button--outlined,\n        %igx-button--raised,\n        %igx-button--flat,\n        %igx-button--icon{\n            margin-#{$left}: rem(8);\n        }\n\n        %igx-grid-toolbar__button-space {\n            display: flex;\n            justify-content: space-between;\n            align-items: center;\n\n            span {\n                &:empty {\n                    display: none;\n                }\n            }\n\n            > * {\n                margin-#{$left}: rem(8px);\n\n                &:first-child {\n                    margin-#{$left}: 0;\n                }\n            }\n        }\n\n        &[dir='rtl'] {\n            text-align: #{$right};\n\n            %igx-button--outlined,\n            %igx-button--raised,\n            %igx-button--flat,\n            %igx-button--icon{\n                margin-#{$left}: 0;\n                margin-#{$right}: rem(8);\n            }\n\n            %igx-grid-toolbar__button-space {\n                text-align: #{$right};\n\n                > * {\n                    margin-#{$left}: 0;\n                    margin-#{$right}: rem(8px);\n                }\n\n                > *:last-child {\n                    margin-#{$left}: 0;\n                }\n            }\n        }\n    }\n\n    %igx-grid-toolbar--cosy {\n        height: map-get($grid-toolbar-height, 'cosy');\n        @include if-ltr() {\n            padding: map-get($grid-toolbar-padding, 'cosy');\n        }\n\n        @include if-rtl() {\n            padding: map-get($grid-toolbar-padding-rtl, 'cosy');\n        }\n    }\n\n    %igx-grid-toolbar--compact {\n        height: map-get($grid-toolbar-height, 'compact');\n        @include if-ltr() {\n            padding: map-get($grid-toolbar-padding, 'compact');\n        }\n\n        @include if-rtl() {\n            padding: map-get($grid-toolbar-padding-rtl, 'compact');\n        }\n    }\n\n    %grid-caption {\n        display: flex;\n        align-items: center;\n    }\n\n    %igx-grid-toolbar__title {\n        color: --var($theme, 'title-text-color');\n        flex: 1 1 auto;\n        @include ellipsis();\n    }\n\n    %igx-grid-toolbar__custom-content {\n        display: flex;\n        flex-flow: row wrap;\n    }\n\n    %igx-grid-toolbar__actions {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n\n        > div {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n        }\n    }\n\n    %igx-grid-toolbar__adv-filter--filtered {\n        border-color: igx-color(map-get($theme, 'palette'), 'secondary') !important;\n    }\n\n    %igx-grid-toolbar__dropdown {\n        position: relative;\n\n        %igx-filtering-menu {\n            padding: rem(0);\n            #{$right}: 0;\n            margin: 0;\n            min-width: auto;\n        }\n    }\n\n    %igx-grid-toolbar__dd-list {\n        list-style: none;\n        background: --var($theme, 'dropdown-background');\n        margin: 0;\n        padding: 0;\n    }\n\n    %igx-grid-toolbar__dd-list-items {\n        cursor: pointer;\n        position: relative;\n        padding: em(8px) em(16px);\n        color: --var($theme, 'item-text-color');\n        white-space: nowrap;\n\n        &:hover {\n            background: --var($theme, 'item-hover-background');\n            color: --var($theme, 'item-hover-text-color');\n        }\n\n        &:focus {\n            background: --var($theme, 'item-focus-background');\n            color: --var($theme, 'item-focus-text-color');\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// If only background color(s) specified, text color(s) will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n/// @param {Color} $resting-background [null]- The background color used for the highlight in its resting state.\n/// @param {Color} $resting-color [null] - The text color used for the highlight in its resting state.\n/// @param {Color} $active-background [null] - The background color used for the highlight in its active state.\n/// @param {Color} $active-color [null] - The text color used for the highlight in its active state.\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n///\n/// @example scss Change the background and icon colors in icon highlight\n///   $my-avatar-theme: igx-avatar-theme($icon-background: black, $icon-color: white);\n///   // Pass the theme to the igx-avatar component mixin\n///   @include igx-avatar($my-avatar-theme);\n@function igx-highlight-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $resting-background: null,\n    $resting-color: null,\n    $active-background: null,\n    $active-color: null,\n) {\n    $name: 'igx-highlight';\n    $highlight-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $highlight-schema: map-get($schema, $name);\n    } @else {\n        $highlight-schema: $schema;\n    }\n\n    $theme: apply-palette($highlight-schema, $palette);\n\n    @if not($resting-color) and $resting-background {\n        $resting-color: text-contrast($resting-background);\n    }\n\n    @if not($active-color) and $active-background {\n        $active-color: text-contrast($active-background);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        resting-background: $resting-background,\n        resting-color: $resting-color,\n        active-background: $active-background,\n        active-color: $active-color,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-highlight($theme) {\n    @include igx-root-css-vars($theme);\n\n    %igx-highlight {\n        color: --var($theme, 'resting-color');\n        background: --var($theme, 'resting-background');\n    }\n\n    %igx-highlight--active {\n        color: --var($theme, 'active-color');\n        background: --var($theme, 'active-background');\n    }\n}\n\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $color [null] - The icon color.\n/// @param {String} $size [null] - The icon size.\n/// @param {Color} $disabled-color [null] - The disabled icon color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the icon color\n///   $my-icon-theme: igx-icon-theme($color: orange);\n///   // Pass the theme to the igx-icon component mixin\n///   @include igx-icon($my-icon-theme);\n@function igx-icon-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $color: null,\n    $size: null,\n    $disabled-color: null\n) {\n    $name: 'igx-icon';\n    $icon-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $icon-schema: map-get($schema, $name);\n    } @else {\n        $icon-schema: $schema;\n    }\n\n    $theme: apply-palette($icon-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        color: $color,\n        size: $size,\n        disabled-color: $disabled-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires --var\n@mixin igx-icon($theme) {\n    @include igx-root-css-vars($theme);\n\n    // @debug $theme;\n\n    $igx-icon-font-size: --var($theme, 'size');\n\n    %igx-icon-display {\n        width: $igx-icon-font-size;\n        height: $igx-icon-font-size;\n        font-size: $igx-icon-font-size;\n        color: --var($theme, 'color');\n\n        svg {\n            width: inherit;\n            height: inherit;\n            fill: currentColor;\n\n            use {\n                pointer-events: none;\n            }\n        }\n    }\n\n    %igx-icon--inactive {\n        color: --var($theme, 'disabled-color') !important;\n        opacity: .54;\n    }\n}\n","////\n/// @group animations\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @type Timing Function\n$ease-in-quad: cubic-bezier(.55, .085, .68, .53);\n/// @type Timing Function\n$ease-in-cubic: cubic-bezier(.55, .55, .675, .19);\n/// @type Timing Function\n$ease-in-quart: cubic-bezier(.895, .03, .685, .22);\n/// @type Timing Function\n$ease-in-quint: cubic-bezier(.755, .05, .855, .06);\n/// @type Timing Function\n$ease-in-sine: cubic-bezier(.47, 0, .745, .715);\n/// @type Timing Function\n$ease-in-expo: cubic-bezier(.95, .05, .795, .035);\n/// @type Timing Function\n$ease-in-circ: cubic-bezier(.95, .05, .795, .035);\n/// @type Timing Function\n$ease-in-back: cubic-bezier(.95, .05, .795, .035);\n/// @type Timing Function\n$ease-out-quad: cubic-bezier(.25, .46, .45, .94);\n/// @type Timing Function\n$ease-out-cubic: cubic-bezier(.215, .61, .355, 1);\n/// @type Timing Function\n$ease-out-quart: cubic-bezier(.165, .84, .44, 1);\n/// @type Timing Function\n$ease-out-quint: cubic-bezier(.23, 1, .32, 1);\n/// @type Timing Function\n$ease-out-sine: cubic-bezier(.39, .575, .565, 1);\n/// @type Timing Function\n$ease-out-expo: cubic-bezier(.19, 1, .22, 1);\n/// @type Timing Function\n$ease-out-circ: cubic-bezier(.075, .82, .165, 1);\n/// @type Timing Function\n$ease-out-back: cubic-bezier(.175, .885, .32, 1.275);\n/// @type Timing Function\n$ease-in-out-quad: cubic-bezier(.455, .03, .515, .955);\n/// @type Timing Function\n$ease-in-out-cubic: cubic-bezier(.645, .045, .355, 1);\n/// @type Timing Function\n$ease-in-out-quart: cubic-bezier(.77, 0, .175, 1);\n/// @type Timing Function\n$ease-in-out-quint: .5s cubic-bezier(.86, 0, .07, 1);\n/// @type Timing Function\n$ease-in-out-sine: cubic-bezier(.445, .05, .55, .95);\n/// @type Timing Function\n$ease-in-out-expo: cubic-bezier(1, 0, 0, 1);\n/// @type Timing Function\n$ease-in-out-circ: cubic-bezier(.785, .135, .15, .86);\n/// @type Timing Function\n$ease-in-out-back: cubic-bezier(.68, -.55, .265, 1.55);\n","/// Default theme palette.\n/// Will be the one used if no theme palette is specified.\n/// @group palettes\n/// @type Map\n/// @prop {Map} primary - The primary sub-palette created from the primary color.\n/// @prop {Map} secondary - The secondary sub-palette created from the secondary color.\n/// @prop {Map} grays - The grays sub-palette. Included by default in every igx-palette.\n/// @prop {Color} primary.100 [#a7d9fa] - The 100 variant of the `primary` color.\n/// @prop {Color} primary.200 [#6dbcf1] - The 200 variant of the `primary` color.\n/// @prop {Color} primary.300 [#3ca9f2] - The 300 variant of the `primary` color.\n/// @prop {Color} primary.400 [#1da0f7] - The 400 variant of the `primary` color.\n/// @prop {Color} primary.500 [#09f] - The 500 variant of the `primary` color (default).\n/// @prop {Color} primary.600 [#0089e5] - The 600 variant of the `primary` color.\n/// @prop {Color} primary.700 [#007ed2] - The 700 variant of the `primary` color.\n/// @prop {Color} primary.800 [#0072be] - The 800 variant of the `primary` color.\n/// @prop {Color} primary.900 [#0065a8] - The 900 variant of the `primary` color.\n/// @prop {Color} primary.A100 [#55bbff] - The A100 variant of the `primary` color.\n/// @prop {Color} primary.A200 [#27a9ff] - The A200 variant of the `primary` color.\n/// @prop {Color} primary.A400 [#008deb] - The A400 variant of the `primary` color.\n/// @prop {Color} primary.A700 [#0066aa] - The A700 variant of the `primary` color.\n/// @prop {Color} secondary.100 [#f0b2ce] - The 100 variant of the `secondary` color.\n/// @prop {Color} secondary.200 [#e17fab] - The 200 variant of the `secondary` color.\n/// @prop {Color} secondary.300 [#dc5391] - The 300 variant of the `secondary` color.\n/// @prop {Color} secondary.400 [#df3683] - The 400 variant of the `secondary` color.\n/// @prop {Color} secondary.500 [#e41c77] - The 500 variant of the `secondary` color (default).\n/// @prop {Color} secondary.600 [#dc0a6a] - The 600 variant of the `secondary` color.\n/// @prop {Color} secondary.700 [#d30060] - The 700 variant of the `secondary` color.\n/// @prop {Color} secondary.800 [#bf0057] - The 800 variant of the `secondary` color.\n/// @prop {Color} secondary.900 [#a5044d] - The 900 variant of the `secondary` color.\n/// @prop {Color} secondary.A100 [#f65fa4] - The A100 variant of the `secondary` color.\n/// @prop {Color} secondary.A200 [#f3348b] - The A200 variant of the `secondary` color.\n/// @prop {Color} secondary.A400 [#df0d6d] - The A400 variant of the `secondary` color.\n/// @prop {Color} secondary.A700 [#a2094f] - The A700 variant of the `primary` color.\n/// @prop {Color} grays.100 [rgba(0, 0, 0, .04)] - The 100 variant of the `grays` color.\n/// @prop {Color} grays.200 [rgba(0, 0, 0, .08)] - The 200 variant of the `grays` color.\n/// @prop {Color} grays.300 [rgba(0, 0, 0, .12)] - The 300 variant of the `grays` color.\n/// @prop {Color} grays.400 [rgba(0, 0, 0, .26)] - The 400 variant of the `grays` color.\n/// @prop {Color} grays.500 [rgba(0, 0, 0, .38)] - The 500 variant of the `grays` color.\n/// @prop {Color} grays.600 [rgba(0, 0, 0, .54)] - The 600 variant of the `grays` color.\n/// @prop {Color} grays.700 [rgba(0, 0, 0, .62)] - The 700 variant of the `grays` color.\n/// @prop {Color} grays.800 [rgba(0, 0, 0, .74)] - The 800 variant of the `grays` color.\n/// @prop {Color} grays.900 [rgba(0, 0, 0, .87)] - The 900 variant of the `grays` color.\n/// @prop {Color} info [#1377d5] - The `info` color. Default for every palette if not specified.\n/// @prop {Color} success [#4eb862] - The `success` color. Default for every palette if not specified.\n/// @prop {Color} warn [#fbb13c] - The `warn` color. Default for every palette if not specified.\n/// @prop {Color} error [#ff134a] - The `error`. Default for every palette if not specified.\n/// @requires igx-palette\n$default-palette: igx-palette($primary: #09f, $secondary: #e41c77) !default;\n\n/// Global Overlay Color\n/// @group palettes\n/// @type Color\n/// @prop {Map} $palette [$default-palette] - The palette used to extract the color from.\n/// @prop {String} $color [grays] - The name of the sub-palette to take the color from.\n/// @requires igx-color\n$overlay-color: igx-color($default-palette, 'grays') !default;\n\n/// Default elevations. Work in progress.\n/// Subject to change.\n/// @group elevations\n/// @type Map\n/// @prop {Color} $color-1 [rgba(0, 0, 0, .26)] - The color used for the umbra shadow.\n/// @prop {Color} $color-2 [rgba(0, 0, 0, .12)] - The color used for the penumbra shadow.\n/// @prop {Color} $color-3 [rgba(0, 0, 0, .08)] - The color used for the ambient shadow.\n/// @requires igx-elevations\n$elevations: igx-elevations(\n    rgba(0, 0, 0, .26),\n    rgba(0, 0, 0, .12),\n    rgba(0, 0, 0, .08)\n) !default;\n\n/// Green palette\n/// @type {Map}\n/// @group palettes\n$green-palette: igx-palette(\n    $primary: #09f,\n    $secondary: #72da67\n) !default;\n\n/// Red palette\n/// @type {Map}\n/// @group palettes\n$purple-palette: igx-palette(\n    $primary: #00b4d6,\n    $secondary: #514590\n) !default;\n\n\n/// Fluent Excel palette\n/// @type {Map}\n/// @group palettes\n$fluent-excel-palette: igx-palette(\n    $primary: #217346,\n    $secondary: #217346,\n    $success: #107c10,\n    $warn: #797673,\n    $error: #a80000\n) !default;\n\n/// Fluent Word palette\n/// @type {Map}\n/// @group palettes\n$fluent-word-palette: igx-palette(\n    $primary: #2b579a,\n    $secondary: #2b579a,\n    $success: #107c10,\n    $warn: #797673,\n    $error: #a80000\n) !default;\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $background-color [null] - The background color used for modal overlays.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n///\n/// @example scss Change the background color\n///   $my-overlay-theme: igx-overlay-theme($background-color: rgba(yellow, .74));\n///   // Pass the theme to the igx-overlay component mixin\n///   igx-overlay($my-overlay-theme);\n///\n@function igx-overlay-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n    $background-color: null\n) {\n    $name: 'igx-overlay';\n    $overlay-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $overlay-schema: map-get($schema, $name);\n    } @else {\n        $overlay-schema: $schema;\n    }\n\n    $theme: apply-palette($overlay-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        background-color: $background-color\n    ));\n}\n\n///\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires --var\n///\n@mixin igx-overlay($theme) {\n    @include igx-root-css-vars($theme);\n\n    %overlay-display {\n        width: 0;\n        height: 0;\n        box-sizing: content-box;\n    }\n\n    %overlay-wrapper {\n        position: fixed;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n        background: transparent;\n        transition: background .25s $ease-in-out-quad;\n        pointer-events: none;\n        z-index: 10;\n        box-sizing: content-box;\n    }\n\n    %overlay-wrapper--modal {\n        background: --var($theme, 'background-color');\n        pointer-events: initial;\n    }\n\n    %overlay-wrapper--flex {\n        display: flex;\n    }\n\n    %overlay-wrapper--flex-container {\n        display: flex;\n        position: absolute;\n    }\n\n    %overlay-content {\n        position: absolute;\n        pointer-events: all;\n        box-sizing: content-box;\n    }\n\n    %overlay-content--modal {\n        pointer-events: initial;\n    }\n\n    %overlay-content--elastic {\n        overflow: auto;\n    }\n\n    %overlay-content--relative {\n        position: relative;\n    }\n\n    %igx-toggle--hidden {\n        display: none !important;\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// Grid Paging Theme\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Color} $text-color [currentColor] - The text color.\n/// @param {Color} $background-color [rgba(0, 0, 0, .04)] - The background color of the paging panel.\n/// @param {Color} $border-color [rgba(0, 0, 0, .26)] - The border color of the paging panel.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the stripes color\n///   $my-paginator-theme: igx-paginator-theme(\n///     $stripes-color: orange\n///   );\n///   // Pass the theme to the igx-paginator component mixin\n///   @include igx-paginator($my-paginator-theme);\n@function igx-paginator-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $text-color: null,\n    $background-color: null,\n    $border-color: null\n) {\n    $name: 'igx-paginator';\n    $grid-paginator-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $grid-paginator-schema: map-get($schema, $name);\n    } @else {\n        $grid-paginator-schema: $schema;\n    }\n\n    $theme: apply-palette($grid-paginator-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        text-color: $text-color,\n        background-color: $background-color,\n        border-color: $border-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-paginator($theme) {\n    @include igx-root-css-vars($theme);\n\n    $paginator-padding: (\n        comfortable: 0 rem(24px),\n        cosy: 0 rem(16px),\n        compact: 0 rem(12px)\n    );\n\n    $paginator-height: (\n        comfortable: rem(56px),\n        cosy: rem(48px),\n        compact: rem(44px)\n    );\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    %igx-paginator {\n        display: flex;\n        justify-content: space-between;\n        align-items: center;\n        color: --var($theme, 'text-color');\n        background: --var($theme, 'background-color');\n        grid-row: 7;\n        font-size: 12px;\n        border-top: 1px solid --var($theme, 'border-color');\n        z-index: 1;\n        padding: map-get($paginator-padding, 'comfortable');\n        height: map-get($paginator-height, 'comfortable');\n        width: 100%;\n\n        &:empty {\n            padding: 0;\n        }\n    }\n\n    %igx-paginator--cosy {\n        padding: map-get($paginator-padding, 'cosy');\n        height: map-get($paginator-height, 'cosy');\n    }\n\n    %igx-paginator--compact {\n        padding: map-get($paginator-padding, 'compact');\n        height: map-get($paginator-height, 'compact');\n    }\n\n\n    %igx-paginator__label {\n        margin-#{$right}: 8px;\n        @include ellipsis();\n    }\n\n    %igx-paginator__select {\n        display: flex;\n        justify-content: flex-start;\n        align-items: center;\n        flex: 1;\n    }\n\n    %igx-paginator__pager {\n        display: flex;\n        justify-content: flex-end;\n        align-items: center;\n        flex: 1;\n\n        > * {\n            margin-#{$left}: rem(8px);\n        }\n\n        @include if-rtl() {\n            igx-icon {\n                transform: scaleX(-1);\n            }\n        }\n    }\n\n    %igx-paginator__pager-text {\n        display: flex;\n    }\n\n    %igx-paginator__select-input {\n        display: flex;\n        max-width: 90px;\n        min-width: 80px;\n    }\n}\n","////\n/// @group animations\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n/// @requires {mixin} keyframes\n@mixin rotate-center {\n    @include keyframes(rotate-center) {\n        0% {\n            transform: rotate(0);\n        }\n\n        100% {\n            transform: rotate(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-bl {\n    @include keyframes(rotate-bl) {\n        0% {\n            transform: rotate(0);\n            transform-origin: bottom left;\n        }\n\n        100% {\n            transform: rotate(360deg);\n            transform-origin: bottom left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-vert-center {\n    @include keyframes(rotate-vert-center) {\n        0% {\n            transform: rotateY(0);\n        }\n\n        100% {\n            transform: rotateY(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-diagonal-br {\n    @include keyframes(rotate-diagonal-br) {\n        0% {\n            transform: rotate3d(-1, 1, 0, 0deg);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: rotate3d(-1, 1, 0, -360deg);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-top {\n    @include keyframes(rotate-top) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top;\n        }\n\n        100% {\n            transform: rotate(360deg);\n            transform-origin: top;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-left {\n    @include keyframes(rotate-left) {\n        0% {\n            transform: rotate(0);\n            transform-origin: left;\n        }\n\n        100% {\n            transform: rotate(360deg);\n            transform-origin: left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-vert-left {\n    @include keyframes(rotate-vert-left) {\n        0% {\n            transform: rotateY(0);\n            transform-origin: left;\n        }\n\n        100% {\n            transform: rotateY(360deg);\n            transform-origin: left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-diagonal-bl {\n    @include keyframes(rotate-diagonal-bl) {\n        0% {\n            transform: rotate3d(1, 1, 0, 0deg);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: rotate3d(1, 1, 0, 360deg);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-tr {\n    @include keyframes(rotate-tr) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top right;\n        }\n\n        100% {\n            transform: rotate(360deg);\n            transform-origin: top right;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-tl {\n    @include keyframes(rotate-tl) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top left;\n        }\n\n        100% {\n            transform: rotate(360deg);\n            transform-origin: top left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-up {\n    @include keyframes(rotate-scale-up) {\n        0% {\n            transform: scale(1) rotateZ(0);\n        }\n\n        50% {\n            transform: scale(2) rotateZ(180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateZ(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-up-diag-1 {\n    @include keyframes(rotate-scale-up-diag-1) {\n        0% {\n            transform: scale(1) rotate3d(1, 1, 0, 0deg);\n        }\n\n        50% {\n            transform: scale(2) rotate3d(1, 1, 0, -180deg);\n        }\n\n        100% {\n            transform: scale(1) rotate3d(1, 1, 0, -360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-down {\n    @include keyframes(rotate-scale-down) {\n        0% {\n            transform: scale(1) rotateZ(0);\n        }\n\n        50% {\n            transform: scale(.5) rotateZ(180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateZ(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-down-diag-1 {\n    @include keyframes(rotate-scale-down-diag-1) {\n        0% {\n            transform: scale(1) rotate3d(1, 1, 0, 0deg);\n        }\n\n        50% {\n            transform: scale(.5) rotate3d(1, 1, 0, -180deg);\n        }\n\n        100% {\n            transform: scale(1) rotate3d(1, 1, 0, -360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-up-hor {\n    @include keyframes(rotate-scale-up-hor) {\n        0% {\n            transform: scale(1) rotateX(0);\n        }\n\n        50% {\n            transform: scale(2) rotateX(-180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateX(-360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-up-diag-2 {\n    @include keyframes(rotate-scale-up-diag-2) {\n        0% {\n            transform: scale(1) rotate3d(-1, 1, 0, 0deg);\n        }\n\n        50% {\n            transform: scale(2) rotate3d(-1, 1, 0, 180deg);\n        }\n\n        100% {\n            transform: scale(1) rotate3d(-1, 1, 0, 360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-down-hor {\n    @include keyframes(rotate-scale-down-hor) {\n        0% {\n            transform: scale(1) rotateX(0);\n        }\n\n        50% {\n            transform: scale(.5) rotateX(-180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateX(-360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-down-diag-2 {\n    @include keyframes(rotate-scale-down-diag-2) {\n        0% {\n            transform: scale(1) rotate3d(-1, 1, 0, 0deg);\n        }\n\n        50% {\n            transform: scale(.5) rotate3d(-1, 1, 0, 180deg);\n        }\n\n        100% {\n            transform: scale(1) rotate3d(-1, 1, 0, 360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-up-ver {\n    @include keyframes(rotate-scale-up-ver) {\n        0% {\n            transform: scale(1) rotateY(0);\n        }\n\n        50% {\n            transform: scale(2) rotateY(180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateY(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-scale-down-ver {\n    @include keyframes(rotate-scale-down-ver) {\n        0% {\n            transform: scale(1) rotateY(0);\n        }\n\n        50% {\n            transform: scale(.5) rotateY(180deg);\n        }\n\n        100% {\n            transform: scale(1) rotateY(360deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-cw {\n    @include keyframes(rotate-90-cw) {\n        0% {\n            transform: rotate(0);\n        }\n\n        100% {\n            transform: rotate(90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-right-cw {\n    @include keyframes(rotate-90-right-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: right;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: right;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-bl-cw {\n    @include keyframes(rotate-90-bl-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-horizontal-fwd {\n    @include keyframes(rotate-90-horizontal-fwd) {\n        0% {\n            transform: rotateX(0);\n        }\n\n        100% {\n            transform: rotateX(90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-ccw {\n    @include keyframes(rotate-90-ccw) {\n        0% {\n            transform: rotate(0);\n        }\n\n        100% {\n            transform: rotate(-90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-right-ccw {\n    @include keyframes(rotate-90-right-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: right;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: right;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-bl-ccw {\n    @include keyframes(rotate-90-bl-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 0% 100%;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: 0% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-horizontal-bck {\n    @include keyframes(rotate-90-horizontal-bck) {\n        0% {\n            transform: rotateX(0);\n        }\n\n        100% {\n            transform: rotateX(-90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-top-cw {\n    @include keyframes(rotate-90-top-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: top;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-br-cw {\n    @include keyframes(rotate-90-br-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-left-cw {\n    @include keyframes(rotate-90-left-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: left;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-vertical-fwd {\n    @include keyframes(rotate-90-vertical-fwd) {\n        0% {\n            transform: rotateY(0);\n        }\n\n        100% {\n            transform: rotateY(90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-top-ccw {\n    @include keyframes(rotate-90-top-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: top;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-br-ccw {\n    @include keyframes(rotate-90-br-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 100% 100%;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: 100% 100%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-left-ccw {\n    @include keyframes(rotate-90-left-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: left;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: left;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-vertical-bck {\n    @include keyframes(rotate-90-vertical-bck) {\n        0% {\n            transform: rotateY(0);\n        }\n\n        100% {\n            transform: rotateY(-90deg);\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-tr-cw {\n    @include keyframes(rotate-90-tr-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top right;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: top right;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-bottom-cw {\n    @include keyframes(rotate-90-bottom-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: bottom;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: bottom;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-tl-cw {\n    @include keyframes(rotate-90-tl-cw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: rotate(90deg);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-tr-ccw {\n    @include keyframes(rotate-90-tr-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: top right;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: top right;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-bottom-ccw {\n    @include keyframes(rotate-90-bottom-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: bottom;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: bottom;\n        }\n    }\n}\n\n/// @requires {mixin} keyframes\n@mixin rotate-90-tl-ccw {\n    @include keyframes(rotate-90-tl-ccw) {\n        0% {\n            transform: rotate(0);\n            transform-origin: 0% 0%;\n        }\n\n        100% {\n            transform: rotate(-90deg);\n            transform-origin: 0% 0%;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $track-color [null] - The main track color.\n/// @param {Color} $fill-color-default [null] - The track default fill color.\n/// @param {Color} $fill-color-danger [null] - The track danger fill color.\n/// @param {Color} $fill-color-warning [null] - The track warning fill color.\n/// @param {Color} $fill-color-info [null] - The track info fill color.\n/// @param {Color} $fill-color-success [null] - The track success fill color.\n/// @param {Color} $stripes-color [null] - The track stripes color.\n/// @param {Color} $text-color [null] - The track value text color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the stripes color\n///   $my-progress-linear-theme: igx-progress-linear-theme(\n///     $stripes-color: orange\n///   );\n///   // Pass the theme to the igx-progress-linear component mixin\n///   @include igx-progress-linear($my-progress-linear-theme);\n@function igx-progress-linear-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $track-color: null,\n    $fill-color-default: null,\n    $fill-color-danger: null,\n    $fill-color-warning: null,\n    $fill-color-info: null,\n    $fill-color-success: null,\n    $stripes-color: null,\n    $text-color: null\n) {\n    $name: 'igx-linear-bar';\n    $linear-bar-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $linear-bar-schema: map-get($schema, $name);\n    } @else {\n        $linear-bar-schema: $schema;\n    }\n\n    $theme: apply-palette($linear-bar-schema, $palette);\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        track-color: $track-color,\n        fill-color-default: $fill-color-default,\n        fill-color-danger: $fill-color-danger,\n        fill-color-warning: $fill-color-warning,\n        fill-color-info: $fill-color-info,\n        fill-color-success: $fill-color-success,\n        stripes-color: $stripes-color,\n        text-color: $text-color\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires em\n/// @requires --var\n@mixin igx-progress-linear($theme) {\n    @include igx-root-css-vars($theme);\n\n    // @debug $theme;\n\n    $bar-height: 4px;\n    $stripe-color: --var($theme, 'stripes-color');\n    $value-fs: em(14px, 16px);\n    $value-fw: 600;\n    $value-margin: 0;\n    $animation-direction: if-ltr(normal, reverse);\n\n    %linear-display {\n        position: relative;\n        display: flex;\n        width: 100%;\n        flex: 1 1 100%;\n        flex-direction: column;\n    }\n\n    %linear-bar {\n        position: relative;\n        width: inherit;\n        height: $bar-height;\n        background: --var($theme, 'track-color');\n        overflow: hidden;\n        z-index: 0;\n    }\n\n    %linear-indicator {\n        width: 100%;\n        position: relative;\n        height: inherit;\n    }\n\n    %linear-indicator--striped {\n        background-image: linear-gradient(\n            -45deg,\n            $stripe-color 25%,\n            transparent 25%,\n            transparent 50%,\n            $stripe-color 50%,\n            $stripe-color 75%,\n            transparent 75%,\n            transparent\n        );\n        background-size: 40px 40px;\n    }\n\n    %linear-indicator--indeterminate {\n        @include animation(indeterminate-bar 2s cubic-bezier(0, .085, .68, .53) #{$animation-direction} infinite);\n\n        width: 100% !important;\n\n        &::before {\n            position: absolute;\n            content: '';\n            top: 0;\n            left: -200%;\n            width: 100%;\n            height: inherit;\n            background-color: inherit;\n            transform-origin: top right;\n        }\n    }\n\n    %linear-indicator--default {\n        background: --var($theme, 'fill-color-default')\n    }\n\n    %linear-indicator--danger {\n        background-color: --var($theme, 'fill-color-danger');\n    }\n\n    %linear-indicator--warning {\n        background-color: --var($theme, 'fill-color-warning');\n    }\n\n    %linear-indicator--info {\n        background-color: --var($theme, 'fill-color-info');\n    }\n\n    %linear-indicator--success {\n        background-color: --var($theme, 'fill-color-success');\n    }\n\n\n    %linear-value {\n        margin: $value-margin;\n        color: --var($theme, 'text-color');\n        font-size: $value-fs;\n        font-weight: $value-fw;\n    }\n\n    %linear-value--start {\n        align-self: flex-start;\n    }\n\n    %linear-value--center {\n        align-self: center;\n    }\n\n    %linear-value--end {\n        align-self: flex-end;\n    }\n\n    %linear-value--top {\n        order: -1;\n    }\n\n    %linear-value--hidden {\n        display: none;\n    }\n\n    @include keyframes('indeterminate-bar') {\n        0% {\n            transform: scaleX(0) translateX(-100%);\n            transform-origin: left;\n        }\n\n        50% {\n            transform: scaleX(1) translateX(50%);\n            transform-origin: right;\n        }\n\n        100% {\n            transform: scaleX(0) translateX(200%);\n            transform-origin: right;\n        }\n    }\n}\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $base-circle-color [null] - The base circle fill color.\n/// @param {Color | List<Color>} $progress-circle-color [null] - The progress circle fill color.\n/// @param {Color} $text-color [null] - The value text color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Change the circle progress color\n///   $my-progress-circular-theme: igx-progress-circular-theme(\n///     $progress-circle-color: purple\n///   );\n///   // Pass the theme to the igx-progress-circular component mixin\n///   @include igx-progress-circular($my-progress-circle-theme);\n@function igx-progress-circular-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $base-circle-color: null,\n    $progress-circle-color: null,\n\n    $text-color: null\n) {\n    $name: 'igx-circular-bar';\n    $circular-bar-schema: ();\n\n\n    @if map-has-key($schema, $name) {\n        $circular-bar-schema: map-get($schema, $name);\n    } @else {\n        $circular-bar-schema: $schema;\n    }\n\n    $theme: apply-palette($circular-bar-schema, $palette);\n\n    $progress-circle-color-start: map-get($theme, 'progress-circle-color');\n    $progress-circle-color-end: map-get($theme, 'progress-circle-color');\n\n    @if type-of($progress-circle-color) == 'color' {\n        $progress-circle-color-start: $progress-circle-color;\n        $progress-circle-color-end: $progress-circle-color;\n    }\n\n    @if length($progress-circle-color) == 2 {\n        $progress-circle-color-start: nth($progress-circle-color, 1);\n        $progress-circle-color-end: nth($progress-circle-color, 2);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        base-circle-color: $base-circle-color,\n        progress-circle-color-start: $progress-circle-color-start,\n        progress-circle-color-end: $progress-circle-color-end,\n        text-color: $text-color\n    ));\n}\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires {mixin} rotate-center\n/// @requires --var\n@mixin igx-progress-circular($theme) {\n    // Include rotate animation\n    @include rotate-center();\n\n    @include igx-root-css-vars($theme);\n\n    // @debug $theme;\n\n    $palette: map-get($theme, 'palette');\n    $circular-value-fs: rem(32px, 16px);\n    $circular-value-fw: 600;\n    $animation-direction: if-ltr(normal, reverse);\n\n    %circular-display {\n        display: inline-flex;\n        flex: 1 1 auto;\n        width: rem(32px);\n        height: rem(32px);\n\n        svg {\n            width: 100%;\n            height: 100%;\n            min-width: inherit;\n            min-height: inherit;\n        }\n    }\n\n    %circular-display--indeterminate {\n        @include animation(rotate-center 3s linear #{$animation-direction} infinite);\n        transform-origin: 50% 50%;\n    }\n\n    %circular-inner {\n        stroke-width: 4;\n        fill: transparent;\n        stroke: --var($theme, 'base-circle-color');\n    }\n\n    %circular-outer {\n        fill: transparent;\n        stroke-width: 4;\n        stroke-dashoffset: 289;\n        stroke-dasharray: 289;\n        transform-origin: 50% 50%;\n        transform: rotate(-90deg);\n    }\n\n    %circular-outer--indeterminate {\n        stroke-dasharray: 289;\n\n        @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) #{$animation-direction} infinite);\n    }\n\n    %circular-text {\n        font-size: $circular-value-fs;\n        font-weight: $circular-value-fw;\n        fill: --var($theme, 'text-color');\n    }\n\n    %circular-text--hidden {\n        visibility: hidden;\n    }\n\n    %circular-gradient-start {\n        stop-color: --var($theme, 'progress-circle-color-start');\n    }\n\n    %circular-gradient-end {\n        stop-color: --var($theme, 'progress-circle-color-end');\n    }\n\n    @include keyframes('indeterminate-accordion') {\n        from {\n            stroke-dashoffset: 578;\n            stroke-dasharray: 259;\n        }\n\n        to {\n            stroke-dashoffset: 120;\n        }\n    }\n}\n","////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [$default-palette] - The palette used as basis for styling the component.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the component.\n///\n/// @param {Color} $track-color [null] - The color of the track.\n/// @param {Color} $thumb-color [null] - The color of the thumb.\n/// @param {Color} $label-background-color [null] - The background color of the bubble label.\n/// @param {Color} $label-text-color [null] - The text color of the bubble label.\n///\n/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled.\n/// @param {Color} $base-track-color [null] - The base background color of the track.\n/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.\n///\n/// @param {Color} $tick-label-color [null] - The color of the tick label.\n/// @param {Color} $tick-label-color--tall [null] - The color of the tall tick label .\n/// @param {Color} $tick-color [null] - The background-color of the tick.\n/// @param {Color} $tick-color--tall [null] - The background-color of the tall tick.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n///\n/// @example scss Set custom track and thumb on colors\n///   $my-slider-theme: igx-slider-theme($thumb-on-color: black, $track-on-color: yellow);\n///   // Pass the theme to the igx-slider component mixin\n///   @include igx-slider($my-slider-theme);\n@function igx-slider-theme(\n    $palette: $default-palette,\n    $schema: $light-schema,\n\n    $track-color: null,\n    $thumb-color: null,\n\n    $label-background-color: null,\n    $label-text-color: null,\n\n    $disabled-thumb-color: null,\n    $base-track-color: null,\n    $disabled-base-track-color: null,\n    $thumb-border-color: null,\n    $thumb-disabled-border-color: null,\n    $track-hover-color: null,\n    $thumb-hover-color: null,\n    $base-track-hover-color: null,\n    $tick-label-color: null,\n    $tick-label-color-tall: null,\n    $tick-color: null,\n    $tick-color-tall: null,\n) {\n    $name: 'igx-slider';\n    $slider-schema: ();\n\n    @if map-has-key($schema, $name) {\n        $slider-schema: map-get($schema, $name);\n    } @else {\n        $slider-schema: $schema;\n    }\n\n    $theme: apply-palette($slider-schema, $palette);\n\n    @if not($label-text-color) and $label-background-color {\n        $label-text-color: text-contrast($label-background-color);\n    }\n\n    @return extend($theme, (\n        name: $name,\n        palette: $palette,\n        track-color: $track-color,\n        track-hover-color: $track-hover-color,\n        thumb-color: $thumb-color,\n        thumb-hover-color: $thumb-hover-color,\n        label-background-color: $label-background-color,\n        label-text-color: $label-text-color,\n        disabled-thumb-color: $disabled-thumb-color,\n        base-track-color: $base-track-color,\n        disabled-base-track-color: $disabled-base-track-color,\n        thumb-border-color: $thumb-border-color,\n        thumb-disabled-border-color: $thumb-disabled-border-color,\n        base-track-hover-color: $base-track-hover-color,\n        tick-label-color: $tick-label-color,\n        tick-label-color-tall: $tick-label-color-tall,\n        tick-color: $tick-color,\n        tick-color-tall: $tick-color-tall,\n    ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} igx-root-css-vars\n/// @requires rem\n/// @requires --var\n@mixin igx-slider($theme) {\n    @include igx-root-css-vars($theme);\n\n    $left: if-ltr(left, right);\n    $right: if-ltr(right, left);\n\n    $slider-height: 48px;\n\n    $slider-track-height: map-get((\n        material: 2px,\n        fluent: 4px\n    ), map-get($theme, variant));\n\n    // Slide ticks\n    $tick-push: rem(4px);\n    $base-tick-height: rem(8px);\n    $tick-height: $base-tick-height;\n    $tick-height--tall: $base-tick-height * 2;\n    $tick-width: rem(2px);\n\n    $thumb-border-width: map-get((\n        material: 0,\n        fluent: 2px\n    ), map-get($theme, variant));\n\n    // Slider Thumb\n    $slider-thumb-width: 40px;\n    $slider-thumb-height: $slider-thumb-width;\n    $slider-thumb-radius: $slider-thumb-width / 2;\n\n    // Slider Label\n    $slider-label-width: 36px;\n    $slider-label-height: $slider-label-width;\n    $slider-label-radius: $slider-label-width / 2;\n    $slider-label-font-size: rem(12px);\n    $slider-label-font-weight: 600;\n    $slider-label-padding: 0 rem(2px);\n\n    $switch-display: map-get((\n        material: block,\n        fluent: none\n    ), map-get($theme, variant));\n\n    $dot-size: map-get((\n        material: 12px,\n        fluent: 16px\n    ), map-get($theme, variant));\n\n    %igx-slider-display {\n        display: flex;\n        position: relative;\n        height: rem($slider-height);\n        flex-grow: 1;\n        align-items: center;\n        transition: all .2s $ease-out-quad;\n\n        &:hover {\n            %igx-slider-track-fill {\n                background: --var($theme, 'track-hover-color');\n            }\n\n            %igx-slider-track {\n                background: --var($theme, 'base-track-hover-color');\n            }\n\n            %igx-slider-track--disabled {\n                background: --var($theme, 'disabled-base-track-color');\n            }\n\n            %igx-thumb-dot {\n                &::before {\n                    border-color: --var($theme, 'track-hover-color');\n                }\n            }\n\n            %igx-thumb-dot--disabled {\n                &::before {\n                    border-color: --var($theme, 'thumb-disabled-border-color');\n                }\n            }\n        }\n    }\n\n    %igx-slider-thumbs-container {\n        position: absolute;\n        width: 100%;\n        height: 0;\n        cursor: default;\n        z-index: 1;\n        left: 0;\n    }\n\n    %igx-slider-track {\n        position: relative;\n        width: 100%;\n        height: rem($slider-track-height);\n        background: --var($theme, 'base-track-color');\n        transition: background .2s $ease-out-quad;\n    }\n\n    %igx-slider-track--disabled {\n        background: --var($theme, 'disabled-base-track-color');\n    }\n\n    %igx-slider-track-fill {\n        position: absolute;\n        width: 100%;\n        height: inherit;\n        background: --var($theme, 'track-color');\n        transform-origin: #{$left} center;\n        transform: scaleX(0);\n    }\n\n    %igx-slider-track-fill--disabled {\n        visibility: hidden;\n    }\n\n    %igx-slider__ticks {\n        width: 100%;\n        display: flex;\n        position: absolute;\n        top: $tick-push;\n        justify-content: space-between;\n        z-index: 1;\n\n        &%igx-slider__ticks--top {\n            bottom: $tick-push;\n            top: auto;\n            align-items: flex-end;\n        }\n    }\n\n    %igx-slider__ticks-group {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        position: relative;\n\n        &:first-of-type {\n            margin-left: rem(-1px);\n        }\n\n        &:last-of-type {\n            margin-left: rem(-1px);\n        }\n    }\n\n    %igx-slider__ticks-label {\n        color: --var($theme, 'tick-label-color');\n        position: absolute;\n        top: $tick-height--tall;\n        transform: translate(-50%);\n        line-height: .7;\n        opacity: 1;\n        transition: opacity .2s $ease-in-out-quad;\n    }\n\n    %igx-slider__ticks-tick {\n        background: --var($theme, 'tick-color');\n        height: $tick-height;\n        width: $tick-width;\n    }\n\n    %igx-slider__ticks--tall {\n        %igx-slider__ticks-label {\n            top: calc(#{$tick-height--tall} + #{$tick-height});\n        }\n    }\n\n    %igx-slider__tick--disabled {\n        background: --var($theme, 'disabled-base-track-color')!important;\n    }\n\n    %igx-slider__ticks-labels--disabled {\n        color: --var($theme, 'disabled-base-track-color')!important;\n    }\n\n    %igx-slider__ticks-group--tall {\n        %igx-slider__ticks-tick {\n            height: $tick-height--tall;\n            background: --var($theme, 'tick-color-tall');\n        }\n\n        %igx-slider__ticks-label {\n            top: calc(#{$tick-height--tall} + #{$tick-height});\n            color: --var($theme, 'tick-label-color-tall');\n        }\n    }\n\n    %igx-slider__ticks--top {\n        %igx-slider__ticks-label {\n            bottom: calc(#{$tick-height} + #{$tick-height});\n            top: auto;\n        }\n\n        &%igx-slider__ticks--tall {\n            %igx-slider__ticks-label {\n                bottom: calc(#{$tick-height--tall} + #{$tick-height});\n                top: auto;\n            }\n        }\n    }\n\n    %igx-slider__tick-label--hidden {\n        opacity: 0;\n    }\n\n    %igx-slider-track-steps {\n        position: absolute;\n        width: 100%;\n        height: rem($slider-track-height);\n        background-size: 100% em($slider-track-height);\n        opacity: .85;\n        transition: opacity .2s $ease-out-quad;\n        z-index: 1;\n    }\n\n    %igx-slider-track-steps--disabled {\n        visibility: hidden;\n    }\n\n    %igx-slider__tick-labels--top-bottom {\n        %igx-slider__ticks-group {\n            display: block;\n        }\n\n        %igx-slider__ticks-label {\n            writing-mode: vertical-rl;\n            transform: translate(-50%) rotate(0deg);\n        }\n\n        %igx-slider__ticks--tall {\n            %igx-slider__ticks-label {\n                top: calc(#{$tick-height--tall} + #{rem(2px)});\n            }\n        }\n\n        &%igx-slider__ticks--top {\n            %igx-slider__ticks-label {\n                writing-mode: vertical-rl;\n                transform: translate(-50%) rotate(0deg);\n            }\n\n            %igx-slider__ticks--tall {\n                %igx-slider__ticks-label {\n                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});\n                }\n            }\n        }\n    }\n\n    %igx-slider__tick-labels--bottom-top {\n        %igx-slider__ticks-group {\n            display: block;\n        }\n\n\n        %igx-slider__ticks-label {\n            writing-mode: vertical-rl;\n            transform: translate(-50%) rotate(180deg);\n        }\n\n        &%igx-slider__ticks--top {\n            %igx-slider__ticks-label {\n                writing-mode: vertical-rl;\n                transform: translate(-50%) rotate(180deg);\n            }\n\n            %igx-slider__ticks--tall {\n                %igx-slider__ticks-label {\n                    bottom: calc(#{$tick-height--tall} + #{rem(2px)});\n                }\n            }\n        }\n    }\n\n    %igx-thumb-display {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        width: $slider-thumb-width;\n        height: $slider-thumb-height;\n        outline-style: none;\n        top: -#{rem($slider-thumb-radius)};\n        margin-left: -#{rem($slider-thumb-radius)};\n\n        &:focus %igx-thumb-dot::after {\n            opacity: .18;\n            /* 32 / 40 */\n            transform: scale(.8);\n        }\n    }\n\n    %igx-thumb--disabled {\n        &:hover %igx-thumb-label {\n            opacity: 0;\n        }\n    }\n\n    %igx-label-display {\n        position: absolute;\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        flex-direction: column;\n        height: $slider-thumb-height;\n        outline-style: none;\n        top: -#{rem($slider-thumb-radius)};\n        margin: 0 auto;\n    }\n\n    %igx-thumb-label {\n        position: relative;\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        flex: 0 0 auto;\n        top: -#{rem($slider-thumb-height - 4px)};\n        left: -50%;\n        pointer-events: none;\n        min-width: rem($slider-label-width);\n        height: rem($slider-label-height);\n        padding: $slider-label-padding;\n        border-radius: rem($slider-label-radius);\n        margin: 0 auto;\n        font-size: $slider-label-font-size;\n        font-weight: $slider-label-font-weight;\n        line-height: rem(18px);\n        color: --var($theme, 'label-text-color');\n        background: --var($theme, 'label-background-color');\n        opacity: 0;\n        border-color: --var($theme, 'label-background-color') transparent transparent;\n        transition: opacity .1s $ease-out-quad;\n        z-index: -1;\n\n        &::after {\n            content: '';\n            position: absolute;\n            top: 0;\n            left: 50%;\n            margin-left: -#{$slider-label-radius};\n            width: rem($slider-label-width);\n            height: $slider-label-height;\n            border-radius: 0 $slider-label-radius $slider-label-radius;\n            background: inherit;\n            transform: rotate(-135deg);\n            z-index: -1;\n        }\n\n        &::before {\n            content: '';\n            position: absolute;\n            top: rem(40px);\n            left: calc(50% - 1px);\n            border-left: 1px solid;\n            border-right: 1px solid;\n            border-top: rem(14px) solid;\n            border-color: inherit;\n        }\n    }\n\n    %igx-thumb-dot {\n        position: relative;\n        left: 0;\n        padding: rem(20px);\n        pointer-events: none;\n\n        &:hover::after {\n            opacity: .12;\n            /* 32 / 40 */\n            transform: scale(.8);\n        }\n\n        &::before {\n            position: absolute;\n            content: '';\n            width: rem($dot-size);\n            height: rem($dot-size);\n            left: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)};\n            top: #{rem($slider-thumb-radius) - (rem($dot-size) / 2)};\n            background: --var($theme, 'thumb-color');\n            border: rem($thumb-border-width) solid --var($theme, 'thumb-border-color');\n            transform: rotate(45deg);\n            transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad;\n            border-radius: rem($slider-thumb-radius);\n        }\n\n        &::after {\n            display: $switch-display;\n            position: absolute;\n            content: '';\n            width: rem($slider-thumb-width);\n            height: rem($slider-thumb-height);\n            background: --var($theme, 'thumb-color');\n            top: 0;\n            left: 0;\n            opacity: 0;\n            transform: scale(0);\n            transform-origin: center center;\n            transition: transform .1s $ease-out-quad, opacity .1s $ease-out-quad;\n            border-radius: 50%;\n        }\n    }\n\n    %igx-thumb-dot--disabled {\n        pointer-events: none;\n\n        &::before {\n            background: --var($theme, 'disabled-thumb-color');\n            border-color: --var($theme, 'thumb-disabled-border-color');\n            border-radius: rem($slider-thumb-radius);\n        }\n\n        &::after {\n            transform: scale(0);\n        }\n    }\n\n    %igx-thumb-dot--active {\n        &::before {\n            border-radius: 0 $slider-thumb-radius $slider-thumb-radius;\n        }\n    }\n\n    %igx-thumb-dot--pressed {\n        &::after {\n            opacity: .24 !important;\n            /* 48 / 40 */\n            transform: scale(1.2) !important;\n        }\n    }\n\n    %igx-thumb-label--active {\n        opacity: 1;\n    }\n\n    %igx-thumb--active {\n        z-index: 1;\n    }\n}\n"]}