igniteui-angular 14.2.5 → 14.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/esm2020/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.mjs +3 -2
  2. package/esm2020/lib/simple-combo/simple-combo.component.mjs +4 -3
  3. package/fesm2015/igniteui-angular.mjs +5 -3
  4. package/fesm2015/igniteui-angular.mjs.map +1 -1
  5. package/fesm2020/igniteui-angular.mjs +5 -3
  6. package/fesm2020/igniteui-angular.mjs.map +1 -1
  7. package/lib/core/styles/themes/schemas/dark/_scrollbar.scss +4 -4
  8. package/package.json +1 -1
  9. package/styles/igniteui-bootstrap-dark.css +1 -1
  10. package/styles/maps/igniteui-bootstrap-dark.css.map +1 -1
package/styles/maps/igniteui-bootstrap-dark.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../../components/_common/_igx-display-container.scss","../../components/_common/_igx-drag.scss","../../components/_common/_igx-vhelper.scss","../_core.scss","../../base/utilities/_bem.scss","../../components/icon/_icon-component.scss","../../components/radio/_radio-component.scss","../../print/_index.scss","../../typography/_typography.scss","../../base/_variables.scss","../../components/grid/_excel-filtering-theme.scss","../../typography/_base.scss","../../components/banner/_banner-theme.scss","../../components/bottom-nav/_bottom-nav-theme.scss","../../components/button/_button-theme.scss","../../base/utilities/_mixins.scss","../../components/checkbox/_checkbox-theme.scss","../../components/chip/_chip-theme.scss","../../components/column-actions/_column-actions-theme.scss","../../components/dock-manager/_dock-manager-theme.scss","../../components/expansion-panel/_expansion-panel-theme.scss","../../components/charts/_gauge-theme.scss","../../components/charts/_graph-theme.scss","../../components/input/_input-group-theme.scss","../../components/navbar/_navbar-theme.scss","../../components/navdrawer/_navdrawer-theme.scss","../../components/radio/_radio-theme.scss","../../components/slider/_slider-theme.scss","../../components/snackbar/_snackbar-theme.scss","../../components/switch/_switch-theme.scss","../../components/stepper/_stepper-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/tree/_tree-theme.scss","../../components/calendar/_calendar-theme.scss","../../components/card/_card-theme.scss","../../components/dialog/_dialog-theme.scss","../../components/drop-down/_drop-down-theme.scss","../../components/list/_list-theme.scss","../_index.scss","../../components/ripple/_ripple-theme.scss","../../components/avatar/_avatar-theme.scss","../../components/action-strip/_action-strip-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","../../components/splitter/_splitter-theme.scss","../../base/animations/generic/_scale.scss","../../components/combo/_combo-theme.scss","../../components/date-picker/_date-picker-theme.scss","../../components/date-range-picker/_date-range-picker-theme.scss","../../components/divider/_divider-theme.scss","../../components/rating/_rating-theme.scss","../../components/grid/_grid-theme.scss","../../components/grid-summary/_grid-summary-theme.scss","../../components/grid-toolbar/_grid-toolbar-theme.scss","../../components/grid/_pivot-data-selector-theme.scss","../../components/highlight/highlight-theme.scss","../../components/icon/_icon-theme.scss","../../base/animations/_easings.scss","../../components/overlay/_overlay-theme.scss","../../components/paginator/_paginator-theme.scss","../../base/animations/generic/_rotate.scss","../../components/progress/_progress-theme.scss","../../components/query-builder/_query-builder-theme.scss","../../components/scrollbar/scrollbar-theme.scss","../../base/animations/entrances/_fade.scss","../../components/watermark/_watermark-theme.scss"],"names":[],"mappings":"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","file":"../igniteui-bootstrap-dark.css","sourcesContent":["@use '../../base' as *;\n\n%display-container {\n display: inherit;\n flex-flow: 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@mixin component {\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}\n","@use '../../base' as *;\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@mixin component {\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","@use '../../base' as *;\n\n/// @group themes\n/// @access private\n%vhelper-display {\n display: block;\n overflow: auto;\n z-index: 10001;\n}\n\n%vhelper--vertical {\n position: absolute;\n top: 0;\n inset-inline-end: 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@mixin component {\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}\n","////\n/// @group themes\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n@use 'utilities' as *;\n\n// Common components\n@use '../components/_common/igx-control';\n@use '../components/_common/igx-display-container' as display-container;\n@use '../components/_common/igx-drag' as drag;\n@use '../components/_common/igx-vhelper' as vhelper;\n@use '../components/ripple/ripple-component' as ripple;\n\n// Other components\n@use '../components/action-strip/action-strip-component' as action-strip;\n@use '../components/avatar/avatar-component' as avatar;\n@use '../components/badge/badge-component' as badge;\n@use '../components/bottom-nav/bottom-nav-component' as bottom-nav;\n@use '../components/button/button-component' as button;\n@use '../components/divider/divider-component' as divider;\n@use '../components/button-group/button-group-component' as button-group;\n@use '../components/banner/banner-component' as banner;\n@use '../components/calendar/calendar-component' as calendar;\n@use '../components/card/card-component' as card;\n@use '../components/carousel/carousel-component' as carousel;\n@use '../components/checkbox/checkbox-component' as checkbox;\n@use '../components/chip/chip-component' as chip;\n@use '../components/column-actions/column-actions-component' as column-actions;\n@use '../components/combo/combo-component' as combo;\n@use '../components/charts/category-chart-component' as category-chart;\n@use '../components/charts/data-chart-component' as data-chart;\n@use '../components/charts/doughnut-chart-component' as doughnut-chart;\n@use '../components/charts/financial-chart-component' as financial-chart;\n@use '../components/charts/funnel-chart-component' as funnel-chart;\n@use '../components/charts/gauge-component' as gauge;\n@use '../components/charts/geo-map-component' as geo-map;\n@use '../components/charts/graph-component' as graph;\n@use '../components/charts/pie-chart-component' as pie-chart;\n@use '../components/charts/shape-chart-component' as shape-chart;\n@use '../components/charts/sparkline-component' as sparkline;\n@use '../components/date-picker/date-picker-component' as date-picker;\n@use '../components/date-range-picker/date-range-picker-component' as date-range-picker;\n@use '../components/dialog/dialog-component' as dialog;\n@use '../components/dock-manager/dock-manager-component' as dock-manager;\n@use '../components/rating/rating-component' as rating;\n@use '../components/drop-down/drop-down-component' as drop-down;\n@use '../components/expansion-panel/expansion-panel-component' as expansion-panel;\n@use '../components/grid/grid-component' as grid;\n@use '../components/grid/pivot-data-selector-component' as pivot-data-selector;\n@use '../components/grid-summary/grid-summary-component' as grid-summary;\n@use '../components/grid-toolbar/grid-toolbar-component' as grid-toolbar;\n@use '../components/highlight/highlight-component' as highlight;\n@use '../components/icon/icon-component' as icon;\n@use '../components/input/input-group-component' as input-group;\n@use '../components/list/list-component' as list;\n@use '../components/navbar/navbar-component' as navbar;\n@use '../components/navdrawer/navdrawer-component' as navdrawer;\n@use '../components/overlay/overlay-component' as overlay;\n@use '../components/paginator/paginator-component' as paginator;\n@use '../components/progress/progress-component' as progress;\n@use '../components/radio/radio-component' as radio;\n@use '../components/query-builder/query-builder-component' as query-builder;\n@use '../components/scrollbar/scrollbar-component' as scrollbar;\n@use '../components/slider/slider-component' as slider;\n@use '../components/splitter/splitter-component' as splitter;\n@use '../components/snackbar/snackbar-component' as snackbar;\n@use '../components/switch/switch-component' as switch;\n@use '../components/stepper/stepper-component' as stepper;\n@use '../components/tabs/tabs-component' as tabs;\n@use '../components/toast/toast-component' as toast;\n@use '../components/tooltip/tooltip-component' as tooltip;\n@use '../components/time-picker/time-picker-component' as time-picker;\n@use '../components/tree/tree-component' as tree;\n@use '../components/watermark/watermark-component' as watermark;\n@use '../print';\n\n/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.\n/// @param {boolean} $enhanced-accesibility [false] - Switches component colors and other properties to more accessible values.\n/// @requires {mixin} igx-vhelper\n/// @requires {mixin} igx-print-layout\n@mixin core(\n $print-layout: true,\n $enhanced-accessibility: $enhanced-accessibility\n) {\n $enhanced-accessibility: $enhanced-accessibility !global;\n\n // Angular hack for binding to [hidden] property\n // not working\n [hidden] {\n display: none !important;\n }\n\n // Common styles\n @include vhelper.component();\n @include display-container.component();\n @include drag.component();\n\n // Includes the base for each theme.\n [class^='igx-'] {\n &,\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n }\n\n // Component styles\n @include ripple.component();\n @include action-strip.component();\n @include avatar.component();\n @include badge.component();\n @include banner.component();\n @include bottom-nav.component();\n @include button.component();\n @include button-group.component();\n @include divider.component();\n @include calendar.component();\n @include card.component();\n @include carousel.component();\n @include checkbox.component();\n @include chip.component();\n @include column-actions.component();\n @include combo.component();\n @include category-chart.component();\n @include data-chart.component();\n @include doughnut-chart.component();\n @include financial-chart.component();\n @include funnel-chart.component();\n @include gauge.component();\n @include geo-map.component();\n @include graph.component();\n @include pie-chart.component();\n @include shape-chart.component();\n @include sparkline.component();\n @include date-picker.component();\n @include date-range-picker.component();\n @include dialog.component();\n @include dock-manager.component();\n @include rating.component();\n @include drop-down.component();\n @include expansion-panel.component();\n @include grid.component();\n @include grid-summary.component();\n @include grid-toolbar.component();\n @include pivot-data-selector.component();\n @include highlight.component();\n @include icon.component();\n @include input-group.component();\n @include list.component();\n @include navbar.component();\n @include navdrawer.component();\n @include overlay.component();\n @include paginator.component();\n @include progress.component();\n @include radio.component();\n @include query-builder.component();\n @include scrollbar.component();\n @include slider.component();\n @include splitter.component();\n @include snackbar.component();\n @include switch.component();\n @include stepper.component();\n @include tabs.component();\n @include toast.component();\n @include tooltip.component();\n @include time-picker.component();\n @include tree.component();\n @include watermark.component();\n\n @if $print-layout == true {\n @include print.layout();\n }\n}\n\n","@use 'sass:string';\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:selector';\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(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');\n/// @type String - The Modifier separator used. Default '--'.\n$bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');\n/// @type String - The Modifier Value separator used. Default '-'.\n$bem--sep-mod-val: if(meta.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\n @return string.slice(meta.inspect($s), 2, -3);\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: string.slice($x, 0, 1);\n @return if($first == '.', $x, string.insert($x, '.', -100));\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 meta.type-of($m) == 'map' {\n $mm: list.nth($m, 1);\n @return list.nth($mm, 1) + $bem--sep-mod-val + list.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 string.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 string.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 string.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 string.slice($x, 1, string.index($x, $bem--sep-mod)-1);\n } @else if bem--contains-elem($x) {\n @return string.slice($x, 1, string.index($x, $bem--sep-elem)-1);\n } @else if bem--contains-pseudo($x) {\n @return string.slice($x, 1, string.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: string.index($x, ' ') or -1;\n @return string.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 (meta.type-of($elem) == list) and list.nth($elem, 2) {\n // For now we don't support multiple elem-mods at once\n @if meta.type-of(list.nth($elem, 2)) == 'list' {\n @error 'Only one element-modifier allowed.';\n }\n $elem: string.slice(bem-selector(list.nth($elem, 1), $m: list.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 meta.type-of($mods) != 'list' {\n $mods: ($mods, );\n }\n $bemcls: '';\n @for $i from 1 to list.length($mods) {\n $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, $i)) + ', ';\n }\n $bemcls: $bemcls + bem--bem-str($block, $elem, list.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 meta.type-of($mods) == 'list' {\n @each $i in $mods {\n $mx: list.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: list.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/// @see 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/// @see bem-block\n@mixin block($block) {\n @include bem-block($block) {\n @content;\n }\n}\n\n/// @alias bem-elem\n/// @see 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/// @see bem-mod\n@mixin mod($mod) {\n @include bem-mod($mod) {\n @content;\n }\n}\n\n/// @alias bem-mods\n/// @see bem-mods\n@mixin mods($mods...) {\n @include bem-mods($mods...) {\n @content;\n }\n}\n\n/// @alias bem-block\n/// @see bem-block\n@mixin b($block) {\n @include bem-block($block) {\n @content;\n }\n}\n\n/// @alias bem-elem\n/// @see 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/// @see bem-mod\n@mixin m($mod) {\n @include bem-mod($mod) {\n @content;\n }\n}\n\n/// @alias bem-mods\n/// @see bem-mods\n@mixin mx($mods...) {\n @include bem-mods($mods...) {\n @content;\n }\n}\n","@use '../../base' as *;\n@use 'sass:string';\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\n@mixin component {\n @include b(igx-icon) {\n $this: bem--selector-to-string(&);\n @include register-component(\n $name: string.slice($this, 2, -1),\n $deps: ()\n );\n\n @extend %igx-icon-display !optional;\n\n @include m(inactive) {\n @extend %igx-icon--inactive !optional;\n }\n\n @include m(success) {\n @extend %igx-icon--success !optional;\n }\n\n @include m(error) {\n @extend %igx-icon--error !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","@use '../../base' as *;\n@use 'sass:string';\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\n@mixin component {\n @include b(igx-radio) {\n $this: bem--selector-to-string(&);\n @include register-component(\n $name: string.slice($this, 2, -1),\n $deps: ()\n );\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 @extend %igx-radio--focused !optional;\n\n @include e(ripple) {\n @extend %radio-ripple--focused !optional;\n }\n }\n\n @include mx(focused, checked) {\n @extend %igx-radio--focused-checked !optional;\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 @include m(vertical) {\n display: flex;\n flex-flow: column;\n }\n }\n}\n","/// Defines printing styles for all components in the library.\n/// @group print\n/// @requires {mixin} igx-grid-print\n@mixin layout {\n @media print {\n html,\n body,\n app-root {\n min-height: 100vh;\n min-width: 100vw;\n margin: 0;\n }\n\n app-root {\n display: block;\n }\n\n * {\n -webkit-print-color-adjust: exact;\n // Fix shadows if you print to PDF using chrome START\n -webkit-filter: opacity(1);\n filter: opacity(1);\n // Fix shadows if you print to PDF using chrome END\n print-color-adjust: exact;\n text-shadow: none !important;\n }\n\n a[href^='http']::after {\n content: '[' attr(href) ']';\n color: blue;\n }\n\n .igx-no-print {\n display: none !important;\n }\n\n // Forcing Grayscale Printing\n .igx-bw-print {\n // CSS3 filter, at the moment Webkit only. Prefix it for future implementations\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%); /* future-proof */\n }\n\n igx-circular-bar,\n igx-linear-bar,\n .igx-carousel__indicators,\n .igx-carousel__arrow--prev,\n .igx-carousel__arrow--next,\n .igx-ripple,\n .igx-grid__tbody-scrollbar,\n igx-switch__ripple,\n igx-virtual-helper {\n display: none !important;\n }\n\n igx-grid {\n .igx-grid-th__title,\n .igx-grid__td-text {\n white-space: unset !important;\n text-overflow: initial !important;\n overflow: visible !important;\n }\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:string';\n@use '../base' as *;\n@use 'base' as *;\n@use 'variables' as *;\n\n////\n/// @group typography\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@use '../components/banner/banner-theme' as *;\n@use '../components/bottom-nav/bottom-nav-theme' as *;\n@use '../components/button/button-theme' as *;\n@use '../components/calendar/calendar-theme' as *;\n@use '../components/card/card-theme' as *;\n@use '../components/charts/category-chart-theme' as *;\n@use '../components/charts/data-chart-theme' as *;\n@use '../components/charts/financial-chart-theme' as *;\n@use '../components/charts/funnel-chart-theme' as *;\n@use '../components/charts/gauge-theme' as *;\n@use '../components/charts/graph-theme' as *;\n@use '../components/charts/pie-chart-theme' as *;\n@use '../components/charts/shape-chart-theme' as *;\n@use '../components/checkbox/checkbox-theme' as *;\n@use '../components/chip/chip-theme' as *;\n@use '../components/column-actions/column-actions-theme' as *;\n@use '../components/date-range-picker/date-range-picker-theme' as *;\n@use '../components/dialog/dialog-theme' as *;\n@use '../components/dock-manager/dock-manager-theme' as *;\n@use '../components/drop-down/drop-down-theme' as *;\n@use '../components/expansion-panel/expansion-panel-theme' as *;\n@use '../components/grid/excel-filtering-theme' as *;\n@use '../components/input/input-group-theme' as *;\n@use '../components/list/list-theme' as *;\n@use '../components/navbar/navbar-theme' as *;\n@use '../components/navdrawer/navdrawer-theme' as *;\n@use '../components/radio/radio-theme' as *;\n@use '../components/slider/slider-theme' as *;\n@use '../components/snackbar/snackbar-theme' as *;\n@use '../components/switch/switch-theme' as *;\n@use '../components/stepper/stepper-theme' as *;\n@use '../components/tabs/tabs-theme' as *;\n@use '../components/time-picker/time-picker-theme' as *;\n@use '../components/toast/toast-theme' as *;\n@use '../components/tooltip/tooltip-theme' as *;\n@use '../components/tree/tree-theme' as *;\n\n/// @access private\n@mixin _typography-styles($font-family, $type-scale, $prefix: 'igx') {\n $_variant: map.get(map.get($type-scale, '_meta'), 'variant');\n\n font-family: var(--#{$prefix}-font-family);\n font-size: $browser-context;\n line-height: $browser-line-height;\n font-size-adjust: 100%;\n\n @if $prefix == 'igc' {\n --#{$prefix}-font-family: var(--igx-font-family);\n } @else {\n --#{$prefix}-font-family: #{$font-family};\n }\n\n // Call the individual component styles with the type scale\n @include excel-filtering-typography($type-scale);\n @include banner-typography($type-scale);\n @include bottom-nav-typography($type-scale);\n @include button-typography($type-scale);\n @include category-chart-typography($type-scale);\n @include checkbox-typography($type-scale);\n @include chip-typography($type-scale);\n @include column-actions-typography($type-scale);\n @include data-chart-typography($type-scale);\n @include date-range-typography($type-scale);\n @include dock-manager-typography();\n @include expansion-panel-typography($type-scale);\n @include financial-chart-typography($type-scale);\n @include funnel-chart-typography($type-scale);\n @include gauge-typography();\n @include graph-typography();\n @include input-group-typography($type-scale);\n @include navbar-typography($type-scale);\n @include navdrawer-typography($type-scale);\n @include pie-chart-typography($type-scale);\n @include radio-typography($type-scale);\n @include shape-chart-typography($type-scale);\n @include slider-typography($type-scale);\n @include snackbar-typography($type-scale);\n @include switch-typography($type-scale);\n @include stepper-typography($type-scale);\n @include tabs-typography($type-scale);\n @include time-picker-typography($type-scale);\n @include toast-typography($type-scale);\n @include tooltip-typography($type-scale);\n @include tree-typography($type-scale);\n\n // Add theme type-scale specific quirks\n @if ($_variant == 'material') {\n @include calendar-typography($type-scale);\n @include card-typography($type-scale);\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n @include list-typography($type-scale);\n }\n\n @if ($_variant == 'material' or $_variant == 'fluent') {\n @include calendar-typography($type-scale);\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n }\n\n @if ($_variant == 'fluent') {\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include radio-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include switch-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include input-group-typography($type-scale, $categories: (\n input-text: 'body-2'\n ));\n\n @include navdrawer-typography($type-scale, $categories: (\n item: 'body-2',\n header: 'caption'\n ));\n\n @include navbar-typography($type-scale, $categories: (\n title: 'subtitle-2'\n ));\n\n @include card-typography($type-scale, $categories: (\n title: 'subtitle-1',\n subtitle: 'body-2',\n ));\n\n @include list-typography($type-scale, $categories: (\n item: 'caption',\n title: 'caption',\n ));\n\n @include chip-typography($type-scale, $categories: (\n text: 'subtitle-2'\n ));\n\n @include expansion-panel-typography($type-scale, $categories: (\n title: 'subtitle-1',\n description: 'body-2',\n body: 'caption'\n ));\n\n @include snackbar-typography($type-scale, $categories: (\n text: 'caption'\n ));\n\n @include toast-typography($type-scale, $categories: (\n text: 'caption'\n ));\n\n @include banner-typography($type-scale, $categories: (\n message: 'caption'\n ));\n }\n\n @if ($_variant == 'bootstrap') {\n $calendar-labels: map.get($type-scale, 'calendar-labels');\n\n @include calendar-typography($type-scale, $categories: (\n header-year: 'subtitle-1',\n header-date: 'h4',\n weekday-label: if($calendar-labels, 'calendar-labels', 'body-1'),\n picker-date: 'subtitle-1',\n content: 'body-1',\n ));\n\n @include card-typography($type-scale, $categories: (\n title: 'h5',\n title-small: 'subtitle-2',\n subtitle: 'body-1',\n content: 'body-1',\n ));\n\n @include dialog-typography($type-scale, $categories: (\n title: 'h5',\n ));\n\n @include drop-down-typography($type-scale, $categories: (\n header: 'subtitle-1',\n item: 'subtitle-1',\n select-item: 'subtitle-1',\n ));\n\n @include list-typography($type-scale, $categories: (\n item: 'body-2',\n title: 'body-1',\n subtitle: 'subtitle-1',\n header: 'overline',\n ));\n\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-2',\n ));\n\n @include input-group-typography($type-scale, $categories: (\n helper-text: 'body-2',\n input-text: 'body-1'\n ));\n\n @include navbar-typography($type-scale, $categories: (\n title: 'h5'\n ));\n\n @include drop-down-typography($type-scale, $categories: (\n header: 'body-1',\n item: 'body-1',\n select-item: 'body-1'\n ));\n\n @include expansion-panel-typography($type-scale, $categories: (\n description: 'body-2',\n body: 'body-1'\n ));\n }\n\n @if ($_variant == 'indigo') {\n @include calendar-typography($type-scale);\n\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-1',\n ));\n\n @include input-group-typography($type-scale, $categories: (\n input-text: 'body-1'\n ));\n\n @include list-typography($type-scale, $categories: (\n header: 'overline',\n subtitle: 'body-2'\n ));\n\n\n @include expansion-panel-typography($type-scale, $categories: (\n body: 'body-1'\n ));\n\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n @include list-typography($type-scale);\n }\n}\n\n/// @access private\n/// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.\n/// @param {Map} $type-scale [] - A type scale map as produced by type-scale.\n/// @param {Map} $type-scale [] - A type scale map as produced by type-scale.\n/// @param {Map} $prefix [] - The prefix used for css variables and scoping.\n@mixin _typography($font-family, $type-scale, $prefix) {\n @if (is-root()) {\n // Use the BEM notation to create a link\n // between the igx-typography class selector\n // and all typographic elements.\n @include b(#{$prefix}-typography) {\n @include _typography-styles($font-family, $type-scale, $prefix);\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 /* stylelint-disable max-nesting-depth */\n @each $category, $type-style in $type-scale {\n @if $category != _meta {\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 // Add CSS variables to .igx-typography class selector\n @each $key, $value in $type-style {\n @if $key == 'font-family' and $value == 'css-font-var' {\n --#{$prefix}-#{$category}-#{$key}: var(--#{$prefix}-font-family);\n } @else {\n --#{$prefix}-#{$category}-#{$key}: #{$value};\n }\n }\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 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 @extend %#{$category};\n }\n }\n }\n /* stylint-enable max-nesting-depth */\n }\n } @else {\n @include _typography-styles($font-family, $type-scale);\n }\n}\n\n/// Adds typography styles for h1-h6, paragraph and creates custom typography class selectors.\n/// The produces styles are based on the passed typeface and type scale.\n/// If omitted the $material-typeface and $material-type-scale will be used.\n/// @access public\n/// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.\n/// @param {Map} $type-scale [$material-type-scale] - A type scale map as produced by type-scale.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n/// @requires $material-typeface\n/// @requires $material-type-scale\n/// @see $material-typeface\n/// @see $material-type-scale\n@mixin typography($font-family: $material-typeface, $type-scale: $material-type-scale, $wc: false) {\n @include _typography($font-family, $type-scale, $prefix: 'igx');\n\n @if $wc {\n @include _typography($font-family, $type-scale, $prefix: 'igc');\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 palette as passed to the igx-theme mixin.\n$theme-palette: (\n primary: (\n 50: #c0c0ff,\n '50-contrast': black,\n 100: #a7a7fa,\n '100-contrast': black,\n 200: #6d6df1,\n '200-contrast': black,\n 300: #3c3cf2,\n '300-contrast': white,\n 400: #1d1df7,\n '400-contrast': white,\n 500: blue,\n '500-contrast': white,\n 600: #0000e5,\n '600-contrast': white,\n 700: #0000d2,\n '700-contrast': white,\n 800: #0000be,\n '800-contrast': white,\n 900: #0000a8,\n '900-contrast': white,\n 'A100': #55f,\n 'A100-contrast': white,\n 'A200': #2727ff,\n 'A200-contrast': white,\n 'A400': #0000eb,\n 'A400-contrast': white,\n 'A700': #00a,\n 'A700-contrast': white\n ),\n secondary: (\n 50: #ffc0c0,\n '50-contrast': black,\n 100: #faa7a7,\n '100-contrast': black,\n 200: #f16d6d,\n '200-contrast': black,\n 300: #f23c3c,\n '300-contrast': black,\n 400: #f71d1d,\n '400-contrast': black,\n 500: var(--some-dynamic-color),\n '500-contrast': black,\n 600: #e50000,\n '600-contrast': white,\n 700: #d20000,\n '700-contrast': white,\n 800: #be0000,\n '800-contrast': white,\n 900: #a80000,\n '900-contrast': white,\n 'A100': #f55,\n 'A100-contrast': black,\n 'A200': #ff2727,\n 'A200-contrast': black,\n 'A400': #eb0000,\n 'A400-contrast': white,\n 'A700': #a00,\n 'A700-contrast': white\n ),\n grays: (\n 50: hsl(0, 0%, 98%),\n '50-contrast': black,\n 100: hsl(0, 0%, 96%),\n '100-contrast': black,\n 200: hsl(0, 0%, 93%),\n '200-contrast': black,\n 300: hsl(0, 0%, 88%),\n '300-contrast': black,\n 400: hsl(0, 0%, 74%),\n '400-contrast': black,\n 500: hsl(0, 0%, 62%),\n '500-contrast': black,\n 600: hsl(0, 0%, 54%),\n '600-contrast': black,\n 700: hsl(0, 0%, 38%),\n '700-contrast': white,\n 800: hsl(0, 0%, 26%),\n '800-contrast': white,\n 900: hsl(0, 0%, 13%),\n '900-contrast': white,\n ),\n info: (\n 500: #1377d5,\n '500-contrast': black\n ),\n success: (\n 500: #4eb862,\n '500-contrast': black\n ),\n warn: (\n 500: #fbb13c,\n '500-contrast': black\n ),\n error: (\n 500: #ff134a,\n '500-contrast': black\n ),\n surface: (\n 500: #222,\n '500-contrast': white\n )\n) !default;\n\n/// Determines whether color-blind palettes are enabled.\n$enhanced-accessibility: false !default;\n\n/// Stores a list of dropped component themes.\n$dropped-themes: () !default;\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas/dark' as *;\n@use '../button-group/button-group-component' as *;\n@use '../button-group/button-group-theme' as *;\n@use '../tree/tree-theme' as *;\n@use 'sass:map';\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 color\n/// @requires rem\n/// @requires var-get\n@mixin excel-filtering($theme, $palette) {\n $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n\n $tree-node-indent: (\n comfortable: rem(16px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n $tree-node-expander-size: rem(20px);\n $tree-node-height: (\n comfortable: rem(40px),\n cosy: rem(32px),\n compact: rem(24px)\n );\n\n $checkbox-indent: (\n comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}),\n cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}),\n compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}),\n );\n\n %grid-excel-filter {\n display: block;\n width: rem(320px);\n height: 100%;\n flex-grow: 1;\n box-shadow: elevation($elevation: 12);\n overflow: auto;\n min-width: rem(320px);\n }\n\n %grid-excel-filter--inline {\n box-shadow: none;\n width: 100%;\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 display: flex;\n cursor: pointer;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(15px)});\n height: var(--igx-icon-size, #{rem(15px)});\n font-size: var(--igx-icon-size, #{rem(15px)});\n }\n }\n\n %grid-excel-icon--filtered {\n igx-icon {\n color: if(\n $variant == 'indigo-design',\n color($palette, 'warn', 500),\n color($palette, 'secondary')\n );\n }\n }\n\n %grid-excel-menu {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var-get($theme, 'filtering-row-background');\n // TODO: The border-radius should not be hardcoded.\n border-radius: border-radius(rem(4px));\n\n igx-buttongroup {\n --shadow: none;\n --item-background: #{var-get($theme, 'filtering-row-background')};\n --item-hover-background: #{color($palette, 'grays', 100)};\n --item-selected-background: #{color($palette, 'grays', 100)};\n --item-text-color: #{color($palette, 'grays', 700)};\n --item-hover-text-color: #{color($palette, 'grays', 800)};\n --item-selected-text-color: #{if(\n $variant == 'indigo-design',\n contrast-color($palette, 'surface'),\n color($palette, 'secondary', 500)\n )};\n --item-border-color: transparent;\n --item-selected-border-color: transparent;\n --item-disabled-border: transparent;\n }\n\n @include tree(tree-theme(\n $background: color($palette, 'surface'),\n $background-selected: color($palette, 'surface'),\n $background-active: color($palette, 'surface'),\n $background-active-selected: color($palette, 'surface'),\n $foreground: contrast-color($palette, 'surface'),\n $foreground-selected: contrast-color($palette, 'surface'),\n $foreground-active: contrast-color($palette, 'surface'),\n $foreground-active-selected: contrast-color($palette, 'surface'),\n ));\n\n .igx-tree-node__wrapper {\n padding: 0;\n }\n\n igx-chips-area {\n padding: rem(16px) rem(16px) 0 rem(16px);\n gap: rem(8px);\n }\n }\n\n %grid-excel-menu__header {\n display: flex;\n align-items: center;\n padding: rem(16px);\n color: color($palette, 'grays', 700);\n }\n\n %grid-excel-menu__header-actions {\n display: flex;\n margin-inline-start: auto;\n\n [igxButton] + [igxButton] {\n margin-inline-start: rem(4px);\n }\n\n %grid-excel-actions__action {\n padding: 0 !important;\n margin: 0 !important;\n }\n\n %grid-excel-actions__action,\n %grid-excel-actions--selected {\n justify-content: center;\n }\n }\n\n %grid-excel-menu__footer {\n display: flex;\n justify-content: space-between;\n\n %grid-excel-filter__apply,\n %grid-excel-filter__cancel {\n flex-grow: 1;\n\n [igxButton] {\n width: 100%;\n }\n }\n }\n\n %grid-excel-filter__clear {\n flex-grow: 1;\n }\n\n %grid-excel-filter__cancel + %grid-excel-filter__apply {\n margin-inline-start: rem(16px);\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n display: block;\n padding: rem(8px) rem(16px);\n\n header {\n color: color($palette, 'grays', 700);\n margin-bottom: rem(4px);\n }\n\n igx-icon {\n display: initial;\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\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: color($palette, 'grays', 700);\n margin-inline-end: auto;\n }\n }\n\n %grid-excel-actions {\n padding: rem(8px) rem(16px);\n }\n\n %grid-excel-actions--selected {\n igx-icon {\n color: if(\n $variant == 'indigo-design',\n color($palette, 'primary', 200),\n color($palette, 'secondary')\n );\n }\n }\n\n %grid-excel-move .igx-button-group {\n [dir='rtl'] & {\n flex-direction: row-reverse;\n\n igx-icon,\n [igxButton] {\n direction: ltr;\n }\n }\n }\n\n %grid-excel-sort .igx-button-group {\n [dir='rtl'] & {\n flex-direction: row-reverse;\n\n igx-icon,\n [igxButton] {\n direction: ltr;\n }\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 cursor: pointer;\n color: color($palette, 'grays', 700);\n outline-style: none;\n\n &:hover,\n &:focus {\n background: color($palette, 'grays', 100);\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n }\n\n %grid-excel-actions__action--disabled {\n color: color($palette, 'grays', 400);\n pointer-events: none;\n }\n\n %igx-excel-filter__empty {\n display: grid;\n place-items: center;\n height: 100%;\n }\n\n %grid-excel-main {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n padding: rem(16px);\n gap: rem(16px);\n\n igx-list {\n flex-grow: 1;\n overflow: hidden;\n margin-inline: -#{rem(16px)};\n border: 0;\n\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n border-bottom: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n border-bottom: 1px dashed color($palette, 'grays', 300);\n }\n }\n\n %igx-excel-filter__tree {\n background: color($palette, 'surface');\n overflow-y: auto;\n margin: 0 rem(-16px);\n flex: 1;\n\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n border-bottom: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n border-bottom: 1px dashed color($palette, 'grays', 300);\n }\n\n igx-icon {\n width: var(--igx-icon-size, #{$tree-node-expander-size});\n height: var(--igx-icon-size, #{$tree-node-expander-size});\n font-size: var(--igx-icon-size, #{$tree-node-expander-size});\n }\n\n > igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'comfortable');\n min-height: map.get($tree-node-height, 'comfortable');\n }\n\n .igx-tree-node__toggle-button {\n min-width: rem(20px);\n margin-inline-start: map.get($tree-node-indent, 'comfortable');\n }\n }\n\n %igx-excel-filter__tree-alike {\n background: color($palette, 'surface');\n display: flex;\n flex-direction: column;\n z-index: 1;\n }\n\n %igx-excel-filter__tree-alike-item {\n display: flex;\n align-items: center;\n height: map.get($tree-node-height, 'comfortable');\n background: color($palette, 'surface');\n\n &:hover,\n &:focus {\n background: color($palette, 'grays', 200);\n }\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'comfortable');\n }\n }\n }\n\n %grid-excel-menu--cosy {\n igx-chips-area {\n padding: rem(8px) rem(8px) 0 rem(8px);\n }\n\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-move {\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 }\n\n %grid-excel-main {\n padding: rem(8px);\n gap: rem(8px);\n }\n\n igx-list {\n margin-inline-start: -#{rem(8px)};\n margin-inline-end: -#{rem(8px)};\n }\n\n %igx-excel-filter__tree {\n margin: 0 rem(-8px);\n\n > igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'cosy');\n min-height: map.get($tree-node-height, 'cosy');\n }\n\n .igx-tree-node__toggle-button {\n margin-inline-start: map.get($tree-node-indent, 'cosy');\n }\n }\n\n %igx-excel-filter__tree-alike-item {\n height: map.get($tree-node-height, 'cosy');\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'cosy');\n }\n }\n }\n\n %grid-excel-menu--compact {\n igx-chips-area {\n padding: rem(4px) rem(4px) 0 rem(4px);\n gap: rem(4px);\n }\n\n %grid-excel-menu__header {\n justify-content: space-between;\n padding: rem(4px);\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n padding: rem(4px);\n\n @extend %grid-excel-action--compact;\n\n igx-buttongroup {\n width: rem(208px);\n }\n }\n\n %grid-excel-move {\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 }\n\n %grid-excel-main {\n padding: rem(4px);\n gap: rem(4px);\n }\n\n igx-list {\n margin-inline-start: -#{rem(4px)};\n margin-inline-end: -#{rem(4px)};\n }\n\n %igx-excel-filter__tree {\n margin: 0 rem(-4px);\n\n igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'compact');\n min-height: map.get($tree-node-height, 'compact');\n }\n\n .igx-tree-node__toggle-button {\n margin: 0 map.get($tree-node-indent, 'compact');\n }\n }\n\n %igx-excel-filter__tree-alike-item {\n height: map.get($tree-node-height, 'compact');\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'compact');\n }\n }\n }\n\n %grid-excel-menu__secondary {\n width: 520px;\n min-width: 520px;\n background: var-get($theme, 'filtering-row-background');\n box-shadow: elevation($elevation: 12);\n border-radius: 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 @if $bootstrap-theme {\n border-bottom: 1px solid color($palette, 'grays', 100);\n } @else {\n border-bottom: 1px solid color($palette, 'grays', 300);\n }\n }\n\n %grid-excel-menu__secondary-main {\n height: 232px;\n overflow: auto;\n }\n\n %grid-excel-menu__secondary-footer {\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n }\n\n %grid-excel-filter__apply,\n %grid-excel-filter__cancel {\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-select {\n flex-grow: 1;\n flex-basis: 40%;\n margin: rem(16px) 0;\n\n ~ igx-input-group,\n ~ igx-date-picker {\n margin-inline-start: rem(16px);\n }\n }\n\n igx-buttongroup {\n min-width: 30%;\n }\n\n [igxButton='icon'] {\n margin-inline-start: rem(16px);\n }\n }\n\n %grid-excel-menu__add-filter {\n margin: 0 rem(16px) rem(16px);\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n igx-excel-style-filter-operations,\n [igxExcelStyleFilterOperations] {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\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 [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} 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 type-style($type-scale, 'h6')\n }\n }\n\n %grid-excel-menu__secondary {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6');\n }\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n header {\n @include type-style($type-scale, 'overline');\n }\n }\n\n %grid-excel-menu--cosy {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6')\n }\n }\n\n %grid-excel-menu--compact {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'subtitle-1')\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n header {\n @include type-style($type-scale, 'body-2');\n text-transform: capitalize;\n }\n }\n\n %grid-excel-actions__action {\n span {\n @include type-style($type-scale, 'body-2');\n }\n }\n\n %cbx-label {\n @include type-style($type-scale, 'body-2');\n }\n }\n\n %grid-excel-menu__secondary--cosy {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6');\n }\n }\n\n %grid-excel-menu__secondary--compact {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'subtitle-1');\n }\n }\n}\n","@use 'sass:map';\n@use '../base' as *;\n\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 family 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 {String} $font-style [null] - The font style 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 type-style(\n $font-family: null,\n $font-size: null,\n $font-weight: null,\n $font-style: 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 font-style: $font-style,\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 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 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 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 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 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 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 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 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 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 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 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 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 type-style function. This type scale styles elements with `igx-font-overline` class.\n/// @requires type-style\n/// @returns {Map} - A map of all defined type scales.\n@function 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 $_meta: ()\n) {\n $default-scale: (\n _meta: (variant: 'material'),\n h1: type-style(\n $font-family: css-font-var,\n $font-size: rem(96px),\n $font-weight: 300,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(60px),\n $font-weight: 300,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(48px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(34px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(24px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(20px),\n $font-weight: 600,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(16px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.15px),\n $line-height: rem(24px),\n $text-transform: none\n ),\n subtitle-2: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 600,\n $font-style: normal,\n $letter-spacing: rem(.1px),\n $line-height: rem(24px),\n $text-transform: none\n ),\n body-1: type-style(\n $font-family: css-font-var,\n $font-size: rem(16px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.25px),\n $line-height: rem(20px),\n $text-transform: none\n ),\n button: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 600,\n $font-style: normal,\n $letter-spacing: rem(.75px),\n $line-height: rem(16px),\n $text-transform: uppercase\n ),\n caption: type-style(\n $font-family: css-font-var,\n $font-size: rem(12px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.4px),\n $line-height: rem(16px),\n $text-transform: none\n ),\n overline: type-style(\n $font-family: css-font-var,\n $font-size: rem(10px),\n $font-weight: 400,\n $font-style: normal,\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 _meta: extend(map.get($default-scale, '_meta'), $_meta)\n );\n}\n\n/// Get type scale category config.\n/// @param {Map} $scale - A type scale map reference as produces by 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: type-scale-category($default-type-scale, 'h1');\n/// @returns {Map} - The config map for the selected category in the type scale.\n@function 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 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 type-style($default-type-scale, 'h1');\n/// font-family: 'GT Walsheim';\n/// color: mediumvioletred;\n/// }\n@mixin type-style($scale, $category) {\n $type-category: map.get($scale, $category);\n @each $key, $value in $type-category {\n #{$key}: var(--igx-#{$category}-#{$key});\n }\n @content;\n}\n\n/// Transforms a type style map into a font style rule assigned to a css variable.\n/// @param {String} $name - The custom CSS variable name.\n/// @param {Map} $type-style - A type style map reference as produces by type-style.\n/// @param {String} $prefix [null] - Optional prefix.\n/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.\n/// $h1-style: type-scale-category($type-scale, 'h1');\n/// @include font-var('h1-font', $h1-style);\n@mixin font-var($name, $type-style, $prefix: null) {\n $ff: var(--igx-font-family);\n $fz: map.get($type-style, 'font-size');\n $fw: map.get($type-style, 'font-weight');\n\n // unused for now\n $fs: map.get($type-style, 'font-style');\n $lh: map.get($type-style, 'line-height');\n $tt: map.get($type-style, 'text-transform');\n $ls: map.get($type-style, 'letter-spacing');\n $mt: map.get($type-style, 'margin-top');\n $mb: map.get($type-style, 'margin-bottom');\n\n @include css-vars((\n 'name': $prefix,\n #{$name}: #{$fw $fz $ff},\n ));\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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-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: banner-theme($banner-background: #000);\n/// // Pass the theme to the banner component mixin\n/// @include banner($my-banner-theme);\n@function banner-theme(\n $palette: null,\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 $selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact';\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 selector: $selector,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin banner($theme) {\n @include css-vars($theme);\n $banner-padding: (\n comfortable: rem(8),\n cosy: rem(8),\n compact: rem(8)\n );\n\n %igx-banner-host {\n igx-expansion-panel-body {\n padding: 0;\n }\n }\n\n %igx-banner__actions,\n %igx-banner__actions > igx-banner-actions,\n %igx-banner__illustration,\n %igx-banner__message {\n display: flex;\n }\n\n %igx-banner__illustration,\n %igx-banner__message {\n align-items: center;\n }\n\n %igx-banner {\n display: flex;\n justify-content: flex-end;\n flex-wrap: wrap;\n grid-gap: 8px;\n padding-inline-start: calc(#{map.get($banner-padding, 'comfortable') * 2});\n padding-inline-end: map.get($banner-padding, 'comfortable');\n padding-block-start: map.get($banner-padding, 'comfortable');\n padding-block-end: map.get($banner-padding, 'comfortable');\n background: var-get($theme, 'banner-background');\n }\n\n %igx-banner__illustration {\n justify-content: center;\n width: rem(40);\n min-width: rem(40);\n height: rem(40);\n color: var-get($theme, 'banner-illustration-color');\n }\n\n %igx-banner__border-top {\n border-block-start: 1px solid var-get($theme, 'banner-border-color');\n inset-block-start: -1px\n }\n\n %igx-banner__border-bottom {\n border-block-end: 1px solid var-get($theme, 'banner-border-color');\n inset-block-start: 0;\n }\n\n %igx-banner__text {\n color: var-get($theme, 'banner-message-color');\n flex: 1 0 0%;\n\n > * {\n margin-block-start: 0 !important;\n }\n }\n\n %igx-banner--cosy {\n padding-inline-start: calc(#{map.get($banner-padding, 'cosy') * 2});\n padding-inline-end: map.get($banner-padding, 'cosy');\n padding-block-start: map.get($banner-padding, 'cosy');\n padding-block-end: map.get($banner-padding, 'cosy');\n }\n\n %igx-banner--compact {\n padding-inline-start: calc(#{map.get($banner-padding, 'compact') * 2});\n padding-inline-end: map.get($banner-padding, 'compact');\n padding-block-start: map.get($banner-padding, 'compact');\n padding-block-end: map.get($banner-padding, 'compact');\n }\n\n %igx-banner__message {\n min-width: rem(150px);\n flex: 1 0 0%;\n gap: rem(16px);\n }\n\n %igx-banner__actions,\n %igx-banner__actions > igx-banner-actions {\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: flex-end;\n align-self: flex-end;\n gap: rem(8px);\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 [(message: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin banner-typography($type-scale, $categories: (\n message: 'body-2')\n) {\n $message: map.get($categories, 'message');\n\n %igx-banner__text {\n @include type-style($type-scale, $message) {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 elevation\n/// @requires $elevations\n///\n/// @example scss Set a custom background color\n/// $my-bottom-nav-theme: bottom-nav-theme($background: black);\n/// // Pass the theme to the bottom-nav component mixin\n/// @include bottom-nav($my-bottom-nav-theme);\n@function bottom-nav-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 meta.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: 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} css-vars\n/// @requires {mixin} ellipsis\n/// @requires igx-bottom-nav-theme\n/// @requires color\n/// @requires extend\n/// @requires rem\n/// @requires $ease-in-out-quad\n/// @requires var-get\n@mixin bottom-nav($theme) {\n @include css-vars($theme);\n\n $menu-height: rem(56px);\n $item-min-width: rem(80px);\n $item-max-width: rem(168px);\n $item-padding: 0 rem(12px, 16px);\n\n %igx-bottom-nav-panel {\n display: block;\n\n &:focus {\n outline-style: none;\n }\n\n &:empty {\n display: none;\n }\n }\n\n %igx-bottom-nav-menu {\n display: flex;\n position: fixed;\n justify-content: center;\n align-items: center;\n inset-inline-start: 0;\n inset-inline-end: 0;\n height: $menu-height;\n background: var-get($theme, 'background');\n overflow: hidden;\n z-index: 8;\n }\n\n %igx-bottom-nav-menu--top {\n inset-block-start: 0;\n inset-block-end: inherit;\n box-shadow: var-get($theme, 'shadow');\n }\n\n %igx-bottom-nav-menu--bottom {\n inset-block-start: inherit;\n inset-block-end: 0;\n box-shadow: var-get($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-get($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-style: none;\n }\n\n %igx-bottom-nav-menu-item--disabled {\n opacity: .5;\n cursor: default;\n pointer-events: none;\n }\n\n %igx-bottom-nav-menu-item--selected {\n color: var-get($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-block-start: rem(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\n %igx-tab-icon--selected {\n transform: translateY(-2px);\n }\n\n %igx-tab-label--selected {\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} type-style\n@mixin bottom-nav-typography($type-scale, $categories: (label: 'caption')) {\n $label: map.get($categories, 'label');\n\n %igx-tab-label {\n @include type-style($type-scale, $label) {\n margin: 0\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 {Color} $background [null] - The background color of the button.\n/// @param {Color} $foreground [null] - The text color of the button.\n/// @param {Color} $hover-background [null] - The hover background color of the button.\n/// @param {Color} $hover-foreground [null] - The hover text color of the button.\n/// @param {Color} $focus-background [null] - The focus background color of the button.\n/// @param {Color} $focus-foreground [null] - The focus text color of the button.\n/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.\n/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.\n/// @param {Color} $active-background [null] - The active background of the button.\n/// @param {Color} $active-foreground [null] - The active text color of the button.\n/// @param {Number} $border-radius [null] - The border radius of the button.\n/// @param {Color} $border-color [null] - The border color of the button.\n/// @param {Color} $hover-border-color [null] - The hover border color of the button.\n/// @param {Color} $focus-border-color [null] - The focus border color of the button.\n/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.\n/// @param {Color} $active-border-color [null] - The active border color of the button.\n/// @param {Color} $shadow-color [null] - The shadow color of the button.\n/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.\n/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.\n/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.\n/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.\n/// @param {Color} $disabled-background [null] - The disabled background color of the button.\n/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.\n/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n///\n/// @example scss Change the background and text colors in raised buttons\n/// $my-button-theme: button-theme(\n/// $foreground: white,\n/// $background: black\n/// );\n/// // Pass the theme to the button component mixin\n/// @include button($my-button-theme);\n@function button-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $background: null,\n $foreground: null,\n\n $hover-background: null,\n $hover-foreground: null,\n\n $focus-background: null,\n $focus-foreground: null,\n\n $focus-visible-background: null,\n $focus-visible-foreground: null,\n\n $active-background: null,\n $active-foreground: null,\n\n $border-radius: null,\n $border-color: null,\n $hover-border-color: null,\n $focus-border-color: null,\n $focus-visible-border-color: null,\n $active-border-color: null,\n\n $shadow-color: null,\n\n $resting-shadow: null,\n $hover-shadow: null,\n $focus-shadow: null,\n $active-shadow: null,\n\n $disabled-background: null,\n $disabled-foreground: null,\n $disabled-border-color: 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 $themes: ();\n $variant: null;\n\n @each $_name, $_schema in $button-schema {\n $_resting-shadow: $resting-shadow;\n $_hover-shadow: $hover-shadow;\n $_focus-shadow: $focus-shadow;\n $_active-shadow: $active-shadow;\n $_border-radius: $border-radius;\n\n @if not($variant) {\n $variant: map.get($_schema, 'variant');\n }\n\n @if not($foreground) and $background {\n $foreground: text-contrast($background);\n }\n\n @if not($hover-background) and $background {\n $hover-background: lighten-color($background, 5%);\n }\n\n @if not($hover-foreground) and $hover-background {\n $hover-foreground: text-contrast($hover-background);\n }\n\n @if not($focus-background) and $background {\n $focus-background: lighten-color($background, 5%);\n }\n\n @if not($focus-foreground) and $focus-background {\n $focus-foreground: text-contrast($focus-background);\n }\n\n @if not($focus-visible-background) and $focus-background {\n $focus-visible-background: $focus-background;\n }\n\n @if not($focus-visible-foreground) and $focus-foreground {\n $focus-visible-foreground: $focus-foreground;\n }\n\n @if not($focus-visible-border-color) and $focus-border-color {\n $focus-visible-border-color: $focus-border-color;\n }\n\n @if not($_resting-shadow) {\n $resting-elevation: map.get($_schema, 'resting-elevation');\n $_resting-shadow: elevation($elevations, $resting-elevation);\n }\n\n @if not($_hover-shadow) {\n $hover-elevation: map.get($_schema, 'hover-elevation');\n $_hover-shadow: elevation($elevations, $hover-elevation);\n }\n\n @if not($_focus-shadow) {\n $focus-elevation: map.get($_schema, 'focus-elevation');\n $_focus-shadow: elevation($elevations, $focus-elevation);\n }\n\n @if not($_active-shadow) {\n $active-elevation: map.get($_schema, 'active-elevation');\n $_active-shadow: elevation($elevations, $active-elevation);\n }\n\n @if not($_border-radius) {\n $_border-radius: border-radius(map.get($_schema, 'border-radius'));\n }\n\n $themes: map.merge($themes, (\n $_name: extend(apply-palette($_schema, $palette), (\n name: $name,\n background: $background,\n foreground: $foreground,\n\n hover-background: $hover-background,\n hover-foreground: $hover-foreground,\n\n focus-background: $focus-background,\n focus-foreground: $focus-foreground,\n\n focus-visible-background: $focus-visible-background,\n focus-visible-foreground: $focus-visible-foreground,\n\n active-background: $active-background,\n active-foreground: $active-foreground,\n\n border-radius: $_border-radius,\n border-color: $border-color,\n hover-border-color: $hover-border-color,\n focus-border-color: $focus-border-color,\n focus-visible-border-color: $focus-visible-border-color,\n active-border-color: $active-border-color,\n\n shadow-color: $shadow-color,\n\n resting-shadow: $_resting-shadow,\n hover-shadow: $_hover-shadow,\n focus-shadow: $_focus-shadow,\n active-shadow: $_active-shadow,\n\n disabled-background: $disabled-background,\n disabled-foreground: $disabled-foreground,\n disabled-border-color: $disabled-border-color,\n ))\n ));\n }\n\n @return (\n palette: $palette,\n name: $name,\n variant: $variant,\n themes: $themes,\n );\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin button($theme) {\n $button-width: rem(88px);\n\n $variant: map.get($theme, variant);\n\n $flat-theme: map.get(map.get($theme, 'themes'), 'flat');\n $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');\n $raised-theme: map.get(map.get($theme, 'themes'), 'raised');\n $fab-theme: map.get(map.get($theme, 'themes'), 'fab');\n $icon-theme: map.get(map.get($theme, 'themes'), 'icon');\n\n @include css-vars($flat-theme);\n @include css-vars($outlined-theme);\n @include css-vars($raised-theme);\n @include css-vars($fab-theme);\n @include css-vars($icon-theme);\n\n $time: map.get((\n material: .1s,\n fluent: .1s,\n bootstrap: .15s,\n indigo-design: .15s\n ), $variant);\n\n $button-transition: color $time ease-in-out,\n background-color $time ease-in-out,\n border-color $time ease-in-out,\n box-shadow $time ease-in-out;\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: map.get((\n material: rem(36px, 16px),\n fluent: rem(32px, 16px),\n bootstrap: rem(36px, 16px),\n indigo-design: rem(36px, 16px),\n ), $variant);\n\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 $outlined-button-padding-material: (\n comfortable: rem(7px, 16px) rem(14px, 16px),\n cosy: rem(4px, 16px) rem(14px, 16px),\n compact: rem(1px, 16px) rem(14px, 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-bootstrap: (\n comfortable: rem(6px, 16px) rem(12px, 16px),\n cosy: rem(4px, 16px) rem(10px, 16px),\n compact: rem(2px, 16px) rem(8px, 16px)\n );\n\n $button-padding-indigo: (\n comfortable: rem(3px, 16px) rem(12px, 16px),\n cosy: rem(2px, 16px) rem(12px, 16px),\n compact: rem(1px, 16px) rem(8px, 16px)\n );\n\n $outlined-button-padding-indigo: (\n comfortable: rem(6px, 16px) rem(14px, 16px),\n cosy: rem(4px, 16px) rem(10px, 16px),\n compact: rem(2px, 16px) rem(6px, 16px)\n );\n\n $icon-button-width-material: (\n comfortable: rem(36px, 16px),\n cosy: rem(30px, 16px),\n compact: rem(24px, 16px),\n );\n\n $icon-button-width-fluent: (\n comfortable: rem(38px, 16px),\n cosy: rem(32px, 16px),\n compact: rem(24px, 16px),\n );\n\n $icon-button-width-bootstrap: (\n comfortable: rem(48px, 16px),\n cosy: rem(38px, 16px),\n compact: rem(31px, 16px),\n );\n\n $icon-button-width-indigo: (\n comfortable: rem(36px, 16px),\n cosy: rem(32px, 16px),\n compact: rem(28px, 16px),\n );\n\n $button-padding: map.get((\n material: $button-padding-material,\n fluent: $button-padding-fluent,\n bootstrap: $button-padding-bootstrap,\n indigo-design: $button-padding-indigo,\n ), $variant);\n\n $outlined-button-padding: map.get((\n material: $outlined-button-padding-material,\n fluent: $button-padding-fluent,\n bootstrap: $button-padding-bootstrap,\n indigo-design: $outlined-button-padding-indigo\n ), $variant);\n\n $icon-button-width: map.get((\n material: $icon-button-width-material,\n fluent: $icon-button-width-fluent,\n bootstrap: $icon-button-width-bootstrap,\n indigo-design: $icon-button-width-indigo\n ), $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(38px),\n cosy: rem(32px),\n compact: rem(24px)\n );\n\n $button--size-bootstrap: (\n comfortable: rem(48px),\n cosy: rem(38px),\n compact: rem(31px)\n );\n\n $button--size-indigo: (\n comfortable: rem(36px),\n cosy: rem(32px),\n compact: rem(28px)\n );\n\n $button-size: map.get((\n material: $button--size-material,\n fluent: $button--size-fluent,\n bootstrap: $button--size-bootstrap,\n indigo-design: $button--size-indigo,\n ), $variant);\n\n $button-floating-padding: (\n comfortable: rem(8px) rem(14px),\n cosy: rem(4px) rem(10px),\n compact: 0 rem(6px)\n );\n\n $button-floating-size: (\n comfortable: rem(48px),\n cosy: rem(40px),\n compact: rem(32px)\n );\n\n $button-floating-size-indigo: (\n comfortable: rem(48px),\n cosy: rem(42px),\n compact: rem(36px)\n );\n\n $icon-in-button-margin: (\n comfortable: rem(12px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n $icon-sizes: map.get((\n material: rem(18px),\n fluent: rem(16px),\n bootstrap: rem(18px),\n indigo-design: rem(18px),\n ), $variant);\n $icon-in-button-size: $icon-sizes;\n\n $raised-shadow: map.get((\n material: var-get($raised-theme, 'resting-shadow'),\n fluent: var-get($raised-theme, 'resting-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $raised-shadow--hover: map.get((\n material: var-get($raised-theme, 'hover-shadow'),\n fluent: var-get($raised-theme, 'hover-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $raised-shadow--focus: map.get((\n material: var-get($raised-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color')\n ), $variant);\n\n $raised-shadow--active: map.get((\n material: var-get($raised-theme, 'active-shadow'),\n fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color')\n ), $variant);\n\n $fab-shadow: map.get((\n material: var-get($fab-theme, 'resting-shadow'),\n fluent: var-get($fab-theme, 'resting-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $fab-shadow--hover: map.get((\n material: var-get($fab-theme, 'hover-shadow'),\n fluent: var-get($fab-theme, 'hover-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $fab-shadow--focus: map.get((\n material: var-get($fab-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')\n ), $variant);\n\n $fab-shadow--active: map.get((\n material: var-get($fab-theme, 'active-shadow'),\n fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')\n ), $variant);\n\n $icon-shadow: map.get((\n material: var-get($icon-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color')\n ), $variant);\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: rem(1px) solid var-get($flat-theme, 'border-color');\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\n igx-icon {\n display: flex;\n justify-content: center;\n width: var(--igx-icon-size, #{$icon-in-button-size});\n height: var(--igx-icon-size, #{$icon-in-button-size});\n font-size: var(--igx-icon-size, #{$icon-in-button-size});\n color: inherit;\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'comfortable');\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 margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\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 margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--flat {\n background: var-get($flat-theme, 'background');\n color: var-get($flat-theme, 'foreground');\n border-radius: var-get($flat-theme, 'border-radius');\n\n &:hover {\n background: var-get($flat-theme, 'hover-background');\n color: var-get($flat-theme, 'hover-foreground');\n border-color: var-get($flat-theme, 'hover-border-color');\n }\n\n &:focus {\n background: var-get($flat-theme, 'focus-background');\n color: var-get($flat-theme, 'focus-foreground');\n box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');\n border-color: var-get($flat-theme, 'focus-border-color');\n }\n\n &:active {\n background: var-get($flat-theme, 'active-background');\n color: var-get($flat-theme, 'active-foreground');\n box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');\n border-color: var-get($flat-theme, 'active-border-color');\n }\n\n &:focus-visible {\n background: var-get($flat-theme, 'focus-visible-background');\n color: var-get($flat-theme, 'focus-visible-foreground');\n border-color: var-get($flat-theme, 'focus-visible-border-color');\n }\n\n @if($variant == 'bootstrap') {\n &:focus,\n &:active,\n &:focus-visible {\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n }\n }\n\n %igx-button--outlined {\n background: var-get($outlined-theme, 'background');\n color: var-get($outlined-theme, 'foreground');\n border-color: var-get($outlined-theme, 'border-color');\n border-radius: var-get($outlined-theme, 'border-radius');\n padding: map.get($outlined-button-padding, 'comfortable');\n\n @if $variant == 'indigo-design' {\n border-width: rem(2px);\n }\n\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n border-color: var-get($outlined-theme, 'hover-border-color');\n }\n\n &:focus {\n background: var-get($outlined-theme, 'focus-background');\n color: var-get($outlined-theme, 'focus-foreground');\n border-color: var-get($outlined-theme, 'focus-border-color');\n\n @if($variant == 'bootstrap') {\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n }\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n } @else if($variant == 'indigo-design') {\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n }\n\n &:active {\n background: var-get($outlined-theme, 'active-background');\n color: var-get($outlined-theme, 'active-foreground');\n border-color: var-get($outlined-theme, 'active-border-color');\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n\n &:focus-visible {\n background: var-get($outlined-theme, 'focus-visible-background');\n color: var-get($outlined-theme, 'focus-visible-foreground');\n border-color: var-get($outlined-theme, 'focus-visible-border-color');\n\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n border-color: var-get($outlined-theme, 'hover-border-color');\n }\n\n &:active {\n background: var-get($outlined-theme, 'active-background');\n color: var-get($outlined-theme, 'active-foreground');\n border-color: var-get($outlined-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(2px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\n }\n }\n }\n\n %igx-button--outlined-cosy {\n padding: map.get($outlined-button-padding, 'cosy');\n min-height: map.get($button-size, 'cosy');\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\n }\n\n %igx-button--outlined-compact {\n padding: map.get($outlined-button-padding, 'compact');\n min-height: map.get($button-size, 'compact');\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--raised {\n color: var-get($raised-theme, 'foreground');\n background: var-get($raised-theme, 'background');\n box-shadow: $raised-shadow;\n border-radius: var-get($raised-theme, 'border-radius');\n\n &:hover {\n color: var-get($raised-theme, 'hover-foreground');\n background: var-get($raised-theme, 'hover-background');\n border-color: var-get($raised-theme, 'hover-border-color');\n box-shadow: $raised-shadow--hover;\n }\n\n &:focus {\n color: var-get($raised-theme, 'focus-foreground');\n background: var-get($raised-theme, 'focus-background');\n border-color: var-get($raised-theme, 'focus-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus;\n } @else {\n box-shadow: $raised-shadow--focus;\n }\n }\n\n &:active {\n color: var-get($raised-theme, 'active-foreground');\n background: var-get($raised-theme, 'active-background');\n border-color: var-get($raised-theme, 'active-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--active;\n } @else {\n box-shadow: $raised-shadow--active;\n }\n }\n\n &:focus-visible {\n background: var-get($raised-theme, 'focus-visible-background');\n color: var-get($raised-theme, 'focus-visible-foreground');\n border-color: var-get($raised-theme, 'focus-visible-border-color');\n\n &:hover {\n color: var-get($raised-theme, 'hover-foreground');\n background: var-get($raised-theme, 'hover-background');\n border-color: var-get($raised-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($raised-theme, 'active-foreground');\n background: var-get($raised-theme, 'active-background');\n border-color: var-get($raised-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(3px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\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 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-get($fab-theme, 'foreground');\n background: var-get($fab-theme, 'background');\n border-color: var-get($flat-theme, 'border-color');\n box-shadow: $fab-shadow;\n border-radius: var-get($fab-theme, 'border-radius');\n\n @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'comfortable');\n min-height: map.get($button-floating-size-indigo, 'comfortable');\n }\n\n &:hover {\n color: var-get($fab-theme, 'hover-foreground');\n background: var-get($fab-theme, 'hover-background');\n border-color: var-get($flat-theme, 'hover-border-color');\n box-shadow: $fab-shadow;\n }\n\n &:focus {\n color: var-get($fab-theme, 'focus-foreground');\n background: var-get($fab-theme, 'focus-background');\n border-color: var-get($flat-theme, 'focus-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;\n } @else {\n box-shadow: $raised-shadow--focus;\n }\n }\n\n &:active {\n color: var-get($fab-theme, 'active-foreground');\n background: var-get($fab-theme, 'active-background');\n border-color: var-get($flat-theme, 'active-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--active;\n } @else {\n box-shadow: $raised-shadow--active;\n }\n }\n\n &:focus-visible {\n background: var-get($fab-theme, 'focus-visible-background');\n color: var-get($fab-theme, 'focus-visible-foreground');\n border-color: var-get($fab-theme, 'focus-visible-border-color');\n\n &:hover {\n color: var-get($fab-theme, 'hover-foreground');\n background: var-get($fab-theme, 'hover-background');\n border-color: var-get($fab-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($fab-theme, 'active-foreground');\n background: var-get($fab-theme, 'active-background');\n border-color: var-get($fab-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(3px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n border-radius: calc(#{border-radius(#{var-get($fab-theme, 'border-radius')})} - #{$outline-btn-indent});\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\n }\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'comfortable');\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 @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'cosy');\n min-height: map.get($button-floating-size-indigo, 'cosy');\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\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 @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'compact');\n min-height: map.get($button-floating-size-indigo, 'compact');\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--icon {\n width: map.get($icon-button-width, 'comfortable');\n height: map.get($icon-button-width, 'comfortable');\n min-width: unset;\n min-height: unset;\n font-size: $button-icon-font-size;\n padding: $button-icon-padding;\n color: var-get($icon-theme, 'foreground');\n background: var-get($icon-theme, 'background');\n border-radius: var-get($icon-theme, 'border-radius');\n border-color: var-get($icon-theme, 'border-color');\n\n @if $variant == 'indigo-design' {\n border-width: rem(3px);\n }\n\n\n &:hover {\n @if $variant != 'fluent' {\n transition: $button-transition;\n }\n\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'hover-border-color');\n }\n\n &:focus {\n color: var-get($icon-theme, 'focus-foreground');\n background: var-get($icon-theme, 'focus-background');\n border-color: var-get($icon-theme, 'focus-border-color');\n\n @if $variant == 'fluent' {\n &:hover {\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($icon-theme, 'active-border-color');\n }\n }\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($flat-theme, 'active-border-color');\n }\n\n &:focus-visible {\n color: var-get($icon-theme, 'focus-visible-foreground');\n background: var-get($icon-theme, 'focus-visible-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color') ;\n\n &:hover {\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color');\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color');\n }\n }\n\n &:focus,\n &:active {\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow;\n } @else {\n box-shadow: $icon-shadow;\n }\n }\n }\n\n %igx-button--icon-cosy {\n width: map.get($icon-button-width, 'cosy');\n height: map.get($icon-button-width, 'cosy');\n }\n\n %igx-button--icon-compact {\n width: map.get($icon-button-width, 'compact');\n height: map.get($icon-button-width, 'compact');\n }\n\n %igx-button--disabled {\n background: var-get($flat-theme, 'disabled-background');\n color: var-get($flat-theme, 'disabled-foreground');\n border-color: var-get($flat-theme, 'disabled-border-color');\n pointer-events: none;\n box-shadow: none;\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} type-style\n@mixin button-typography($type-scale, $categories: (text: 'button')) {\n $text: map.get($categories, 'text');\n\n %igx-button-display {\n @include type-style($type-scale, $text) {\n text-align: center;\n }\n }\n\n %igx-button--fab {\n @include type-style($type-scale, $text) {\n text-align: center;\n margin: 0;\n }\n }\n}\n","@use '../variables' as *;\n@use 'functions' as *;\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n\n////\n/// @group Utilities\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\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: string.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, $deps: ()) {\n $component: map.get($components, $name);\n\n @if $component == null {\n $components: map.merge($components, (\n #{$name}: (\n usedBy: ()\n ),\n )) !global;\n }\n\n @each $dep in $deps {\n @include register-component($dep);\n\n @if map.has-key($components, $dep) {\n $component: map.get($components, $dep);\n $usedBy: map.get($component, 'usedBy');\n\n $components: map.merge($components, (\n #{$dep}: map.merge($component, (\n usedBy: list.append($usedBy, $name, $separator: comma)\n ))\n )) !global;\n }\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: list.length($animate);\n $animations: '';\n @for $i from 1 through $max {\n $animations: #{$animations + list.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// stylelint-disable max-nesting-depth\n/// Generates CSS class names for all colors from\n/// for a given property and color palette, 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/// @param {Map} $palette [$default-palette] - The palette to use to generate css class names for.\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',\n/// $suffix: 'bg'\n/// );\n/// @requires {mixin} gen-color-class\n@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {\n @each $name, $color in $palette {\n @each $variant, $value in $color {\n @if meta.type-of($value) != 'map' {\n @include gen-color-class($name, $variant, $prefix, $suffix) {\n #{$prop}: color($color: $name, $variant: $variant);\n }\n }\n }\n }\n}\n\n/// Generates CSS variables for a given palette.\n/// @access public\n/// @param {Map} $palette [null] - The palette to use to generate CSS variables for.\n/// @param {bool} $contrast [true] - Specify if contrast colors should be included.\n/// @param {string} $prefix [igx] - The prefix attached to the CSS variables.\n///\n/// @example scss Generate css variables for the `$default-palette`.\n/// @include palette-vars($default-palette);\n///\n@mixin palette-vars($palette, $contrast: true, $prefix: 'igx') {\n $scope: if(is-root(), ':root', '&');\n $_meta: map.get($palette, '_meta');\n $theme: if($_meta, map.get($_meta, 'variant'), null);\n $gray: if($_meta, map.get($_meta, 'grays'), #fff);\n $surface: map.get(map.get($palette, 'surface'), 500);\n\n #{$scope} {\n @each $name, $color in $palette {\n @each $variant, $value in $color {\n $_valid-base: meta.type-of(map.get($color, 500)) == 'color' and $theme;\n $_valid-variant: not(string.index(#{$variant}, 'contrast')) and not(string.index(#{$variant}, 'variant')) and $theme;\n\n @if $_valid-base and $variant == 500 {\n @if $prefix == 'igc' and $name != 'grays' {\n --#{$prefix}-#{$name}-h: var(--igx-#{$name}-h);\n --#{$prefix}-#{$name}-s: var(--igx-#{$name}-s);\n --#{$prefix}-#{$name}-l: var(--igx-#{$name}-l);\n } @else if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-h: var(--igx-#{$name}-h);\n --#{$prefix}-gray-s: var(--igx-#{$name}-s);\n --#{$prefix}-gray-l: var(--igx-#{$name}-l);\n } @else {\n --#{$prefix}-#{$name}-h: #{math.round(color.hue($value))};\n --#{$prefix}-#{$name}-s: #{math.round(color.saturation($value))};\n --#{$prefix}-#{$name}-l: #{math.round(color.lightness($value))};\n }\n\n @if $name != 'grays' {\n --#{$prefix}-#{$name}-a: #{color.alpha($value)};\n } @else if $name == 'grays' and $prefix == 'igc' {\n --#{$prefix}-gray-a: 1;\n } @else {\n --#{$prefix}-#{$name}-a: 1;\n }\n }\n\n @if $_valid-base and $_valid-variant {\n @if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-#{$variant}: #{gen-hsla-color('gray', $variant, $theme, $gray, #{$prefix}, $surface)};\n } @else {\n --#{$prefix}-#{$name}-#{$variant}: #{gen-hsla-color($name, $variant, $theme, $gray, #{$prefix}, $surface)};\n }\n } @else if $name != '_meta' {\n @if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-#{$variant}: #{$value};\n } @else {\n --#{$prefix}-#{$name}-#{$variant}: #{$value};\n }\n }\n }\n }\n }\n}\n// stylelint-enable max-nesting-depth\n\n/// Translates Ignite UI for Angular palette CSS variables\n/// into Ignite UI for Web Components compatible ones\n/// @access public\n/// @param {Map} $palette [null] - The palette to use to generate CSS variables for.\n///\n/// @example scss Translates igx- prefixed variables from `$default-palette` to igc- prefixed ones.\n/// @include palette-to-wc($default-palette);\n///\n@mixin palette-to-wc($palette) {\n @include palette-vars($palette, $contrast: true, $prefix: 'igc');\n}\n\n/// Generates CSS variables for a given elevations map.\n/// @access public\n/// @param {Map} $elevations - The elevations map to use to generate CSS variables for.\n/// @param {string} $prefix [igx] - The prefix attached to the CSS variables.\n///\n/// @example scss Generate CSS variables for elevations.\n/// $elevations: elevations(red, green, blue); // umbra, penumbra, ambient\n/// @include elevation-vars($elevations);\n///\n@mixin elevation-vars($elevations, $prefix: 'igx') {\n $scope: if(is-root(), ':root', '&');\n\n #{$scope} {\n @each $level, $shadow in $elevations {\n --#{$prefix}-elevation-#{$level}: #{$shadow};\n }\n }\n}\n\n/// Translates Ignite UI for Angular CSS variables for elevations\n/// into Ignite UI for Web Components compatible ones\n/// @access public\n/// @param {Map} $elevations - The elevations map to use to generate CSS variables for.\n///\n/// @example scss Translates igx- prefixed variables for elevations to igc- prefixed ones.\n/// $elevations: elevations(red, green, blue);\n/// @include elevations-to-wc($elevations);\n///\n@mixin elevations-to-wc($elevations) {\n @include elevation-vars($elevations, $prefix: 'igc');\n}\n\n/// Returns a middle value between an upper and lower bound\n/// @access private\n/// @param {Number} $radius - A preferred value\n/// @param {Number} $min - A minimum value\n/// @param {Number} $max - A maximum allowed value\n@mixin border-radius($radius, $min: rem(0), $max: $radius) {\n border-radius: clamp($min, calc(var(--igx-radius-factor) * $radius), $max);\n}\n\n/// Generates CSS class names for all colors from\n/// for a given property and color palette, with\n/// optional prefix and suffix attached to the class name.\n/// @access public\n/// @param {string} $prop - The CSS property to assign the palette color to.\n/// @param {string} $prefix [igx] - A prefix to be attached to the class name.\n/// @param {string} $suffix [null] - A suffix to be attached to the class name.\n/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.\n/// @example scss Generate background classes with colors from the palette.\n/// // Will generate class names like\n/// // .igx-primary-500-bg { ... };\n/// @include color-classes(\n/// $prop: 'background-color',\n/// $suffix: 'bg'\n/// );\n/// @requires {mixin} gen-color-classes\n@mixin color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {\n @include gen-color-classes($prop, $prefix, $suffix, $palette);\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: avatar-theme($icon-color: red);\n/// :root {\n/// @include css-vars-from-theme($my-theme);\n/// }\n@mixin css-vars-from-theme($theme, $prefix: null) {\n $name: map.get($theme, 'name');\n $ignore: ('name', 'palette', 'variant', 'selector');\n $webc-prefix: 'igc';\n $webc: list.nth(str-split($name, '-'), 1) == $webc-prefix;\n $themes: map.get($theme, 'themes');\n\n @if not($prefix) and $webc {\n $prefix: $webc-prefix;\n }\n\n @if not($name) or string.length($name) == 0 {\n @error 'Theme should have a non-null or empty name property. Example: my-theme: (name: my-theme)';\n }\n\n @if $themes and meta.type-of($themes) == 'map' {\n @each $theme in $themes {\n @include css-vars(list.nth($theme, 2));\n }\n }\n\n @each $key, $value in $theme {\n $elevation: string.index($key, 'elevation');\n\n @if not(list.index($ignore, $key) or $elevation) and meta.type-of($value) != 'map' {\n @if $prefix and $prefix != ignore {\n --#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value});\n } @else {\n --#{$key}: var(--#{$name}-#{$key}, #{$value});\n }\n }\n }\n}\n\n/// Add theme colors to a scope.\n/// @access public\n/// @param {map} $theme - The component theme to be used\n/// @requires {mixin} css-vars-from-theme\n@mixin css-vars($theme, $scope: null, $prefix: null) {\n $s: map.get($theme, 'selector');\n $n: map.get($theme, 'name');\n $name: if($scope, $scope, $s or $n);\n\n @if is-root() {\n #{$name} {\n @include css-vars-from-theme($theme, $prefix);\n }\n } @else {\n &,\n #{$name} {\n @include css-vars-from-theme($theme, $prefix);\n }\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 card-typography {\n/// @includescope('.igx-typography') {\n/// // style rules...\n/// }\n/// }\n///\n/// // Later\n/// .my-selector {\n/// @include card-typography();\n/// }\n///\n/// // Generated CSS\n/// // .igx-typography .my-selector {\n/// // ...styles rules as output by card-typography mixin\n/// // }\n@mixin scope($parent) {\n @each $selector in & {\n $len: list.length($selector);\n @if $len == null {\n $parent: $parent;\n } @else {\n @for $i from 1 through $len {\n $parent: list.append($parent, list.nth($selector, $i));\n }\n }\n\n @at-root #{$parent} {\n @content;\n }\n }\n}\n\n/// Truncates text at a specific number of lines\n/// @param {number|string} $lines - The number of lines to show\n/// @param {Boolean} $inline - Sets whether an element displays inline-box or box\n/// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically\n/// @example scss Truncates text after the fourth line\n/// @include line-clamp(4, true, true);\n@mixin line-clamp($lines, $inline, $vertical) {\n display: if($inline, -webkit-inline-box, -webkit-box);\n -webkit-line-clamp: if($lines, $lines, initial);\n -webkit-box-orient: if($vertical, vertical, initial);\n overflow: hidden;\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-component' as *;\n@use '../ripple/ripple-theme' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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 {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.\n/// @param {Color} $disabled-color-label [null] - The disabled label color.\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/// @param {Color} $focus-outline-color [null] - The focus outlined color.\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 checkbox-theme(\n $palette: null,\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-indeterminate-color: null,\n $disabled-color-label: null,\n $border-radius-ripple: null,\n $focus-outline-color: 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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($border-radius-ripple) {\n $border-radius-ripple: border-radius(map.get($theme, 'border-radius-ripple'));\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-indeterminate-color: $disabled-indeterminate-color,\n disabled-color-label: $disabled-color-label,\n border-radius: $border-radius,\n border-radius-ripple: $border-radius-ripple,\n focus-outline-color: $focus-outline-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} hide-default\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} ripple\n/// @requires ripple-theme\n/// @requires rem\n/// @requires em\n/// @requires var-get\n@mixin checkbox($theme) {\n @include 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 $size-bs: em(16px);\n $checkbox-radius: math.div($size, 2);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n $size: map.get((\n material: $size,\n fluent: $size,\n bootstrap: $size-bs,\n indigo-design: $size,\n ), $variant);\n\n $border-width: map.get((\n material: 2px,\n fluent: 1px,\n bootstrap: 1px,\n indigo-design: 2px,\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n bootstrap: none,\n indigo-design: none,\n ), $variant);\n\n $label-margin: em(8px);\n\n $mark-stroke: map.get((\n material: 3,\n fluent: 1,\n bootstrap: 3,\n indigo-design: 3,\n ), $variant);\n\n $mark-offset: map.get((\n material: 0,\n fluent: -1px,\n bootstrap: 0,\n indigo-design: 0,\n ), $variant);\n\n $mark-length: 24;\n $mark-x-factor: math.div($mark-stroke, $mark-length);\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'fill-color')\n );\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 align-items: center;\n justify-content: center;\n display: flex;\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-get($theme, 'empty-color');\n border-radius: var-get($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 inset: 0;\n transition: background .2s $ease-out-quad;\n }\n }\n\n %cbx-composite--x {\n border-color: var-get($theme, 'fill-color');\n background: var-get($theme, 'fill-color');\n\n &::after {\n background: var-get($theme, 'fill-color');\n }\n }\n\n %cbx-composite--disabled {\n border-color: var-get($theme, 'disabled-color');\n background: transparent;\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'disabled-color-label');\n }\n }\n\n %cbx-composite--x--disabled {\n background: var-get($theme, 'disabled-color');\n\n &::after {\n background: var-get($theme, 'disabled-color');\n }\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'disabled-color');\n }\n }\n\n %cbx-composite-mark {\n position: absolute;\n inset: 0;\n stroke: var-get($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 inset-inline-start: $mark-offset;\n }\n\n @if $variant == 'material' {\n %cbx-composite--x--disabled {\n border: var-get($theme, 'disabled-indeterminate-color');\n \n &::after {\n background: var-get($theme, 'disabled-indeterminate-color');\n }\n }\n }\n\n @if $variant == 'fluent' {\n %cbx-composite-mark {\n stroke: transparent;\n }\n\n %cbx-composite {\n background: transparent;\n\n &::after {\n background: transparent;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: calc($size / 2 - rem(6px));\n inset-inline-start: calc($size / 2 - rem(6px));\n width: rem(10px);\n height: rem(10px);\n border-radius: border-radius(rem(2px));\n border: rem(5px) solid var-get($theme, 'fill-color');\n z-index: 1;\n }\n }\n\n %cbx-composite--x--disabled {\n background: transparent;\n \n &::after {\n background: transparent;\n }\n\n &::before {\n border-color: var-get($theme, 'disabled-color');\n background: var-get($theme, 'disabled-color');\n }\n }\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-get($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-inline-start: $label-margin;\n }\n\n %cbx-label-pos--before {\n margin-inline-end: $label-margin;\n order: -1;\n }\n\n %cbx-label--disabled {\n color: var-get($theme, 'disabled-color-label');\n }\n\n %cbx-ripple {\n @include ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-end: calc(100% - #{$ripple-radius} - #{$checkbox-radius});\n width: $ripple-size;\n height: $ripple-size;\n border-radius: var-get($theme, 'border-radius-ripple');\n overflow: hidden;\n pointer-events: none;\n filter: opacity(1);\n }\n\n %igx-checkbox--focused {\n @if $variant == 'fluent' {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n\n @if $variant == 'bootstrap' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-checkbox--focused-checked {\n @if $variant == 'indigo-design' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %cbx-ripple--focused {\n background: var-get($theme, 'empty-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %cbx-ripple--focused-checked {\n background: var-get($theme, 'fill-color');\n }\n\n %cbx-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %cbx-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'empty-color');\n }\n }\n\n %cbx-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin checkbox-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %cbx-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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/// @param {Color} $ghost-background [null] - The chip ghost background color.\n/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.\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} $focus-text-color [null] - The chip text focus color.\n/// @param {Color} $focus-background [null] - The chip focus background color.\n/// @param {color} $focus-border-color [null] - The chip focus 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 chip-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $focus-outline-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 $focus-selected-outline-color: null,\n\n $ghost-shadow: null,\n $remove-icon-color: null,\n $remove-icon-color-focus: null,\n) {\n $name: 'igx-chip';\n $selector: 'igx-chip, .igx-chip__ghost, .igx-chip__ghost--compact, .igx-chip__ghost--cosy';\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 @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 meta.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(to-opaque($hover-background));\n }\n\n @if not($focus-background) and $background {\n $luminance: luminance($background);\n\n @if meta.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(to-opaque($focus-background));\n }\n\n @if not($selected-background) and $background {\n $luminance: luminance($background);\n\n @if meta.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(to-opaque($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(to-opaque($hover-selected-background));\n }\n\n @if not($focus-selected-background) and $selected-background {\n $luminance: luminance($selected-background);\n\n @if meta.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(to-opaque($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: elevation($elevations, $ghost-elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 focus-selected-outline-color: $focus-selected-outline-color,\n focus-outline-color: $focus-outline-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin chip($theme) {\n @include css-vars($theme);\n\n $transition: all 120ms $ease-in-out-quad;\n $chip-max-width: 32ch;\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\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 bootstrap: $chip-height-material,\n indigo-design: $chip-height-material\n ), $variant);\n\n $chip-padding: (\n comfortable: 0 rem(8px),\n cosy: 0 rem(4px),\n compact: 0 rem(2px)\n );\n\n $box-shadow: map.get((\n material: null,\n fluent: null,\n bootstrap: 0 0 0 rem(3px) var-get($theme, 'hover-background'),\n indigo-design: null\n ), $variant);\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 bootstrap: 0,\n indigo-design: 0\n ), $variant);\n\n $chip-icon-size: (\n comfortable: rem(18px),\n cosy: rem(18px),\n compact: rem(16px)\n );\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\n [dir='rtl'] & {\n transition-property: top right;\n }\n\n touch-action: none;\n\n &:focus {\n outline-style: none;\n\n %igx-chip__item {\n @extend %igx-chip__item--focus;\n }\n\n %igx-chip__item--selected {\n @extend %igx-chip__item--focus-selected;\n }\n }\n\n &:hover {\n %igx-chip__item {\n @extend %igx-chip__item--hover;\n }\n\n %igx-chip__item--selected {\n @extend %igx-chip__item--hover-selected;\n }\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: var(--igx-icon-size, map.get($chip-icon-size, 'comfortable'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'comfortable'));\n font-size: var(--igx-icon-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: var(--igx-icon-size, map.get($chip-icon-size, 'cosy'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'cosy'));\n font-size: var(--igx-icon-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: var(--igx-icon-size, map.get($chip-icon-size, 'compact'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'compact'));\n font-size: var(--igx-icon-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-inline-start: rem(4px);\n }\n }\n\n %igx-chip__prefix {\n + igx-prefix,\n + [igxPrefix] {\n margin-inline-start: rem(4px);\n\n igx-avatar {\n max-height: 100%;\n max-width: 100%;\n margin-inline-start: $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-inline-end: rem(4px);\n color: var-get($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-get($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-inline-start: 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-inline-start: 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-get($theme, 'text-color');\n background: var-get($theme, 'background');\n border-width: 1px;\n border-style: solid;\n border-color: var-get($theme, 'border-color');\n border-radius: var-get($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-get($theme, 'hover-text-color');\n background: var-get($theme, 'hover-background');\n border-color: var-get($theme, 'hover-border-color');\n transition: all 120ms ease-in;\n }\n\n %igx-chip__item--focus {\n color: var-get($theme, 'focus-text-color');\n background: var-get($theme, 'focus-background');\n border-color: var-get($theme, 'focus-border-color');\n outline-style: none;\n box-shadow: $box-shadow;\n\n @if $variant == 'indigo-design' {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');\n }\n }\n\n %igx-chip__item--selected {\n color: var-get($theme, 'selected-text-color');\n background: var-get($theme, 'selected-background');\n border-color: var-get($theme, 'selected-border-color');\n }\n\n %igx-chip__item--hover-selected {\n color: var-get($theme, 'hover-selected-text-color');\n background: var-get($theme, 'hover-selected-background');\n border-color: var-get($theme, 'hover-selected-border-color');\n transition: $transition;\n }\n\n %igx-chip__item--focus-selected {\n color: var-get($theme, 'focus-selected-text-color');\n background: var-get($theme, 'focus-selected-background');\n border-color: var-get($theme, 'focus-selected-border-color');\n transition: $transition;\n\n @if $variant == 'indigo-design' {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color');\n }\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 box-shadow: var-get($theme, 'ghost-shadow');\n overflow: hidden;\n color: var-get($theme, 'focus-text-color');\n background: var-get($theme, 'ghost-background');\n\n &:hover,\n &:focus {\n background: var-get($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 // Remark: If z-index is not set, the chip would\n // hide behind it's parent grid as it has a z-index of 1\n %igx-chip__ghost,\n %igx-chip__ghost--cosy,\n %igx-chip__ghost--compact {\n z-index: 10;\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} type-style\n@mixin chip-typography(\n $type-scale,\n $categories: (text: 'body-2'))\n{\n $text: map.get($categories, 'text');\n\n %igx-chip {\n @include 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 type-style($type-scale, $text) {\n font-size: 12px;\n font-weight: 600;\n }\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 actions Theme\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n/// @param {Color} $title-color [null]- The text color used for the title of the list.\n/// @param {Color} $background-color [null] - The background color of the panel.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n/// @requires text-contrast\n///\n/// @example scss Change the title color\n/// $column-actions-theme: igx-column-actions-theme($title-color: black);\n/// // Pass the theme to the igx-column-actions component mixin\n/// @include igx-column-actions($column-actions-theme);\n////\n@function column-actions-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $title-color: null,\n $background-color: null\n) {\n $name: 'igx-column-actions';\n $column-actions-schema: ();\n\n @if map.has-key($schema, $name) {\n $column-actions-schema: map.get($schema, $name);\n } @else {\n $column-actions-schema: $schema;\n }\n\n $theme: apply-palette($column-actions-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 elevations: $elevations,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin column-actions($theme) {\n @include css-vars($theme);\n\n %column-actions-display {\n display: flex;\n flex-flow: column nowrap;\n background: var-get($theme, 'background-color');\n box-shadow: elevation(map.get($theme, 'elevations'), 8);\n width: 100%;\n flex: 1 1 auto;\n min-width: rem(180px);\n }\n\n %column-actions-title {\n color: var-get($theme, 'title-color');\n margin: 0;\n padding: rem(16px) rem(16px) rem(8px);\n }\n\n %column-actions-input {\n font-size: rem(16px) !important;\n margin: -16px 0 0 !important;\n padding: rem(8px) rem(16px);\n }\n\n %column-actions-columns {\n display: flex;\n flex-flow: column nowrap;\n overflow-y: auto;\n outline-style: none;\n }\n\n %column-actions-item {\n padding: rem(4px) rem(16px);\n min-height: rem(32px);\n }\n\n %column-actions-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-actions 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} type-style\n@mixin column-actions-typography($type-scale, $categories: (title: 'subtitle-1')) {\n $title: map.get($categories, 'title');\n\n %column-actions-title {\n @include type-style($type-scale, $title) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.\n/// @param {Color} $active-color [null] - Sets the active text and border colors for tabs, panes, and menus.\n/// @param {Color} $border-color [null] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.\n/// @param {Color} $button-text [null] - Sets the button text color.\n/// @param {Color} $context-menu-background [null] - Sets the background color for context menus.\n/// @param {Color} $context-menu-background-active [null] - Sets the background color for active context menus.\n/// @param {Color} $context-menu-color [null] - Sets the text color for context menus.\n/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.\n/// @param {Color} $dock-background [null] - Sets the background color of the dock manager.\n/// @param {Color} $dock-text [null] - Sets the text color of the dock manager.\n/// @param {Color} $drop-shadow-background [null] - Sets the drop-shadow background color.\n/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.\n/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.\n/// @param {Color} $joystick-background [null] - Sets the background color of the joystick.\n/// @param {Color} $joystick-background-active [null] - Sets the background color of the joysticks.\n/// @param {Color} $joystick-border-color [null] - Sets the border color of the joystick.\n/// @param {Color} $joystick-icon-color [null] - Sets the color for the joystick icons.\n/// @param {Color} $joystick-icon-color-active [null] - Sets the color of the active joystick icons.\n/// @param {Color} $pane-content-background [null] - Sets the background color of the content panes.\n/// @param {Color} $pane-content-text [null] - Sets the text color of the content panes.\n/// @param {Color} $pane-header-background [null] - Sets the background color for pane headers.\n/// @param {Color} $pane-header-text [null] - Sets the text color for pane headers.\n/// @param {Color} $pinned-header-background [null] - Sets the background colors of pinned headers.\n/// @param {Color} $pinned-header-text [null] - Sets the text colors of pinned headers.\n/// @param {Color} $background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.\n/// @param {Color} $splitter-background [null] - Sets the background color for the splitters.\n/// @param {Color} $splitter-handle [null] - Sets the background color for the splitter handles.\n/// @param {Color} $tab-background [null] - Sets the background color for tabs.\n/// @param {Color} $tab-background-active [null] - Sets the background color for active tabs.\n/// @param {Color} $tab-border-color [null] - Sets the border color for tabs.\n/// @param {Color} $tab-border-color-active [null] - Sets the border color for active tabs.\n/// @param {Color} $tab-text [null] - Sets the text color for tabs.\n/// @param {Color} $tab-text-active [null] - Sets the text color for active tabs.\n/// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.\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 dock-managers\n/// $my-dock-manager-theme: dock-manager-theme();\n/// // Pass the theme to the dock-manager component mixin\n/// @include css-vars($my-dock-manager-theme);\n@function dock-manager-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'igc-dockmanager';\n $dock-manager-schema: ();\n\n @if map.has-key($schema, $name) {\n $dock-manager-schema: map.get($schema, $name);\n } @else {\n $dock-manager-schema: $schema;\n }\n\n $theme: apply-palette($dock-manager-schema, $palette);\n\n @return extend($theme, (name: $name), keywords($rest));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n@mixin dock-manager($theme) {\n @include css-vars($theme);\n}\n\n/// Adds typography styles for the dock manager component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin dock-manager-typography() {\n igx-dock-manager {\n --igc-font-family: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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/// @param {Number} $expanded-margin [null] - The expansion panel margin in expanded state when positioned inside accordion.\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///\n/// @example scss Change the background color\n/// $my-expansion-panel-theme: expansion-panel($header-background: black);\n/// // Pass the theme to the expansion-panel component mixin\n/// @include expansion-panel($my-expansion-panel-theme);\n@function expansion-panel-theme(\n $palette: null,\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 $expanded-margin: 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 @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 meta.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 expanded-margin: $expanded-margin\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin expansion-panel($theme) {\n @include css-vars($theme);\n\n $panel-padding: rem(16px) rem(24px);\n\n %igx-expansion-panel {\n display: flex;\n flex-direction: column;\n border-radius: border-radius(var-get($theme, 'border-radius'));\n overflow: hidden;\n transition: margin 350ms $ease-out-quad;\n }\n\n %igx-expansion-panel__header-title {\n color: var-get($theme, 'header-title-color');\n margin-inline-end: rem(16px, 16px);\n }\n\n %igx-expansion-panel__header-description {\n color: var-get($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-accordion {\n overflow-y: auto;\n\n %igx-expansion-panel__header-title {\n @include line-clamp(4, true, true);\n\n white-space: initial;\n word-wrap: break-word;\n }\n\n %igx-expansion-panel--expanded {\n margin: var-get($theme, 'expanded-margin') 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\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-get($theme, 'header-background');\n\n &:focus,\n &:active\n {\n background: var-get($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-inline-start: rem(16px, 16px);\n }\n\n %igx-expansion-panel__header-icon--start {\n order: -1;\n margin-inline-end: 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-get($theme, 'header-icon-color');\n\n igx-icon {\n color: var-get($theme, 'header-icon-color');\n }\n }\n\n %igx-expansion-panel__body {\n color: var-get($theme, 'body-color');\n background: var-get($theme, 'body-background');\n overflow: hidden;\n padding: $panel-padding;\n }\n\n %igx-expansion-panel--disabled {\n pointer-events: none;\n\n %igx-expansion-panel__header-title,\n %igx-expansion-panel__header-description {\n color: var-get($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-get($theme, 'disabled-color');\n }\n }\n }\n}\n\n/// Adds typography styles for the igx-expansion-panel component.\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: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-expansion-panel__header-description {\n @include type-style($type-scale, $description) {\n margin: 0;\n }\n }\n\n %igx-expansion-panel__body {\n @include type-style($type-scale, $body) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/SisIvanova\" target=\"_blank\">Silvia Ivanova</a>\n////\n\n/// @param {Map} $palette [null] - 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} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.\n/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the color to use for the label font.\n/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.\n/// @param {Number} $needle-breadth [null] - Sets the needle breadth.\n/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.\n/// @param {Number} $needle-inner-base-width [null] - Sets the width of the needle's inner base.\n/// @param {Number} $needle-inner-point-width [null] - Sets the width of the needle's inner point.\n/// @param {Number} $needle-outer-base-width [null] - Sets the width of the needle's outer base.\n/// @param {Number} $needle-outer-point-width [null] - Sets the width of the needle's outer point.\n/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.\n/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.\n/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.\n/// @param {Color} $scale-outline [null] - Sets the color to use for the outline of the scale.\n/// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.\n/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($custom-gauge-theme);\n@function linear-gauge-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'linear-gauge';\n $selector: 'igx-linear-gauge';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n keywords($rest),\n (\n name: $name,\n selector: $selector,\n ),\n );\n}\n\n/// @param {Map} $palette [null] - 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} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).\n/// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).\n/// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.\n/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the color to use for the label font.\n/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.\n/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.\n/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.\n/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.\n/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.\n/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.\n/// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($custom-gauge-theme);\n@function radial-gauge-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'radial-gauge';\n $selector: 'igx-radial-gauge';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n keywords($rest),\n (\n name: $name,\n selector: $selector,\n ),\n );\n}\n\n/// Adds typography styles for the linear-gauge component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin gauge-typography() {\n igx-linear-gauge {\n --linear-gauge-font: var(--igx-font-family, inherit);\n }\n\n igx-radial-gauge {\n --radial-gauge-font: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.\n/// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the brush to use for the label font.\n/// @param {Color} $minor-tick-brush [null] - Sets the brush to use for the minor tickmarks.\n/// @param {Number} $minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.\n/// @param {List} $range-brushes [null] - Sets a collection of brushes to be used as the palette for bullet graph ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of brushes to be used as the palette for bullet graph outlines.\n/// @param {Color} $scale-background-brush [null] - Sets the background brush for the scale.\n/// @param {Color} $scale-background-outline [null] - Sets the background outline for the scale.\n/// @param {Number} $scale-background-thickness [null] - Sets the background outline thickness for the scale.\n/// @param {Number} $target-value-breadth [null] - Sets the breadth of the target value element.\n/// @param {Color} $target-value-brush [null] - Sets the brush to use when rendering the fill of the comparative marker.\n/// @param {Color} $target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.\n/// @param {Number} $target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.\n/// @param {Color} $tick-brush [null] - Sets the brush to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.\n/// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.\n/// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($my-chart-theme);\n@function bullet-graph-theme(\n $palette: null,\n $schema: $light-schema,\n\n $backing-brush: null,\n $backing-outline: null,\n $backing-stroke-thickness: null,\n $font-brush: null,\n $minor-tick-brush: null,\n $minor-tick-thickness: null,\n $range-brushes: null,\n $range-outlines: null,\n $scale-background-brush: null,\n $scale-background-outline: null,\n $scale-background-thickness: null,\n $target-value-breadth: null,\n $target-value-brush: null,\n $target-value-outline: null,\n $target-value-thickness: null,\n $tick-brush: null,\n $tick-stroke-thickness: null,\n $value-brush: null,\n $value-outline: null,\n $value-stroke-thickness: null,\n) {\n $name: 'bullet-graph';\n $selector: 'igx-bullet-graph';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n (\n name: $name,\n selector: $selector,\n backing-brush: $backing-brush,\n backing-outline: $backing-outline,\n backing-stroke-thickness: $backing-stroke-thickness,\n font-brush: $font-brush,\n minor-tick-brush: $minor-tick-brush,\n minor-tick-thickness: $minor-tick-thickness,\n range-brushes: $range-brushes,\n range-outlines: $range-outlines,\n scale-background-brush: $scale-background-brush,\n scale-background-outline: $scale-background-outline,\n scale-background-thickness: $scale-background-thickness,\n target-value-breadth: $target-value-breadth,\n target-value-brush: $target-value-brush,\n target-value-outline: $target-value-outline,\n target-value-thickness: $target-value-thickness,\n tick-brush: $tick-brush,\n tick-stroke-thickness: $tick-stroke-thickness,\n value-brush: $value-brush,\n value-outline: $value-outline,\n value-stroke-thickness: $value-stroke-thickness,\n )\n );\n}\n\n/// Adds typography styles for the graph component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin graph-typography() {\n igx-bullet-graph {\n --bullet-graph-font: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a> //\n\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used. /\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-prefix-background [null] - The background color of an input prefix in the idle state.\n/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state.\n/// @param {Color} $input-suffix-background [null] - The background color of an input sufix 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 {Color} $success-border-color [null] - The border color for success state for bootstrap input group.\n/// @param {Color} $error-border-color [null] - The border color for error state for bootstrap input group.\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/// @param {Color} placeholder-color [null] - The placeholder color of an input group.\n/// @param {Color} disabled-placeholder-color [null] - The disabled placeholder color of an input group.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n///\n/// @example scss Change the focused border and label colors\n/// $my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);\n/// // Pass the theme to the input-group component mixin\n/// @include input-group($my-input-group-theme);\n@function input-group-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $success-shadow-color: null,\n $error-shadow-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 $label-floated-background: null,\n $label-floated-disabled-background: null\n) {\n $name: 'igx-input-group';\n $selector: 'igx-input-group, igx-date-range-start, igx-date-range-end';\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 $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: elevation($elevations, $search-resting-elevation);\n }\n\n @if not($search-hover-shadow) {\n $search-hover-shadow: elevation($elevations, $search-hover-elevation);\n }\n\n @if not($search-disabled-shadow) {\n $search-disabled-shadow: elevation($elevations, $search-disabled-elevation);\n }\n\n @if not($box-border-radius) {\n $box-border-radius: border-radius(map.get($theme, 'box-border-radius'));\n }\n\n @if not($border-border-radius) {\n $border-border-radius: border-radius(map.get($theme, 'border-border-radius'));\n }\n\n @if not($search-border-radius) {\n $search-border-radius: border-radius(map.get($theme, 'search-border-radius'));\n }\n\n @return extend($theme, (\n palette: $palette,\n name: $name,\n selector: $selector,\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\n success-shadow-color: $success-shadow-color,\n error-shadow-color: $error-shadow-color,\n\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 label-floated-background: $label-floated-background,\n label-floated-disabled-background: $label-floated-disabled-background,\n ));\n}\n\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires var-get\n@mixin input-group($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n\n $transition-timing: .25s $ease-out-cubic;\n\n $variant: map.get($theme, variant);\n $indigo-theme: $variant == 'indigo-design';\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 $bootstrap-padding: (\n 'comfortable': rem(8px) rem(16px),\n 'cosy': rem(6px) rem(12px),\n 'compact': rem(4px) rem(8px)\n );\n\n $bootstrap-font-size: (\n 'comfortable': rem(20px),\n 'cosy': rem(16px),\n 'compact': rem(14px),\n );\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\n igx-input-group {\n --theme: #{map.get($theme, 'variant')};\n }\n\n %form-group-display {\n position: relative;\n display: block;\n color: var-get($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 span {\n font: inherit;\n margin: 0;\n }\n\n input[type='file'] {\n @include hide-default();\n }\n\n textarea {\n overflow: auto;\n }\n\n input[type='number'] {\n -moz-appearance: textfield;\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--filled {\n igx-prefix,\n [igxPrefix],\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-prefix--filled;\n }\n }\n\n %form-group-box-wrapper {\n border-radius: var-get($theme, 'box-border-radius');\n @if $variant == 'material' {\n border-end-start-radius: border-radius(rem(0));\n border-end-end-radius: border-radius(rem(0));\n }\n overflow: hidden;\n }\n\n %form-group-display--hover {\n cursor: pointer;\n }\n\n %form-group-display--disabled {\n user-select: none;\n color: var-get($theme, 'disabled-text-color') !important;\n\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--disabled;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--disabled;\n }\n }\n\n %form-group-bundle {\n position: relative;\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n max-width: 100%;\n padding-top: rem(18px, map.get($base-scale-size, 'comfortable'));\n box-shadow: inset 0 -1px 0 0 var-get($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;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n background: var-get($theme, 'box-background');\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'idle-bottom-line-color');\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %form-group-bundle--indigo {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n background: transparent;\n transition: background $transition-timing, box-shadow $transition-timing;\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'idle-bottom-line-color');\n\n &:hover,\n &:focus {\n background: var-get($theme, 'box-background');\n }\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %indigo--box-focused {\n background: var-get($theme, 'box-background');\n }\n\n %form-group-bundle-success--indigo {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle-error--indigo {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle-error--indigo--hover {\n border-color: var-get($theme, 'error-secondary-color');\n box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');\n }\n\n %form-group-helper--indigo--disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-bundle--box-cosy {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'cosy'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %form-group-bundle--box-compact {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'compact'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %form-group-bundle--hover {\n cursor: pointer;\n @if not $indigo-theme {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'hover-bottom-line-color');\n } @else {\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'hover-bottom-line-color');\n }\n }\n\n %form-group-bundle--focus {\n caret-color: var-get($theme, 'focused-secondary-color');\n @if not $indigo-theme {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'interim-bottom-line-color');\n } @else {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'focused-bottom-line-color');\n }\n }\n\n %form-group-bundle--success {\n caret-color: var-get($theme, 'success-secondary-color');\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle--error {\n caret-color: var-get($theme, 'error-secondary-color');\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle--disabled {\n @if not $indigo-theme {\n box-shadow: none;\n } @else {\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'disabled-bottom-line-color');\n }\n background-image: linear-gradient(to left, var-get($theme, 'disabled-bottom-line-color') 40%, transparent 10%);\n background-position: bottom;\n background-size: 4px 1px;\n background-repeat: repeat-x;\n\n [dir='rtl'] & {\n background-image: linear-gradient(to right, var-get($theme, 'disabled-bottom-line-color') 40%, transparent 10%);\n }\n }\n\n %form-group-bundle--box-disabled {\n @if not $indigo-theme {\n background: var-get($theme, 'box-disabled-background');\n } @else {\n background: transparent;\n }\n }\n\n %form-group-bundle--border {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n box-shadow: inset 0 0 0 1px var-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-border-radius');\n background: var-get($theme, 'border-background');\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %form-group-bundle--border-cosy {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'cosy'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %form-group-bundle--border-compact {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'compact'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %form-group-bundle-border--hover {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'hover-border-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'hover-border-color');\n }\n }\n\n %form-group-bundle-border--focus {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'focused-border-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'focused-border-color');\n }\n }\n\n %form-group-bundle-border--error {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'error-secondary-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'error-secondary-color');\n }\n }\n\n %form-group-bundle-border--success {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'success-secondary-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'success-secondary-color');\n }\n }\n\n %form-group-bundle-border--disabled {\n background: var-get($theme, 'border-disabled-background');\n box-shadow: inset 0 0 0 1px var-get($theme, 'disabled-border-color');\n }\n\n // FLUENT START\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-inline-start: 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-inline-start: 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 &::before {\n content: '*';\n position: absolute;\n top: rem(-8px);\n inset-inline-start: calc(100% + #{rem(4px)});\n color: var-get($theme, 'error-secondary-color');\n }\n }\n\n %fluent-label + %form-group-bundle-required--fluent {\n &::before {\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-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-border-radius');\n background: var-get($theme, 'border-background');\n position: relative;\n align-items: stretch;\n box-shadow: none !important;\n }\n\n %form-group-bundle--fluent--hover {\n border-color: var-get($theme, 'hover-border-color');\n box-shadow: none;\n }\n\n %form-group-bundle--fluent--focus {\n caret-color: var-get($theme, 'focused-text-color');\n border-color: var-get($theme, 'focused-border-color');\n\n &::after {\n pointer-events: none;\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border: rem(1px) solid var-get($theme, 'focused-border-color');\n }\n }\n\n %form-group-bundle--fluent--hover-disabled,\n %form-group-bundle--fluent-disabled {\n border-color: var-get($theme, 'disabled-border-color');\n background: var-get($theme, 'border-disabled-background');\n }\n\n %form-group-bundle-error--fluent,\n %form-group-bundle-error--fluent--hover,\n %form-group-bundle-error--fluent--focus {\n border-color: var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle-success--fluent,\n %form-group-bundle-success--fluent--hover,\n %form-group-bundle-success--fluent--focus {\n border-color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle-success--fluent--focus {\n &::after {\n border: rem(1px) solid var-get($theme, 'success-secondary-color');\n }\n }\n\n %form-group-bundle-error--fluent--focus {\n &::after {\n border: rem(1px) solid var-get($theme, 'error-secondary-color');\n }\n }\n\n %fluent-input {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n %fluent-input-disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-bundle-main--fluent {\n padding-inline-start: rem(8px);\n align-self: center;\n cursor: default;\n }\n\n igx-prefix + %form-group-bundle-main--fluent,\n [igx-prefix] + %form-group-bundle-main--fluent {\n @if $variant != 'fluent' {\n padding-inline-start: 0;\n }\n }\n\n %fluent-placeholder-label {\n transform: translateY(0) scale(1);\n }\n\n %fluent-label {\n padding: rem(5px) 0;\n font-size: rem(14px, 16px);\n font-weight: 600;\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: color(map.get($theme, 'palette'), 'grays', 800);\n\n [dir='rtl'] & {\n transform-origin: top right;\n }\n }\n\n %fluent-label-success {\n color: var-get($theme, 'idle-text-color');\n }\n\n %fluent-label-error {\n color: var-get($theme, 'idle-text-color');\n }\n\n %fluent-label-disabled {\n color: 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: 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-get($theme, 'search-border-radius');\n background: var-get($theme, 'search-background');\n box-shadow: var-get($theme, 'search-resting-shadow');\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-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'hover-border-color');\n }\n\n %form-group-bundle-search--focus {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'hover-border-color');\n }\n\n %form-group-bundle-search--error {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'search-hover-shadow');\n }\n\n %form-group-bundle-search--success {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'search-hover-shadow');\n }\n\n %form-group-bundle-search--disabled {\n background: var-get($theme, 'search-disabled-background');\n box-shadow: var-get($theme, 'search-disabled-shadow');\n border-color: var-get($theme, 'disabled-border-color');\n }\n\n %form-group-bundle-main {\n position: relative;\n flex-grow: 1;\n max-width: inherit;\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 [dir='rtl'] & {\n transform-origin: top right;\n }\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 + %form-group-input--box,\n ~ %form-group-file-input--box {\n transform: translateY(0);\n }\n }\n\n %form-group-label--border {\n padding: 0 rem(4px);\n transition: all $transition-timing;\n }\n\n %form-group-label--border,\n %form-group-label--search {\n transform: translateY(0);\n }\n\n %form-group-label--search {\n + %form-group-input--search {\n transform: translateY(0);\n }\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--float-border {\n // width: auto;\n transform: translateY(-130%) scale(.75);\n background: var-get($theme, 'label-floated-background', inherit);\n }\n\n %form-group-label--float-border-disabled {\n background: var-get($theme, 'label-floated-disabled-background', inherit);\n }\n\n %form-group-label--float-border-cosy {\n transform: translateY(-115%) scale(.75);\n }\n\n %form-group-label--float-border-compact {\n transform: translateY(-105%) scale(.75);\n }\n\n %form-group-label--fixed {\n transition: color $transition-timing;\n }\n\n %form-group-label--focus {\n color: var-get($theme, 'focused-secondary-color');\n }\n\n %form-group-label--success {\n color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-label--error {\n color: var-get($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-inline-start: $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 width: 100%;\n min-width: 0;\n overflow: visible;\n background: transparent;\n color: var-get($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 &:not([type='date']) {\n line-height: 0 !important; /* Reset typography */\n }\n\n &::-webkit-input-placeholder {\n line-height: normal;\n }\n\n &::placeholder {\n color: var-get($theme, 'placeholder-color');\n opacity: 1;\n line-height: normal; /* Fix placeholder position in Safari */\n }\n }\n\n %form-group-file-input {\n position: relative;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n height: rem(32px, map.get($base-scale-size, 'comfortable'));\n color: var-get($theme, 'filled-text-color');\n line-height: 1;\n\n span {\n @include ellipsis();\n position: absolute;\n display: inline-block;\n width: inherit;\n max-width: inherit;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n %form-group-input--cosy {\n height: rem(32px, map.get($base-scale-size, 'cosy'));\n }\n\n %form-group-file-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 %form-group-file-input--compact {\n height: rem(32px, map.get($base-scale-size, 'compact'));\n }\n\n %form-group-upload-button {\n margin-bottom: rem(10px);\n }\n\n %form-group-clear-icon {\n &:focus {\n border-radius: border-radius(rem(4px));\n background-color: color($palette, 'primary', 500);\n color: contrast-color($palette, 'primary', 500);\n\n @if $variant == 'material' {\n background-color: transparent;\n color: color($palette, 'secondary', 500);\n }\n\n @if $variant == 'fluent' {\n border-radius: 0;\n }\n\n @if $variant == 'bootstrap' {\n border-radius: 0;\n color: contrast-color($palette, 'primary', 600);\n }\n }\n }\n\n %chrome-autofill-fix {\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-transition-delay: 99999s;\n transition-delay: 99999s;\n }\n }\n\n %edge-clear-icon-fix {\n &::-ms-clear {\n display: none;\n }\n }\n\n %form-group-input--box,\n %form-group-file-input--box,\n %form-group-input--search,\n %form-group-input--border,\n %form-group-input--indigo,\n %form-group-file-input-indigo {\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-get($theme, 'focused-text-color');\n }\n\n %form-group-input--disabled {\n color: var-get($theme, 'disabled-text-color') !important;\n\n &::placeholder {\n color: var-get($theme, 'disabled-placeholder-color');\n }\n }\n\n %form-group-textarea {\n // 3 lines * 22px + 8px bottom padding + 8px top padding\n min-height: rem(82px, map.get($base-scale-size, 'comfortable'));\n\n // this fixes resizing in chrome !?!?\n margin-inline-end: -#{rem(16px, map.get($base-scale-size, 'comfortable'))};\n\n height: auto;\n resize: vertical;\n overflow: hidden;\n\n // resets typography styles\n line-height: normal !important;\n\n &:not([type='*']) {\n line-height: normal !important; /* resets typography styles */\n }\n }\n\n %form-group-textarea--disabled {\n color: var-get($theme, 'disabled-text-color') !important;\n\n &::placeholder {\n color: var-get($theme, 'disabled-placeholder-color');\n }\n }\n\n %form-group-textarea--cosy {\n min-height: rem(82px, map.get($base-scale-size, 'cosy'));\n margin-inline-end: -#{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-inline-end: -#{rem(16px, map.get($base-scale-size, 'compact'))};\n }\n\n %form-group-textarea--indigo {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'comfortable'))} !important;\n }\n\n %form-group-textarea--indigo-cosy {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'cosy'))} !important;\n }\n\n %form-group-textarea--indigo-compact {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'compact'))} !important;\n }\n\n %form-group-prefix,\n %form-group-suffix {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: rem(32px, map.get($base-scale-size, 'comfortable'));\n transition: color $transition-timing;\n }\n\n %form-group-prefix {\n padding: rem(8px, map.get($base-scale-size, 'comfortable'));\n padding-inline-start: 0;\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: rem(32px, map.get($base-scale-size, '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 padding: rem(8px, map.get($base-scale-size, 'cosy'));\n padding-inline-start: 0;\n }\n\n %form-group-prefix--compact {\n padding: rem(8px, map.get($base-scale-size, 'compact'));\n padding-inline-start: 0;\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 igx-prefix.igx-prefix--upload,\n [igxPrefix].igx-prefix--upload {\n padding: 0 !important;\n }\n\n %form-group-prefix-fluent {\n color: var-get($theme, 'input-prefix-color');\n background: var-get($theme, 'input-prefix-background');\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n width: auto;\n height: auto;\n line-height: normal;\n font-weight: 400;\n border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');\n\n &:last-of-type {\n margin-inline-end: rem(8px);\n }\n }\n\n %form-group-prefix-fluent-search {\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n %form-group-suffix-fluent {\n color: var-get($theme, 'input-suffix-color');\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n background: var-get($theme, 'input-suffix-background');\n width: auto;\n height: auto;\n line-height: normal;\n border-radius: 0 var-get($theme, 'border-border-radius') var-get($theme, 'border-border-radius') 0;\n\n &:first-of-type {\n margin-inline-start: rem(8px);\n }\n }\n\n %form-group-suffix-fluent-search {\n width: auto;\n height: auto;\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n line-height: normal;\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n }\n\n %form-group-prefix-fluent,\n %form-group-suffix-fluent,\n %form-group-suffix-fluent-search,\n %form-group-prefix-fluent-search {\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n %form-group-prefix-fluent,\n %form-group-suffix-fluent {\n .igx-typography [igx-button],\n .igx-typography igx-button,\n .igx-typography button,\n button {\n border-radius: rem(1px) 0 0 rem(1px);\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: auto;\n line-height: normal;\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: auto;\n line-height: normal;\n }\n\n %form-group-prefix-fluent-search--cosy,\n %form-group-prefix-fluent--cosy {\n padding: 0 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: 0 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: 0 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: 0 rem(8px, map.get($base-scale-size, 'compact'));\n }\n // FLUENT END\n\n %form-group-prefix--box {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'comfortable'));\n }\n\n %form-group-prefix--box-cosy {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'cosy'));\n }\n\n %form-group-prefix--box-compact {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'compact'));\n }\n\n %form-group-suffix--box {\n padding: 0;\n }\n\n %form-group-prefix--filled {\n color: var-get($theme, 'filled-text-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-get($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-get($theme, 'success-secondary-color');\n }\n\n %form-group-border--warning {\n background: var-get($theme, 'warning-secondary-color');\n }\n\n %form-group-border--error {\n background: var-get($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 padding-top: rem(6px, map.get($base-scale-size, 'comfortable'));\n justify-content: space-between;\n\n > * {\n margin-inline-end: rem(8px);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\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-inline-start: $hint--box-margin; /* 16px, base is 12px */\n margin-inline-end: $hint--box-margin; /* 16px, base is 12px */\n }\n\n %form-group-helper--success {\n color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-helper--error {\n color: var-get($theme, 'error-secondary-color');\n }\n\n %form-group-helper-item {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n %form-group-helper-item--start {\n justify-content: flex-start;\n }\n\n %form-group-helper-item--end {\n justify-content: flex-end;\n }\n\n %form-group-helper-item--start,\n %form-group-helper-item--end {\n width: 100%;\n }\n\n %form-group-prefix--disabled,\n %form-group-suffix--disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n // Bootstrap\n %form-group-display--bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--bootstrap;\n }\n\n %form-group-prefix--bootstrap:first-child {\n border-start-start-radius: var-get($theme, 'box-border-radius');\n border-end-start-radius: var-get($theme, 'box-border-radius');\n }\n\n %form-group-suffix--bootstrap:last-child {\n border-start-end-radius: var-get($theme, 'box-border-radius');\n border-end-end-radius: var-get($theme, 'box-border-radius');\n }\n\n %bootstrap-input:not(:first-child),\n %bootstrap-file-input:not(:first-child) {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n %bootstrap-input:not(:last-child),\n %bootstrap-file-input:not(:last-child) {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n %form-group-display--cosy-bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--cosy-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--cosy-bootstrap;\n }\n }\n\n %form-group-display--compact-bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--compact-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--compact-bootstrap;\n }\n }\n\n %form-group-display--disabled-bootstrap {\n background-image: none;\n\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--disabled-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--disabled-bootstrap;\n }\n }\n\n %form-group-bundle--bootstrap {\n align-items: stretch;\n padding: 0;\n box-shadow: none;\n z-index: 0;\n }\n\n %form-group-bundle--bootstrap-hover {\n border: none;\n box-shadow: none;\n }\n\n %form-group-prefix--bootstrap,\n %form-group-suffix--bootstrap {\n border: 1px solid var-get($theme, 'border-color');\n padding: map.get($bootstrap-padding, 'comfortable');\n z-index: -1;\n width: auto;\n height: auto;\n font-size: map.get($bootstrap-font-size, 'comfortable');\n line-height: 1.5;\n white-space: nowrap;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n font-weight: 400;\n }\n }\n\n %form-group-prefix--bootstrap {\n color: var-get($theme, 'input-prefix-color');\n background: var-get($theme, 'input-prefix-background');\n border-inline-end: 0;\n }\n\n %form-group-suffix--bootstrap {\n color: var-get($theme, 'input-suffix-color');\n background: var-get($theme, 'input-suffix-background');\n border-inline-start: 0;\n }\n\n %form-group-prefix--disabled-bootstrap,\n %form-group-suffix--disabled-bootstrap {\n border: 1px solid var-get($theme, 'disabled-border-color');\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-prefix--cosy-bootstrap,\n %form-group-suffix--cosy-bootstrap {\n padding: map.get($bootstrap-padding, 'cosy');\n width: auto;\n height: auto;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n }\n }\n\n %form-group-prefix--compact-bootstrap,\n %form-group-suffix--compact-bootstrap {\n padding: map.get($bootstrap-padding, 'compact');\n width: auto;\n height: auto;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n }\n }\n\n %bootstrap-label {\n position: static;\n display: block;\n color: var-get($theme, 'idle-secondary-color');\n padding: 0;\n line-height: normal !important;\n transform: translateY(0);\n transform-origin: top left;\n margin-top: 0 !important;\n margin-bottom: rem(8px);\n height: auto;\n font-size: rem(16px);\n\n [dir='rtl'] & {\n transform-origin: top right;\n }\n }\n\n %bootstrap-label--cosy {\n font-size: rem(14px);\n margin-bottom: rem(6px);\n }\n\n %bootstrap-label--compact {\n font-size: rem(14px);\n margin-bottom: rem(4px);\n }\n\n %bootstrap-input {\n height: auto;\n line-height: 1.5 !important;\n margin: 0;\n border-radius: var-get($theme, 'box-border-radius');\n border: 1px solid var-get($theme, 'border-color');\n font-size: map.get($bootstrap-font-size, 'comfortable');\n padding: map.get($bootstrap-padding, 'comfortable');\n transition: box-shadow .15s ease-out, border .15s ease-out;\n }\n\n %bootstrap-file-input {\n width: calc(100% - #{2 * nth(map.get($bootstrap-padding, 'comfortable'), 2)});\n height: inherit;\n border-radius: var-get($theme, 'box-border-radius');\n border: rem(1px) solid var-get($theme, 'border-color');\n padding: map.get($bootstrap-padding, 'comfortable');\n }\n\n %bootstrap-input--focus {\n border: rem(1px) solid var-get($theme, 'focused-border-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');\n }\n\n %bootstrap-input--success {\n border: rem(1px) solid var-get($theme, 'success-secondary-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');\n }\n\n %bootstrap-input--error {\n border: rem(1px) solid var-get($theme, 'error-secondary-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');\n }\n\n %bootstrap-input--disabled {\n background: var-get($theme, 'border-disabled-background');\n border: rem(1px) solid var-get($theme, 'disabled-border-color');\n box-shadow: none;\n }\n\n %bootstrap-input--search {\n transform: translateY(0);\n }\n\n %bootstrap-input--cosy {\n font-size: map.get($bootstrap-font-size, 'cosy');\n padding: map.get($bootstrap-padding, 'cosy');\n }\n\n %bootstrap-input--compact {\n font-size: map.get($bootstrap-font-size, 'compact');\n padding: map.get($bootstrap-padding, 'compact');\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} type-style\n@mixin 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: type-scale-category($type-scale, $input-text);\n\n %form-group-input {\n @include type-style($type-scale, $input-text) {\n margin: 0;\n }\n }\n\n %form-group-helper {\n @include type-style($type-scale, $helper-text) {\n margin: 0;\n }\n }\n\n %form-group-prefix,\n %form-group-suffix {\n @include type-style($type-scale, $input-text) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Change the background color\n/// $my-navbar-theme: navbar-theme($background: green);\n/// // Pass the theme to the navbar component mixin\n/// @include navbar($my-navbar-theme);\n@function navbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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: 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} css-vars\n/// @requires em\n/// @requires var-get\n@mixin navbar($theme) {\n @include css-vars($theme);\n\n $navbar-padding: rem(16px);\n $navbar-title-fz: rem(18px, 16px);\n $navbar-title-lh: rem(18px, 16px);\n $navbar-title-margin: 0;\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 min-height: 56px;\n max-height: 128px;\n padding-inline: $navbar-padding;\n background: var-get($theme, 'background');\n color: var-get($theme, 'text-color');\n box-shadow: var-get($theme, 'shadow');\n z-index: 4;\n overflow: hidden;\n }\n\n %igx-navbar-part {\n display: flex;\n align-items: center;\n }\n\n %igx-navbar-title {\n @include line-clamp(4, true, true);\n margin: $navbar-title-margin;\n flex-grow: 1;\n user-select: text;\n display: flex;\n flex-direction: row\n }\n\n %igx-navbar-bundle {\n @extend %igx-navbar-part;\n user-select: none;\n\n > * + * {\n margin-inline-start: rem(16px);\n }\n }\n\n %igx-navbar-icon-display {\n >igx-icon,\n [igxButton='icon'] {\n cursor: pointer;\n color: var-get($theme, 'idle-icon-color');\n transition: color .15s $ease-out-quad;\n\n &:hover {\n color: var-get($theme, 'hover-icon-color');\n }\n }\n }\n\n %igx-navbar-left {\n @extend %igx-navbar-bundle;\n @extend %igx-navbar-icon-display;\n flex-grow: 1;\n }\n\n %igx-navbar-right {\n @extend %igx-navbar-bundle;\n @extend %igx-navbar-icon-display;\n }\n\n igx-navbar-action,\n [igxNavbarAction] {\n @extend %igx-navbar-part;\n }\n\n igx-navbar-title,\n [igxNavbarTitle] {\n @extend %igx-navbar-part;\n @extend %igx-navbar-title !optional;\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} type-style\n@mixin navbar-typography($type-scale, $categories: (title: 'h6')) {\n $title: map.get($categories, 'title');\n\n %igx-navbar-title {\n @include type-style($type-scale, $title);\n margin-bottom: 0;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Change the background and item colors\n/// $navdrawer-theme: navdrawer-theme(\n/// $background: #2d313a,\n/// $item-active-background: #ecc256,\n/// $item-icon-color: #ecc256\n/// );\n/// // Pass the theme to the navdrawer component mixin\n/// @include navdrawer($navdrawer-theme);\n@function navdrawer-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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-nav-drawer';\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 @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 meta.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 meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin navdrawer($theme) {\n @include css-vars($theme);\n\n $drawer-icon-size: rem(24px);\n $drawer-item-margin: rem(8px);\n $text-side-padding: rem(8px);\n $drawer-item-min-h: auto;\n $drawer-item-max-h: rem(48px);\n $drawer-item-min-w: rem(32px);\n\n $variant: map.get($theme, variant);\n\n %navdrawer-display {\n transition: flex-basis;\n transition-duration: .3s;\n transition-timing-function: $ease-out-quad;\n flex-shrink: 0;\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-get($theme, 'background');\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n z-index: 999;\n transition: width, transform;\n transition-timing-function: $ease-out-quad, $ease-out-quad;\n box-shadow: var-get($theme, 'shadow');\n @if $variant != 'indigo-design' {\n border-inline-end: 1px solid var-get($theme, 'border-color');\n }\n border-radius: var-get($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 [dir='rtl'] & {\n transform: translate3d(-300px, 0, 0);\n }\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 transform: translate3d(-300px, 0, 0);\n\n [dir='rtl'] & {\n transform: translate3d(300px, 0, 0);\n }\n\n box-shadow: none;\n }\n\n %aside--right {\n inset-inline-start: auto;\n inset-inline-end: 0;\n border-inline-end: none;\n border-inline-start: 1px solid var-get($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 @if $variant == 'indigo-design' {\n max-width: rem(32px);\n // important is needed to override the typography margins\n margin: rem(14px) auto !important;\n }\n\n igx-icon {\n margin-inline-start: 0;\n }\n }\n }\n\n %aside--normal {\n width: rem(242px);\n transition-duration: .3s, .3s;\n }\n\n %overlay {\n opacity: 1;\n background: color(map.get($theme, 'palette'), 'grays', 500, .54);\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 inset-inline-start: 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-get($theme, 'item-text-color');\n max-height: $drawer-item-max-h;\n min-width: $drawer-item-min-w;\n\n @if $variant != 'indigo-design' {\n // important is needed to override the typography margins\n margin: $drawer-item-margin !important;\n padding: rem(12px) rem(8px);\n gap: rem(32px);\n } @else {\n // important is needed to override the typography margins\n margin: rem(15px) $drawer-item-margin !important;\n padding: rem(4px);\n gap: calc(32px - #{$text-side-padding});\n }\n\n cursor: pointer;\n user-select: none;\n outline: transparent;\n white-space: nowrap;\n border-radius: var-get($theme, 'item-border-radius');\n text-decoration: none;\n width: calc(100% - #{$drawer-item-margin * 2});\n border: none;\n justify-content: flex-start;\n\n igx-icon {\n color: var-get($theme, 'item-icon-color');\n @if $variant == 'indigo-design' {\n margin-inline-start: rem(4px);\n }\n }\n\n span {\n @if $variant == 'indigo-design' {\n padding-inline-start: $text-side-padding;\n }\n }\n\n // Need this to override the igx-buttons\n &[igxButton] {\n background: transparent;\n border: none;\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-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-text-color');\n box-shadow: none;\n\n igx-icon {\n color: var-get($theme, 'item-hover-icon-color');\n }\n }\n }\n\n %item--active {\n // should be app primary color\n color: var-get($theme, 'item-active-text-color');\n background: var-get($theme, 'item-active-background');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n\n &:focus,\n &:hover {\n color: var-get($theme, 'item-active-text-color');\n background: var-get($theme, 'item-active-background');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n }\n }\n\n %item,\n %item--active {\n // Need this to override the igx-buttons\n &[igxButton] {\n box-shadow: none;\n\n igx-icon {\n width: var(--igx-icon-size, #{$drawer-icon-size});\n height: var(--igx-icon-size, #{$drawer-icon-size});\n font-size: var(--igx-icon-size, #{$drawer-icon-size});\n margin: 0;\n }\n\n &:hover,\n &:focus {\n box-shadow: none;\n border: none;\n }\n }\n }\n\n %item--header {\n display: block;\n padding: rem(12px) rem(16px);\n white-space: nowrap;\n color: var-get($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 %disable-animation {\n transition-duration: 0s;\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} type-style\n@mixin 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 type-style($type-scale, $item);\n }\n\n %item--header {\n @include type-style($type-scale, $header) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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/// @param {Color} $disabled-label-color [null] - The disabled label color.\n/// @param {Color} $hover-color [null] - The border and dot colors on hover.\n/// @param {Color} $fill-color-hover [null] - The checked border and dot colors on hover.\n/// @param {Color} $fill-hover-border-color [null] - The checked dot border color on hover.\n/// @param {Color} $focus-outline-color [null] - The focus outlined color.\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: radio-theme($fill-color: magenta);\n/// // Pass the theme to the radio component mixin\n/// @include radio($my-radio-theme);\n@function radio-theme(\n $palette: null,\n $schema: $light-schema,\n\n $label-color: null,\n $empty-color: null,\n $fill-color: null,\n $fill-hover-border-color:null,\n $focus-outline-color: null,\n $disabled-color: null,\n $disabled-label-color: null,\n $hover-color: null,\n $fill-color-hover: null,\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 disabled-label-color: $disabled-label-color,\n hover-color: $hover-color,\n fill-color-hover: $fill-color-hover,\n focus-outline-color: $focus-outline-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} ripple\n/// @requires {mixin} hide-default\n/// @requires ripple-theme\n/// @requires em\n/// @requires var-get\n@mixin radio($theme) {\n @include css-vars($theme);\n @include scale-in-out($start-scale: .9);\n\n $label-margin: em(8px);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $size: map.get((\n material: em(20px),\n fluent: em(20px),\n bootstrap: em(16px),\n indigo-design: em(20px),\n ), $variant);\n\n $scale: map.get((\n material: scale(.5),\n fluent: scale(.5),\n bootstrap: scale(.375),\n indigo-design: scale(.5),\n ), $variant);\n\n $border-width: map.get((\n material: rem(2px),\n fluent: rem(1px),\n bootstrap: rem(1px),\n indigo-design: rem(2px),\n ), $variant);\n\n $radio-hover-scale: map.get((\n material: null,\n fluent: scale(.5),\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n indigo-design: none,\n ), $variant);\n\n $border-style: solid;\n $border-radius: border-radius(50%);\n\n $transition: all .2s ease-in;\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($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-get($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-get($theme, 'disabled-label-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-get($theme, 'label-color');\n\n user-select: none;\n\n &::before,\n &::after {\n position: absolute;\n content: '';\n width: $size;\n height: $size;\n inset-inline-start: 0;\n top: 0;\n border-radius: $border-radius;\n }\n\n &::before {\n backface-visibility: hidden;\n transform: scale(0);\n\n @if $not-bootstrap-theme {\n transition: $transition;\n }\n\n z-index: 1;\n }\n\n &::after {\n border: $border-width $border-style var-get($theme, 'empty-color');\n }\n }\n\n %radio-composite--x {\n &::before {\n border: $border-width $border-style var-get($theme, 'fill-color');\n background: var-get($theme, 'fill-color');\n transform: $scale;\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'fill-hover-border-color');\n background: var-get($theme, 'fill-hover-border-color');\n }\n }\n\n &::after {\n border: $border-width $border-style var-get($theme, 'fill-color');\n\n @if $bootstrap-theme{\n background: var-get($theme, 'fill-color');\n }\n }\n }\n\n %igx-radio-hover__composite {\n &::before {\n background: var-get($theme, 'hover-color');\n transform: $radio-hover-scale;\n }\n }\n\n %igx-radio--checked-active__composite {\n &::before {\n background: var-get($theme, 'fill-color-hover');\n border-color: var-get($theme, 'fill-hover-border-color');\n }\n\n &::after {\n @if $bootstrap-theme {\n border-color: var-get($theme, 'fill-color');\n } @else {\n border-color: var-get($theme, 'fill-hover-border-color');\n }\n }\n }\n\n %radio-composite--disabled {\n &::after {\n border: $border-width $border-style var-get($theme, 'disabled-color');\n\n @if $bootstrap-theme {\n background: transparent;\n border: $border-width $border-style var-get($theme, 'disabled-label-color');\n }\n }\n }\n\n %radio-composite--x--disabled {\n &::after {\n border: $border-width $border-style var-get($theme, 'disabled-color');\n }\n\n &::before {\n background: var-get($theme, 'disabled-color');\n border: $border-width $border-style transparent;\n }\n\n @if $bootstrap-theme {\n &::after {\n background: var-get($theme, 'disabled-color');\n border-color: var-get($theme, 'disabled-color');\n }\n\n &::before {\n background: white;\n }\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-inline-start: $label-margin;\n }\n\n %radio-label--before {\n order: -1;\n margin-inline-end: $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 ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: calc(50% - #{$ripple-radius});\n width: $ripple-size;\n height: $ripple-size;\n border-radius: border-radius(math.div($ripple-size, 2));\n overflow: hidden;\n pointer-events: none;\n filter: opacity(1);\n\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %igx-radio--focused {\n @if $variant == 'fluent' {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n\n @if $variant == 'bootstrap' {\n %radio-composite {\n border-radius: $border-radius;\n box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %radio-composite {\n border-radius: $border-radius;\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-radio--focused-checked {\n @if $variant == 'indigo-design' {\n %radio-composite {\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %radio-ripple--focused {\n background: var-get($theme, 'empty-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %radio-ripple--focused-checked {\n background: var-get($theme, 'fill-color');\n }\n\n %radio-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %radio-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'empty-color');\n }\n }\n\n %radio-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin radio-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %radio-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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} $track-step-color [null] - The color of the track steps.\n/// @param {Number} $track-step-size [null] - The size of the track steps.\n/// @param {Color} $track-hover-color [null] - The color of the track on hover.\n///\n/// @param {Color} $thumb-color [null] - The color of the thumb.\n/// @param {Color} $thumb-focus-color [null] - The focus color of the thumb.\n/// @param {Color} $thumb-border-color [null] - The thumb border color.\n/// @param {Color} $thumb-border-focus-color [null] - The thumb border color when focused.\n/// @param {Color} $thumb-disabled-border-color [null] - The thumb border color when it's disabled.\n/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled.\n///\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} $base-track-color [null] - The base background color of the track.\n/// @param {Color} $base-track-hover-color [null] - The base background color of the track on hover.\n/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.\n/// @param {Color} $disabled-fill-track-color [null] - The base background color of the fill track when is disabled.\n///\n/// @param {Color} $tick-label-color [null] - The color of the tick label.\n/// @param {Color} $tick-color [null] - The background-color of the 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: slider-theme($thumb-color: black, $track-color: yellow);\n/// // Pass the theme to the slider component mixin\n/// @include slider($my-slider-theme);\n@function slider-theme(\n $palette: null,\n $schema: $light-schema,\n\n $track-color: null,\n $track-step-color: null,\n $track-step-size: null,\n $track-hover-color: null,\n $thumb-color: null,\n $thumb-focus-color: null,\n $thumb-border-color: null,\n $thumb-border-focus-color: null,\n $thumb-disabled-border-color: null,\n $disabled-thumb-color: null,\n $label-background-color: null,\n $label-text-color: null,\n\n $base-track-color: null,\n $base-track-hover-color: null,\n $disabled-base-track-color: null,\n $disabled-fill-track-color: null,\n\n $tick-label-color: null,\n $tick-color: 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-step-color: $track-step-color,\n track-step-size: $track-step-size,\n track-hover-color: $track-hover-color,\n thumb-color: $thumb-color,\n thumb-focus-color: $thumb-focus-color,\n thumb-border-color: $thumb-border-color,\n thumb-border-focus-color: $thumb-border-focus-color,\n thumb-disabled-border-color: $thumb-disabled-border-color,\n disabled-thumb-color: $disabled-thumb-color,\n label-background-color: $label-background-color,\n label-text-color: $label-text-color,\n base-track-color: $base-track-color,\n base-track-hover-color: $base-track-hover-color,\n disabled-base-track-color: $disabled-base-track-color,\n disabled-fill-track-color: $disabled-fill-track-color,\n tick-label-color: $tick-label-color,\n tick-color: $tick-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin slider($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n $variant: map.get($theme, variant);\n\n $slider-height: rem(48px);\n $ripple-size: rem(40px);\n $ripple-radius: math.div($ripple-size, 2);\n $thumb-label-width: rem(40px);\n $thumb-label-height: rem(30px);\n\n $slider-track-height: map.get((\n material: 6px,\n fluent: 4px,\n bootstrap: 8px,\n indigo-design: 2px\n ), $variant);\n\n $slider-outline-width: map.get((\n material: 0,\n fluent: 0,\n bootstrap: 3px,\n indigo-design: 3px\n ), $variant);\n\n // Slider ticks\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 // Slider Thumb\n $thumb-size: map.get((\n material: 20px,\n fluent: 16px,\n bootstrap: 16px,\n indigo-design: 14px\n ), $variant);\n $thumb-radius: math.div($thumb-size, 2);\n\n $thumb-border-width: map.get((\n material: 0,\n fluent: 2px,\n bootstrap: 1px,\n indigo-design: 0\n ), $variant);\n\n // Slider Steps\n $steps-top-position: map.get((\n material: 2px,\n fluent: 1px,\n bootstrap: 3px,\n indigo-design: 0\n ), $variant);\n\n // Slider Label\n $slider-label-width: 36px;\n $slider-label-height: $slider-label-width;\n $slider-label-radius: math.div($slider-label-width, 2);\n $slider-label-padding: 0 rem(2px);\n\n %igx-slider-display {\n display: flex;\n position: relative;\n // Z-index 0 is needed to set the stacking context for the inner elements with z-index.\n // https://github.com/IgniteUI/igniteui-angular/issues/11597\n z-index: 0;\n height: $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-get($theme, 'track-hover-color');\n }\n\n %igx-slider-track-inactive {\n background: var-get($theme, 'base-track-hover-color');\n }\n\n @if $variant == 'fluent'{\n %igx-slider-thumb__dot::before {\n border: rem($thumb-border-width) solid var-get($theme, 'thumb-focus-color');\n }\n }\n }\n }\n\n %igx-slider-disabled {\n pointer-events: none;\n\n %igx-slider-track-inactive {\n background: var-get($theme, 'disabled-base-track-color');\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 inset-inline-start: 0;\n }\n\n %igx-slider-track {\n position: relative;\n width: 100%;\n height: rem($slider-track-height);\n overflow: hidden;\n border-radius: border-radius(rem(32px));\n\n @if $variant == 'indigo-design' {\n border-radius: initial;\n }\n }\n\n %igx-slider-track-inactive {\n position: absolute;\n width: 100%;\n height: inherit;\n background: var-get($theme, 'base-track-color');\n transition: background .2s $ease-out-quad;\n border-radius: inherit;\n\n @if $variant == 'material' {\n height: rem(4px);\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n %igx-slider-track-fill {\n position: absolute;\n width: 100%;\n background: var-get($theme, 'track-color');\n transform-origin: left center;\n transform: scaleX(0);\n border-radius: inherit;\n height: inherit;\n\n [dir='rtl'] & {\n transform-origin: right center;\n }\n\n @if $variant == 'bootstrap' {\n display: none;\n }\n }\n\n %igx-slider-track-fill--disabled {\n background: var-get($theme, 'disabled-fill-track-color');\n }\n\n %igx-slider__ticks {\n width: 100%;\n display: flex;\n position: absolute;\n bottom: 0;\n justify-content: space-between;\n\n &%igx-slider__ticks--top {\n bottom: auto;\n top: 0;\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-inline-start: rem(-1px);\n }\n\n &:last-of-type {\n margin-inline-start: rem(-1px);\n }\n }\n\n %igx-slider__ticks-label {\n color: var-get($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 [dir='rtl'] & {\n left: 100%;\n }\n }\n\n %igx-slider__ticks-tick {\n background: var-get($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-get($theme, 'disabled-base-track-color') !important;\n }\n\n %igx-slider__ticks-labels--disabled {\n color: var-get($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 }\n\n %igx-slider__ticks-label {\n top: calc(#{$tick-height--tall} + #{$tick-height});\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 display: flex;\n width: 100%;\n height: rem(4px);\n opacity: .85;\n transition: opacity .2s ease-out;\n top: 50%;\n transform: translateY(-50%);\n color: var-get($theme, 'track-step-color');\n\n svg {\n clip-path: inset(0 rem(3px) 0 rem(3px));\n }\n\n line {\n stroke: currentColor;\n stroke-width: var-get($theme, 'track-step-size');\n stroke-linecap: round;\n }\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 %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: rem($thumb-size);\n height: rem($thumb-size);\n outline-style: none;\n top: -#{rem($thumb-radius)};\n margin-inline-start: -#{rem($thumb-radius)};\n\n @if $variant == 'material' {\n &:hover div::after {\n opacity: .12;\n transform: scale(1);\n }\n\n &:focus div::after {\n opacity: .18;\n transform: scale(1);\n }\n }\n\n &:focus div::before {\n box-shadow: 0 0 0 rem($slider-outline-width) var-get($theme, 'thumb-focus-color');\n\n @if $variant == 'bootstrap' {\n border-color: var-get($theme, 'thumb-border-focus-color');\n }\n }\n }\n\n @if $variant == 'fluent' {\n %igx-slider-thumb--focused { \n div::after {\n $focus-outline-offset: rem(2px);\n\n position: absolute;\n content: '';\n pointer-events: none;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color');\n width: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));\n height: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));\n }\n }\n }\n\n %igx-thumb--disabled {\n &:focus div::before {\n box-shadow: none;\n\n @if $variant == 'fluent' {\n border-color: var-get($theme, 'thumb-disabled-border-color') !important;\n }\n }\n\n &:focus div::after {\n transform: scale(0);\n }\n }\n\n %igx-label-display {\n position: absolute;\n pointer-events: none;\n display: flex;\n top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);\n height: $thumb-label-height;\n }\n\n %igx-slider-thumb-label__container {\n border-radius: rem(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n margin-inline-start: -50%;\n padding: 0 rem(2px);\n background: var-get($theme, 'label-background-color');\n color: var-get($theme, 'label-text-color');\n min-width: $thumb-label-width;\n opacity: 0;\n\n &::after {\n content: '';\n position: absolute;\n top: 85%;\n border-inline-start: rem(10px) solid transparent;\n border-inline-end: rem(10px) solid transparent;\n border-top: rem(10px) solid var-get($theme, 'label-background-color');\n }\n }\n\n %igx-slider-thumb__dot {\n position: relative;\n inset-inline-start: 0;\n pointer-events: none;\n\n &::before {\n position: absolute;\n content: '';\n width: rem($thumb-size);\n height: rem($thumb-size);\n inset-inline-start: #{rem($thumb-radius) - math.div(rem($thumb-size), 2)};\n top: calc((#{$thumb-size} - #{$thumb-radius}) * -1);\n margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1);\n background: var-get($theme, 'thumb-color');\n border: rem($thumb-border-width) solid var-get($theme, 'thumb-border-color');\n transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad;\n border-radius: border-radius(rem($thumb-radius));\n }\n\n @if $variant == 'material' {\n &::after {\n position: absolute;\n content: '';\n width: $ripple-size;\n height: $ripple-size;\n background: var-get($theme, 'thumb-color');\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: calc(50% - #{$ripple-radius});\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: border-radius(50%);\n overflow: hidden;\n }\n }\n }\n\n %igx-slider-thumb__dot--disabled {\n pointer-events: none;\n\n &::before {\n background: var-get($theme, 'disabled-thumb-color');\n border-color: var-get($theme, 'thumb-disabled-border-color');\n border-radius: border-radius(rem($thumb-radius));\n }\n }\n\n %igx-slider-thumb__dot--pressed {\n @if $variant == 'material' {\n &::after {\n opacity: .24 !important;\n transform: scale(1) !important;\n }\n }\n }\n\n %igx-slider-thumb-label__container--active {\n opacity: 1;\n }\n\n %igx-slider-thumb-label__container--pressed {\n z-index: 1;\n }\n}\n\n/// Adds typography styles for the igx-slider component.\n/// Uses the 'caption'\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 [(ticks-label: 'caption', thumb-label: 'caption')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin slider-typography(\n $type-scale,\n $categories: (\n ticks-label: 'caption',\n thumb-label: 'caption',\n )\n) {\n $ticks-label: map.get($categories, 'ticks-label');\n $thumb-label: map.get($categories, 'thumb-label');\n\n %igx-slider-thumb-label__container {\n @include type-style($type-scale, $thumb-label)\n }\n\n %igx-slider__tick-label {\n @include type-style($type-scale, $ticks-label)\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Set a custom background color\n/// $my-snackbar-theme: snackbar-theme($background: white);\n/// // Pass the theme to the snackbar component mixin\n/// @include snackbar($my-snackbar-theme);\n@function snackbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 @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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin snackbar($theme) {\n @include css-vars($theme);\n @include fade-in();\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\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-get($theme, 'text-color');\n background: var-get($theme, 'background');\n backface-visibility: hidden;\n box-shadow: var-get($theme, 'shadow');\n border-radius: var-get($theme, 'border-radius');\n backdrop-filter: blur(8px);\n }\n\n %igx-snackbar-message {\n @include animation('fade-in' .35s ease-out);\n }\n\n %igx-snackbar-button {\n background: transparent;\n color: var-get($theme, 'button-color');\n border: 0;\n line-height: $snackbar-button-line-height;\n margin-inline-start: $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 @include animation('fade-in' .35s ease-out);\n\n &:hover {\n color: var-get($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} type-style\n@mixin snackbar-typography($type-scale, $categories: (text: 'body-2')) {\n $text: map.get($categories, 'text');\n\n %igx-snackbar-message {\n @include type-style($type-scale, $text);\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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} $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} $track-on-hover-color [null] - The color of the track when the switch is on and hovered.\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} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled.\n/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled.\n/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and 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/// @param {Color} $border-color [null] - The border color of the switch.\n/// @param {Color} $border-hover-color [null] - The border color of the switch on hover.\n/// @param {Color} $border-disabled-color [null] - The border color of the switch when it is disabled.\n/// @param {Color} $border-on-color [null] - The border color when the switch is on.\n/// @param {Color} $border-on-hover-color [null] - The border color when the switch is on and hovered.\n/// @param {Color} $focus-outline-color [null] - The focus outlined color.\n/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.\n/// @param {Color} $focus-fill-color [null] - The focus fill color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n///\n/// @example scss Set custom track and thumb on colors\n/// $my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);\n/// // Pass the theme to the switch component mixin\n/// @include switch($my-switch-theme);\n@function switch-theme(\n $palette: null,\n $schema: $light-schema,\n\n $thumb-on-color: null,\n $track-on-color: null,\n $track-on-hover-color: null,\n\n $thumb-off-color: null,\n $track-off-color: null,\n\n $track-disabled-color: null,\n $track-on-disabled-color: null,\n $thumb-disabled-color: null,\n $thumb-on-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 $focus-outline-color: null,\n $focus-outline-color-focused: null,\n $focus-fill-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 @if not($resting-shadow) {\n $resting-elevation: map.get($switch-schema, 'resting-elevation');\n $resting-shadow: elevation($elevation: $resting-elevation);\n }\n\n @if not($hover-shadow) {\n $hover-elevation: map.get($switch-schema, 'hover-elevation');\n $hover-shadow: elevation($elevation: $hover-elevation);\n }\n\n @if not($disabled-shadow) {\n $disabled-elevation: map.get($switch-schema, 'disabled-elevation');\n $disabled-shadow: elevation($elevation: $disabled-elevation);\n }\n\n @if not($border-radius-track) {\n $border-radius-track: border-radius(map.get($theme, 'border-radius-track'));\n }\n \n @if not($border-radius-thumb) {\n $border-radius-thumb: border-radius(map.get($theme, 'border-radius-thumb'));\n }\n \n @if not($border-radius-ripple) {\n $border-radius-ripple: border-radius(map.get($theme, 'border-radius-ripple'));\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 track-on-hover-color: $track-on-hover-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 track-on-disabled-color: $track-on-disabled-color,\n thumb-disabled-color: $thumb-disabled-color,\n thumb-on-disabled-color: $thumb-on-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 focus-outline-color: $focus-outline-color,\n focus-outline-color-focused: $focus-outline-color-focused,\n focus-fill-color: $focus-fill-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} ripple\n/// @requires {mixin} hide-default\n/// @requires ripple-theme\n/// @requires em\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires var-get\n@mixin switch($theme) {\n @include css-vars($theme);\n @include scale-in-out($start-scale: .9);\n\n $variant: map.get($theme, variant);\n\n $switch-width: map.get((\n material: 36px,\n fluent: 40px,\n bootstrap: 32px,\n indigo-design: 34px\n ), $variant);\n\n $switch-height: map.get((\n material: 14px,\n fluent: 20px,\n bootstrap: 16px,\n indigo-design: 16px\n ), $variant);\n\n $switch-thumb-width: map.get((\n material: 20px,\n fluent: 12px,\n bootstrap: 10px,\n indigo-design: 8px\n ), $variant);\n\n $switch-on-offset: map.get((\n material: 1px,\n fluent: math.div($switch-thumb-width, 2),\n bootstrap: 4px,\n indigo-design: 7px\n ), $variant);\n\n $switch-off-offset: map.get((\n material: -1px,\n fluent: math.div($switch-thumb-width, 3),\n bootstrap: math.div($switch-thumb-width, 4),\n indigo-design: math.div($switch-thumb-width, 3),\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-resting-shadow: map.get((\n material: var-get($theme, 'resting-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-hover-shadow: map.get((\n material: var-get($theme, 'hover-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-disabled-shadow: map.get((\n material: var-get($theme, 'disabled-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $switch-thumb-height: $switch-thumb-width;\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $label-margin: em(8px);\n\n $input-transition: all .2s $ease-in-out-quad;\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'thumb-on-color')\n );\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-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-radius-track');\n background: var-get($theme, 'track-off-color');\n cursor: pointer;\n user-select: none;\n transition: $input-transition;\n\n @if $variant == 'indigo-design' {\n border: 2px solid var-get($theme, 'border-color');\n }\n\n @if $variant != 'bootstrap' {\n &:hover,\n &:focus {\n border-color: var-get($theme, 'border-hover-color');\n }\n }\n\n @if $variant == 'fluent' {\n &:hover {\n %switch-composite-thumb {\n background: var-get($theme, 'border-hover-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n }\n }\n }\n }\n\n %switch-composite--x {\n background: var-get($theme, 'track-on-color');\n border-color: var-get($theme, 'border-on-color');\n\n &:hover,\n &:focus {\n border-color: var-get($theme, 'border-on-hover-color');\n }\n\n @if $variant == 'fluent' {\n &:hover {\n background: var-get($theme, 'track-on-hover-color');\n }\n }\n }\n\n %switch-composite--disabled {\n background: var-get($theme, 'track-disabled-color');\n border-color: var-get($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-get($theme, 'border-radius-thumb');\n background: var-get($theme, 'thumb-off-color');\n box-shadow: $thumb-resting-shadow;\n transition: $input-transition;\n transform: translateX(#{rem($switch-off-offset)});\n\n [dir='rtl'] & {\n transform: translateX(#{rem(-1 * $switch-off-offset)});\n }\n\n @if $variant != 'bootstrap' {\n &:hover {\n box-shadow: $thumb-hover-shadow;\n }\n }\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});\n\n [dir='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-get($theme, 'thumb-disabled-color');\n box-shadow: $thumb-disabled-shadow;\n }\n\n %switch-ripple {\n @include ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: 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-get($theme, 'border-radius-ripple');\n }\n\n %igx-switch--focused {\n @if $variant == 'fluent' {\n %switch-composite {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n }\n\n @if $variant == 'bootstrap' {\n %switch-composite {\n border-color: var-get($theme, 'focus-fill-color');\n box-shadow: 0 0 0 4px var-get($theme, 'focus-outline-color');\n }\n\n %switch-composite-thumb {\n background: var-get($theme, 'focus-fill-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %switch-composite {\n border-radius: var-get($theme, 'border-radius-thumb');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-switch--focused-checked {\n @if $variant == 'bootstrap' {\n %switch-composite {\n border-color: var-get($theme, 'border-on-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %switch-composite {\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %igx-switch--disabled-checked {\n @if $variant != 'indigo-design' {\n %switch-composite--x {\n background: var-get($theme, 'track-on-disabled-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-disabled-color');\n }\n }\n\n @if $variant == 'bootstrap' or $variant == 'fluent'{\n %switch-composite--x {\n border-color: var-get($theme, 'track-on-disabled-color');\n }\n }\n }\n\n %switch-ripple--focused {\n background: var-get($theme, 'track-off-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %switch-ripple--focused-checked {\n background: var-get($theme, 'thumb-on-color');\n }\n\n %switch-label {\n display: inline-block;\n color: var-get($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-inline-start: $label-margin;\n }\n\n %switch-label--before {\n order: -1;\n margin-inline-end: $label-margin;\n }\n\n %switch-label--disabled {\n color: var-get($theme, 'label-disabled-color');\n }\n\n %switch-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %switch-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'track-off-color');\n }\n }\n\n %switch-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin switch-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %switch-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:math';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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} $step-background [null] - The background of the step header.\n/// @param {Color} $step-hover-background [null] - The background of the step header on hover.\n/// @param {Color} $step-focus-background [null] - The background of the step header on focus.\n/// @param {Color} $title-color [null] - The color of the step title.\n/// @param {Color} $title-hover-color [null] - The color of the step title on hover.\n/// @param {Color} $title-focus-color [null] - The color of the step title on focus.\n/// @param {Color} $subtitle-color [null] - The color of the step subtitle.\n/// @param {Color} $subtitle-hover-color [null] - The color of the step subtitle on hover.\n/// @param {Color} $subtitle-focus-color [null] - The color of the step subtitle on focus.\n/// @param {Color} $indicator-color [null] - The text color of the step indicator.\n/// @param {Color} $indicator-background [null] - The background color of the step indicator.\n/// @param {Color} $indicator-outline [null] - The outline color of the step indicator.\n///\n/// @param {Color} $invalid-step-background [null] - The background of the invalid step header.\n/// @param {Color} $invalid-step-hover-background [null] - The background of the invalid step header on hover.\n/// @param {Color} $invalid-step-focus-background [null] - The background of the invalid step header on focus.\n/// @param {Color} $invalid-title-color [null] - The color of the invalid step title.\n/// @param {Color} $invalid-title-hover-color [null] - The color of the invalid step title on hover.\n/// @param {Color} $invalid-title-focus-color [null] - The color of the invalid step title on focus.\n/// @param {Color} $invalid-subtitle-color [null] - The color of the invalid step subtitle.\n/// @param {Color} $invalid-subtitle-hover-color [null] - The color of the invalid step subtitle on hover.\n/// @param {Color} $invalid-subtitle-focus-color [null] - The color of the invalid step subtitle on focus.\n/// @param {Color} $invalid-indicator-color [null] - The color of the invalid step indicator.\n/// @param {Color} $invalid-indicator-background [null] - The background color of the invalid step indicator.\n/// @param {Color} $invalid-indicator-outline [null] - The outline color of the invalid step indicator.\n///\n/// @param {Color} $current-step-background [null] - The background of the current step header.\n/// @param {Color} $current-step-hover-background [null] - The background of the current step header on hover.\n/// @param {Color} $current-step-focus-background [null] - The background of the current step header on focus.\n/// @param {Color} $current-title-color [null] - The color of the current step title.\n/// @param {Color} $current-title-hover-color [null] - The color of the current step title on hover.\n/// @param {Color} $current-title-focus-color [null] - The color of the current step title on focus.\n/// @param {Color} $current-subtitle-color [null] - The color of the current step subtitle.\n/// @param {Color} $current-subtitle-hover-color [null] - The color of the current step subtitle on hover.\n/// @param {Color} $current-subtitle-focus-color [null] - The color of the current step subtitle on focus.\n/// @param {Color} $current-indicator-color [null] - The color of the current step indicator.\n/// @param {Color} $current-indicator-background [null] - The background color of the current step indicator.\n/// @param {Color} $current-indicator-outline [null] - The outline color of the current step indicator.\n///\n/// @param {Color} $complete-step-background [null] - The background of the complete step header.\n/// @param {Color} $complete-step-hover-background [null] - The background of the complete step header on hover.\n/// @param {Color} $complete-step-focus-background [null] - The background of the complete step header on focus.\n/// @param {Color} $complete-title-color [null] - The color of the complete step title.\n/// @param {Color} $complete-title-hover-color [null] - The color of the complete step title on hover.\n/// @param {Color} $complete-title-focus-color [null] - The color of the complete step title on focus.\n/// @param {Color} $complete-subtitle-color [null] - The color of the complete step subtitle.\n/// @param {Color} $complete-subtitle-hover-color [null] - The color of the complete step subtitle on hover.\n/// @param {Color} $complete-subtitle-focus-color [null] - The color of the complete step subtitle on focus.\n/// @param {Color} $complete-indicator-color [null] - The color of the completed step indicator.\n/// @param {Color} $complete-indicator-background [null] - The background color of the completed step indicator.\n/// @param {Color} $complete-indicator-outline [null] - The outline color of the completed step indicator.\n///\n/// @param {Color} $disabled-title-color [null] - The title color of the disabled step.\n/// @param {Color} $disabled-subtitle-color [null] - The subtitle color of the disabled step.\n/// @param {Color} $disabled-indicator-color [null] - The indicator color of the disabled step.\n/// @param {Color} $disabled-indicator-background [null] - The indicator background of the disabled step.\n/// @param {Color} $disabled-indicator-outline [null] - The indicator outline color of the disabled step.\n///\n/// @param {Color} $step-separator-color [null] - The separator border-color of between the steps.\n/// @param {Color} $complete-step-separator-color [null] - The separator border-color between the completed steps.\n///\n/// @param {Color} $step-separator-style [null] - The separator border-style of between the steps.\n/// @param {Color} $complete-step-separator-style [null] - The separator border-style between the completed steps.\n///\n/// @param {Color} $border-radius-indicator [null] - The border-radius of the step indicator.\n/// @param {Color} $border-radius-step-header [null] - The border-radius of the step header.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Set custom track and thumb on colors\n/// $my-stepper-theme: igx-stepper-theme();\n/// @include igx-stepper($my-stepper-theme);\n///\n/// @example scss Set custom steppet colors\n/// $my-stepper-theme: stepper-theme($step-hover-background: red);\n/// // Pass the theme to the stepper component mixin\n/// @include stepper($my-stepper-theme);\n@function stepper-theme(\n $palette: null,\n $schema: $light-schema,\n\n $step-background: null,\n $step-hover-background: null,\n $step-focus-background: null,\n\n $invalid-step-background: null,\n $invalid-step-hover-background: null,\n $invalid-step-focus-background: null,\n\n $current-step-background: null,\n $current-step-hover-background: null,\n $current-step-focus-background: null,\n\n $complete-step-background: null,\n $complete-step-hover-background: null,\n $complete-step-focus-background: null,\n\n // Incomplete\n $indicator-color: null,\n $indicator-background: null,\n $indicator-outline: null,\n\n $title-color: null,\n $title-hover-color: null,\n $title-focus-color: null,\n\n $subtitle-color: null,\n $subtitle-hover-color: null,\n $subtitle-focus-color: null,\n\n // Invalid\n $invalid-indicator-color: null,\n $invalid-indicator-background: null,\n $invalid-indicator-outline: null,\n\n $invalid-title-color: null,\n $invalid-title-hover-color: null,\n $invalid-title-focus-color: null,\n\n $invalid-subtitle-color: null,\n $invalid-subtitle-hover-color: null,\n $invalid-subtitle-focus-color: null,\n\n // Current\n $current-indicator-color: null,\n $current-indicator-background: null,\n $current-indicator-outline: null,\n\n $current-title-color: null,\n $current-title-hover-color: null,\n $current-title-focus-color: null,\n\n $current-subtitle-color: null,\n $current-subtitle-hover-color: null,\n $current-subtitle-focus-color: null,\n\n // complete\n $complete-indicator-color: null,\n $complete-indicator-background: null,\n $complete-indicator-outline: null,\n\n $complete-title-color: null,\n $complete-title-hover-color: null,\n $complete-title-focus-color: null,\n\n $complete-subtitle-color: null,\n $complete-subtitle-hover-color: null,\n $complete-subtitle-focus-color: null,\n\n // Disabled\n $disabled-indicator-color: null,\n $disabled-indicator-background: null,\n $disabled-indicator-outline: null,\n $disabled-title-color: null,\n $disabled-subtitle-color: null,\n\n // Separator\n $step-separator-color: null,\n $complete-step-separator-color: null,\n\n $step-separator-style: null,\n $complete-step-separator-style: null,\n\n // Border-radius\n $border-radius-indicator: null,\n $border-radius-step-header: null,\n) {\n $name: 'igx-stepper';\n $selector: 'igx-stepper';\n $stepper-schema: ();\n\n @if map.has-key($schema, $name) {\n $stepper-schema: map.get($schema, $name);\n } @else {\n $stepper-schema: $schema;\n }\n\n $theme: apply-palette($stepper-schema, $palette);\n\n @if not($indicator-background) and $step-background {\n $indicator-background: text-contrast($step-background);\n }\n\n @if not($indicator-color) and $indicator-background {\n $indicator-color: text-contrast($indicator-background);\n }\n\n @if not($complete-indicator-color) and $complete-indicator-background {\n $complete-indicator-color: text-contrast($complete-indicator-background);\n }\n\n @if not($invalid-indicator-color) and $invalid-indicator-background {\n $invalid-indicator-color: text-contrast($invalid-indicator-background);\n }\n\n @if not($current-indicator-color) and $current-indicator-background {\n $current-indicator-color: text-contrast($current-indicator-background);\n }\n\n @if not($title-color) and $step-background {\n $title-color: text-contrast($step-background);\n }\n\n @if not($subtitle-color) and $step-background {\n $subtitle-color: text-contrast($step-background);\n }\n\n @if not($title-hover-color) and $step-hover-background {\n $title-hover-color: text-contrast($step-hover-background);\n }\n\n @if not($subtitle-hover-color) and $step-hover-background {\n $subtitle-hover-color: text-contrast($step-hover-background);\n }\n\n @if not($title-focus-color) and $step-focus-background {\n $title-focus-color: text-contrast($step-focus-background);\n }\n\n @if not($subtitle-focus-color) and $step-focus-background {\n $subtitle-focus-color: text-contrast($step-focus-background);\n }\n\n @if not($border-radius-indicator) {\n $border-radius-indicator: border-radius(map.get($theme, 'border-radius-indicator'));\n }\n\n @if not($border-radius-step-header) {\n $border-radius-step-header: border-radius(map.get($theme, 'border-radius-step-header'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n selector: $selector,\n\n // Incomplete\n step-background: $step-background,\n step-hover-background: $step-hover-background,\n step-focus-background: $step-focus-background,\n indicator-color: $indicator-color,\n indicator-background: $indicator-background,\n indicator-outline: $indicator-outline,\n title-color: $title-color,\n title-hover-color: $title-hover-color,\n title-focus-color: $title-focus-color,\n subtitle-color: $subtitle-color,\n subtitle-hover-color: $subtitle-hover-color,\n subtitle-focus-color: $subtitle-focus-color,\n\n // Invalid\n invalid-step-background: $invalid-step-background,\n invalid-step-hover-background: $invalid-step-hover-background,\n invalid-step-focus-background: $invalid-step-focus-background,\n invalid-indicator-color: $invalid-indicator-color,\n invalid-indicator-background: $invalid-indicator-background,\n invalid-indicator-outline: $invalid-indicator-outline,\n invalid-title-color: $invalid-title-color,\n invalid-title-hover-color: $invalid-title-hover-color,\n invalid-title-focus-color: $invalid-title-focus-color,\n invalid-subtitle-color: $invalid-subtitle-color,\n invalid-subtitle-hover-color: $invalid-subtitle-hover-color,\n invalid-subtitle-focus-color: $invalid-subtitle-focus-color,\n\n // Current\n current-step-background: $current-step-background,\n current-step-hover-background: $current-step-hover-background,\n current-step-focus-background: $current-step-focus-background,\n current-indicator-color: $current-indicator-color,\n current-indicator-background: $current-indicator-background,\n current-indicator-outline: $current-indicator-outline,\n current-title-color: $current-title-color,\n current-title-hover-color: $current-title-hover-color,\n current-title-focus-color: $current-title-focus-color,\n current-subtitle-color: $current-subtitle-color,\n current-subtitle-hover-color: $current-subtitle-hover-color,\n current-subtitle-focus-color: $current-subtitle-focus-color,\n\n // Complete\n complete-step-background: $complete-step-background,\n complete-step-hover-background: $complete-step-hover-background,\n complete-step-focus-background: $complete-step-focus-background,\n complete-indicator-color: $complete-indicator-color,\n complete-indicator-background: $complete-indicator-background,\n complete-indicator-outline: $complete-indicator-outline,\n complete-title-color: $complete-title-color,\n complete-title-hover-color: $complete-title-hover-color,\n complete-title-focus-color: $complete-title-focus-color,\n complete-subtitle-color: $complete-subtitle-color,\n complete-subtitle-hover-color: $complete-subtitle-hover-color,\n complete-subtitle-focus-color: $complete-subtitle-focus-color,\n\n // Disabled\n disabled-indicator-color: $disabled-indicator-color,\n disabled-indicator-background: $disabled-indicator-background,\n disabled-indicator-outline: $disabled-indicator-outline,\n disabled-title-color: $disabled-title-color,\n disabled-subtitle-color: $disabled-subtitle-color,\n\n // Separator\n step-separator-color: $step-separator-color,\n complete-step-separator-color: $complete-step-separator-color,\n step-separator-style: $step-separator-style,\n complete-step-separator-style: $complete-step-separator-style,\n\n // Border-radius\n border-radius-indicator: $border-radius-indicator,\n border-radius-step-header: $border-radius-step-header,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin stepper($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $indicator-size: map.get((\n material: rem(24px),\n fluent: rem(24px),\n bootstrap: rem(40px),\n indigo-design: rem(24px)\n ), $variant);\n\n $step-header-padding: map.get((\n material: rem(24px),\n fluent: rem(8px),\n bootstrap: rem(24px),\n indigo-design: rem(16px)\n ), $variant);\n\n $step-header-padding-simple: map.get((\n material: rem(8px),\n fluent: rem(8px),\n bootstrap: rem(16px),\n indigo-design: rem(8px)\n ), $variant);\n\n $step-body-padding: rem(16px);\n $title-gap: rem(8px);\n $indicator-gap: rem(4px);\n $indicator-padding: rem(2px);\n $v-line-indent: calc(#{$step-header-padding} + (#{$indicator-size} / 2));\n $separator-position: 50%;\n\n $outline-width: map.get((\n material: rem(1px),\n fluent: rem(1px),\n bootstrap: rem(1px),\n indigo-design: rem(2px)\n ), $variant);\n\n $separator-size: map.get((\n material: rem(1px),\n fluent: rem(1px),\n bootstrap: rem(8px),\n indigo-design: rem(2px)\n ), $variant);\n\n $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2)));\n $separator-title-bottom: calc((#{$indicator-size} / 2) + #{$step-header-padding} - (#{$separator-size} / 2));\n\n %stepper-display,\n %igx-stepper__header,\n %igx-stepper__body,\n %igx-stepper__step {\n display: flex;\n }\n\n %stepper-display {\n flex-direction: column;\n width: 100%;\n }\n\n %igx-stepper__header {\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n }\n\n %igx-stepper__body {\n position: relative\n }\n\n %stepper-display,\n %igx-stepper__body,\n %igx-stepper__step-header,\n %igx-stepper__step-title-wrapper {\n overflow: hidden;\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'subtitle-color');\n }\n\n %igx-stepper__step {\n position: relative;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n min-width: rem(100px);\n\n &:focus {\n outline: none;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'subtitle-focus-color');\n }\n\n %igx-stepper__step-header {\n background: var-get($theme, 'step-focus-background');\n color: var-get($theme, 'title-focus-color');\n\n @if $variant == 'bootstrap' {\n box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline');\n }\n }\n\n %igx-stepper__step-header--current {\n background: var-get($theme, 'current-step-focus-background') !important;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-focus-color');\n }\n }\n\n %igx-stepper__step-header--invalid {\n background: var-get($theme, 'invalid-step-focus-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-focus-color');\n }\n }\n }\n\n &:first-of-type {\n %igx-stepper__step-header {\n &::before {\n visibility: hidden;\n }\n }\n }\n\n &:last-of-type {\n %igx-stepper__step-content-wrapper {\n &::before {\n display: none;\n }\n }\n\n %igx-stepper__step-header {\n &::after {\n visibility: hidden;\n }\n }\n }\n }\n\n %igx-stepper__step-header {\n display: flex;\n padding: $step-header-padding;\n position: relative;\n line-height: normal;\n flex-direction: column;\n align-items: flex-start;\n gap: $title-gap;\n cursor: pointer;\n background: var-get($theme, 'step-background');\n border-radius: var-get($theme, 'border-radius-step-header');\n\n &:hover {\n background: var-get($theme, 'step-hover-background');\n color: var-get($theme, 'title-hover-color');\n }\n\n @if $variant != material {\n .igx-ripple__inner {\n display: none;\n }\n }\n }\n\n %igx-stepper__step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-size: rem(12px);\n height: $indicator-size;\n width: $indicator-size;\n white-space: nowrap;\n border-radius: var-get($theme, 'border-radius-indicator');\n color: var-get($theme, 'indicator-color');\n background: var-get($theme, 'indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline');\n\n @if $variant != 'bootstrap' {\n > igx-icon {\n width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n color: inherit;\n }\n } @else if $variant == 'bootstrap' {\n > igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n div > igx-icon,\n div > igx-avatar,\n div > igx-circular-bar {\n max-height: $indicator-size;\n max-width: $indicator-size;\n }\n }\n\n %igx-stepper__step-header--current {\n background: var-get($theme, 'current-step-background') !important;\n color: var-get($theme, 'current-title-color');\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'current-indicator-color') !important;\n background: var-get($theme, 'current-indicator-background') !important;\n box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important;\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-color');\n }\n\n &:hover {\n background: var-get($theme, 'current-step-hover-background') !important;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-hover-color');\n }\n }\n }\n\n %igx-stepper__step--disabled {\n color: var-get($theme, 'disabled-title-color');\n pointer-events: none;\n cursor: default;\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'disabled-indicator-color');\n background: var-get($theme, 'disabled-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'disabled-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'disabled-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'disabled-subtitle-color');\n }\n }\n\n %igx-stepper__step-header--invalid {\n background: var-get($theme, 'invalid-step-background');\n color: var-get($theme, 'invalid-title-color');\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'invalid-indicator-color');\n background: var-get($theme, 'invalid-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'invalid-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-color');\n }\n\n &:hover {\n background: var-get($theme, 'invalid-step-hover-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-hover-color');\n }\n }\n }\n\n %igx-stepper__body-content {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: -1;\n }\n\n %igx-stepper__step-content-wrapper,\n %igx-stepper__body-content {\n padding: $step-body-padding;\n }\n\n %igx-stepper__body-content--active {\n z-index: 1;\n position: relative;\n }\n\n %igx-stepper__step-content-wrapper {\n margin-inline-start: $v-line-indent;\n position: relative;\n min-height: rem(32px);\n\n &::before {\n content: '';\n position: absolute;\n inset-inline-start: calc(-#{$separator-size} / 2);\n top: calc(-#{$step-header-padding} + #{$title-gap});\n bottom: calc(-#{$step-header-padding} + #{$title-gap});\n width: $separator-size;\n border-inline-start: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n }\n\n %igx-stepper__step-title-wrapper {\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: rem(32px);\n\n &:empty {\n display: none;\n }\n\n > * {\n display: block;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--end {\n %igx-stepper__step-header {\n flex-direction: row;\n align-items: center;\n //gap: $title-gap--horizontal;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--top {\n %igx-stepper__step-title-wrapper {\n order: -1;\n }\n }\n\n %igx-stepper__step--completed {\n\n %igx-stepper__step-header {\n background: var-get($theme, 'complete-step-background');\n\n &:hover {\n background: var-get($theme, 'complete-step-hover-background');\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-hover-color');\n }\n }\n\n &::after {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n }\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'complete-indicator-color');\n background: var-get($theme, 'complete-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-color');\n }\n\n &:focus {\n %igx-stepper__step-header {\n background: var-get($theme, 'complete-step-focus-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-focus-color');\n }\n }\n }\n\n %igx-stepper__step-content-wrapper {\n &::before {\n border-inline-start-style: unquote(var-get($theme, 'complete-step-separator-style'));\n border-inline-start-color: var-get($theme, 'complete-step-separator-color');\n }\n }\n }\n\n %igx-stepper__step--completed + %igx-stepper__step {\n &::before {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n\n %igx-stepper__step-header {\n &::before {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n }\n }\n\n %igx-stepper__step--simple {\n %igx-stepper__step-indicator {\n min-width: $indicator-size;\n min-height: $indicator-size;\n width: initial;\n height: initial;\n\n div > igx-icon,\n div > igx-avatar,\n div > igx-circular-bar {\n max-width: initial;\n max-height: initial;\n }\n }\n }\n\n // HORIZONTAL MODE START\n %igx-stepper--horizontal {\n %igx-stepper__header {\n flex-direction: row;\n }\n\n %igx-stepper__step {\n overflow: hidden;\n flex-direction: row;\n flex-grow: 1;\n\n &::before {\n content: '';\n width: auto;\n min-width: rem(10px);\n height: $separator-size;\n flex: 1;\n position: relative;\n z-index: -1;\n top: $separator-title-bottom;\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n\n &:first-of-type {\n flex-grow: 0;\n min-width: 0;\n\n &::before {\n display: none;\n }\n }\n }\n\n %igx-stepper__step-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: -1;\n height: $separator-size;\n width: calc(50% - (#{$indicator-size} - #{$indicator-gap}));\n top: $separator-title-bottom;\n flex: 1;\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n\n &::before {\n inset-inline-start: 0;\n }\n\n &::after {\n inset-inline-end: 0;\n }\n }\n\n %igx-stepper__step--simple {\n text-align: center;\n\n %igx-stepper__step-header {\n align-self: center;\n padding: $step-header-padding-simple;\n height: auto;\n\n &::before,\n &::after {\n display: none;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n top: calc(50% - (#{$separator-size} / 2));\n }\n }\n }\n\n %igx-stepper__step-title-wrapper {\n width: 100%;\n }\n\n %igx-stepper__step--top {\n %igx-stepper__step-header {\n justify-content: flex-end;\n\n &::before,\n &::after {\n top: $separator-title-top;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n top: $separator-title-top;\n }\n }\n }\n\n %igx-stepper__step--bottom {\n %igx-stepper__step-header {\n justify-content: flex-start;\n }\n }\n\n %igx-stepper__step--top,\n %igx-stepper__step--bottom {\n %igx-stepper__step-title-wrapper {\n text-align: center;\n }\n\n %igx-stepper__step-header {\n flex-direction: column;\n }\n }\n\n %igx-stepper__step--start {\n %igx-stepper__step-title-wrapper {\n text-align: end;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--end {\n %igx-stepper__step-indicator {\n flex: 1 0 auto;\n }\n\n %igx-stepper__step-header {\n @if $variant != 'fluent' {\n padding: calc(#{$step-header-padding} / 2);\n }\n\n &::before,\n &::after {\n display: none;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n top: calc(50% - (#{$separator-size} / 2));\n }\n }\n }\n\n %igx-stepper__step-content {\n &:focus {\n outline: none;\n }\n\n &::before {\n display: none;\n }\n }\n\n %igx-stepper__step-content-wrapper {\n text-align: center;\n }\n }\n // HORIZONTAL MODE END\n}\n\n/// Adds typography styles for the igx-stepper 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 [(title: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin stepper-typography(\n $type-scale,\n $categories: (\n title: 'body-2',\n subtitle: 'caption'\n )\n) {\n $title: map.get($categories, 'title');\n $subtitle: map.get($categories, 'subtitle');\n\n %igx-stepper__step-title {\n @include type-style($type-scale, $title) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-stepper__step-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-stepper__step-header--current {\n %igx-stepper__step-title {\n font-weight: 600;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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-icon-color [null] - The color used for the tab icon.\n/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.\n/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.\n/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.\n///\n/// @param {Color} $item-active-color [null] - The color used for the active tabs text.\n/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.\n/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.\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-disabled-color [null] - The color used for the disabled button icon/text.\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 {border-radius} $border-radius [null] - The border radius for the tabs.\n/// @param {Color} $border-color [null] - The border color of the tabs.\n/// @param {Color} $border-color--hover [null] - The border color of the tabs 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///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n/// @requires text-contrast\n///\n/// @example scss Set a custom background color\n/// $my-tabs-theme: tabs-theme(\n/// $item-background: orange\n/// );\n/// // Pass the theme to the tabs component mixin\n/// @include tabs($my-tabs-theme);\n@function tabs-theme(\n $palette: null,\n $schema: $light-schema,\n $item-text-color: null,\n $item-background: null,\n $item-hover-background: null,\n $item-hover-color: null,\n $item-icon-color: null,\n $item-active-icon-color: null,\n $item-hover-icon-color: null,\n $item-disabled-icon-color: null,\n $item-active-color: null,\n $item-active-background: null,\n $item-disabled-color: null,\n $indicator-color: null,\n $button-color: null,\n $button-background: null,\n $button-hover-background: null,\n $button-hover-color: null,\n $button-disabled-color: null,\n $tab-ripple-color: null,\n $button-ripple-color: null,\n $border-radius: null,\n $border-color: null,\n $border-color--hover: null,\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 $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'boostrap';\n\n @if not($item-text-color) and $item-background {\n @if meta.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 // 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 meta.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 meta.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 meta.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 // 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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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-icon-color: $item-icon-color,\n item-active-icon-color: $item-active-icon-color,\n item-hover-icon-color: $item-hover-icon-color,\n item-disabled-icon-color: $item-disabled-icon-color,\n item-active-color: $item-active-color,\n item-active-background: $item-active-background,\n item-disabled-color: $item-disabled-color,\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 button-disabled-color:$button-disabled-color,\n tab-ripple-color: $tab-ripple-color,\n button-ripple-color: $button-ripple-color,\n border-color: $border-color,\n border-radius: $border-radius,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires ripple-theme\n/// @requires {mixin} ripple\n/// @requires elevation\n/// @requires rem\n/// @requires var-get\n@mixin tabs($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-bootstrap-theme: $variant != 'bootstrap';\n $bootstrap-theme: $variant == 'bootstrap';\n $indigo-theme: $variant == 'indigo-design';\n\n $item-min-width: 90px;\n $item-max-width: 360px;\n\n $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);\n\n $item-padding: rem(11px) rem(16px);\n\n $tabs-ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'tab-ripple-color')\n );\n $button-ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'button-ripple-color')\n );\n\n $icon-space: (\n comfortable: rem(12px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n %tabs-header,\n %tabs-header-button,\n %tabs-header-item-inner,\n %tabs-header-content {\n display: flex;\n }\n\n %tabs-display {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n %tabs-header {\n overflow: hidden;\n flex: 0 0 auto;\n background: var-get($theme, 'item-background');\n min-height: rem(42px);\n z-index: 1;\n }\n\n %tabs-header-content {\n flex: 1 1 auto;\n overflow: hidden;\n scroll-behavior: smooth;\n }\n\n %tabs-header-wrapper {\n position: relative;\n flex-grow: 1;\n\n @if $bootstrap-theme {\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 1px;\n background: var-get($theme, 'border-color');\n z-index: 0;\n }\n }\n }\n\n %tabs-header-scroll {\n display: flex;\n height: 100%;\n }\n\n %tabs-header-button {\n align-items: center;\n justify-content: center;\n z-index: 1;\n border: none;\n padding: 0;\n min-width: rem(48px);\n width: rem(48px);\n cursor: pointer;\n position: relative;\n background: var-get($theme, 'button-background');\n color: var-get($theme, 'button-color');\n outline: 0;\n\n &:hover {\n background: var-get($theme, 'button-hover-background');\n color: var-get($theme, 'button-hover-color');\n }\n\n &:focus {\n outline: 0;\n background: var-get($theme, 'button-hover-background');\n }\n\n &::-moz-focus-inner {\n // remove focus dotted border in firefox\n border: 0;\n }\n\n &:disabled {\n color: var-get($theme, 'button-disabled-color');\n }\n\n &--none {\n display: none;\n }\n\n\n @include ripple($button-ripple-theme);\n @include css-vars($button-ripple-theme);\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %tabs-header-item {\n > * {\n margin-inline-start: map.get($icon-space, 'comfortable');\n \n &:first-child {\n margin-inline-start: 0;\n }\n }\n display: inline-flex;\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 // 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 user-select: none;\n background: var-get($theme, 'item-background');\n color: var-get($theme, 'item-text-color');\n outline: 0;\n\n igx-icon { \n color: var-get($theme, 'item-icon-color');\n }\n\n @if $bootstrap-theme {\n border: 1px solid transparent;\n border-start-start-radius: var-get($theme, 'border-radius');\n border-start-end-radius: var-get($theme, 'border-radius');\n }\n\n @if $indigo-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n background: var-get($theme, 'item-active-background');\n color: var-get($theme, 'item-hover-color');\n border-bottom-color: transparent;\n }\n\n &:hover {\n background: var-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-color');\n\n @if $bootstrap-theme {\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');\n }\n }\n\n &:hover,\n &:focus {\n igx-icon {\n color: var-get($theme, 'item-hover-icon-color');\n }\n }\n\n @if $bootstrap-theme {\n border-start-start-radius: border-radius(var-get($theme, 'border-radius'));\n border-start-end-radius: border-radius(var-get($theme, 'border-radius'));\n }\n\n @if $not-bootstrap-theme {\n transition: all .3s $tabs-animation-function;\n border: 1px solid var-get($theme, 'border-color');\n\n &:hover,\n &:focus {\n border: 1px solid var-get($theme, 'border-color--hover');\n }\n }\n\n @if $indigo-theme {\n border-top: transparent;\n border-inline: transparent;\n\n &:hover,\n &:focus {\n border-top: transparent;\n border-inline: transparent;\n }\n }\n\n @include ripple($tabs-ripple-theme);\n @include css-vars($tabs-ripple-theme);\n }\n\n %tabs-header-item--selected {\n outline: 0;\n color: var-get($theme, 'item-active-color');\n\n &:hover,\n &:focus {\n background: var-get($theme, 'item-active-background');\n color: var-get($theme, 'item-active-color');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n }\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n\n @if $bootstrap-theme {\n background: var-get($theme, 'item-active-background');\n position: relative;\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 1px;\n background: var-get($theme, 'item-active-background');\n z-index: 1;\n }\n\n &:hover {\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');\n }\n }\n }\n\n %tabs-header-item:focus,\n %tabs-header-item--selected:focus {\n @if $bootstrap-theme {\n border: none;\n box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');\n border-radius: rem(4px);\n z-index: 1;\n\n &::after {\n display: none;\n }\n }\n }\n\n %tabs-header-item--disabled {\n outline: 0;\n color: var-get($theme, 'item-disabled-color');\n cursor: default;\n pointer-events: none;\n\n igx-icon {\n color: var-get($theme, 'item-disabled-icon-color');\n }\n }\n\n %tabs-header-item-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n\n > [igxtabheaderlabel] {\n @include line-clamp(2, true, true);\n }\n\n > [igxtabheadericon] {\n margin-bottom: rem(8px);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n %tabs-header-active-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-get($theme, 'indicator-color');\n transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %tabs-panels {\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n }\n\n %tabs-panel {\n position: absolute;\n inset: 0;\n overflow-x: hidden;\n overflow-y: auto;\n flex: 1 1 auto;\n\n &::-moz-focus-inner {\n // remove focus dotted border in firefox\n border: 0;\n }\n\n &:focus {\n outline-width: 0;\n }\n\n &[tabindex='0'] {\n position: relative;\n }\n }\n\n %tabs-header-scroll--start {\n justify-content: flex-start;\n }\n\n %tabs-header-scroll--end {\n justify-content: flex-end;\n }\n\n %tabs-header-scroll--center {\n justify-content: center;\n }\n\n %tabs-header-scroll--justify {\n %tabs-header-item {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\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} type-style\n@mixin tabs-typography($type-scale, $categories: (label: 'button')) {\n $label: map.get($categories, 'label');\n\n %tabs-header-item-inner > [igxtabheaderlabel]{\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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} $disabled-text-color [null] - The text color for disabled values.\n/// @param {Color} $disabled-item-background [null] - The background color for disabled values .\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 elevation\n/// @requires extend\n///\n/// @example scss Change the background and text colors in time picker\n/// $my-time-picker-theme: time-picker-theme(\n/// $text-color: white,\n/// $background-color: black\n/// );\n/// // Pass the theme to the time-picker component mixin\n/// @include time-picker($my-time-picker-theme);\n@function time-picker-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $disabled-text-color: null,\n $disabled-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 $selector: '.igx-time-picker';\n\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 @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 meta.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 meta.type-of($background-color) == 'color' {\n $active-item-background: rgba(text-contrast($background-color), .12);\n }\n }\n\n @if not($disabled-text-color) and $disabled-item-background {\n @if meta.type-of($disabled-item-background) == 'color' {\n $disabled-text-color: rgba(text-contrast($disabled-item-background), .6);\n }\n }\n\n @if not($modal-shadow) {\n $elevation: map.get($time-picker-schema, 'modal-elevation');\n $modal-shadow: elevation($elevations, $elevation);\n }\n\n @if not($dropdown-shadow) {\n $elevation: map.get($time-picker-schema, 'dropdown-elevation');\n $dropdown-shadow: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($active-item-border-radius) {\n $active-item-border-radius: border-radius(map.get($theme, 'active-item-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 disabled-text-color: $disabled-text-color,\n disabled-item-background: $disabled-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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin time-picker($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $vertical-header-width: rem(168px);\n\n $picker-buttons-padding: map.get((\n material: rem(8px),\n fluent: rem(8px),\n bootstrap: rem(16px)\n ), $variant);\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-get($theme, 'border-radius');\n box-shadow: var-get($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-get($theme, 'background-color');\n flex: 1 1 auto;\n }\n\n %time-picker--dropdown {\n min-width: rem(200px);\n box-shadow: var-get($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: end;\n\n [dir='rtl'] & {\n order: 2;\n }\n }\n\n %time-picker__minuteList {\n text-align: center;\n\n [dir='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 [dir='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-get($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-get($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-get($theme, 'hover-text-color');\n }\n }\n\n %time-picker__item--selected {\n font-size: rem(24px);\n color: var-get($theme, 'selected-text-color');\n }\n\n %time-picker__item--active {\n background: var-get($theme, 'active-item-background');\n }\n\n %time-picker__item--disabled {\n color: var-get($theme, 'disabled-text-color');\n background: var-get($theme, 'disabled-item-background');\n pointer-events: none;\n }\n\n %time-picker__header {\n background: var-get($theme, 'header-background');\n padding: rem(24px) rem(16px);\n }\n\n %time-picker__header-ampm {\n color: var-get($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-get($theme, 'header-hour-text-color');\n\n [dir='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 @if $not-bootstrap-theme {\n height: rem(52px);\n }\n\n padding: $picker-buttons-padding;\n\n [igxButton] + [igxButton] {\n margin-inline-start: 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} type-style\n@mixin 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 type-style($type-scale, $time-period);\n }\n\n %time-picker__header-hour {\n @include type-style($type-scale, $header-hour) {\n margin-top: 0;\n }\n }\n\n %time-picker__column {\n @include type-style($type-scale, $content) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast.\n///\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n/// @requires elevation\n///\n/// @example scss Set a custom background color\n/// $my-toast-theme: toast-theme($background: green);\n/// // Pass the theme to the toast component mixin\n/// @include toast($my-toast-theme);\n@function toast-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background: null,\n $text-color: null,\n $shadow: 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 @if not($shadow) {\n $elevation: map.get($toast-schema, 'elevation');\n $shadow: elevation($elevation: $elevation);\n }\n\n @if not($text-color) and $background {\n $text-color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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 shadow: $shadow\n ));\n}\n\n/// Toast Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin toast($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $palette: map.get($theme, 'palette');\n $width: 52px;\n $margin: rem(42px) auto;\n\n $padding: map.get((\n 'material': rem(16px) rem(24px),\n 'fluent': rem(16px) rem(24px),\n 'bootstrap': rem(12px),\n 'indigo-design': rem(14px) rem(24px)\n ), $variant);\n\n $border: map.get((\n 'material': none,\n 'fluent': none,\n 'bootstrap': 1px solid color($palette, 'grays', 300),\n 'indigo-design': none\n ), $variant);\n\n %igx-toast-display {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: $margin;\n padding: $padding;\n min-width: $width;\n color: var-get($theme, 'text-color');\n background: var-get($theme, 'background');\n border: $border;\n border-radius: var-get($theme, 'border-radius');\n box-shadow: map.get($theme, 'shadow');\n backdrop-filter: blur(10px);\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} type-style\n@mixin toast-typography($type-scale, $categories: (text: 'body-2')) {\n $text: map.get($categories, 'text');\n\n %igx-toast-display > *{\n @include type-style($type-scale, $text) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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///\n/// @example scss Change the tooltip background\n/// $my-tooltip-theme: tooltip-theme($background: magenta);\n/// // Pass the theme to the tooltip component mixin\n/// @include tooltip($my-checkbox-theme);\n@function tooltip-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background: null,\n $text-color: null\n) {\n $name: 'igx-tooltip';\n $selector: '.igx-tooltip--desktop, .igx-tooptip--mobile';\n\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 @if not($text-color) and $background {\n $text-color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $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} css-vars\n/// @requires var-get\n@mixin tooltip($theme) {\n @include css-vars($theme);\n\n %tooltip-display {\n display: inline-flex;\n justify-content: center;\n flex-flow: column wrap;\n background: var-get($theme, 'background');\n color: var-get($theme, 'text-color');\n border-radius: var-get($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} type-style\n@mixin 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 type-style($type-scale, $text-mobile);\n }\n\n @if $text-desktop != null {\n %tooltip--desktop {\n @include 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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n\n////\n/// @group themes\n/// @access public\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 of the tree component.\n/// @param {Map} $palette [null] - 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} background [null] - The background color used for the tree node.\n/// @param {Color} foreground [null] - The color used for the tree node content.\n/// @param {Color} background-selected [null] - The background color used for the selected tree node.\n/// @param {Color} foreground-selected [null] - The color used for the content of the selected tree node.\n/// @param {Color} background-active [null] - The background color used for the active tree node.\n/// @param {Color} foreground-active [null] - The color used for the content of the active tree node.\n/// @param {Color} background-active-selected [null] - The background color used for the active selected tree node.\n/// @param {Color} foreground-active-selected [null] - The color used for the content of the active selected tree node.\n/// @param {Color} background-disabled [null] - The background color used for the tree node in disabled state.\n/// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node.\n/// @param {Color} drop-area-color [null] - The background color used for the tree node drop aria.\n/// @param {Color} border-color [null] - The outline shadow color used for tree node in focus state.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @example scss Change the tree background\n/// $my-tree-theme: tree-theme($background: magenta);\n/// // Pass the theme to the tree component mixin\n/// @include tree($my-tree-theme);\n@function tree-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null,\n $background-selected: null,\n $background-active: null,\n $background-active-selected: null,\n $background-disabled: null,\n $foreground: null,\n $foreground-selected: null,\n $foreground-active: null,\n $foreground-active-selected: null,\n $foreground-disabled: null,\n $drop-area-color: null,\n $border-color: null,\n) {\n $name: 'igx-tree';\n $tree-schema: ();\n\n @if map.has-key($schema, $name) {\n $tree-schema: map.get($schema, $name);\n } @else {\n $tree-schema: $schema;\n }\n\n $theme: apply-palette($tree-schema, $palette);\n\n @if not($foreground) and $background {\n $foreground: text-contrast($background);\n }\n\n @if not($foreground-selected) and $background-selected {\n $foreground-selected: text-contrast($background-selected);\n }\n\n @if not($foreground-active) and $background-active {\n $foreground-active: text-contrast($background-active);\n }\n\n @if not($foreground-active-selected) and $background-active-selected {\n $foreground-active-selected: text-contrast($background-active-selected);\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n foreground: $foreground,\n background-selected: $background-selected,\n foreground-selected: $foreground-selected,\n background-active: $background-active,\n foreground-active: $foreground-active,\n background-active-selected: $background-active-selected,\n foreground-active-selected: $foreground-active-selected,\n background-disabled: $background-disabled,\n foreground-disabled: $foreground-disabled,\n drop-area-color: $drop-area-color,\n border-color: $border-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin tree($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $indigo-theme: $variant == 'indigo-design';\n\n $node-indent: (\n comfortable: rem(24px),\n cosy: rem(16px),\n compact: rem(12px)\n );\n\n $node-height: (\n comfortable: rem(50px),\n cosy: rem(40px),\n compact: rem(32px)\n );\n\n $icon-size: rem(24px);\n $icon-space: rem(8px);\n\n $drop-indicator-width: (\n comfortable: calc(100% - ((#{map.get($node-indent, 'comfortable')} * 2) + (#{$icon-size} + #{$icon-space}))),\n cosy: calc(100% - ((#{map.get($node-indent, 'cosy')} * 2) + (#{$icon-size} + #{$icon-space}))),\n compact: calc(100% - ((#{map.get($node-indent, 'compact')} * 2) + (#{$icon-size} + #{$icon-space})))\n );\n\n %tree-display {\n display: block;\n z-index: 0;\n overflow-y: auto;\n }\n\n %tree-node,\n %node-wrapper,\n %node-toggle-button,\n %node-content,\n %node-select {\n display: flex;\n }\n\n %tree-node {\n flex-direction: column;\n }\n\n %node-wrapper,\n %node-toggle-button,\n %node-select {\n align-items: center;\n }\n\n %node-toggle-button,\n %node-select {\n margin-inline-end: $icon-space;\n }\n\n %node-content,\n %node-toggle-button,\n %node-select {\n z-index: 1;\n }\n\n %node-toggle-button--hidden {\n visibility: hidden;\n }\n\n %node-wrapper {\n min-height: map.get($node-height, 'comfortable');\n padding: 0 map.get($node-indent, 'comfortable');\n position: relative;\n background: var-get($theme, 'background');\n color: var-get($theme, 'foreground');\n\n // We need this here, since we count on it to calculate the width of the tree drop indicator\n igx-icon {\n width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n z-index: 0;\n }\n\n &:hover {\n &::after {\n background: var-get($theme, 'hover-color');\n }\n }\n\n &:focus {\n outline-width: 0;\n }\n\n igx-circular-bar {\n width: $icon-size;\n height: $icon-size;\n }\n\n &--cosy {\n min-height: map.get($node-height, 'cosy');\n padding: 0 map.get($node-indent, 'cosy');\n\n %node-spacer {\n width: map.get($node-indent, 'cosy')\n }\n\n %node-drop-indicator {\n inset-inline-end: map.get($node-indent, 'cosy');\n width: map.get($drop-indicator-width, 'cosy');\n }\n\n igx-circular-bar {\n width: calc(#{$icon-size} - 4px);\n height: calc(#{$icon-size} - 4px);\n }\n }\n\n &--compact {\n min-height: map.get($node-height, 'compact');\n padding: 0 map.get($node-indent, 'compact');\n\n %node-spacer {\n width: map.get($node-indent, 'compact')\n }\n\n %node-drop-indicator {\n inset-inline-end: map.get($node-indent, 'compact');\n width: map.get($drop-indicator-width, 'compact');\n }\n\n igx-circular-bar {\n width: calc(#{$icon-size} - 6px);\n height: calc(#{$icon-size} - 6px);\n }\n }\n }\n\n %node-wrapper--selected {\n background: var-get($theme, 'background-selected');\n color: var-get($theme, 'foreground-selected');\n }\n\n %node-wrapper--active {\n background: var-get($theme, 'background-active');\n color: var-get($theme, 'foreground-active');\n }\n\n %indigo-opacity {\n $bg-active: map.get($theme, 'background-active');\n\n @if ($indigo-theme) {\n @if meta.type-of($bg-active) == 'color' and lightness($bg-active) < 50 {\n opacity: .8;\n } @else {\n opacity: .3;\n }\n }\n }\n\n %node-wrapper--active-selected {\n background: var-get($theme, 'background-active-selected');\n color: var-get($theme, 'foreground-active-selected');\n }\n\n %node-wrapper--focused {\n box-shadow: inset 0 0 0 1px var-get($theme, 'border-color');\n }\n\n %node-wrapper--disabled {\n background: var-get($theme, 'background-disabled') !important;\n color: var-get($theme, 'foreground-disabled') !important;\n\n box-shadow: none !important;\n\n pointer-events: none;\n\n &::after {\n display: none;\n }\n\n %node-toggle-button {\n color: var-get($theme, 'foreground-disabled') !important;\n }\n }\n\n %node-spacer {\n display: inline-block;\n width: map.get($node-indent, 'comfortable');\n }\n\n %node-content {\n display: block;\n align-items: center;\n flex: 1;\n @include ellipsis();\n }\n\n %node-toggle-button {\n justify-content: center;\n cursor: pointer;\n user-select: none;\n min-width: $icon-size\n }\n\n %node-drop-indicator {\n display: flex;\n visibility: hidden;\n position: absolute;\n inset-inline-end: map.get($node-indent, 'comfortable');\n bottom: 0;\n width: map.get($drop-indicator-width, 'comfortable');\n\n > div {\n flex: 1;\n height: rem(1px);\n background: var-get($theme, 'drop-area-color');\n }\n }\n\n %node-group {\n overflow: hidden;\n }\n}\n\n/// Adds typography styles for the igx-tree 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} type-style\n@mixin tree-typography(\n $type-scale,\n $categories: (label: 'body-2')\n) {\n $text: map.get($categories, 'label');\n\n %node-content {\n @include type-style($type-scale, $text)\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\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 [null] - 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} $picker-background-color [null] - The igx-calendar-picker background color.\n/// @param {Color} $border-color [null] - The calendar border 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 previous and next month dates.\n/// @param {Color} $label-color [null] - The text color for weekday labels.\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///\n/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.\n/// @param {Color} $month-hover-current-text-color [null]- The text color for the current/selected month on hover.\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/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.\n///\n/// @param {Color} $year-hover-text-color [null] - The year hover text color.\n///\n/// @param {Color} $date-selected-background [null] - The background color for the selected date.\n/// @param {Color} $date-selected-hover-background [null] - The hover background color for the selected date.\n/// @param {Color} $date-selected-focus-background [null] - The focus background color for the selected date.\n/// @param {Color} $date-selected-text-color [null] - The text color for the selected date.\n/// @param {Color} $date-selected-hover-foreground [null] - The hover text color for the selected date.\n/// @param {Color} $date-selected-focus-foreground [null] - The focus text color for the selected date.\n///\n/// @param {Color} $date-hover-background [null] - The hover date background color.\n/// @param {Color} $date-focus-background [null] - The focus date background color.\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-current-hover-background [null] - The hover background color for the current date.\n/// @param {Color} $date-current-focus-background [null] - The focus background color for the current date.\n/// @param {Color} $date-current-hover-foreground [null] - The hover text color for the current date.\n/// @param {Color} $date-current-focus-foreground [null] - The focus text color for the current date.\n/// @param {Color} $date-selected-current-background [null] - The background color for the selected/current date.\n/// @param {Color} $date-selected-current-hover-background [null] - The hover background color for the selected/current date.\n/// @param {Color} $date-selected-current-focus-background [null] - The focus background color for the selected/current date.\n/// @param {Color} $date-selected-current-foreground [null] - The text color for the selected/current date.\n/// @param {Color} $date-selected-current-hover-foreground [null] - The hover text color for the selected/current date.\n/// @param {Color} $date-selected-current-focus-foreground [null] - The focus text color for the selected/current date.\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///\n/// @param {Color} $week-number-color [null] - The text color of the week number column.\n/// @param {Color} $week-number-background [null] - The background color of the week number column.\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 header and content background colors\n/// $my-calendar-theme: calendar-theme(\n/// $header-background: purple,\n/// $content-background: black\n/// );\n/// // Pass the theme to the calendar component mixin\n/// @include calendar($my-calendar-theme);\n@function calendar-theme(\n $palette: null,\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-current-text-color: null,\n $month-hover-background: null,\n\n $date-selected-background: null,\n $date-selected-hover-background: null,\n $date-selected-focus-background: null,\n $date-selected-text-color: null,\n $date-selected-hover-foreground: null,\n $date-selected-focus-foreground: null,\n\n $date-current-bg-color: null,\n $date-current-text-color: null,\n $date-current-hover-foreground: null,\n $date-current-focus-foreground: null,\n $date-current-hover-background: null,\n $date-current-focus-background: null,\n $date-selected-current-background: null,\n $date-selected-current-foreground: null,\n $date-selected-current-hover-background: null,\n $date-selected-current-hover-foreground: null,\n $date-selected-current-focus-background: null,\n $date-selected-current-focus-foreground: null,\n\n $date-hover-background: null,\n $date-focus-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 $border-color: null,\n $border-width: null,\n $picker-background-color: null,\n $label-color: null,\n $week-number-color: null,\n $week-number-background: null,\n) {\n $name: 'igx-calendar';\n $selector: 'igx-calendar, igx-days-view, igx-months-view, igx-years-view';\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 $variant: map.get($theme, variant);\n $not-bootstrap-theme: $variant != 'bootstrap';\n $bootstrap-theme: $variant == 'bootstrap';\n\n @if not($content-text-color) and $content-background {\n @if meta.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 meta.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 meta.type-of($content-background) == 'color' {\n $inactive-text-color: rgba($content-text-color, .5);\n }\n }\n\n @if not($label-color) and $content-background {\n @if meta.type-of($content-background) == 'color' {\n $label-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 meta.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($date-selected-text-color) and $date-selected-background {\n $date-selected-text-color: text-contrast($date-selected-background);\n }\n\n @if not($date-selected-hover-foreground) and $date-selected-hover-background {\n $date-selected-hover-foreground: text-contrast($date-selected-hover-background);\n }\n\n @if not($date-selected-focus-foreground) and $date-selected-focus-background {\n $date-selected-focus-foreground: text-contrast($date-selected-focus-background);\n }\n\n @if not($date-hover-background) and $content-background {\n @if meta.type-of($content-background) == 'color' {\n $date-hover-background: rgba(text-contrast($content-background), .12);\n }\n }\n\n @if $not-bootstrap-theme {\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-current-background) and $date-selected-background {\n $date-selected-current-background: $date-selected-background;\n }\n\n @if not($date-selected-current-hover-background) and $date-selected-hover-background {\n $date-selected-current-hover-background: $date-selected-hover-background;\n }\n\n @if not($date-selected-current-focus-background) and $date-selected-focus-background {\n $date-selected-current-focus-background: $date-selected-focus-background;\n }\n\n @if not($date-selected-text-color) and $header-background {\n $date-selected-text-color: text-contrast($header-background);\n }\n\n @if not($date-current-text-color) and $header-background {\n $date-current-text-color: $header-background;\n }\n\n @if not($date-current-hover-foreground) {\n $date-current-hover-foreground: $date-current-text-color;\n }\n\n @if not($date-current-focus-foreground) {\n $date-current-focus-foreground: $date-current-text-color;\n }\n\n @if not($year-hover-text-color) and $header-background {\n $year-hover-text-color: $header-background;\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\n @if not($date-special-background) and $content-background {\n @if meta.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($month-hover-text-color) and $month-hover-background {\n @if meta.type-of($month-hover-background) == 'color' {\n $month-hover-text-color: text-contrast($month-hover-background);\n }\n }\n\n @if not($month-hover-current-text-color) and $month-hover-background {\n @if meta.type-of($month-hover-background) == 'color' {\n $month-hover-current-text-color: text-contrast($month-hover-background);\n }\n }\n\n @if not($date-disabled-text-color) and $date-disabled-background {\n @if meta.type-of($date-disabled-background) == 'color' {\n $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);\n }\n }\n\n @if not($week-number-color) and $week-number-background {\n $week-number-color: text-contrast($week-number-background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($month-border-radius) {\n $month-border-radius: border-radius(map.get($theme, 'month-border-radius'));\n }\n\n @if not($date-border-radius) {\n $date-border-radius: border-radius(map.get($theme, 'date-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 border-color: $border-color,\n picker-background-color: $picker-background-color,\n border-width: $border-width,\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 label-color: $label-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-current-text-color: $month-hover-current-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-selected-hover-background: $date-selected-hover-background,\n date-selected-focus-background: $date-selected-focus-background,\n date-selected-hover-foreground: $date-selected-hover-foreground,\n date-selected-focus-foreground: $date-selected-focus-foreground,\n\n date-current-bg-color: $date-current-bg-color,\n date-current-text-color: $date-current-text-color,\n\n date-current-hover-background: $date-current-hover-background,\n date-current-focus-background: $date-current-focus-background,\n date-current-hover-foreground: $date-current-hover-foreground,\n date-current-focus-foreground: $date-current-focus-foreground,\n\n date-selected-current-background: $date-selected-current-background,\n date-selected-current-hover-background: $date-selected-current-hover-background,\n date-selected-current-focus-background: $date-selected-current-focus-background,\n date-selected-current-foreground: $date-selected-current-foreground,\n date-selected-current-hover-foreground: $date-selected-current-hover-foreground,\n date-selected-current-focus-foreground: $date-selected-current-focus-foreground,\n\n date-hover-background: $date-hover-background,\n date-focus-background: $date-focus-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 week-number-color: $week-number-color,\n week-number-background: $week-number-background,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {function} text-contrast\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires var-get\n@mixin calendar($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n $cal-header-year-margin: 0;\n $cal-header-date-margin: 0;\n $cal-header-padding: em(16px);\n\n $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $cal-picker-padding: map.get((\n material: em(16px),\n fluent: em(16px),\n bootstrap: em(8px),\n indigo-design: em(16px),\n ), $variant);\n\n $cal-value-w: map.get((\n material: em(40px),\n fluent: em(40px),\n bootstrap: em(32px),\n indigo-design: em(40px),\n ), $variant);\n\n $border-width: map.get((\n material: 0,\n fluent: 0,\n bootstrap: 1px,\n indigo-design: 0\n ), $variant);\n\n $border-radius: map.get((\n material: 4px,\n fluent: 0,\n bootstrap: 0,\n indigo-design: 8px\n ), $variant);\n\n $cal-value-h: $cal-value-w;\n $cal-value-br: math.div($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: rem(8px);\n $cal-row-margin: rem(2px) 0;\n\n %cal-display {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n min-width: 290px;\n background: var-get($theme, 'content-background');\n outline: none;\n border-radius: var-get($theme, 'border-radius');\n overflow: hidden;\n border: $border-width solid var-get($theme, 'border-color');\n\n %cal-display {\n\n @if $bootstrap-theme {\n border: none;\n border-radius: 0;\n }\n }\n }\n\n igx-calendar-container {\n @if $bootstrap-theme {\n %cal-display {\n border: 0;\n border-radius: 0;\n }\n\n margin-bottom: 0;\n\n %cal-picker-display {\n padding-bottom: 0;\n }\n\n %cal-row-display {\n &:first-of-type {\n padding-top: 0;\n padding-bottom: math.div($cal-picker-padding, 2);\n }\n }\n\n %cal-picker-arrow {\n top: $cal-picker-padding;\n }\n }\n }\n\n igx-month-picker {\n %cal-picker-display {\n @if $bootstrap-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n }\n }\n\n %cal-display + %cal-display {\n margin-inline-start: 1rem;\n\n @if $bootstrap-theme {\n margin: 0;\n }\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-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n padding: $cal-header-padding;\n\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %cal-header-year {\n margin: $cal-header-year-margin;\n color: currentColor;\n opacity: .8;\n\n @if $variant == 'indigo-design' {\n opacity: 1;\n }\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 align-items: center;\n padding-bottom: $cal-picker-padding;\n background: var-get($theme, 'picker-background-color');\n\n @if $bootstrap-theme {\n height: auto;\n padding-top: $cal-picker-padding;\n }\n position: relative;\n\n div {\n text-align: center;\n }\n\n &:focus {\n outline: none;\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-get($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 @if $bootstrap-theme {\n top: math.div($cal-picker-padding, 2);\n }\n\n &:focus,\n &:hover {\n color: var-get($theme, 'picker-arrow-hover-color');\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %cal-picker-arrow__prev {\n inset-inline-start: 0;\n }\n\n %cal-picker-arrow__next {\n inset-inline-end: 0;\n }\n\n %cal-picker-date {\n color: var-get($theme, 'picker-text-color');\n text-align: center;\n outline: none;\n padding: 0 rem(2px);\n\n &:hover,\n &:focus {\n color: var-get($theme, 'picker-text-hover-color');\n cursor: pointer;\n }\n }\n\n %cal-body-display {\n flex: 1 1 auto;\n @if $not-bootstrap-theme {\n padding-top: $cal-picker-padding;\n }\n padding-bottom: $cal-picker-padding;\n\n overflow: hidden;\n }\n\n igx-years-view,\n igx-month-picker,\n igx-months-view {\n %cal-body-display {\n @if $bootstrap-theme {\n padding-bottom: 0;\n }\n }\n }\n\n %cal-value {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var-get($theme, 'content-text-color');\n outline: none;\n\n &:first-of-type {\n padding-inline-start: $cal-row-padding;\n }\n\n &:last-of-type {\n padding-inline-end: $cal-row-padding;\n }\n\n // 100 divided by the number of weekdays\n min-width: 14.28%;\n\n // Quantity Query selector\n // 8 comes from the number of columns in the calendar\n &:nth-last-child(8):first-child,\n &:nth-last-child(8):first-child ~ * {\n // 100 divided by the number of weekdays + weeks number column\n min-width: 12.5% !important;\n }\n }\n\n %cal-row-display {\n display: flex;\n justify-content: space-between;\n margin: $cal-row-margin;\n padding: 0;\n\n &:first-of-type {\n @if $bootstrap-theme {\n margin-top: 0;\n background: var-get($theme, 'picker-background-color');\n border-bottom: 1px solid var-get($theme, 'border-color');\n padding-bottom: $cal-picker-padding;\n padding-top: $cal-picker-padding;\n }\n\n @if $not-bootstrap-theme{\n margin-bottom: 0;\n }\n }\n\n &:nth-child(2) {\n @if $not-bootstrap-theme {\n margin-top: 0;\n }\n }\n\n &:last-of-type {\n %cal-value-content--week-number {\n border-bottom-left-radius: $border-radius;\n border-bottom-right-radius: $border-radius;\n\n &::before {\n display: none;\n }\n }\n\n @if $bootstrap-theme {\n margin-bottom: 0;\n }\n }\n }\n\n %cal-row-display--wrap {\n flex-wrap: wrap;\n\n &:first-of-type {\n @if $bootstrap-theme {\n background: transparent;\n margin-bottom: 0;\n border-bottom: 0;\n padding: 0;\n }\n }\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 padding: 0;\n margin: 0;\n\n %cal-value--year {\n flex: 1 0 0;\n }\n }\n\n %cal-value--focus,\n %cal-value--hover {\n @if $bootstrap-theme {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n\n %cal-value--hover {\n %cal-value-content::after {\n background: var-get($theme, 'date-hover-background');\n }\n }\n\n %cal-value--focus {\n %cal-value-content::after {\n background: var-get($theme, 'date-focus-background');\n }\n }\n\n %cal-value--selected--hover {\n %cal-value-content{\n color: var-get($theme, 'date-selected-hover-foreground');\n }\n\n %cal-value-content::after {\n background: var-get($theme, 'date-selected-hover-background');\n }\n }\n\n %cal-value--current {\n %cal-value-content {\n color: var-get($theme, 'date-current-text-color');\n font-weight: $cal-value-fw ;\n background: var-get($theme, 'date-current-bg-color');\n }\n }\n\n %cal-value--current--hover {\n %cal-value-content {\n color: var-get($theme, 'date-current-hover-foreground');\n background: var-get($theme, 'date-current-hover-background');\n\n &::after {\n background: var-get($theme, 'date-current-hover-background');\n }\n }\n }\n\n %cal-value--current--focus {\n %cal-value-content {\n color: var-get($theme, 'date-current-focus-foreground');\n background: var-get($theme, 'date-current-focus-background');\n\n &::after {\n background: var-get($theme, 'date-current-focus-background');\n }\n }\n }\n\n %cal-value--selected--current {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-foreground');\n background: var-get($theme, 'date-selected-current-background');\n\n @if $variant == 'indigo-design' {\n font-weight: 700;\n }\n }\n }\n\n %cal-value--selected--current--hover {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-hover-foreground');\n\n &::after {\n background: var-get($theme, 'date-selected-current-hover-background');\n }\n }\n }\n\n %cal-value--selected--current--focus {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-focus-foreground');\n\n &::after {\n background: var-get($theme, 'date-selected-current-focus-background');\n }\n }\n }\n\n %cal-value--selected--focus {\n %cal-value-content {\n color: var-get($theme, 'date-selected-focus-foreground');\n }\n\n %cal-value-content::after {\n background: var-get($theme, 'date-selected-focus-background');\n }\n }\n\n %cal-value-content {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $cal-value-w;\n min-width: $cal-value-w;\n height: $cal-value-h;\n border-radius: var-get($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 inset-inline-start: 2px;\n border-radius: inherit;\n z-index: -1;\n }\n }\n\n %cal-value--label {\n @if $not-bootstrap-theme{\n height: $cal-value-h;\n }\n\n color: var-get($theme, 'label-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'label-color');\n }\n\n border-radius: 0;\n\n @if $bootstrap-theme {\n font-style: italic;\n cursor: default;\n }\n }\n\n %cal-value--weekend {\n color: var-get($theme, 'weekend-text-color');\n }\n\n %cal-value-date--week-number + %cal-value {\n padding-inline-start: 0 !important;\n }\n\n %label--week-number,\n %cal-value-content--week-number {\n position: relative;\n color: var-get($theme, 'week-number-color') !important;\n border-radius: 0;\n pointer-events: none;\n }\n\n %cal-value-date--week-number {\n padding-inline-end: 0 !important;\n cursor: default;\n\n &:hover,\n &:focus {\n %cal-value-content--week-number {\n color: var-get($theme, 'week-number-color') !important;\n }\n }\n }\n\n %cal-value-content--week-number {\n position: relative;\n background: var-get($theme, 'week-number-background') !important;\n min-width: auto;\n\n &::after {\n display: none;\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: math.div($cal-row-padding, 2);\n inset-inline-start: 0;\n top: 100%;\n background: var-get($theme, 'week-number-background') !important;\n }\n }\n\n %label--week-number {\n padding-inline-end: 0 !important;\n text-align: center;\n\n span {\n width: $cal-value-w;\n position: relative;\n background: var-get($theme, 'week-number-background');\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n background: var-get($theme, 'week-number-background');\n inset-inline-start: 0;\n }\n\n &::after {\n top: 100%;\n height: if($not-bootstrap-theme, math.div($cal-row-padding, 2) + rem(2px), $cal-row-padding + rem(5px));\n }\n\n &::before {\n bottom: 100%;\n height: $cal-row-padding;\n border-top-left-radius: $border-radius;\n border-top-right-radius: $border-radius;\n }\n }\n }\n\n %label--week-number + %cal-value--label {\n padding-inline-start: 0 !important;\n }\n\n %cal-value--year {\n margin: 0;\n min-width: 8ch;\n line-height: rem(52px);\n\n &:first-of-type {\n padding-inline-start: 0;\n }\n\n &:last-of-type {\n padding-inline-end: 0;\n }\n }\n\n %cal-value--year-current {\n color: var-get($theme, 'year-current-text-color');\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'year-hover-text-color');\n }\n }\n }\n\n %cal-value--year-hover {\n color: var-get($theme, 'year-hover-text-color');\n }\n\n %cal-value--month-hover {\n color: var-get($theme, 'month-hover-text-color');\n outline-width: 0;\n\n &::after {\n background: var-get($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 inset-inline-start: 0;\n inset-inline-end: 0;\n transform: translateY(-50%);\n height: 48px;\n background: transparent;\n border-radius: var-get($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-get($theme, 'month-current-text-color');\n }\n\n %cal-value--month-current-hover {\n color: var-get($theme, 'month-hover-current-text-color');\n }\n\n %cal-value--inactive {\n cursor: pointer;\n color: var-get($theme, 'inactive-text-color');\n }\n\n %cal-value--inactive--single--hover {\n @if $bootstrap-theme {\n color: var-get($theme, 'date-selected-text-color');\n } @else {\n color: var-get($theme, 'inactive-text-color');\n }\n }\n\n %cal-value--special {\n %cal-value-content {\n background: var-get($theme, 'date-special-background');\n @if $not-bootstrap-theme {\n color: var-get($theme, 'date-special-text-color');\n }\n font-weight: 900;\n }\n }\n\n %cal-value--selected {\n position: relative;\n background: var-get($theme, 'date-selected-background');\n\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n background: var-get($theme, 'date-selected-background') ;\n }\n }\n\n %cal-value--disabled {\n pointer-events: none;\n cursor: not-allowed;\n color: var-get($theme, 'date-disabled-text-color');\n }\n\n %cal-value--single {\n background: transparent;\n\n &::before,\n &::after {\n background: transparent;\n }\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--disabled-range {\n background: var-get($theme, 'date-disabled-background') !important;\n\n %cal-value-content {\n color: var-get($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 %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n }\n\n &:focus,\n &:hover {\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n background: var-get($theme, 'date-selected-background') !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 inset-inline-start: 50%;\n bottom: 0;\n background: var-get($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 inset-inline-end: 50%;\n bottom: 0;\n background: var-get($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 %calendar__aria-off-screen {\n position: absolute!important;\n border: none!important;\n height: 1px!important;\n width: 1px!important;\n inset-inline-start: 0!important;\n top: 0!important;\n overflow: hidden!important;\n padding: 0!important;\n margin: 0 !important;\n user-select: none;\n pointer-events: none;\n\n &:focus {\n outline: none;\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} type-style\n@mixin calendar-typography($type-scale, $categories: (\n header-year: 'overline',\n header-date: 'h4',\n weekday-label: 'body-1',\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 $weekday-label: map.get($categories, 'weekday-label');\n $picker-date: map.get($categories, 'picker-date');\n $content: map.get($categories, 'content');\n\n %cal-header-year {\n @include type-style($type-scale, $header-year) {\n margin: 0;\n }\n }\n\n %cal-header-date {\n @include type-style($type-scale, $header-date) {\n margin: 0;\n }\n }\n\n %cal-picker-date {\n @include type-style($type-scale, $picker-date) {\n margin: 0;\n }\n }\n\n %cal-value-content {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n }\n\n %cal-value--label {\n @include type-style($type-scale, $weekday-label);\n margin: 0;\n }\n\n %cal-value--year-current {\n @include type-style($type-scale, $content) {\n font-size: rem(24px);\n line-height: rem(52px);\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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} $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 elevation\n///\n/// @example scss Change the background and content text colors in card\n/// $my-card-theme: card-theme(\n/// $background: #fff,\n/// $content-text-color: rgba(0, 0, 0, .8)\n/// );\n/// // Pass the theme to the card component mixin\n/// @include card($my-card-theme);\n@function card-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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) {\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 @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 meta.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 meta.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 meta.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: elevation($elevations, $resting-elevation);\n }\n\n @if not($hover-shadow) {\n $hover-elevation: map.get($card-schema, 'hover-elevation');\n $hover-shadow: elevation($elevations, $hover-elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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 ));\n}\n\n/// Card Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin card($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-material-theme: $variant != 'material';\n\n $card-heading-padding: rem(16px);\n $card-heading-compact-padding: rem(16px, 16px);\n $card-content-padding: rem(14px);\n $card-actions-padding: rem(8px);\n\n $card-tgroup-margin: 0 em(16px);\n\n $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);\n\n %igx-card-display {\n display: flex;\n flex-direction: column;\n box-shadow: var-get($theme, 'resting-shadow');\n overflow: hidden;\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background');\n transition: $card-transitions;\n backface-visibility: hidden;\n\n @if $not-material-theme {\n border: 1px solid var-get($theme, 'outline-color');\n }\n\n &:hover {\n box-shadow: var-get($theme, 'hover-shadow');\n }\n }\n\n %igx-card--outlined {\n box-shadow: none;\n border: 1px solid var-get($theme, 'outline-color');\n\n &:hover {\n box-shadow: none;\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-get($theme, 'header-text-color');\n\n &:empty {\n display: block;\n padding: 0;\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-inline-end: 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-inline-end: 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-subtitle {\n color: var-get($theme, 'subtitle-text-color');\n }\n\n %igx-card-tgroup {\n margin: $card-tgroup-margin;\n }\n\n %igx-card-content {\n display: block;\n width: 100%;\n flex: 1 1 auto;\n padding: $card-content-padding;\n color: var-get($theme, 'content-text-color');\n }\n\n %igx-card-media {\n display: block;\n overflow: hidden;\n line-height: 0;\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-inline-start: 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-inline-start: rem(8px);\n }\n }\n\n %igx-card-actions--vertical {\n flex-direction: column;\n\n [dir='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-get($theme, 'actions-text-color');\n margin-inline-start: 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-inline-start: 0;\n margin-top: rem(8px);\n }\n }\n\n %igx-card-actions__icons--vertical {\n margin-top: auto;\n margin-inline-start: 0;\n }\n\n %igx-card-actions__icons--reverse {\n order: 0;\n margin-inline-start: 0;\n }\n\n %igx-card-actions__buttons--reverse {\n order: 1;\n margin-inline-start: 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-inline-start: 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-get($theme, 'actions-text-color');\n }\n }\n\n %igx-card-actions-igroup--start {\n margin-inline-end: auto;\n }\n\n %igx-card-actions-igroup--end {\n margin-inline-start: 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: 'h6', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-card-header-title--small {\n @include type-style($type-scale, $title-small) {\n margin: 0;\n }\n }\n\n %igx-card-header-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin: 0;\n }\n }\n\n %igx-card-content > p {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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/// @param {Color} $border-color [null] - The border color 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 elevation\n///\n/// @example scss Change the background color\n/// $my-dialog-theme: dialog-theme($background: black);\n/// // Pass the theme to the igx-dialog component mixin\n/// @include dialog($my-dialog-theme);\n@function dialog-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $border-radius: null,\n $border-color: null,\n\n $background: null,\n $title-color: null,\n $message-color: null,\n $shadow: null,\n) {\n $name: 'igx-dialog';\n $selector: '.igx-dialog';\n\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 @if not($title-color) and $background{\n $title-color: text-contrast($background);\n }\n\n @if not($message-color) and $background{\n @if meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 border-color: $border-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin dialog($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant); \n $bootstrap-theme: map.get($theme, variant) == 'bootstrap';\n\n $dialog-min-width: map.get((\n material: rem(280px),\n fluent: rem(288px),\n bootstrap: rem(288px),\n ), $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 bootstrap: rem(16px),\n indigo-design: rem(16px) rem(24px),\n ), $variant);\n\n $dialog-message-padding: map.get((\n material: rem(12px) rem(24px),\n fluent: 0 rem(24px) rem(20px) rem(24px),\n bootstrap: rem(16px),\n indigo-design: 0 rem(24px) rem(8px) rem(24px),\n ), $variant);\n\n $dialog-actions-padding: map.get((\n material: rem(8px),\n fluent: 0 rem(24px) rem(24px) rem(24px),\n bootstrap: rem(16px),\n indigo-design: rem(8px),\n ), $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: 1px solid var-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background');\n box-shadow: var-get($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 display: flex;\n color: var-get($theme, 'title-color');\n padding: $dialog-title-padding;\n\n @if $bootstrap-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n }\n\n %igx-dialog-content {\n color: var-get($theme, 'message-color');\n padding: $dialog-message-padding;\n // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300\n position: relative;\n z-index: 0;\n }\n\n %igx-dialog-message {\n display: inline-block;\n max-width: 40ch;\n\n @media all and (-ms-high-contrast: none)\n {\n max-width: map.get((\n material: 62ch,\n fluent: 48ch,\n bootstrap: 60ch,\n indigo-design: 48ch,\n ), $variant);\n }\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 @if $bootstrap-theme {\n border-top: 1px solid var-get($theme, 'border-color');\n }\n\n button + button {\n margin-inline-start: 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} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-dialog-content {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n\n > * {\n letter-spacing: normal;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 {Number} $border-width [null] - The border width used for drop-down component.\n/// @param {Color} $border-color [null] - The border color used for drop-down component.\n/// @param {Number} $border-radius [null] - The border radius used for drop-down component.\n/// @param {Number} $item-border-radius [null] - The border radius used for drop-down items.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n@function drop-down-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $border-radius: null,\n $item-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 $border-color: null,\n $border-width: null,\n $shadow: null\n) {\n $name: 'igx-drop-down';\n $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list';\n\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 @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 meta.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 meta.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 @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 @if not($disabled-item-text-color) and $background-color {\n @if meta.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 meta.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 meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n background-color: $background-color,\n border-radius: $border-radius,\n item-border-radius: $item-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 border-color: $border-color,\n border-width: $border-width\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin drop-down($theme) {\n @include 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: 0 rem(24px);\n $item-padding-cosy: 0 rem(20px);\n $item-padding-compact: 0 rem(16px);\n\n $prefix-margin-comfortable: rem(20px);\n $prefix-margin-cosy: rem(16px);\n $prefix-margin-compact: rem(12px);\n\n $suffix-margin-comfortable: rem(8px);\n $suffix-margin-cosy: rem(6px);\n $suffix-margin-compact: rem(4px);\n\n $item-padding: (\n comfortable: $item-padding-comfortable,\n cosy: $item-padding-cosy,\n compact: $item-padding-compact\n );\n\n $prefix-margin: (\n comfortable: $prefix-margin-comfortable,\n cosy: $prefix-margin-cosy,\n compact: $prefix-margin-compact\n );\n\n $suffix-margin: (\n comfortable: $suffix-margin-comfortable,\n cosy: $suffix-margin-cosy,\n compact: $suffix-margin-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 {\n position: absolute;\n }\n\n %igx-drop-down__list {\n overflow: hidden;\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background-color');\n box-shadow: var-get($theme, 'shadow');\n min-width: rem(128px);\n border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');\n }\n\n %igx-drop-down__list-scroll {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n\n igx-input-group {\n margin-top: -16px !important;\n }\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 position: relative;\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix;\n }\n\n igx-divider {\n position: absolute;\n width: 100%;\n inset-inline-start: 0;\n bottom: 0;\n }\n }\n\n %igx-drop-down__item {\n color: var-get($theme, 'item-text-color');\n cursor: pointer;\n padding: map.get($item-padding, 'comfortable');\n border-radius: var-get($theme, 'item-border-radius');\n\n &:focus {\n outline: 0;\n outline-color: transparent;\n background: var-get($theme, 'focused-item-background');\n color: var-get($theme, 'focused-item-text-color');\n }\n\n &:hover {\n background: var-get($theme, 'hover-item-background');\n color: var-get($theme, 'hover-item-text-color');\n }\n }\n\n %igx-drop-down__content {\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n %igx-drop-down__inner {\n display: block;\n @include ellipsis();\n margin-inline-end: auto;\n }\n\n %igx-drop-down__item--cosy {\n height: map.get($item-height, 'cosy');\n padding: map.get($item-padding, 'cosy');\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--cosy;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--cosy;\n }\n }\n\n %igx-drop-down__item--compact {\n height: map.get($item-height, 'compact');\n padding: map.get($item-padding, 'compact');\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--compact;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--compact;\n }\n }\n\n %igx-drop-down__prefix {\n margin-inline-end: map.get($prefix-margin, 'comfortable');\n }\n\n %igx-drop-down__suffix {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'comfortable');\n }\n }\n\n %igx-drop-down__prefix--cosy {\n margin-inline-end: map.get($prefix-margin, 'cosy');\n }\n\n %igx-drop-down__suffix--cosy {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'cosy');\n }\n }\n\n %igx-drop-down__prefix--compact {\n margin-inline-end: map.get($prefix-margin, 'compact');\n }\n\n %igx-drop-down__suffix--compact {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'compact');\n }\n }\n\n %igx-drop-down__header {\n color: var-get($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 igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--cosy;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--cosy;\n }\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 igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--compact;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--compact;\n }\n }\n\n %igx-drop-down__group {\n pointer-events: auto;\n\n label {\n @extend %igx-drop-down__header !optional;\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-get($theme, 'focused-item-background');\n color: var-get($theme, 'focused-item-text-color');\n\n &:hover {\n color: var-get($theme, 'focused-item-text-color');\n background: var-get($theme, 'focused-item-background');\n }\n }\n\n %igx-drop-down__item--selected {\n background: var-get($theme, 'selected-item-background');\n color: var-get($theme, 'selected-item-text-color');\n\n &:hover {\n background: var-get($theme, 'selected-hover-item-background');\n color: var-get($theme, 'selected-hover-item-text-color');\n }\n }\n\n %igx-drop-down__item--selected--focused {\n background: var-get($theme, 'selected-focus-item-background');\n color: var-get($theme, 'selected-focus-item-text-color');\n }\n\n %igx-drop-down__item--disabled {\n background: var-get($theme, 'disabled-item-background');\n color: var-get($theme, 'disabled-item-text-color');\n cursor: default;\n pointer-events: none;\n\n &:hover {\n background: var-get($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', select-item: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $header) {\n margin: 0;\n }\n }\n\n %igx-drop-down__item {\n @include type-style($type-scale, $item) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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/// @param {Color} $border-width [null] - The list border width.\n/// @param {Number} $border-color [null] - The list border color.\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 list background color\n/// $my-list-theme: list-theme($background: black);\n/// // Pass the theme to the list component mixin\n/// @include list($my-list-theme);\n@function list-theme(\n $palette: null,\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 $border-color: null,\n $border-width: 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 @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 meta.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 meta.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 @if meta.type-of($item-background) == 'color' {\n $item-subtitle-color: rgba(text-contrast($item-background), .74);\n }\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 @if meta.type-of($item-background-hover) == 'color' {\n $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);\n }\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 @if meta.type-of($item-background-active) == 'color' {\n $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);\n }\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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\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 border-color: $border-color,\n border-width: $border-width,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin list($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\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),\n cosy: rem(6px) rem(8px),\n compact: rem(4px)\n );\n\n $list-line-margin: (\n comfortable: rem(16px),\n cosy: rem(12px),\n compact: rem(8px)\n );\n\n %igx-list {\n position: relative;\n display: flex;\n flex-flow: column nowrap;\n background: var-get($theme, 'background');\n height: auto;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 0;\n border-radius: var-get($theme, 'border-radius');\n }\n\n %igx-list--empty {\n justify-content: center;\n align-items: center;\n }\n\n %igx-list__message--empty {\n text-align: center;\n color: var-get($theme, 'item-text-color');\n padding: map.get($list-empty-padding, 'comfortable');\n z-index: 1;\n }\n\n %igx-list-header {\n display: flex;\n align-items: center;\n color: var-get($theme, 'header-text-color');\n background: var-get($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-get($theme, 'item-border-radius');\n color: var-get($theme, 'item-text-color');\n background: var-get($theme, 'item-background');\n\n @if $bootstrap-theme {\n border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');\n\n &:last-of-type {\n border-bottom: none;\n }\n }\n\n &:hover {\n color: var-get($theme, 'item-text-color-hover');\n background: var-get($theme, 'item-background-hover');\n\n %igx-list__item-lines {\n color: currentColor;\n }\n\n %igx-list__item-line-title {\n color: var-get($theme, 'item-title-color-hover');\n }\n\n %igx-list__item-line-subtitle {\n color: var-get($theme, 'item-subtitle-color-hover');\n }\n\n %igx-list__item-actions {\n color: var-get($theme, 'item-action-color-hover');\n\n igx-icon {\n color: var-get($theme, 'item-action-color-hover')\n }\n }\n\n %igx-list__item-thumbnail {\n color: var-get($theme, 'item-thumbnail-color-hover');\n\n igx-icon {\n color: var-get($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-get($theme, 'item-subtitle-color');\n opacity: .74\n }\n\n %igx-list__item-line-title {\n color: var-get($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-get($theme, 'item-action-color');\n\n > * {\n margin-inline-start: rem(8px);\n }\n\n &:empty {\n display: none;\n }\n\n igx-icon {\n color: var-get($theme, 'item-action-color')\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\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-get($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-get($theme, 'item-thumbnail-color');\n\n > igx-icon {\n margin: map.get($list-icon-margin, 'comfortable');\n margin-inline-start: 0;\n }\n\n > igx-avatar {\n > igx-icon {\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 margin: 0;\n margin-inline-start: map.get($list-line-margin, 'comfortable');\n }\n\n %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines {\n margin: 0;\n margin-inline-start: map.get($list-line-margin, 'cosy');\n }\n\n %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines {\n margin: 0;\n margin-inline-start: map.get($list-line-margin, 'compact');\n }\n\n %igx-list__item-thumbnail--cosy {\n > igx-icon {\n margin: map.get($list-icon-margin, 'cosy');\n margin-inline-start: 0;\n }\n }\n\n %igx-list__item-thumbnail--compact {\n > igx-icon {\n margin: map.get($list-icon-margin, 'compact');\n margin-inline-start: 0;\n }\n }\n\n %igx-list__item-actions--cosy {\n > * {\n margin-inline-start: rem(6px);\n }\n }\n\n %igx-list__item-actions--compact {\n > * {\n margin-inline-start: rem(4px);\n }\n }\n\n %igx-list__item-lines + %igx-list__item-actions {\n margin-inline-start: rem(8px);\n }\n\n %igx-list-item-content--active {\n %igx-list__item-line-title {\n color: var-get($theme, 'item-title-color-active')\n }\n\n %igx-list__item-line-subtitle {\n color: var-get($theme, 'item-subtitle-color-active')\n }\n\n %igx-list__item-actions {\n color: var-get($theme, 'item-action-color-active');\n\n igx-icon {\n color: var-get($theme, 'item-action-color-active')\n }\n }\n\n %igx-list__item-thumbnail {\n color: var-get($theme, 'item-thumbnail-color-active');\n\n igx-icon {\n color: var-get($theme, 'item-thumbnail-color-active')\n }\n }\n\n color: var-get($theme, 'item-text-color-active');\n background: var-get($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', title: 'subtitle-1', subtitle: 'caption')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $header) {\n margin: 0;\n }\n }\n\n %igx-list-item {\n @include type-style($type-scale, $item) {\n margin: 0;\n }\n }\n\n %igx-list__item-lines,\n %igx-list__item-line-title {\n @include type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-list__item-line-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin: 0;\n }\n }\n}\n","////\n/// @group themes\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n@use 'sass:list';\n@use 'sass:string';\n@use '../base' as *;\n@use 'schemas' as *;\n@use 'palettes' as *;\n@use '../components' as *;\n\n@forward 'palettes';\n@forward 'utilities';\n@forward 'schemas';\n@forward 'core';\n@forward '../components';\n\n/// Generates an Ignite UI for Angular global theme.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.\n/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.\n/// @param {Map} $elevations [$elevations] - The elevation map to be used by all component themes.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n/// @requires $components\n/// @requires $theme-palette\n/// @requires $elevations\n/// @requires {function} is-component\n@mixin theme(\n $palette,\n $schema: $light-material-schema,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $elevations: $elevations,\n $wc: false\n) {\n // Stores all excluded component styles\n $excluded: ();\n $scope: if(is-root(), ':root', '&');\n\n @include palette-vars($palette, $contrast: true);\n @include elevation-vars($elevations);\n\n @if $wc {\n @include palette-to-wc($palette);\n @include elevations-to-wc($elevations);\n }\n\n @if $elevation == false {\n #{$scope} {\n --igx-elevation-factor: 0;\n\n @if $wc {\n --igc-elevation-factor: var(--igx-elevation-factor);\n }\n }\n }\n\n @if $roundness {\n #{$scope} {\n --igx-radius-factor: #{$roundness};\n\n @if $wc {\n --igc-radius-factor: var(--igx-radius-factor);\n }\n }\n }\n\n $theme-palette: $palette !global;\n\n @if list.length($exclude) > 0 {\n $excluded: is-component($exclude);\n }\n\n @if is-used('igx-ripple', $exclude) {\n @include ripple(ripple-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-avatar', $exclude) {\n @include avatar(avatar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-action-strip', $exclude) {\n @include action-strip(action-strip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-badge', $exclude) {\n @include badge(badge-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-bottom-nav', $exclude) {\n @include bottom-nav(bottom-nav-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-button', $exclude) {\n @include button(button-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-button-group', $exclude) {\n @include button-group(button-group-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-banner', $exclude) {\n @include banner(banner-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-calendar', $exclude) {\n @include calendar(calendar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-card', $exclude) {\n @include card(card-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-carousel', $exclude) {\n @include carousel(carousel-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-splitter', $exclude) {\n @include splitter(splitter-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('data-chart', $exclude) {\n @include css-vars(data-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('doughnut-chart', $exclude) {\n @include css-vars(doughnut-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('linear-gauge', $exclude) {\n @include css-vars(linear-gauge-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('radial-gauge', $exclude) {\n @include css-vars(radial-gauge-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('financial-chart', $exclude) {\n @include css-vars(financial-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('bullet-graph', $exclude) {\n @include css-vars(bullet-graph-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('category-chart', $exclude) {\n @include css-vars(category-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('geo-map', $exclude) {\n @include css-vars(geo-map-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('pie-chart', $exclude) {\n @include css-vars(pie-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('sparkline', $exclude) {\n @include css-vars(sparkline-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('funnel-chart', $exclude) {\n @include css-vars(funnel-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('shape-chart', $exclude) {\n @include css-vars(shape-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-checkbox', $exclude) {\n @include checkbox(checkbox-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-chip', $exclude) {\n @include chip(chip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-column-actions', $exclude) {\n @include column-actions(column-actions-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-combo', $exclude) {\n @include combo(combo-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-date-picker', $exclude) {\n @include date-picker(calendar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-date-range-picker', $exclude) {\n @include date-range-picker(date-range-picker-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-dialog', $exclude) {\n @include dialog(dialog-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-divider', $exclude) {\n @include divider(divider-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igc-dockmanager', $exclude) {\n @include dock-manager(dock-manager-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igc-rating', $exclude) {\n @include rating(rating-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-drop-down', $exclude) {\n @include drop-down(drop-down-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-expansion-panel', $exclude) {\n @include expansion-panel(expansion-panel-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid', $exclude) {\n @include grid(grid-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid-summary', $exclude) {\n @include grid-summary(grid-summary-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid-toolbar', $exclude) {\n @include grid-toolbar(grid-toolbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-pivot-data-selector', $exclude) {\n @include pivot-data-selector(pivot-data-selector-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-highlight', $exclude) {\n @include highlight(highlight-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-icon', $exclude) {\n @include icon(icon-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-input-group', $exclude) {\n @include input-group(input-group-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-list', $exclude) {\n @include list(list-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-navbar', $exclude) {\n @include navbar(navbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-nav-drawer', $exclude) {\n @include navdrawer(navdrawer-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-overlay', $exclude) {\n @include overlay(overlay-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-paginator', $exclude) {\n @include paginator(paginator-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-circular-bar', $exclude) {\n @include progress-circular(progress-circular-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-linear-bar', $exclude) {\n @include progress-linear(progress-linear-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-radio', $exclude) {\n @include radio(radio-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-query-builder', $exclude) {\n @include query-builder(query-builder-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-scrollbar', $exclude) {\n @include scrollbar(scrollbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-slider', $exclude) {\n @include slider(slider-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-snackbar', $exclude) {\n @include snackbar(snackbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-switch', $exclude) {\n @include switch(switch-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-tabs', $exclude) {\n @include tabs(tabs-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-stepper', $exclude) {\n @include stepper(stepper-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-toast', $exclude) {\n @include toast(toast-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-tooltip', $exclude) {\n @include tooltip(tooltip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-time-picker', $exclude) {\n @include time-picker(time-picker-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-tree', $exclude) {\n @include tree(tree-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-watermark', $exclude) {\n @include watermark(watermark-theme(\n $schema: $schema\n ));\n }\n\n @if list.length($dropped-themes) > 0 {\n @warn string.unquote('You have excluded the following components from the theme: \"#{$dropped-themes}\".');\n }\n}\n\n/// Creates a global material theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $grays: color($palette, 'grays');\n $surface: color($palette, 'surface');\n\n $light-palette: palette(\n $primary: color($palette, 'primary'),\n $secondary: color($palette, 'secondary'),\n $info: color($palette, 'info'),\n $success: color($palette, 'success'),\n $warn: color($palette, 'warn'),\n $error: color($palette, 'error'),\n $surface: if($surface != #fff, $surface, #fff),\n $grays: if($grays != #9e9e9e, $grays, #000),\n );\n\n @include theme(\n $palette: $light-palette,\n $schema: $light-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global material theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $grays: color($palette, 'grays');\n $surface: color($palette, 'surface');\n\n $dark-palette: palette(\n $primary: color($palette, 'primary'),\n $secondary: color($palette, 'secondary'),\n $info: color($palette, 'info'),\n $success: color($palette, 'success'),\n $warn: color($palette, 'warn'),\n $error: color($palette, 'error'),\n $surface: if($surface != #fff, $surface, #222),\n $grays: if($grays != #9e9e9e, $grays, #fff),\n );\n\n @include theme(\n $palette: $dark-palette,\n $schema: $dark-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global fluent theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin fluent-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #fff),\n $grays: #000\n ),\n $schema: $light-fluent-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global fluent theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin fluent-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #222),\n $grays: #fff\n ),\n $schema: $dark-fluent-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n\n/// Creates a global bootstrap-like theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin bootstrap-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #f8f9fa, $surface, #f8f9fa),\n $grays: #212529\n ),\n $schema: $light-bootstrap-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global bootstrap-like theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin bootstrap-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != white, $surface, #222),\n $grays: #fff\n ),\n $schema: $dark-bootstrap-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global indigo theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin indigo-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #fff),\n $grays: #060716,\n ),\n $schema: $light-indigo-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global indigo theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin indigo-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != white, $surface, #2a2b2f),\n $grays: #fff\n ),\n $schema: $dark-indigo-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 ripple-theme(\n $palette: null,\n $schema: $light-schema,\n $color: null\n) {\n $name: 'igx-ripple';\n $selector: '[igxRipple]';\n\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 selector: $selector,\n palette: $palette,\n color: $color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin ripple($theme) {\n @include css-vars($theme);\n\n %igx-ripple-display {\n display: block;\n position: absolute;\n border-radius: border-radius(50%);\n background: var-get($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 margin: 0 !important;\n border: none !important;\n }\n\n %igx-ripple-wrapper {\n overflow: hidden;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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 text color used of the avatar.\n/// @param {Color} $background [null] - The background color used of the avatar.\n/// @param {number} $border-radius [null] - The border-radius used of the avatar.\n/// @param {number} $size [null] - The size of the avatar.\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: avatar-theme($icon-background: black, $icon-color: white);\n/// // Pass the theme to the avatar component mixin\n/// @include avatar($my-avatar-theme);\n@function avatar-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null,\n $color: null,\n $border-radius: null,\n $size: null,\n) {\n $name: 'igx-avatar';\n $avatar-schema: ();\n\n @if map.has-key($schema, $name) {\n $avatar-schema: map.get($schema, $name);\n } @else {\n $avatar-schema: $schema;\n }\n\n $theme: apply-palette($avatar-schema, $palette);\n\n @if not($color) and $background {\n $color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n color: $color,\n border-radius: $border-radius,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin avatar($theme) {\n @include css-vars($theme);\n\n $size: map.get($theme, 'size');\n $small-size: rem(40px);\n $medium-size: rem(64px);\n $large-size: rem(88px);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n $box-shadow: map.get((\n material: null,\n fluent: null,\n bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'),\n indigo-design: null,\n ), $variant);\n\n %igx-avatar-outline {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: inherit;\n opacity: .5;\n }\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-get($theme, 'color');\n background: var-get($theme, 'background');\n vertical-align: middle;\n border-radius: var-get($theme, 'border-radius');\n outline-style: none;\n flex-shrink: 0;\n\n &::after {\n box-shadow: none;\n @if $bootstrap-theme {\n @extend %igx-avatar-outline;\n }\n transition: box-shadow .15s $ease-in-out-quad;\n }\n\n &:focus::after {\n box-shadow: $box-shadow;\n }\n }\n\n %igx-avatar-image {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n %igx-avatar--rounded {\n --igx-avatar-border-radius: #{rem(44px)};\n }\n\n %igx-avatar--initials {\n text-transform: uppercase;\n }\n\n %igx-avatar-initials--small {\n --size: #{$size or $small-size};\n font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);\n }\n\n %igx-avatar-initials--medium {\n --size: #{$size or $medium-size};\n font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);\n }\n\n %igx-avatar-initials--large {\n --size: #{$size or $large-size};\n font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);\n }\n\n %igx-avatar--small {\n --size: #{$size or $small-size};\n width: var-get(('size': $size or $small-size), 'size');\n height: var-get(('size': $size or $small-size), 'size');\n }\n\n %igx-avatar--medium {\n --size: #{$size or $medium-size};\n width: var-get(('size': $size or $medium-size), 'size');\n height: var-get(('size': $size or $medium-size), 'size');\n }\n\n %igx-avatar--large {\n --size: #{$size or $large-size};\n width: var-get(('size': $size or $large-size), 'size');\n height: var-get(('size': $size or $large-size), 'size');\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $icon-color [null] - The color used for the actions icons.\n/// @param {Color} $background [null] - The color used for the action strip component content background.\n/// @param {Color} $actions-background [null] - The color used for the actions background.\n/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.\n/// @param {actions-border-radius} $actions-border-radius [null] - The border radius used for actions container inside action strip component.\n///\n/// @requires extend\n/// @requires apply-palette\n/// @requires text-contrast\n///\n/// @example scss Change the background and icon colors in action strip\n/// $my-action-strip-theme: action-strip-theme($background: black);\n/// // Pass the theme to the action-strip component mixin\n/// @include action-strip($my-action-strip-theme);\n@function action-strip-theme(\n $palette: null,\n $schema: $light-schema,\n\n $background: null,\n $actions-background: null,\n $icon-color: null,\n $delete-action: null,\n $actions-border-radius: null,\n) {\n $name: 'igx-action-strip';\n $action-strip-schema: ();\n\n @if map.has-key($schema, $name) {\n $action-strip-schema: map.get($schema, $name);\n } @else {\n $action-strip-schema: $schema;\n }\n\n $theme: apply-palette($action-strip-schema, $palette);\n\n @if not($icon-color) and $actions-background {\n $icon-color: text-contrast($actions-background);\n }\n\n @if not($actions-border-radius) {\n $actions-border-radius: border-radius(map.get($theme, 'actions-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n actions-background: $actions-background,\n icon-color: $icon-color,\n delete-action: $delete-action,\n actions-border-radius: $actions-border-radius,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin action-strip($theme) {\n @include css-vars($theme);\n\n $padding: (\n comfortable: 0 rem(24px),\n cosy: 0 rem(16px),\n compact: 0 rem(12px)\n );\n\n $variant: map.get($theme, variant);\n\n %igx-action-strip-display {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n top: 0;\n inset-inline-start: 0;\n background: var-get($theme, 'background');\n color: inherit;\n padding: map.get($padding, 'comfortable');\n z-index: 9999;\n }\n\n %action-icons-density {\n [igxButton='icon'] {\n width: rem(28px);\n height: rem(28px);\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(14px)});\n height: var(--igx-icon-size, #{rem(14px)});\n font-size: var(--igx-icon-size, #{rem(14px)});\n }\n }\n }\n\n %igx-action-strip--cosy {\n @extend %action-icons-density;\n padding: map.get($padding, 'cosy');\n }\n\n %igx-action-strip--compact {\n @extend %action-icons-density;\n padding: map.get($padding, 'compact');\n }\n\n %igx-action-strip__editing-actions,\n %igx-action-strip__pinning-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n %igx-action-strip__menu-item {\n [igxLabel] {\n cursor: pointer;\n }\n\n igx-icon {\n width: var(--igx-icon-size, rem(18px));\n height: var(--igx-icon-size, rem(18px));\n font-size: var(--igx-icon-size, rem(18px));\n }\n\n igx-icon + [igxLabel] {\n margin-inline-start: rem(12px);\n }\n\n &%igx-drop-down__item--cosy {\n igx-icon + [igxLabel] {\n margin-inline-start: rem(10px);\n }\n }\n\n &%igx-drop-down__item--compact {\n igx-icon + [igxLabel] {\n margin-inline-start: rem(8px);\n }\n }\n }\n\n %igx-action-strip__menu-item--danger {\n color: color(map.get($theme, 'palette'), 'error');\n\n &:hover {\n color: color(map.get($theme, 'palette'), 'error');\n }\n }\n\n %igx-action-strip__menu-button {\n display: flex;\n align-items: center;\n }\n\n %igx-action-strip__actions {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: all;\n position: relative;\n color: var-get($theme, 'icon-color');\n border-radius: var-get($theme, 'actions-border-radius');\n background: var-get($theme, 'actions-background');\n max-height: 36px;\n\n &:last-child {\n margin-inline-end: 0;\n }\n\n igx-icon {\n color: var-get($theme, 'icon-color');\n }\n\n [igxButton='icon'] {\n igx-icon {\n color: var-get($theme, 'icon-color');\n }\n\n @if $variant == 'indigo-design' or $variant == 'fluent' {\n border-radius: var-get($theme, 'actions-border-radius');\n }\n }\n }\n\n %igx-action-strip__editing-actions {\n > [igxButton] {\n margin-inline-start: rem(4px);\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n }\n }\n\n %igx-action-strip__delete {\n igx-icon {\n color: var-get($theme, 'delete-action');\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 {Number} $border-width [null] - The border width of the badge component.\n/// @param {Color} $background-color [null] - The background color used.\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 elevation\n/// @requires text-contrast\n/// @requires rem\n///\n/// @example scss Change the text and icon colors in a badge\n/// $my-badge-theme: badge-theme($icon-color: black, $background-color: white);\n/// // IE Supported theme - Pass the theme to the badge component mixin\n/// @include badge($my-badge-theme);\n///\n/// // Theming using css variables (not supported in IE11):\n/// @include css-vars($my-badge-theme);\n@function badge-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $icon-color: null,\n $text-color: null,\n\n $border-color: null,\n $border-radius: null,\n $border-width: null,\n\n $background-color: null,\n $shadow: null,\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\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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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} css-vars\n/// @requires color\n/// @requires rem\n/// @requires var-get\n@mixin badge($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\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-get($theme, 'text-color');\n line-height: 1;\n background: var-get($theme, 'background-color');\n border-radius: var-get($theme, 'border-radius');\n box-shadow: var-get($theme, 'shadow');\n border-width: var-get($theme, 'border-width');\n border-color: var-get($theme, 'border-color');\n border-style: $border-type;\n overflow: hidden;\n\n igx-icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: var(--igx-icon-size, #{$badge-width - 2px});\n height: var(--igx-icon-size, #{$badge-width - 2px});\n font-size: var(--igx-icon-size, #{$badge-icon-font-size});\n font-weight: $badge-font-weight;\n color: var-get($theme, 'icon-color');\n }\n }\n\n %igx-badge-value {\n white-space: nowrap;\n padding: $badge-value-padding;\n }\n\n %igx-badge--success {\n background: color($palette, 'success');\n }\n\n %igx-badge--info {\n background: color($palette, 'info');\n }\n\n %igx-badge--warn {\n background: color($palette, 'warn');\n }\n\n %igx-badge--error {\n background: color($palette, 'error');\n }\n\n %igx-badge--hidden {\n visibility: hidden;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group.\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/// @param {Color} $item-disabled-border [null] - The border 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/// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items.\n/// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items.\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 elevation\n///\n/// @example scss Change the background, text, and border colors\n/// $my-button-group-theme: 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 button-group component mixin\n/// @include button-group($my-button-group-theme);\n@function button-group-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $idle-shadow-color: 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 $selected-shadow-color: null\n) {\n $name: 'igx-button-group';\n $selector: 'igx-buttongroup';\n\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 @if not($item-text-color) and $item-background {\n @if meta.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 meta.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 meta.type-of($item-background) == 'color' {\n $item-selected-text-color: text-contrast($item-background);\n }\n }\n\n @if not($idle-shadow-color) and $selected-shadow-color {\n @if meta.type-of($selected-shadow-color) == 'color' {\n $idle-shadow-color: $selected-shadow-color;\n }\n }\n\n @if not($selected-shadow-color) and $idle-shadow-color {\n @if meta.type-of($idle-shadow-color) == 'color' {\n $selected-shadow-color: $idle-shadow-color;\n }\n }\n\n @if not($item-selected-text-color) and $item-selected-background {\n @if meta.type-of($item-selected-background) == 'color' {\n $item-selected-text-color: text-contrast($item-selected-background);\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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 idle-shadow-color: $idle-shadow-color,\n selected-shadow-color: $selected-shadow-color,\n ));\n}\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires color\n/// @requires var-get\n@mixin button-group($theme) {\n @include 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 $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n $indigo-theme: $variant == 'indigo-design';\n\n %igx-group-display {\n display: flex;\n box-shadow: var-get($theme, 'shadow');\n transition: $transition;\n border-radius: var-get($theme, 'border-radius');\n\n button {\n // The margin here is required to fix a bug in Safari #7858\n margin-top: 0;\n margin-inline-end: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-group-item {\n border: $group-item-border-thickness solid var-get($theme, 'item-border-color');\n color: var-get($theme, 'item-text-color');\n background: var-get($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 &[igxButton] {\n border-radius: 0;\n border-color: var-get($theme, 'item-border-color');\n }\n\n &:not(:nth-child(0)) {\n margin-inline-start: -1px;\n }\n\n &:first-of-type {\n border-start-start-radius: var-get($theme, 'border-radius');\n border-end-start-radius: var-get($theme, 'border-radius');\n }\n\n &:last-of-type {\n border-start-end-radius: var-get($theme, 'border-radius');\n border-end-end-radius: var-get($theme, 'border-radius');\n }\n\n &[igxButton][disabled='true'] {\n color: var-get($theme, 'disabled-text-color');\n background: var-get($theme, 'disabled-background-color');\n border-color: var-get($theme, 'item-disabled-border');\n }\n\n &:hover,\n &:focus {\n color: var-get($theme, 'item-hover-text-color');\n background: var-get($theme, 'item-hover-background');\n }\n\n &:focus {\n @if $bootstrap-theme or $indigo-theme {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');\n }\n\n @if $indigo-theme {\n z-index: 2;\n }\n }\n }\n\n %igx-group-item-vertical {\n &:not(:nth-child(0)) {\n margin-top: -1px;\n margin-inline-start: 0;\n }\n\n &:first-of-type {\n border-start-start-radius: var-get($theme, 'border-radius');\n border-start-end-radius: var-get($theme, 'border-radius');\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-of-type {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var-get($theme, 'border-radius');\n border-end-end-radius: var-get($theme, 'border-radius');\n }\n }\n\n %igx-group-item-selected {\n color: var-get($theme, 'item-selected-text-color');\n background: var-get($theme, 'item-selected-background');\n border-color: var-get($theme, 'item-selected-border-color');\n position: relative;\n z-index: 1;\n\n &:hover,\n &:focus {\n color: var-get($theme, 'item-selected-text-color');\n background: var-get($theme, 'item-selected-hover-background');\n }\n\n &:focus {\n z-index: 3;\n }\n\n @if $indigo-theme {\n &:focus {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');\n }\n }\n\n &[igxButton][disabled='true'] {\n position: relative;\n\n &::before {\n position: absolute;\n content: '';\n top: 0;\n bottom: 0;\n inset-inline-end: 0;\n inset-inline-start: 0;\n background: color($palette, 'grays', 500, .12);\n }\n }\n }\n\n %igx-group-vertical {\n flex-flow: column;\n }\n\n %igx-group-item-content {\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n min-width: 0;\n\n * ~ * {\n margin-inline-start: $group-items-margin;\n }\n }\n\n %igx-button-group__button-text {\n width: 100%;\n @include ellipsis();\n }\n}\n","@use '../../utilities' as *;\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","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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 idle indicator dot color.\n/// @param {Color} $indicator-border-color [null] - The idle indicator border color.\n/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot 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 elevation\n/// @requires text-contrast\n///\n/// @example scss Change the previous/next button colors\n/// $my-carousel-theme: carousel-theme(\n/// $button-background: black,\n/// $button-hover-background: white\n/// );\n/// // Pass the carousel theme to the carousel component mixin\n/// @include carousel($my-carousel-theme);\n@function carousel-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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-dot-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 @if not($button-shadow) {\n $button-elevation: map.get($carousel-schema, 'button-elevation');\n $button-shadow: 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 @if meta.type-of($button-disabled-background) == 'color' {\n $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);\n }\n }\n\n @if not($border-radius){\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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-dot-color: $indicator-active-dot-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} css-vars\n/// @requires color\n/// @requires elevation\n/// @requires {mixin} animation\n/// @requires {mixin} scale-in-center\n/// @requires {mixin} scale-out-center\n/// @requires var-get\n@mixin carousel($theme) {\n @include css-vars($theme);\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 $variant: map.get($theme, variant);\n $not-bootstrap-theme: $variant != 'bootstrap';\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 @if $not-bootstrap-theme {\n border-radius: border-radius(50%);\n } @else {\n border-radius: var-get($theme, 'border-radius');\n }\n\n outline-style: none;\n transition: all .15s ease-in-out;\n color: var-get($theme, 'button-arrow-color');\n background: var-get($theme, 'button-background');\n box-shadow: var-get($theme, 'button-shadow');\n }\n\n %igx-nav-arrow--disabled {\n background: var-get($theme, 'button-disabled-background');\n color: var-get($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-get($theme, 'button-hover-arrow-color');\n background: var-get($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 inset-inline-end: 0;\n }\n\n %igx-carousel-arrow--prev {\n inset-inline-start: 0;\n }\n\n %igx-carousel-arrow--next,\n %igx-carousel-arrow--prev {\n [dir='rtl'] & {\n transform: scaleX(-1);\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 inset-inline-start: 50%;\n transform: translateX(-50%);\n\n [dir='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\n @if $variant != 'indigo-design' {\n border: $indicator-border-style;\n border-color: var-get($theme, 'indicator-border-color');\n box-shadow: elevation($elevation: 1);\n opacity: .7;\n }\n\n border-radius: border-radius(50%);\n transition: all .15s $ease-out-quad;\n\n &::after {\n @if $variant != 'indigo-design' {\n @include animation('scale-out-center' .15s $ease-out-quad forwards);\n }\n content: '';\n position: absolute;\n @if $variant != 'indigo-design' {\n inset: 1px;\n } @else {\n inset: 0;\n }\n border-radius: inherit;\n background: var-get($theme, 'indicator-dot-color');\n }\n\n &:hover {\n opacity: 1;\n }\n }\n\n %igx-nav-dot--active {\n @if $variant != 'indigo-design' {\n border: $indicator-border-style;\n border-color: var-get($theme, 'indicator-active-border-color');\n }\n\n opacity: 1;\n\n &::after {\n background: var-get($theme, 'indicator-active-dot-color');\n @if $variant != 'indigo-design' {\n @include animation('scale-in-center' .15s $ease-out-quad forwards);\n }\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-get($theme, 'border-radius');\n min-height: 300px;\n min-width: 300px;\n }\n\n %igx-carousel-slide {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n z-index: -1;\n background: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n///\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n///\n/// @param {color} $bar-color [null] - The background color of the bar.\n/// @param {color} $handle-color [null] - The color for the bar drag handle.\n/// @param {color} $expander-color [null] - The color for the arrow expander's.\n/// @param {number} $border-radius [null] - the border radios of the splitter bar drag handle\n/// @param {color} $focus-color [null] - The color used for focused splitter bar.\n/// @param {number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter.\n///\n@function splitter-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $bar-color: null,\n $handle-color: null,\n $expander-color: null,\n $border-radius: null,\n $focus-color: null,\n $size: null\n) {\n $name: 'igx-splitter';\n $splitter-schema: ();\n\n @if map.has-key($schema, $name) {\n $splitter-schema: map.get($schema, $name);\n } @else {\n $splitter-schema: $schema;\n }\n\n $theme: apply-palette($splitter-schema, $palette);\n\n @if not($handle-color) and $bar-color {\n $handle-color: text-contrast($bar-color);\n }\n\n @if not($expander-color) and $bar-color {\n $expander-color: text-contrast($bar-color);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n bar-color: $bar-color,\n handle-color: $handle-color,\n expander-color: $expander-color,\n border-radius: $border-radius,\n focus-color: $focus-color,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin splitter($theme) {\n @include css-vars($theme);\n $splitter-color: var-get($theme, 'bar-color');\n $hitbox-size: 4px;\n $debug-hitbox: false;\n $hitbox-debug-color: rgba(coral, .24);\n\n $variant: map.get($theme, 'variant');\n\n %igx-splitter-base {\n &[aria-orientation='horizontal'] {\n [dir='rtl'] & {\n flex-direction: row-reverse !important;\n }\n }\n }\n\n %handle-area {\n position: absolute;\n content: '';\n width: 100%;\n height: $hitbox-size;\n background: if($debug-hitbox, $hitbox-debug-color, transparent);\n }\n\n %handle-area--vertical {\n width: $hitbox-size;\n height: 100%;\n }\n\n %igx-splitter-bar {\n position: relative;\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n background: $splitter-color;\n border: 1px solid $splitter-color;\n z-index: 99;\n opacity: .68;\n transition: opacity .15s $ease-out-quad !important;\n\n &::before {\n @extend %handle-area;\n top: 100%;\n }\n\n &::after {\n @extend %handle-area;\n bottom: 100%;\n }\n\n &:hover {\n transition: all .25s ease-out;\n opacity: 1;\n }\n }\n\n %igx-splitter-bar--focus {\n // Remove the default browser outline styles\n outline: transparent solid 1px;\n box-shadow: inset 0 0 0 1px var-get($theme, 'focus-color');\n\n @if $variant == 'indigo-design' {\n background: var-get($theme, 'focus-color');\n }\n }\n\n %igx-splitter-bar--vertical {\n flex-direction: column;\n height: 100%;\n\n &::before {\n @extend %handle-area--vertical;\n top: 0;\n right: 100%;\n }\n\n &::after {\n @extend %handle-area--vertical;\n top: 0;\n left: 100%;\n }\n }\n\n %igx-splitter-handle {\n background: var-get($theme, 'handle-color');\n border-radius: var-get($theme, 'border-radius');\n }\n\n %igx-splitter-handle--horizontal {\n width: 25%;\n height: var-get($theme, 'size');\n margin: 0 rem(48px);\n }\n\n %igx-splitter-handle--vertical {\n width: var-get($theme, 'size');\n height: 25%;\n margin: rem(48px) 0;\n }\n\n %igx-splitter-hitbox {\n position: absolute;\n content: '';\n background: if($debug-hitbox, $hitbox-debug-color, transparent);\n }\n\n %igx-splitter-expander {\n position: relative;\n width: 0;\n height: 0;\n border-inline-end: var-get($theme, 'size') solid transparent;\n border-inline-start: var-get($theme, 'size') solid transparent;\n cursor: pointer;\n z-index: 1;\n }\n\n %igx-splitter-expander--start {\n border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - #{map.get($theme, 'size')});\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 4);\n height: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n\n %igx-splitter-expander--end {\n border-bottom: unset;\n border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 4);\n height: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n\n %igx-splitter-expander--start-vertical {\n border-top: var-get($theme, 'size') solid transparent;\n border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n border-bottom: var-get($theme, 'size') solid transparent;\n border-inline-start: unset;\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 3);\n height: calc(#{map.get($theme, 'size')} * 4);\n }\n }\n\n %igx-splitter-expander--end-vertical {\n border-top: var-get($theme, 'size') solid transparent;\n border-inline-end: unset;\n border-bottom: var-get($theme, 'size') solid transparent;\n border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n height: calc(#{map.get($theme, 'size')} * 4);\n width: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n}\n","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 combo-theme(\n $palette: null,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin combo($theme) {\n @include css-vars($theme);\n\n %igx-combo {\n position: relative;\n display: block;\n }\n\n %igx-combo__checkbox {\n margin-inline-end: 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-get($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-get($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-get($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","@use '../../base' as *;\n@use 'sass:map';\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 elevation\n/// @requires text-contrast\n/// @requires var-get\n/// @requires rem\n@mixin date-picker($theme) {\n $palette: map.get($theme, 'palette');\n @include css-vars($theme, '.igx-date-picker');\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n %date-picker {\n box-shadow: elevation($elevation: 24);\n border-radius: border-radius(var-get($theme, 'border-radius'));\n background: var-get($theme, 'content-background');\n overflow: hidden;\n\n %cal-display {\n background: var-get($theme, 'content-background');\n }\n\n %cal-header-display {\n background: var-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n }\n\n %cal-picker-arrow {\n color: var-get($theme, 'picker-arrow-color');\n\n &:hover {\n color: var-get($theme, 'picker-arrow-hover-color');\n }\n }\n\n %cal-picker-date {\n color: var-get($theme, 'picker-text-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'picker-text-hover-color');\n }\n }\n\n %cal-value {\n color: var-get($theme, 'content-text-color');\n min-width: 14.28%;\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--label {\n color: var-get($theme, 'label-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'label-color');\n }\n }\n\n %cal-value--weekend {\n color: var-get($theme, 'weekend-text-color');\n }\n\n %cal-value--special {\n color: var-get($theme, 'date-special-text-color');\n background: var-get($theme, 'date-special-background');\n }\n\n %cal-value--disabled {\n color: var-get($theme, 'date-disabled-text-color');\n }\n\n %cal-value--year-current {\n color: var-get($theme, 'year-current-text-color');\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'year-hover-text-color');\n }\n }\n }\n\n %cal-value--year-hover {\n color: var-get($theme, 'year-hover-text-color');\n }\n\n %cal-value--month-hover {\n color: var-get($theme, 'month-hover-text-color');\n }\n\n %cal-value--month-current {\n color: var-get($theme, 'month-current-text-color');\n }\n\n %cal-value--inactive {\n color: var-get($theme, 'inactive-text-color');\n\n &:hover {\n color: var-get($theme, 'inactive-text-color');\n }\n }\n\n %cal-value--selected {\n color: var-get($theme, 'date-selected-text-color');\n }\n\n %cal-value--current {\n color: var-get($theme, 'date-current-text-color');\n }\n }\n\n %date-picker--vertical {\n min-width: 368px; /* 168px for header + 200px for the content */\n }\n\n %date-picker--dropdown {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n box-shadow: elevation($elevation: 3);\n }\n\n %date-picker__buttons {\n display: flex;\n justify-content: flex-end;\n padding: rem(8px);\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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 color for date range separator label.\n/// @requires var-get\n/// @requires rem\n@function date-range-picker-theme(\n $palette: null,\n $schema: $light-schema,\n $label-color: null\n) {\n $name: 'igx-date-range';\n $date-range-schema: ();\n\n @if map.has-key($schema, $name) {\n $date-range-schema: map.get($schema, $name);\n } @else {\n $date-range-schema: $schema;\n }\n\n $theme: apply-palette($date-range-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n label-color: $label-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin date-range-picker($theme) {\n @include css-vars($theme);\n\n $base-scale-size: (\n 'comfortable': rem(16px),\n 'cosy': rem(19px),\n 'compact': rem(22px)\n );\n\n %igx-date-range-picker {\n display: flex;\n\n > igx-icon {\n cursor: pointer;\n }\n\n igx-input-group {\n flex: 1;\n }\n }\n\n igx-date-range-start,\n igx-date-range-end,\n %igx-date-range-picker__start,\n %igx-date-range-picker__end {\n flex: 1 0 0%;\n }\n\n %igx-date-range-picker__label {\n display: flex;\n align-items: center;\n color: var-get($theme, 'label-color');\n margin: 0 rem(8px);\n padding-top: rem(18px, map.get($base-scale-size, 'comfortable'));\n }\n\n %igx-date-range-picker--cosy {\n %igx-date-range-picker__label {\n padding-top: rem(18px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %igx-date-range-picker--compact {\n %igx-date-range-picker__label {\n padding-top: rem(18px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %igx-date-range-picker-buttons {\n display: flex;\n justify-content: flex-end;\n padding: 0 rem(16px) rem(16px) rem(16px);\n\n > * {\n margin-inline-end: rem(8px);\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n &:empty {\n display: none;\n }\n }\n}\n\n/// Adds typography styles for the igx-date-range-picker component.\n/// Uses the '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 [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin date-range-typography(\n $type-scale,\n $categories: (\n label: 'subtitle-1',\n )\n) {\n $label: map.get($categories, 'label');\n\n %igx-date-range__label {\n @include type-style($type-scale, $label);\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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: divider-theme($color: orange);\n/// // Pass the theme to the igx-divider component mixin\n/// @include divider($my-divider-theme);\n@function divider-theme(\n $palette: null,\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} css-vars\n/// @requires var-get\n///\n@mixin divider($theme) {\n @include css-vars($theme);\n\n %igx-divider-display {\n display: block;\n height: 1px;\n background: var-get($theme, 'color');\n }\n\n %igx-divider--dashed {\n background: linear-gradient(to right, var-get($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-get($theme, 'color') 50%, transparent 50%);\n background-size: 1px 10px; /* dash size */\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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] - sets the color for the label.\n/// @param {Number} $symbol-size [null] - the size of the symbols.\n/// @param {Color} $symbol-empty-color [null] - sets the idle color for the symbol when it is a plane text.\n/// @param {Color} $symbol-full-color [null] - sets the color in selected state for the symbol when it is a plane text.\n/// @param {Color} $symbol-empty-filter [null] - the filter(s) used for the empty symbol.\n/// @param {Color} $symbol-full-filter [null] - the filter(s) used for the filled symbol.\n/// @param {Color} $disabled-label-color [null] - sets the color for the label in disabled state.\n/// @param {Color} $disabled-empty-symbol-color [null] - sets the idle color for the symbol in disabled state when it is a plane text.\n/// @param {Color} $disabled-full-symbol-color [null] - sets the color for the symbol in selected/disabled state when it is a plane text.\n///\n/// @requires $light-schema\n/// @requires extend\n///\n/// @example scss\n/// $my-rating-theme: rating-theme();\n/// @include rating($my-rating-theme);\n@function rating-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n\n $name: 'igc-rating';\n $rating-schema: ();\n\n @if map.has-key($schema, $name) {\n $rating-schema: map.get($schema, $name);\n } @else {\n $rating-schema: $schema;\n }\n\n $theme: apply-palette($rating-schema, $palette);\n\n @return extend($theme, (name: $name), keywords($rest));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin rating($theme) {\n @include css-vars($theme: $theme, $prefix: ignore);\n\n igc-rating::part(label) {\n color: var-get($theme, 'label-color');\n }\n\n igc-rating::part(value-label) {\n color: color(map.get($theme, 'palette'), 'grays', 900);\n }\n \n igc-rating[disabled]::part(label),\n igc-rating[disabled]::part(value-label) {\n color: var-get($theme, 'disabled-label-color');\n }\n\n igc-rating[disabled] {\n --symbol-empty-color: var(--disabled-empty-symbol-color);\n --symbol-full-color: var(--disabled-full-symbol-color);\n --symbol-empty-filter: grayscale(100%) opacity(50%);\n --symbol-full-filter: grayscale(50%);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use './excel-filtering-theme' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:color';\n@use 'sass:math';\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 [null] - 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 [null] - 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/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).\n/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).\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-selected-hover-text-color [null] - The selected row hover 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 cell that has been edited.\n/// @param {Color} $cell-new-color [null] - The text color of a new, unedited cell. Used when adding new row in a grid.\n/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.\n/// @param {Color} $cell-selected-within-background [null] - The background of the selected cell inside a selected row/column.\n/// @param {Color} $cell-selected-within-text-color [null] - The color of the selected cell inside a selected row/column.\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/// @param {Color} $grouparea-color [null] - The grid group area 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-background-and [null] - The background color of advanced filtering \"AND\" condition.\n/// @param {Color} $filtering-background-and--focus [null] - The background color on focus/selected of advanced filtering \"AND\" condition.\n/// @param {Color} $filtering-background-or [null] - The background color of advanced filtering \"OR\" condition.\n/// @param {Color} $filtering-background-or--focus [null] - The background color on focus/selected of advanced filtering \"OR\" condition.\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 {Color} $grid-border-color [null] - The color of the grid border.\n/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires luminance\n/// @requires text-contrast\n/// @requires to-opaque\n/// @requires extend\n/// @requires elevation\n@function grid-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $header-selected-background: null,\n $header-selected-text-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-selected-hover-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 $cell-new-color: null,\n $cell-disabled-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 $grouparea-color: 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 $filtering-background-and: null,\n $filtering-background-or: null,\n $filtering-background-and--focus: null,\n $filtering-background-or--focus: null,\n $tree-filtered-text-color: null,\n $tree-selected-filtered-row-text-color: null,\n $tree-selected-filtered-cell-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 $cell-selected-within-background: null,\n $cell-selected-within-text-color: null,\n) {\n $name: 'igx-grid';\n $selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';\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 @if not($cell-selected-within-text-color) and $cell-selected-within-background {\n $cell-selected-within-text-color: text-contrast($cell-selected-within-background);\n }\n\n @if not($ghost-header-icon-color) and $ghost-header-background {\n @if meta.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 meta.type-of($header-background) == 'color' {\n $header-background: to-opaque($header-background, 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-selected-text-color) and $header-selected-background {\n $header-selected-text-color: text-contrast($header-selected-background);\n }\n\n @if not($header-border-color) and $header-background {\n @if meta.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 meta.type-of($row-odd-background) == 'color' and color.alpha($row-odd-background) != 1 {\n $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));\n\n $row-odd-background: to-opaque($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 meta.type-of($row-even-background) == 'color' and color.alpha($row-even-background) != 1 {\n $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));\n\n $row-even-background: to-opaque($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 meta.type-of($content-background) == 'color' {\n $row-hover-background: to-opaque(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: text-contrast($row-selected-background);\n }\n\n @if not($row-selected-hover-text-color) and $row-selected-hover-background {\n $row-selected-hover-text-color: text-contrast($row-selected-hover-background);\n }\n\n @if not($row-border-color) and $content-background {\n @if meta.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 meta.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 meta.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($grouparea-color) and $grouparea-background {\n @if meta.type-of($grouparea-background) == 'color' {\n $grouparea-color: rgba(text-contrast($grouparea-background), .8)\n }\n }\n\n @if not($grouparea-color) and $header-background {\n @if meta.type-of($header-background) == 'color' {\n $grouparea-color: rgba(text-contrast($header-background), .8)\n }\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 meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {\n $filtering-header-background: to-opaque(lighten-color($header-background, 5%));\n } @else {\n $filtering-header-background: to-opaque(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 meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {\n $filtering-row-background: to-opaque(lighten-color($header-background, 5%));\n } @else {\n $filtering-row-background: to-opaque(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(to-opaque($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: elevation($elevations, $grid-elevation);\n }\n\n @if not($drag-shadow) {\n $drag-elevation: map.get($grid-schema, 'drag-elevation');\n $drag-shadow: elevation($elevations, $drag-elevation);\n }\n\n @if not($drop-area-border-radius) {\n $drop-area-border-radius: border-radius(map.get($theme, 'drop-area-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n\n header-background: $header-background,\n header-text-color: $header-text-color,\n header-selected-background: $header-selected-background,\n header-selected-text-color: $header-selected-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-selected-hover-text-color: $row-selected-hover-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 cell-new-color: $cell-new-color,\n\n cell-disabled-color: $cell-disabled-color,\n\n resize-line-color: $resize-line-color,\n\n drop-indicator-color: $drop-indicator-color,\n\n grouparea-background: $grouparea-background,\n grouparea-color: $grouparea-color,\n\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 filtering-background-and: $filtering-background-and,\n filtering-background-or: $filtering-background-or,\n filtering-background-and--focus: $filtering-background-and--focus,\n filtering-background-or--focus: $filtering-background-or--focus,\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\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 cell-selected-within-background: $cell-selected-within-background,\n cell-selected-within-text-color: $cell-selected-within-text-color,\n ));\n}\n\n@mixin _filtering-scroll-mask($theme, $dir) {\n display: block;\n position: absolute;\n width: rem(10px);\n content: '';\n inset-block: rem(-2px);\n background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires {mixin} excel-filtering\n/// @requires color\n/// @requires contrast-color\n/// @requires rem\n/// @requires var-get\n@mixin grid($theme) {\n @include css-vars($theme);\n\n @include scale-in-ver-center();\n\n $palette: map.get($theme, 'palette');\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $cbx-size: map.get((\n material: rem(20px),\n fluent: rem(20px),\n bootstrap: rem(14px),\n indigo-design: rem(20px),\n ), $variant);\n $cbx-bs-size: rem(14px);\n\n $grid-shadow: var-get($theme, 'grid-shadow');\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: end;\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: color($palette, 'grays', 300);\n\n $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n\n $cell-pin: (\n style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),\n color: var-get($theme, 'pinned-border-color')\n );\n\n $padding-comfortable: rem(24px);\n $padding-cosy: rem(16px);\n $padding-compact: rem(12px);\n\n $grid-header-padding: (\n comfortable: 0 $padding-comfortable,\n cosy: 0 $padding-cosy,\n compact: 0 $padding-compact\n );\n\n $pivot-row-aria-padding: (\n comfortable: $padding-comfortable,\n cosy: $padding-cosy,\n compact: $padding-compact\n );\n\n $grid-cbx-padding: (\n comfortable: $padding-comfortable,\n cosy: $padding-cosy,\n compact: $padding-compact\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: 0 rem(24px),\n cosy: 0 rem(16px),\n compact: 0 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-header-weight: map.get((\n material: 600,\n fluent: 800,\n bootstrap: 700,\n indigo-design: 600,\n ), $variant);\n\n %disable-focus-styles {\n outline: 0;\n }\n\n %grid-display {\n --igx-tree-indent-size: #{rem(24px)};\n\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\n @if $variant == 'fluent' {\n box-shadow: 0 0 0 1px var-get($theme, 'grid-border-color');\n }\n\n outline-style: none;\n z-index: 1;\n\n %cbx-display {\n min-width: $cbx-size;\n }\n }\n\n %grid-display-cosy {\n --igx-tree-indent-size: #{rem(16px)};\n }\n\n %grid-display-compact {\n --igx-tree-indent-size: #{rem(12px)};\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-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n overflow: hidden;\n outline-style: none;\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 > [aria-activedescendant] {\n outline-style: none;\n }\n }\n\n %grid-thead {\n border-bottom: $grid-header-border;\n\n @if $bootstrap-theme {\n border-bottom-width: rem(2px);\n }\n\n z-index: 2;\n\n %grid__cbx-selection--push {\n align-items: flex-start;\n padding-top: math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2);\n }\n\n %grid-row {\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-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($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: math.div(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: math.div(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-inline-end: 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 position: relative;\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-inline-end: 1px solid var-get($theme, 'row-border-color');\n border-bottom: 1px solid var-get($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-get($theme, 'row-border-color');\n }\n }\n\n %grid-tbody {\n position: relative;\n background: var-get($theme, 'content-background');\n color: var-get($theme, 'content-text-color');\n overflow: hidden;\n z-index: 1;\n outline-style: none;\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-get($theme, 'content-text-color');\n flex-direction: column;\n padding: rem(24px);\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-get($theme, 'header-background');\n z-index: 10001;\n }\n\n %grid-thead-thumb {\n background: var-get($theme, 'header-background');\n border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');\n }\n\n %grid-tfoot-thumb {\n position: absolute;\n top: 0;\n inset-inline-end: 0;\n background: var-get($theme, 'header-background');\n border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');\n }\n\n %grid-tbody-scrollbar {\n background: var-get($theme, 'content-background');\n border-inline-start: rem(1px) solid var-get($theme, 'row-border-color');\n position: relative;\n }\n\n %grid-tbody-scrollbar-start {\n background: var-get($theme, 'header-background');\n }\n\n %grid-tbody-scrollbar-main {\n position: relative;\n }\n\n %grid-tbody-scrollbar-end {\n background: var-get($theme, 'header-background');\n }\n\n %grid-scroll-start {\n background: var-get($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-get($theme, 'content-background');\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n outline-style: none;\n position: relative;\n background-clip: content-box !important;\n\n &:hover {\n background: var-get($theme, 'row-hover-background');\n color: var-get($theme, 'row-hover-text-color');\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-hover-text-color');\n background: var-get($theme, 'row-selected-hover-background');\n }\n\n %grid-cell--cross-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n }\n\n &%igx-grid__tr--ghost {\n @include css-vars((\n name: 'igx-grid-row',\n row-ghost-background: map.get($theme, 'row-ghost-background'),\n row-drag-color: map.get($theme, 'row-drago-color')\n ));\n\n background: var-get($theme, 'row-ghost-background');\n color: var-get($theme, 'row-drag-color');\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 flex: 1 0 auto;\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 border-inline-end: 1px solid transparent;\n background-clip: border-box;\n\n igx-icon {\n width: var(--igx-icon-size, #{$drag-icon-size});\n height: var(--igx-icon-size, #{$drag-icon-size});\n font-size: var(--igx-icon-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 }\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 }\n\n %igx-grid__drag-indicator--header {\n border-inline-end: $grid-header-border;\n }\n\n %igx-grid__drag-indicator--off {\n color: var-get($theme, 'row-drag-color');\n }\n\n %igx-grid__tr--drag {\n opacity: .5;\n }\n\n %grid-row--odd {\n background: var-get($theme, 'row-odd-background');\n color: var-get($theme, 'row-odd-text-color');\n }\n\n %grid-row--even {\n background: var-get($theme, 'row-even-background');\n color: var-get($theme, 'row-even-text-color');\n }\n\n %igx-grid__tr--expanded {\n border-bottom: none;\n }\n\n %igx-grid__tr--pinned {\n position: relative;\n background: inherit;\n z-index: 10000;\n\n %igx-grid__hierarchical-expander--empty {\n border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');\n }\n }\n\n %igx-grid__tr--pinned-top {\n border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n }\n\n %igx-grid__tr--pinned-bottom {\n border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n position: absolute;\n bottom: 0;\n }\n\n %igx-grid__td--bool {\n justify-content: center;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n\n %igx-icon--error {\n color: color($palette, 'grays', 500);\n }\n }\n\n %igx-grid__td--bool-true {\n %igx-icon--success {\n color: color($palette, 'grays', 700);\n }\n }\n\n %igx-grid__tr--edit {\n border-bottom: 1px solid var-get($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 inset-inline-start: 0;\n background: var-get($theme, 'edit-mode-color');\n }\n\n &%grid-row {\n border-bottom: 1px solid var-get($theme, 'edit-mode-color');\n }\n\n %igx-grid__td--editing {\n border: none;\n\n %form-group-bundle--focus {\n caret-color: var-get($theme, 'edit-mode-color') !important;\n }\n\n %form-group-bundle--fluent--focus {\n &::after {\n border: none !important;\n }\n }\n\n %form-group-border {\n background: var-get($theme, 'edit-mode-color') !important;\n }\n }\n\n [aria-readonly='true'] {\n color: var-get($theme, 'cell-disabled-color');\n\n igx-icon {\n color: var-get($theme, 'cell-disabled-color');\n }\n }\n }\n\n %igx-grid__tr--inner {\n display: flex;\n background: inherit;\n }\n\n %igx-grid__tr--header {\n display: flex;\n align-items: center;\n }\n\n %igx-grid__tr--add-animate {\n @include animation(scale-in-ver-center .2s $ease-in-out-quad);\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: if($variant == 'indigo-design', rem(4px), rem(2px));\n height: 100%;\n z-index: 10000;\n background: var-get($theme, 'edited-row-indicator');\n }\n }\n\n %grid-row--group {\n position: relative;\n background: var-get($theme, 'header-background') !important;\n }\n\n %igx-grid-row--filtered {\n %grid-cell-text {\n color: var-get($theme, 'tree-filtered-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-filtered-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-filtered-text-color');\n }\n }\n\n %grid-cell--selected {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n }\n }\n }\n\n %grid-row--selected--filtered {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n }\n }\n\n %grid-cell--selected {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n\n &:hover {\n color: var-get($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-inline-end: rem(8);\n cursor: pointer;\n\n color: var-get($theme, 'expand-icon-color');\n\n &:hover {\n color: var-get($theme, 'expand-icon-hover-color')\n }\n\n [dir='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-inline-end: rem(8px, 16px);\n\n %circular-outer {\n stroke: var-get($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: start;\n background-clip: border-box !important;\n }\n\n // This is no longer being extended and is left\n // here for reference purposes only. It seems setting\n // overflow: hidden on the cell prevents drag and selection\n // of the cell.\n // See github issue #9821\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-get($theme, 'cell-active-border-color');\n\n %igx-grid__filtering-cell,\n %grid-cell-header {\n border-inline-end-color: var-get($theme, 'cell-active-border-color');\n border-bottom-color: var-get($theme, 'cell-active-border-color');\n }\n }\n\n %grid-cell--invalid {\n padding-inline-end: rem(4px) !important;\n\n > igx-icon {\n margin-inline-start: auto;\n color: color($palette, 'error', 500);\n width: var(--igx-icon-size, rem(18px));\n height: var(--igx-icon-size, rem(18px));\n font-size: var(--igx-icon-size, rem(18px));\n }\n\n %grid-cell-text {\n width: 100%;\n }\n\n .igx-input-group__bundle {\n &:focus-within {\n &::after {\n border: none !important;\n }\n }\n }\n }\n\n %grid-cell--valid {\n box-shadow: inset 0 0 0 rem(2px) color($palette, 'success', 500) !important;\n }\n\n %grid-cell--pinned-selected,\n %grid-cell--selected {\n color: var-get($theme, 'cell-selected-text-color');\n background: var-get($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 &:hover {\n color: var-get($theme, 'cell-selected-text-color');\n }\n }\n }\n\n %grid-row--selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n\n %grid-cell--selected,\n %grid-cell--pinned-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n\n &:hover {\n background: var-get($theme, 'row-selected-hover-background');\n color: var-get($theme, 'row-selected-hover-text-color');\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-hover-text-color');\n background: var-get($theme, 'row-selected-hover-background');\n }\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'row-selected-text-color');\n\n &:hover {\n color: var-get($theme, 'row-selected-text-color');\n }\n }\n }\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n }\n\n %grid-cell--cross-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n\n %igx-grid__td--new {\n color: var-get($theme, 'cell-new-color');\n }\n\n %igx-grid__td--edited {\n %grid-cell-text {\n font-style: italic;\n color: var-get($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: color(map.get($theme, 'palette'), 'error');\n text-decoration: line-through;\n }\n }\n\n %igx-grid__tr--disabled {\n %grid-cell-text {\n color: var-get($theme, 'cell-disabled-color');\n }\n }\n\n %igx-grid__td--editing {\n background: var-get($theme, 'cell-editing-background') !important;\n box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'edit-mode-color');\n padding: 0 !important;\n\n // Have a more stable visual editing experience\n igx-input-group,\n igx-select,\n igx-date-picker,\n igx-time-picker {\n width: 100%;\n height: 100%;\n }\n\n igx-input-group {\n --theme: fluent;\n padding-top: 0 !important;\n }\n\n .igx-input-group__bundle {\n border: none !important;\n\n &::before {\n content: none !important;\n }\n }\n\n &.igx-grid__td--invalid {\n box-shadow: inset 0 0 0 rem(2px) color($palette, 'error', 500) !important;\n padding-inline-end: rem(4px) !important;\n }\n\n igx-prefix,\n igx-suffix {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n }\n\n igx-date-range-picker {\n height: 100%;\n }\n\n igx-time-picker [igxLabel] {\n display: none;\n }\n\n %form-group-bundle {\n height: 100%;\n }\n\n input {\n margin: 0 auto;\n max-width: 100%;\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--column-selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n\n &:hover {\n background: var-get($theme, 'row-selected-hover-background');\n color: var-get($theme, 'row-selected-text-color');\n }\n }\n\n %grid-cell--pinned-last {\n border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n\n %igx-grid__filtering-cell,\n %grid-cell-header {\n border-inline-end: none;\n }\n\n &%grid-cell--editing {\n border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;\n }\n }\n\n %grid-cell--pinned-first {\n border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n\n &%grid-cell--editing {\n border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;\n }\n }\n\n %grid-cell--row-pinned-first {\n overflow: hidden;\n }\n\n %grid-cell--pinned-chip {\n margin-inline-end: rem(12px);\n }\n\n %grid-cell--pinned-chip--cosy {\n margin-inline-end: rem(8px);\n }\n\n %grid-cell--pinned-chip--compact {\n margin-inline-end: rem(4px);\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-inline-end: $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-get($theme, 'filtering-header-background');\n color: var-get($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: math.div(map.get($grid-header-height, 'comfortable'), $grid-head-fs);\n transition: color 250ms ease-in-out;\n }\n\n %grid-cell-header-title--cosy {\n line-height: math.div(map.get($grid-header-height, 'cosy'), $grid-head-fs);\n }\n\n %grid-cell-header-title--compact {\n line-height: math.div(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 position: relative;\n display: flex;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(15px)});\n height: var(--igx-icon-size, #{rem(15px)});\n font-size: var(--igx-icon-size, #{rem(15px)});\n }\n\n &::after {\n content: attr(data-sortIndex);\n position: absolute;\n top: -5px;\n inset-inline-end: -1px;\n font-size: rem(10px);\n text-align: end;\n font-family: sans-serif;\n line-height: rem(10px);\n }\n }\n }\n\n\n %igx-grid-th__expander {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: rem(8px);\n cursor: pointer;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n }\n\n &:hover {\n igx-icon {\n color: var-get($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--selectable {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n\n @if $variant != 'indigo-design' {\n opacity: .7;\n\n &%grid__drag-ghost-image {\n opacity: 1;\n }\n } @else {\n opacity: 1;\n }\n\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n ::after {\n background: var-get($theme, 'header-selected-background');\n }\n }\n\n &%igx-grid-th--sorted {\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n &:focus,\n &:hover {\n color: var-get($theme, 'header-selected-text-color');\n }\n }\n }\n }\n\n %igx-grid-th--selected {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n\n .sort-icon::after {\n background: var-get($theme, 'header-selected-background');\n }\n\n &%igx-grid-th--sorted {\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n &:focus,\n &:hover {\n color: var-get($theme, 'header-selected-text-color');\n }\n }\n }\n }\n\n %igx-grid-th--active {\n @extend %grid-cell--active;\n\n %igx-grid-th--selected,\n %igx-grid-th--selectable {\n @extend %grid-cell--active;\n }\n }\n\n %igx-grid-summary--active {\n @extend %grid-cell--active !optional;\n }\n\n %igx-grid-th--sortable {\n .sort-icon {\n cursor: pointer;\n opacity: .7;\n\n &:hover {\n opacity: 1;\n }\n }\n }\n\n %igx-grid-th--sorted {\n .sort-icon {\n opacity: 1;\n color: var-get($theme, 'sorted-header-icon-color');\n\n &:hover {\n color: var-get($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 cursor: pointer;\n opacity: .7;\n\n &:hover {\n opacity: 1;\n }\n }\n }\n\n .sort-icon {\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 background: inherit;\n z-index: 4;\n background-clip: border-box;\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 inset-inline-end: -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-get($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 inset-inline-end: 100%;\n }\n\n &::after {\n inset-inline-start: 100%;\n }\n }\n\n %grid-summaries {\n display: flex;\n overflow: hidden;\n background: var-get($theme, 'root-summaries-background');\n outline-style: none;\n\n %igx-grid-summary__result {\n color: var-get($theme, 'root-summaries-text-color');\n }\n }\n\n %grid-summaries--body {\n background: var-get($theme, 'body-summaries-background');\n border-bottom: 1px dashed var-get($theme, 'row-border-color');\n\n &:last-of-type {\n border-bottom: none;\n }\n\n %igx-grid-summary__result {\n color: var-get($theme, 'body-summaries-text-color');\n }\n }\n\n %grid-summaries-patch {\n @if $bootstrap-theme {\n background: color($palette, 'grays', 100);\n } @else {\n background: inherit;\n }\n position: relative;\n z-index: 1;\n border-inline-end: 1px solid var-get($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 inset-inline-start: -1px;\n }\n\n %igx-grid-th__drop-indicator-right {\n inset-inline-end: -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-inline-end: 1px solid var-get($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 inset-inline-start: -3px;\n }\n\n &::before {\n bottom: 0;\n border-width: 0 4px 4px;\n border-color: transparent transparent var-get($theme, 'drop-indicator-color');\n }\n\n &::after {\n top: 0;\n border-width: 4px 4px 0;\n border-color: var-get($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 inset-inline-start: 0;\n }\n\n %grid__scroll-on-drag-right {\n inset-inline-end: 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-get($theme, 'ghost-header-background');\n color: var-get($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 inset-inline-start: -99999px;\n border: none;\n box-shadow: var-get($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: end;\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-get($theme, 'ghost-header-icon-color');\n margin-inline-end: rem(12px);\n }\n\n %grid__drag-ghost-image-icon-group {\n color: var-get($theme, 'ghost-header-icon-color');\n padding: var-get($grid-header-padding, 'comfortable');\n padding-inline-end: 0;\n margin-inline-end: rem(8);\n }\n\n %igx-grid__drag-col-header {\n background: var-get($theme, 'header-background');\n\n %grid-cell-header {\n > * {\n opacity: .4;\n }\n }\n }\n\n // Group by section\n %igx-grid__group-row {\n background: var-get($theme, 'group-row-background');\n display: flex;\n outline-style: none;\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n min-height: map.get($grid-header-height, 'comfortable');\n\n %igx-grid__drag-indicator {\n cursor: default;\n flex-grow: 0;\n }\n }\n\n %igx-grid__group-row--active {\n background: var-get($theme, 'group-row-selected-background');\n @extend %grid-cell--active !optional;\n\n %igx-grid__grouping-indicator {\n color: var-get($theme, 'expand-icon-color');\n }\n\n %igx-grid__drag-indicator {\n border: 1px solid var-get($theme, 'cell-active-border-color');\n border-inline-start-width: 0;\n border-inline-end-width: 0;\n box-shadow: inset 1px 0 0 0 var-get($theme, 'cell-active-border-color');\n }\n\n &:hover {\n background: var-get($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-inline-end: rem(4px);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n\n %igx-group-label__icon {\n user-select: none;\n\n igx-icon {\n color: var-get($theme, 'group-label-icon');\n width: var(--igx-icon-size, #{rem(16px)});\n height: var(--igx-icon-size, #{rem(16px)});\n font-size: var(--igx-icon-size, #{rem(16px)});\n }\n }\n\n %igx-group-label__column-name {\n color: var-get($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-get($theme, 'group-count-background');\n color: var-get($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-get($theme, 'group-label-text')\n }\n\n [dir='rtl'] {\n %igx-grid__group-content {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n }\n\n %igx-grid__group-content--cosy {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n }\n\n %igx-grid__group-content--compact{\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n }\n\n %igx-group-label {\n > * {\n margin-inline-start: rem(4px);\n\n &:last-child {\n margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n min-height: map.get($grid-header-height, 'compact');\n }\n\n %igx-grid__row-indentation {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable');\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n background: inherit;\n z-index: 1;\n background-clip: border-box;\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: rem(1px);\n bottom: -1px;\n inset-inline-start: 0;\n background: transparent;\n }\n\n %igx-button--icon {\n width: rem(28px);\n height: rem(28px);\n color: var-get($theme, 'expand-all-icon-color');\n }\n\n &:focus,\n &:hover {\n %igx-button--icon {\n color: var-get($theme, 'expand-all-icon-hover-color');\n }\n }\n }\n\n %igx-grid__row-indentation--cosy {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy')\n }\n\n %igx-grid__row-indentation--compact {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n padding-inline-end: 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-get($theme, 'grouparea-background');\n color: var-get($theme, 'grouparea-color');\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 %igx-chip {\n margin-top: rem(8px);\n margin-bottom: rem(8px);\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: var(--igx-icon-size, #{rem(16px)});\n height: var(--igx-icon-size, #{rem(16px)});\n font-size: var(--igx-icon-size, #{rem(16px)});\n }\n\n [dir='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 %igx-chip {\n margin-top: rem(8px);\n margin-bottom: rem(8px);\n }\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 %igx-chip {\n margin-top: rem(4px);\n margin-bottom: rem(4px);\n }\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-get($theme, 'drop-area-border-radius');\n padding: map.get($grid-cell-padding, 'comfortable');\n flex: 1 0 0%;\n background: var-get($theme, 'drop-area-background');\n\n %igx-drop-area__icon {\n color: var-get($theme, 'drop-area-icon-color');\n width: rem(16px);\n height: rem(16px);\n font-size: rem(16px);\n margin-inline-end: rem(8px);\n }\n }\n\n %igx-drop-area--hover {\n background: var-get($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-get($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-get($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-get($theme, 'drop-area-text-color');\n font-size: rem(13px);\n }\n\n %igx-grid__grouping-indicator {\n position: relative;\n display: flex;\n\n user-select: none;\n justify-content: center;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n padding-inline-end: $grouping-padding-right;\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'comfortable')};\n min-height: map.get($grid-header-height, 'comfortable');\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n width: var(--igx-icon-size, #{$indicator-icon-width});\n }\n\n &:hover,\n &:focus {\n outline-style: none;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %igx-grid__grouping-indicator--cosy {\n min-height: map.get($grid-header-height, 'cosy');\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'cosy')};\n }\n\n %igx-grid__grouping-indicator--compact {\n min-height: map.get($grid-header-height, 'compact');\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'compact')};\n }\n\n %igx-grid__header-indentation {\n position: relative;\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable');\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n background: var-get($theme, 'header-background');\n z-index: 4;\n }\n\n %igx-grid__header-indentation--cosy {\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy');\n }\n\n %igx-grid__header-indentation--compact {\n padding-inline-end: 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 inset-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n\n &:hover {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2);\n }\n }\n\n %igx-grid__group-expand-btn--cosy {\n inset-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2);\n }\n }\n\n %igx-grid__group-expand-btn--compact {\n inset-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'compact') - rem(24px), 2);\n }\n }\n\n @for $i from 1 through 10 {\n %igx-grid__row-indentation--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')};\n }\n }\n\n %igx-grid__row-indentation-cosy--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row-cosy--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')};\n }\n }\n\n %igx-grid__row-indentation-compact--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row-compact--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'compact')};\n }\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__addrow-snackbar {\n position: absolute;\n z-index: 5;\n bottom: rem(24px);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n }\n\n %igx-grid__filtering-cell {\n display: flex;\n align-items: center;\n border-inline-end: $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--selected {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n }\n\n %igx-grid__filtering-cell-indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-inline-end: rem(8px);\n margin-inline-start: rem(8px);\n cursor: pointer;\n visibility: visible;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(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 inset-inline-end: 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-get($theme, 'filtering-row-background');\n color: var-get($theme, 'filtering-row-text-color');\n inset-inline-start: 0;\n bottom: 0;\n z-index: 3;\n\n &::after {\n display: block;\n position: absolute;\n content: '';\n background: inherit;\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: 0;\n box-shadow: 0 1px 0 var-get($theme, 'filtering-row-background'),\n 0 4px 10px rgba(0, 0, 0, .12);\n z-index: -1;\n }\n\n igx-input-group {\n --theme: fluent;\n width: 100%;\n max-width: rem(200px);\n min-width: rem(140px);\n }\n\n igx-prefix:focus {\n color: color(map.get($theme, 'palette'), 'secondary');\n }\n\n igx-suffix {\n igx-icon {\n outline-style: none;\n\n &:focus {\n color: color($palette, 'secondary');\n }\n\n + igx-icon {\n margin-inline-start: rem(4px);\n }\n }\n }\n }\n\n %igx-grid__filtering-dropdown-items {\n display: flex;\n align-items: center;\n }\n\n %igx-grid__filtering-dropdown-text {\n margin-inline-start: rem(16px);\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 min-width: rem(56px);\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 inset-inline-start: rem(12px);\n /* IE fix for vertical alignment*/\n top: 50%;\n transform: translateY(-50%);\n }\n\n span {\n margin-inline-start: rem(16px);\n }\n }\n }\n\n %igx-grid__filtering-scroll-start {\n width: rem(24px);\n height: rem(24px);\n position: relative;\n overflow: visible;\n margin: 0 rem(8px);\n z-index: 1;\n\n &::after {\n @include _filtering-scroll-mask($theme, right);\n inset-inline-start: calc(100% + 6px);\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n\n &::after {\n content: initial;\n }\n\n &::before {\n @include _filtering-scroll-mask($theme, right);\n inset-inline-end: calc(100% + 6px);\n }\n }\n }\n\n %igx-grid__filtering-scroll-end {\n width: rem(24px);\n height: rem(24px);\n position: relative;\n overflow: visible;\n margin: 0 rem(8px);\n z-index: 1;\n\n &::before {\n @include _filtering-scroll-mask($theme, left);\n inset-inline-end: calc(100% + 6px);\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n\n &::before {\n content: initial;\n }\n\n &::after {\n @include _filtering-scroll-mask($theme, left);\n inset-inline-start: calc(100% + 6px);\n }\n }\n }\n\n %igx-grid__tr--highlighted {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 4px;\n height: 100%;\n background: var-get($theme, 'row-highlight');\n z-index: 3;\n }\n\n %igx-grid__tr--edited {\n &::before {\n inset-inline-start: rem(4px);\n }\n }\n\n &::before {\n inset-inline-start: rem(4px);\n }\n }\n\n %igx-grid__tr-container {\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n }\n\n %igx-grid__tr-container--active {\n @extend %grid-cell--active !optional;\n }\n\n %igx-grid__hierarchical-expander {\n user-select: none;\n background: inherit;\n padding-inline-start: map.get($hierarchical-grid-indent, 'comfortable');\n padding-inline-end: 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-get($theme, 'expand-icon-color');\n background-clip: border-box;\n\n &:focus {\n outline: none;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n &:hover {\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n max-width: $hierarchical-action-icon;\n min-width: $hierarchical-action-icon;\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n\n &--empty {\n cursor: default;\n pointer-events: none;\n }\n }\n\n %igx-grid__hierarchical-expander--cosy {\n padding-inline-start: map.get($hierarchical-grid-indent, 'cosy');\n padding-inline-end: map.get($hierarchical-grid-indent, 'cosy');\n }\n\n %igx-grid__hierarchical-expander--compact {\n padding-inline-start: map.get($hierarchical-grid-indent, 'compact');\n padding-inline-end: map.get($hierarchical-grid-indent, 'compact');\n }\n\n %igx-grid__hierarchical-expander--header {\n background: inherit;\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n z-index: 3;\n background-clip: border-box;\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__header-indentation--no-border {\n border-inline-end: 1px solid transparent;\n }\n\n %igx-grid__hierarchical-indent {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'comfortable');\n margin-inline-end: map.get($hierarchical-grid-indent, 'comfortable');\n margin-bottom: map.get($hierarchical-grid-indent, 'comfortable');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px);\n }\n }\n\n %igx-grid__hierarchical-indent--cosy {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'cosy');\n margin-inline-end: map.get($hierarchical-grid-indent, 'cosy');\n margin-bottom: map.get($hierarchical-grid-indent, 'cosy');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px);\n }\n }\n\n %igx-grid__hierarchical-indent--compact {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'compact');\n margin-inline-end: map.get($hierarchical-grid-indent, 'compact');\n margin-bottom: map.get($hierarchical-grid-indent, 'compact');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px);\n }\n }\n\n @include excel-filtering($theme, $palette);\n\n %advanced-filtering-dialog {\n background: var-get($theme, 'filtering-row-background');\n box-shadow: elevation($elevation: 12);\n\n igx-query-builder {\n --igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};\n --igx-query-builder-background-and: #{var-get($theme, 'filtering-background-and')};\n --igx-query-builder-background-and--focus: #{var-get($theme, 'filtering-background-and--focus')};\n --igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};\n --igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};\n box-shadow: none;\n }\n\n igx-query-builder-header {\n cursor: grab;\n }\n }\n\n %igx-grid__filtering-row-editing-buttons--small,\n %igx-grid__filtering-row-editing-buttons {\n display: flex;\n align-items: center;\n\n button {\n transition: none;\n }\n }\n\n %igx-grid__filtering-row-editing-buttons--small {\n button {\n &:not([disabled]) {\n igx-icon {\n color: var-get($theme, 'sorted-header-icon-color');\n }\n }\n }\n }\n\n %igx-grid__tr-action {\n &:last-of-type {\n border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n }\n\n // Pivot grid\n %igx-grid__pivot--super-compact {\n %grid-cell-display,\n %grid-cell-header {\n padding: 0 rem(4px) !important;\n min-height: rem(24px) !important;\n height: rem(24px);\n }\n\n %grid-cell-header {\n > * {\n line-height: normal;\n align-self: initial;\n max-height: 100%;\n }\n }\n }\n\n\n %grid-thead--pivot {\n display: flex;\n\n %grid-thead--virtualizationWrapper {\n border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n }\n\n %grid-thead--virtualizationWrapper {\n height: 100%;\n }\n\n %grid-thead--virtualizationContainer {\n overflow: visible;\n height: 100%;\n }\n\n %igx-grid__tr-pivot {\n display: flex;\n align-items: center;\n background: inherit;\n overflow: hidden;\n z-index: 3;\n height: map.get($grid-header-height, 'comfortable');\n\n &--cosy {\n height: map.get($grid-header-height, 'cosy');\n padding: map.get($grid-header-padding, 'cosy');\n }\n\n &--compact {\n height: map.get($grid-header-height, 'compact');\n padding: map.get($grid-header-padding, 'compact');\n }\n\n padding: map.get($grid-header-padding, 'comfortable');\n background-clip: border-box !important;\n border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n\n igx-chips-area {\n flex-wrap: nowrap;\n width: auto;\n\n > * {\n margin-inline-end: rem(4px);\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n\n %igx-grid__pivot-filter-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n\n > igx-badge {\n position: absolute;\n top: rem(-4px);\n inset-inline-start: 60%;\n width: rem(18px);\n min-width: rem(18px);\n height: rem(18px);\n font-size: rem(10px);\n pointer-events: none;\n user-select: none;\n }\n }\n\n %igx-grid__pivot-empty-chip-area {\n line-height: normal;\n font-size: rem(14px);\n margin-inline-end: 0 !important;\n }\n\n %igx-grid__tr-pivot--row-area {\n height: auto !important;\n align-items: flex-end;\n padding-bottom: map.get($pivot-row-aria-padding, 'comfortable');\n\n &--cosy{\n padding-bottom: map.get($pivot-row-aria-padding, 'cosy');\n }\n\n &--compact{\n padding-bottom: map.get($pivot-row-aria-padding, 'compact');\n }\n\n border-inline-start: 0;\n border-bottom: 0;\n }\n\n %igx-grid__tr-pivot--filter-container {\n display: flex;\n flex-direction: column;\n }\n\n %igx-grid__tr-pivot--chip_drop_indicator {\n width: 2px;\n background: var-get($theme, 'resize-line-color');\n }\n\n %igx-grid__tr-pivot--drop-row-area {\n flex-grow: 1;\n }\n\n %igx-grid__tr-pivot--filter {\n height: map.get($grid-header-height, 'comfortable');\n\n &--cosy {\n height: map.get($grid-header-height, 'cosy');\n }\n\n &--compact {\n height: map.get($grid-header-height, 'compact');\n }\n\n border-inline-start: 0;\n border-inline-end: 0;\n border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n\n %igx-grid-thead__wrapper--pivot {\n border-bottom: 0;\n }\n\n %igx-grid__tr-pivot-group {\n flex: 1;\n }\n\n %igx-grid__tr-pivot-toggle-icons {\n display: inline-flex !important;\n }\n\n %igx-grid__tr-pivot--columnDimensionLeaf {\n box-shadow: none;\n\n igx-grid-header {\n border: none;\n }\n }\n\n %igx-grid__tr-pivot--columnMultiRowSpan {\n igx-grid-header {\n > * {\n visibility: hidden;\n }\n }\n }\n\n %igx-grid__tr-header-row {\n igx-pivot-row-dimension-header-group {\n igx-pivot-row-dimension-header {\n align-items: center;\n }\n }\n }\n // Pivot grid END\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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: grid-summary-theme(\n/// $background-color: black,\n/// $label-color: white\n/// );\n/// // Pass the theme to the grid-summary component mixin\n/// @include grid-summary($my-summary-theme);\n@function grid-summary-theme(\n $palette: null,\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 $selector: '.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 @if type-of($background-color) == 'color' {\n $border-color: rgba(text-contrast($background-color), .26);\n }\n }\n\n @if not($pinned-border-color) and $background-color {\n @if type-of($background-color) == 'color' {\n $pinned-border-color: rgba(text-contrast($background-color), .26);\n }\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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} css-vars\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires var-get\n@mixin grid-summary($theme) {\n @include css-vars($theme);\n\n $cell-pin: (\n style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),\n color: var-get($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-get($theme, 'background-color', inherit);\n overflow: hidden;\n outline-style: none;\n\n &::after {\n position: absolute;\n inset: 0;\n }\n\n &:focus::after {\n background: var-get($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-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');\n @media print {\n border-inline-end: map.get($cell-pin, 'style') #999;\n }\n }\n\n %igx-grid-summary--pinned-first {\n border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');\n @media print {\n border-inline-start: 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-get($theme, 'label-color');\n min-width: rem(30px);\n margin-inline-end: rem(3px);\n\n &:hover {\n color: var-get($theme, 'label-hover-color');\n }\n }\n\n %igx-grid-summary__result {\n color: var-get($theme, 'result-color');\n font-weight: 600;\n flex: 1 1 auto;\n text-align: end;\n }\n\n %igx-grid-summary__label,\n %igx-grid-summary__result {\n @include ellipsis();\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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 elevation\n/// @requires text-contrast\n///\n/// @example scss Change the toolbar background color\n/// $my-toolbar-theme: grid-toolbar-theme(\n/// $background-color: black\n/// );\n/// // Pass the theme to the grid-toolbar component mixin\n/// @include grid-toolbar($my-toolbar-theme);\n\n@function grid-toolbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';\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 selector: $selector,\n palette: $palette,\n elevations: $elevations,\n background-color: $background-color,\n title-text-color: $title-text-color,\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} css-vars\n/// @requires color\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires em\n/// @requires var-get\n@mixin grid-toolbar($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n // Caption\n $grid-toolbar-fs: rem(16px);\n\n $grid-toolbar-padding: (\n comfortable: rem(24px) rem(16px),\n cosy: rem(16px) rem(12px),\n compact: rem(12px) rem(8px)\n );\n\n $grid-toolbar-spacer: (\n comfortable: rem(16px),\n cosy: rem(12px),\n compact: 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: space-between;\n grid-row: 1;\n font-size: $grid-toolbar-fs;\n\n @if $bootstrap-theme {\n border-bottom: 1px solid color(map.get($theme, 'palette'), 'grays', 100);\n } @else {\n border-bottom: 1px solid color(map.get($theme, 'palette'), 'grays', 300);\n }\n\n background: var-get($theme, 'background-color');\n height: auto;\n min-height: map.get($grid-toolbar-height, 'comfortable');\n position: relative;\n padding-block: 0;\n padding-inline: map.get($grid-toolbar-padding, 'comfortable');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable');\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n &[dir='rtl'] {\n text-align: end;\n\n [igxButton] {\n margin-inline-start: 0;\n margin-inline-end: rem(8);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n }\n\n %igx-grid-toolbar--cosy {\n min-height: map.get($grid-toolbar-height, 'cosy');\n padding-inline: map.get($grid-toolbar-padding, 'cosy');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');\n }\n }\n\n %igx-grid-toolbar--compact {\n min-height: map.get($grid-toolbar-height, 'compact');\n padding-inline: map.get($grid-toolbar-padding, 'compact');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'compact');\n }\n }\n\n %igx-grid-toolbar__title {\n color: var-get($theme, 'title-text-color');\n flex: 1 1 auto;\n @include ellipsis();\n max-width: 40ch;\n margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')\n }\n\n %igx-grid-toolbar__custom-content {\n display: flex;\n flex-wrap: wrap;\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable');\n }\n\n %igx-grid-toolbar__actions {\n display: flex;\n align-items: center;\n flex-flow: row wrap;\n margin-inline-start: auto;\n\n > * {\n display: flex;\n margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable');\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n }\n\n %igx-grid-toolbar__actions,\n %igx-grid-toolbar__title,\n %igx-grid-toolbar__custom-content {\n &:empty {\n display: none;\n }\n }\n\n %igx-grid-toolbar__title:empty + %igx-grid-toolbar__custom-content:empty {\n + %igx-grid-toolbar__actions {\n width: 100%;\n margin-inline-start: 0;\n justify-content: flex-end;\n }\n }\n\n %igx-grid-toolbar__progress-bar {\n position: absolute;\n width: 100%;\n inset-inline-start: 0;\n inset-inline-end: 0;\n bottom: rem(-1px);\n height: rem(2px);\n overflow: hidden;\n background: var-get($theme, 'background-color');\n\n igx-linear-bar > * {\n border-radius: 0;\n\n &:first-child > div {\n background: color(map.get($theme, 'palette'), 'secondary');\n }\n }\n }\n\n %igx-grid-toolbar__adv-filter--filtered {\n border-color: color(map.get($theme, 'palette'), 'secondary') !important;\n\n @if $bootstrap-theme {\n border-width: 2px;\n border-color: color(map.get($theme, 'palette'), 'primary', 800) !important;\n color: color(map.get($theme, 'palette'), 'primary', 800);\n\n &:hover,\n &:focus {\n background: color(map.get($theme, 'palette'), 'primary', 800);\n }\n }\n }\n\n %igx-grid-toolbar__dropdown {\n position: relative;\n }\n\n %igx-grid-toolbar__dd-list {\n list-style: none;\n background: var-get($theme, 'dropdown-background');\n margin: 0;\n padding: 0;\n box-shadow: elevation($elevation: 8);\n }\n\n %igx-grid-toolbar__dd-list-items {\n cursor: pointer;\n position: relative;\n padding: em(8px) em(16px);\n color: var-get($theme, 'item-text-color');\n white-space: nowrap;\n\n &:hover {\n background: var-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-text-color');\n }\n\n &:focus {\n background: var-get($theme, 'item-focus-background');\n color: var-get($theme, 'item-focus-text-color');\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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@function pivot-data-selector-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null\n) {\n $name: 'igx-pivot-data-selector';\n $selector: '.igx-pivot-data-selector';\n $pivot-data-selector-schema: ();\n\n @if map.has-key($schema, $name) {\n $pivot-data-selector-schema: map.get($schema, $name);\n } @else {\n $pivot-data-selector-schema: $schema;\n }\n\n $theme: apply-palette($pivot-data-selector-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires var-get\n@mixin pivot-data-selector($theme) {\n @include css-vars($theme);\n\n $chip-height-material: (\n comfortable: rem(22px),\n cosy: rem(20px),\n compact: rem(18px)\n );\n\n $chip-item-padding: 0 rem(2px);\n $panel-padding: rem(4px, 16px);\n\n %selector-base {\n display: flex;\n flex-direction: column;\n max-width: rem(280px);\n background: var-get($theme, 'background');\n z-index: 0;\n\n > igx-input-group {\n flex: 0 1 auto;\n }\n\n igx-display-container {\n display: flex;\n flex-direction: column;\n }\n\n > igx-list {\n igx-display-container {\n padding: rem(4px);\n }\n\n igx-list-item {\n display: flex;\n min-height: rem(28px);\n }\n\n %cbx-label {\n font-size: rem(13px);\n }\n }\n\n %form-group-input--box {\n transform: none;\n }\n\n %form-group-prefix,\n %form-group-prefix--cosy,\n %form-group-prefix--compact {\n padding-inline-end: rem(16px) !important;\n box-sizing: content-box;\n }\n\n %form-group-bundle-main--box,\n %form-group-bundle-main--box-cosy,\n %form-group-bundle-main--box-compact {\n padding-top: 0 !important;\n }\n\n %igx-expanded-panel-margin {\n igx-expansion-panel[aria-expanded='true'] {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-expansion-panel__body {\n position: relative;\n height: rem(128px);\n font-size: rem(14px);\n padding: $panel-padding;\n overflow-y: auto;\n\n > igx-list {\n height: auto;\n }\n }\n\n %igx-expansion-panel__header-icon--start {\n margin-inline-end: rem(8px);\n }\n\n %igx-expansion-panel__header-title {\n display: flex;\n\n > h6 {\n font-size: rem(12px);\n }\n }\n\n %igx-expansion-panel__header-inner {\n background: var-get($theme, 'header-color');\n padding: $panel-padding;\n \n .dragOver & {\n background: color($color: 'grays', $variant: 300);\n box-shadow: inset 0 0 0 1px color($color: 'grays', $variant: 400);\n }\n }\n }\n\n %selector-filter {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n igx-list {\n display: flex;\n flex-direction: column;\n padding: rem(8px) rem(4px);\n min-height: 186px;\n max-height: 208px;\n overflow-y: auto;\n }\n\n igx-list-item {\n display: flex;\n }\n\n igx-checkbox + span {\n margin-inline-start: rem(8px);\n line-height: rem(28px);\n }\n }\n\n %selector-header,\n %selector-header-extra {\n display: flex;\n align-items: center;\n }\n\n %selector-header-extra {\n igx-icon {\n padding: 0 rem(8px);\n box-sizing: content-box;\n }\n\n %igx-chip__item {\n height: map.get($chip-height-material, 'comfortable');\n }\n\n %igx-chip__item--cosy {\n height: map.get($chip-height-material, 'cosy');\n }\n\n %igx-chip__item--compact {\n height: map.get($chip-height-material, 'compact');\n }\n\n %igx-chip__content {\n padding: $chip-item-padding;\n }\n }\n\n %selector-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: rem(32px);\n width: 100%;\n\n .igx-drag--push & {\n padding-top: rem(32px);\n }\n }\n\n %selector-item-ghost {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: rem(14px);\n background: color($color: 'surface');\n min-height: rem(32px);\n height: auto;\n padding: 0 rem(2px) 0 rem(4px);\n cursor: grabbing;\n box-shadow: elevation($elevations, 24);\n border: 1px solid color($color: 'grays', $variant: 100);\n border-radius: border-radius(rem(2px));\n z-index: 10;\n }\n\n %selector-base,\n %selector-item-ghost {\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n %selector-item-ghost-text {\n display: flex;\n align-items: center;\n\n igx-icon {\n margin-inline-end: rem(8px);\n }\n }\n\n %selector-item-ghost--no-drop {\n cursor: no-drop;\n }\n\n %selector-item-text {\n @include ellipsis();\n max-width: calc(100% - 18px + 8px);\n }\n\n %selector-item-text,\n %selector-action-sort,\n %selector-action-filter,\n %selector-action-move,\n %selector-action-summary {\n user-select: none;\n }\n\n %selector-action-sort,\n %selector-action-summary,\n %selector-action-filter {\n cursor: pointer;\n }\n\n %selector-action-move {\n cursor: grab;\n }\n\n %selector-item-start {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex: 0 1 100%;\n margin-inline-end: rem(8px);\n overflow: hidden;\n }\n\n %selector-item-end {\n display: flex;\n\n igx-icon + igx-icon {\n margin-inline-start: rem(8px);\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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-highlight-theme: highlight-theme($resting-background: black, $active-color: white);\n/// // Pass the theme to the highlight component mixin\n/// @include highlight($my-highlight-theme);\n@function highlight-theme(\n $palette: null,\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 $selector: '.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 selector: $selector,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin highlight($theme) {\n @include css-vars($theme);\n\n %igx-highlight {\n color: var-get($theme, 'resting-color');\n background: var-get($theme, 'resting-background');\n }\n\n %igx-highlight--active {\n color: var-get($theme, 'active-color');\n background: var-get($theme, 'active-background');\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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: icon-theme($color: orange);\n/// // Pass the theme to the icon component mixin\n/// @include icon($my-icon-theme);\n@function icon-theme(\n $palette: null,\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// stylelint-disable font-family-no-missing-generic-family-keyword\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin icon($theme) {\n @include css-vars($theme);\n\n $igx-icon-font-size: var-get($theme, 'size');\n\n %igx-icon-display {\n display: inline-flex;\n width: $igx-icon-font-size;\n height: $igx-icon-font-size;\n font-size: $igx-icon-font-size;\n color: var-get($theme, 'color');\n direction: inherit;\n\n div,\n svg {\n display: block;\n width: inherit;\n height: inherit;\n fill: currentColor;\n }\n\n &[igxPrefix].material-icons,\n &[igxSuffix].material-icons {\n font-family: 'Material Icons';\n }\n }\n\n %igx-icon--success {\n color: color(map.get($theme, 'palette'), 'success');\n }\n\n %igx-icon--error {\n color: color(map.get($theme, 'palette'), 'error');\n }\n\n %igx-icon--inactive {\n color: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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/// @requires extend\n///\n/// @example scss Change the background color\n/// $my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));\n/// // Pass the theme to the overlay component mixin\n/// overlay($my-overlay-theme);\n///\n@function overlay-theme(\n $palette: null,\n $schema: $light-schema,\n $background-color: null\n) {\n $name: 'igx-overlay';\n $selector: '.igx-overlay__wrapper--modal, .igx-overlay__content--modal';\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 selector: $selector,\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} css-vars\n/// @requires var-get\n///\n@mixin overlay($theme) {\n @include 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 inset: 0;\n background: transparent;\n transition: background .25s $ease-in-out-quad;\n pointer-events: none;\n z-index: 10005;\n box-sizing: content-box;\n }\n\n %overlay-wrapper--modal {\n background: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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} $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: paginator-theme(\n/// $stripes-color: orange\n/// );\n/// // Pass the theme to the paginator component mixin\n/// @include paginator($my-paginator-theme);\n@function paginator-theme(\n $palette: null,\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\n @if not($text-color) and $background-color {\n $text-color: text-contrast($background-color);\n }\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin paginator($theme) {\n @include 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 %igx-paginator {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: var-get($theme, 'text-color');\n background: var-get($theme, 'background-color');\n grid-row: 7;\n font-size: 12px;\n border-top: 1px solid var-get($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 %igx-paginator-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n\n %igx-page-size {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n }\n\n %igx-page-size__label {\n margin-inline-end: rem(8px);\n @include ellipsis();\n }\n\n %igx-page-size__select {\n display: flex;\n max-width: 90px;\n min-width: 80px;\n }\n\n %igx-page-nav {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex: 1;\n\n > * {\n margin-inline-start: rem(8px);\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n }\n\n %igx-page-nav__text {\n display: flex;\n }\n}\n","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:list';\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 [null] - 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/// @param {Number} $track-border-radius [null] - The border radius fraction, between 0 - 8 to be used fot the progress bar track\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: progress-linear-theme(\n/// $stripes-color: orange\n/// );\n/// // Pass the theme to the progress-linear component mixin\n/// @include progress-linear($my-progress-linear-theme);\n@function progress-linear-theme(\n $palette: null,\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 $track-border-radius: 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 track-border-radius: $track-border-radius,\n ));\n}\n\n@mixin striped-gradient($gradient-orientation, $stripe-color) {\n background-image: linear-gradient(\n $gradient-orientation,\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}\n\n@mixin striped-gradient--indigo($gradient-orientation, $stripe-color) {\n background-image: linear-gradient(\n $gradient-orientation,\n transparent 25%,\n $stripe-color 25%,\n $stripe-color 75%,\n transparent 75%,\n );\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin progress-linear($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $bar-height: map.get((\n material: rem(4px),\n fluent: rem(4px),\n bootstrap: rem(16px),\n indigo-design: rem(4px),\n ), $variant);\n\n $gradient-orientation: map.get((\n material: -45deg,\n fluent: -45deg,\n bootstrap: 45deg,\n indigo-design: 45deg,\n ), $variant);\n\n $gradient-orientation-rtl: map.get((\n material: 45deg,\n fluent: 45deg,\n bootstrap: -45deg,\n indigo-design: -45deg,\n ), $variant);\n\n $background-size: map.get((\n material: rem(40px) rem(40px),\n fluent: rem(40px) rem(40px),\n bootstrap: rem(16px) rem(16px),\n indigo-design: rem(20px),\n ), $variant);\n\n $stripe-color: var-get($theme, 'stripes-color');\n $value-fs: em(14px, 16px);\n $value-fw: 600;\n $value-margin: 0;\n\n %linear-display {\n position: relative;\n display: flex;\n width: 100%;\n flex: 1 1 100%;\n flex-direction: column;\n\n &[dir='rtl'],\n [dir='rtl'] & {\n %linear-bar {\n transform: rotateY(180deg);\n }\n }\n }\n\n %linear-bar {\n position: relative;\n width: inherit;\n height: $bar-height;\n background: var-get($theme, 'track-color');\n overflow: hidden;\n border-radius: border-radius(var-get($theme, 'track-border-radius'));\n z-index: 0;\n }\n\n %linear-indicator {\n width: 100%;\n position: absolute;\n height: 100%;\n }\n\n %linear-indicator--striped {\n @if $variant != 'indigo-design' {\n @include striped-gradient($gradient-orientation, $stripe-color);\n } @else {\n @include striped-gradient--indigo($gradient-orientation, $stripe-color);\n }\n\n background-size: $background-size;\n\n [dir='rtl'] & {\n @if $variant != 'indigo-design' {\n @include striped-gradient($gradient-orientation-rtl, $stripe-color);\n } @else {\n @include striped-gradient--indigo($gradient-orientation-rtl, $stripe-color);\n }\n }\n }\n\n %linear-indicator--indeterminate-secondary,\n %linear-indicator--indeterminate-primary\n {\n transform-origin: top left;\n width: 100% !important;\n height: inherit;\n position: absolute;\n background: transparent;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: inherit;\n height: inherit;\n background: var-get($theme, 'fill-color-default');\n backface-visibility: hidden;\n }\n }\n\n %linear-indicator--indeterminate-primary {\n transform: scale3d(0, 1, 1);\n animation: indeterminate-primary 2000ms infinite linear;\n left: -145.166611%;\n\n &::after {\n animation: indeterminate-primary-scale 2000ms infinite linear;\n }\n }\n\n %linear-indicator--indeterminate-secondary {\n animation: indeterminate-secondary 2000ms infinite linear;\n left: -54.888891%;\n\n &::after {\n animation: indeterminate-secondary-scale 2000ms infinite linear;\n width: 100%;\n height: inherit;\n }\n }\n\n %linear-indicator--default {\n background: var-get($theme, 'fill-color-default')\n }\n\n %linear-indicator--danger {\n background-color: var-get($theme, 'fill-color-danger');\n }\n\n %linear-indicator--warning {\n background-color: var-get($theme, 'fill-color-warning');\n }\n\n %linear-indicator--info {\n background-color: var-get($theme, 'fill-color-info');\n }\n\n %linear-indicator--success {\n background-color: var-get($theme, 'fill-color-success');\n }\n\n %linear-value {\n margin: $value-margin;\n color: var-get($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 $indeterminate-primary-translate-step-2: cubic-bezier(.5, 0, .701732, .495819);\n $indeterminate-primary-translate-step-3: cubic-bezier(.302435, .381352, .55, .956352);\n\n $indeterminate-primary-scale-step-2: cubic-bezier(.334731, .12482, .785844, 1);\n $indeterminate-primary-scale-step-3: cubic-bezier(.06, .11, .6, 1);\n\n $indeterminate-secondary-translate-step-1: cubic-bezier(.15, 0, .515058, .409685);\n $indeterminate-secondary-translate-step-2: cubic-bezier(.31033, .284058, .8, .733712);\n $indeterminate-secondary-translate-step-3: cubic-bezier(.4, .627035, .6, .902026);\n\n $indeterminate-secondary-scale-step-1: cubic-bezier(.15, 0, .515058, .409685);\n $indeterminate-secondary-scale-step-2: cubic-bezier(.31033, .284058, .8, .733712);\n $indeterminate-secondary-scale-step-3: cubic-bezier(.4, .627035, .6, .902026);\n\n @keyframes indeterminate-primary {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: $indeterminate-primary-translate-step-2;\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: $indeterminate-primary-translate-step-3;\n transform: translateX(83.67142%);\n }\n\n 100% {\n transform: translateX(200.611057%);\n }\n }\n\n @keyframes indeterminate-primary-scale {\n 0% {\n transform: scaleX(.08);\n }\n\n 36.65% {\n animation-timing-function: $indeterminate-primary-scale-step-2;\n transform: scaleX(.08);\n }\n\n 69.15% {\n animation-timing-function: $indeterminate-primary-scale-step-2;\n transform: scaleX(.661479);\n }\n\n 100% {\n transform: scaleX(.08);\n }\n }\n\n @keyframes indeterminate-secondary {\n 0% {\n animation-timing-function: $indeterminate-secondary-translate-step-1;\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: $indeterminate-secondary-translate-step-2;\n\n transform: translateX(37.651913%);\n }\n\n 48.35% {\n animation-timing-function: $indeterminate-secondary-translate-step-3;\n transform: translateX(84.386165%);\n }\n\n 100% {\n transform: translateX(160.277782%);\n }\n }\n\n @keyframes indeterminate-secondary-scale {\n 0% {\n animation-timing-function: $indeterminate-secondary-scale-step-1;\n transform: scaleX(.08);\n }\n\n 19.15% {\n animation-timing-function: $indeterminate-secondary-scale-step-2;\n transform: scaleX(.457104);\n }\n\n 44.15% {\n animation-timing-function: $indeterminate-secondary-scale-step-3;\n transform: scaleX(.72796);\n }\n\n 100% {\n transform: scaleX(.08);\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 progress-circular-theme(\n $palette: null,\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 meta.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 list.length($progress-circle-color) == 2 {\n $progress-circle-color-start: list.nth($progress-circle-color, 1);\n $progress-circle-color-end: list.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\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires {mixin} rotate-center\n/// @requires var-get\n@mixin progress-circular($theme) {\n // Include rotate animation\n @include rotate-center();\n\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $stroke-width: map.get((\n material: rem(4px),\n fluent: rem(4px),\n bootstrap: rem(8px),\n indigo-design: rem(6px),\n ), $variant);\n\n $palette: map.get($theme, 'palette');\n\n %circular-display {\n display: inline-flex;\n flex: 1 1 auto;\n width: rem(32px);\n height: rem(32px);\n position: relative;\n\n svg {\n width: 100%;\n height: 100%;\n min-width: inherit;\n min-height: inherit;\n //transform-origin: 50% 50%;\n transform: rotate(-90deg);\n }\n }\n\n %circular-display--indeterminate {\n @include animation(rotate-center 3s linear normal infinite);\n\n [dir='rtl'] & {\n animation-direction: reverse;\n }\n }\n\n %circular-inner {\n stroke-width: $stroke-width;\n fill: transparent;\n stroke: var-get($theme, 'base-circle-color');\n }\n\n %circular-outer {\n fill: transparent;\n stroke-width: $stroke-width;\n stroke-dashoffset: 289;\n stroke-dasharray: 289;\n\n @if $variant == 'indigo-design' {\n stroke-linecap: round;\n }\n }\n\n %circular-outer--indeterminate {\n stroke-dasharray: 289;\n @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) normal infinite);\n\n [dir='rtl'] & {\n animation-direction: reverse;\n }\n }\n\n %circular-text {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n font-size: rem(16px);\n line-height: 1;\n text-align: center;\n font-weight: 600;\n fill: var-get($theme, 'text-color');\n }\n\n %circular-text--hidden {\n visibility: hidden;\n }\n\n %circular-gradient-start {\n stop-color: var-get($theme, 'progress-circle-color-start');\n }\n\n %circular-gradient-end {\n stop-color: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n///\n/// @prop {Color} background [null] - The background color of the filtering row.\n/// @prop {Color} header-background [null] - The background color of the query builder header.\n/// @prop {Color} header-foreground [null] - The foreground color of the query builder header.\n/// @prop {Map} background-and [null] - The background color of advanced filtering \"AND\" condition.\n/// @prop {Map} background-and--focus [null] - The background color on focus/selected of advanced filtering \"AND\" condition.\n/// @prop {Map} background-or [null] - The background color of advanced filtering \"OR\" condition.\n/// @prop {Map} background-or--focus [null] - The background color on focus/selected of advanced filtering \"OR\" condition.\n@function query-builder-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $background: null,\n $header-background: null,\n $header-foreground: null,\n $background-and: null,\n $background-and--focus: null,\n $background-or: null,\n $background-or--focus: null,\n) {\n $name: 'igx-query-builder';\n $selector: 'igx-query-builder';\n $query-builder-schema: ();\n\n @if map.has-key($schema, $name) {\n $query-builder-schema: map.get($schema, $name);\n } @else {\n $query-builder-schema: $schema;\n }\n\n $theme: apply-palette($query-builder-schema, $palette);\n\n @if not($header-foreground) and $header-background {\n $header-foreground: text-contrast($header-background);\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n\n background: $background,\n header-background: $header-background,\n header-foreground: $header-foreground,\n background-and: $background-and,\n background-and--focus: $background-and--focus,\n background-or: $background-or,\n background-or--focus: $background-or--focus,\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 color\n/// @requires rem\n/// @requires var-get\n@mixin query-builder($theme) {\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: not($bootstrap-theme);\n\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 $icon-size: rem(18px);\n\n @include css-vars($theme);\n\n %advanced-filter {\n width: auto;\n min-width: 660px;\n background-color: var-get($theme, 'background');\n border-radius: border-radius(rem(4px));\n box-shadow: elevation($elevation: 12);\n }\n\n %advanced-filter__header {\n display: flex;\n align-items: center;\n padding: $vertical-space-comfortable;\n background-color: var-get($theme, 'header-background');\n color: var-get($theme, 'header-foreground');\n user-select: none;\n\n h4,\n .igx-typography__h6 {\n margin-bottom: 0;\n }\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-inline-start: rem(8px);\n }\n }\n\n %advanced-filter__outlet {\n igx-select-item > igx-icon {\n width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n margin-inline-end: 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-inline-end: $horizontal-space-comfortable;\n outline-style: none;\n border-radius: border-radius(rem(4px));\n cursor: pointer;\n }\n\n %filter-tree__line--and {\n background: var-get($theme, 'background-and');\n\n &-selected {\n background: var-get($theme, 'background-and--focus');\n }\n\n &:focus {\n box-shadow: inset 0 0 0 2px var-get($theme, 'background-and--focus');\n }\n }\n\n %filter-tree__line--or {\n background: var-get($theme, 'background-or');\n\n &-selected {\n background-color: var-get($theme, 'background-or--focus');\n }\n\n &:focus {\n box-shadow: inset 0 0 0 2px var-get($theme, 'background-or--focus');\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 > igx-chip igx-prefix {\n display: flex;\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: color(null, 'grays', 500);\n outline-style: none;\n\n &:hover,\n &:focus {\n color: color(null, 'grays', 800);\n }\n }\n\n igx-icon + igx-icon {\n margin-inline-start: rem(8px);\n }\n }\n\n %filter-tree__expression-condition {\n opacity: .7;\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 align-items: center;\n\n igx-select + igx-select,\n igx-select + igx-input-group,\n igx-select + igx-date-picker,\n igx-select + igx-time-picker,\n igx-input-group + igx-select {\n margin-inline-start: 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] {\n transition: none;\n }\n\n [igxButton] + [igxButton] {\n margin-inline-start: rem(8px);\n }\n }\n\n %filter-legend {\n display: flex;\n margin-inline-start: 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: border-radius(rem(4px));\n margin-inline-end: rem(8px);\n }\n\n + %filter-legend__item {\n margin-inline-start: rem(24px);\n }\n }\n\n %filter-legend__item--and::before {\n background: var-get($theme, 'background-and');\n }\n\n %filter-legend__item--or::before {\n background: var-get($theme, 'background-or');\n }\n\n %filter-con-menu {\n position: relative;\n display: flex;\n flex-flow: column;\n width: 196px;\n background-color: var-get($theme, 'background');\n padding: rem(16px);\n margin-inline-start: rem(16px);\n border-radius: border-radius(rem(4px));\n border: 1px solid color(null, '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-inline-start: 8px;\n }\n\n igx-buttongroup > * {\n box-shadow: none;\n }\n }\n\n %filter-con-menu__delete-btn {\n color: color(null, 'error');\n @if $bootstrap-theme {\n border-color: color(null, 'error');\n }\n\n &:hover,\n &:focus {\n @if $bootstrap-theme {\n background: color(null, 'error');\n border-color: color(null, 'error');\n color: color(null, 'grays', 100);\n } @else {\n color: color(null, 'error');\n }\n }\n }\n\n %filter-con-menu__close-btn {\n position: absolute;\n top: rem(-18px);\n inset-inline-end: rem(-18px);\n background-color: var-get($theme, 'background');\n border: 1px solid color(null, 'grays', 200);\n\n &:hover,\n &:focus {\n @if $not-bootstrap-theme {\n background-color: var-get($theme, 'background');\n }\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: color(null, '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__line {\n margin-inline-end: $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 width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n }\n\n %filter-tree__line {\n margin-inline-end: $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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 is specified, text/icon color will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $thumb-background [null] - The background color used for the thumb.\n/// @param {Color} $track-background [null] - The background color used for the track.\n/// @param {Number | String} $size [null] - The size of the track.\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 track colors\n/// $my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);\n/// // Pass the theme to the scrollbar component mixin\n/// @include scrollbar($my-scrollbar-theme);\n@function scrollbar-theme(\n $palette: null,\n $schema: $light-schema,\n $size: null,\n $thumb-background: null,\n $track-background: null,\n) {\n $name: 'igx-scrollbar';\n $selector: '.igx-scrollbar';\n $scrollbar-schema: ();\n\n @if map.has-key($schema, $name) {\n $scrollbar-schema: map.get($schema, $name);\n } @else {\n $scrollbar-schema: $schema;\n }\n\n $theme: apply-palette($scrollbar-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n thumb-background: $thumb-background,\n track-background: $track-background,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin scrollbar($theme) {\n @include css-vars($theme);\n\n %scrollbar-display {\n @if type-of(map.get($theme, 'size') == 'string') {\n scrollbar-width: var-get($theme, 'size');\n }\n\n scrollbar-color: var-get($theme, 'thumb-background') var-get($theme, 'track-background');\n\n ::-webkit-scrollbar {\n width: var-get($theme, 'size');\n height: var-get($theme, 'size');\n background: var-get($theme, 'track-background');\n }\n\n ::-webkit-scrollbar-thumb {\n background: var-get($theme, 'thumb-background');\n }\n }\n\n @media (hover: none) {\n %scrollbar-display ::-webkit-scrollbar {\n width: auto;\n height: auto;\n }\n }\n}\n\n","@use '../../utilities' as *;\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 fade-in-bck {\n @include keyframes(fade-in-bck) {\n 0% {\n transform: translateZ(80px);\n opacity: 0;\n }\n\n 100% {\n transform: translateZ(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-bl {\n @include keyframes(fade-in-bl) {\n 0% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-bottom {\n @include keyframes(fade-in-bottom) {\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-br {\n @include keyframes(fade-in-br) {\n 0% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-fwd {\n @include keyframes(fade-in-fwd) {\n 0% {\n transform: translateZ(-80px);\n opacity: 0;\n }\n\n 100% {\n transform: translateZ(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-left {\n @include keyframes(fade-in-left) {\n 0% {\n transform: translateX(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-right {\n @include keyframes(fade-in-right) {\n 0% {\n transform: translateX(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-tl {\n @include keyframes(fade-in-tl) {\n 0% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-top {\n @include keyframes(fade-in-top) {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-tr {\n @include keyframes(fade-in-tr) {\n 0% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in {\n @include keyframes(fade-in) {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access privet\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 watermark directive.\n/// @param {Map} $palette [null] - 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 {Number} $border-radius [null] - The border radius used for the link.\n/// @param {Color} $border-color [null] - The border color used for the link.\n/// @param {Color} $link-background [null] - The background color used for the link.\n/// @param {Color} $color [null] - The color used for the link text.\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 watermark link background\n/// $my-watermark-theme: watermark-theme($link-background: magenta);\n/// // Pass the theme to the watermark component mixin\n/// @include watermark($my-watermark-theme);\n@function watermark-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background-image: null,\n $link-background: null,\n $color: null,\n $border-color: null,\n) {\n $name: 'igx-watermark';\n $watermark-schema: ();\n\n @if map.has-key($schema, $name) {\n $watermark-schema: map.get($schema, $name);\n } @else {\n $watermark-schema: $schema;\n }\n\n $theme: apply-palette($watermark-schema, $palette);\n\n @if not($color) and $link-background {\n $color: text-contrast($link-background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background-image: $background-image,\n link-background: $link-background,\n border-radius: $border-radius,\n color: $color,\n border-color: $border-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin watermark($theme) {\n @include css-vars($theme);\n\n %igx-watermark {\n display: block;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n width: 100%;\n height: 100%;\n z-index: 10000;\n pointer-events: none;\n }\n\n %igx-watermark__link {\n display: inline-flex;\n align-items: center;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n font-size: rem(14px);\n padding: rem(2px) rem(4px);\n line-height: normal;\n border-radius: var-get($theme, 'border-radius');\n border: 1px solid var-get($theme, 'border-color');\n color: var-get($theme, 'color');\n z-index: 10002;\n background-color: var-get($theme, 'link-background');\n pointer-events: all;\n text-decoration: none;\n }\n\n %igx-watermark__background-img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n z-index: 10001;\n pointer-events: none;\n background-image: var-get($theme, 'background-image');\n background-repeat: repeat;\n background-position: rem(16px) rem(16px);\n // Target only IE 10,11.\n @media all and (-ms-high-contrast: none)\n {\n background-image: none;\n }\n }\n}\n"]}
1
+ {"version":3,"sources":["../../components/_common/_igx-display-container.scss","../../components/_common/_igx-drag.scss","../../components/_common/_igx-vhelper.scss","../_core.scss","../../base/utilities/_bem.scss","../../components/icon/_icon-component.scss","../../components/radio/_radio-component.scss","../../print/_index.scss","../../typography/_typography.scss","../../base/_variables.scss","../../components/grid/_excel-filtering-theme.scss","../../typography/_base.scss","../../components/banner/_banner-theme.scss","../../components/bottom-nav/_bottom-nav-theme.scss","../../components/button/_button-theme.scss","../../base/utilities/_mixins.scss","../../components/checkbox/_checkbox-theme.scss","../../components/chip/_chip-theme.scss","../../components/column-actions/_column-actions-theme.scss","../../components/dock-manager/_dock-manager-theme.scss","../../components/expansion-panel/_expansion-panel-theme.scss","../../components/charts/_gauge-theme.scss","../../components/charts/_graph-theme.scss","../../components/input/_input-group-theme.scss","../../components/navbar/_navbar-theme.scss","../../components/navdrawer/_navdrawer-theme.scss","../../components/radio/_radio-theme.scss","../../components/slider/_slider-theme.scss","../../components/snackbar/_snackbar-theme.scss","../../components/switch/_switch-theme.scss","../../components/stepper/_stepper-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/tree/_tree-theme.scss","../../components/calendar/_calendar-theme.scss","../../components/card/_card-theme.scss","../../components/dialog/_dialog-theme.scss","../../components/drop-down/_drop-down-theme.scss","../../components/list/_list-theme.scss","../_index.scss","../../components/ripple/_ripple-theme.scss","../../components/avatar/_avatar-theme.scss","../../components/action-strip/_action-strip-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","../../components/splitter/_splitter-theme.scss","../../base/animations/generic/_scale.scss","../../components/combo/_combo-theme.scss","../../components/date-picker/_date-picker-theme.scss","../../components/date-range-picker/_date-range-picker-theme.scss","../../components/divider/_divider-theme.scss","../../components/rating/_rating-theme.scss","../../components/grid/_grid-theme.scss","../../components/grid-summary/_grid-summary-theme.scss","../../components/grid-toolbar/_grid-toolbar-theme.scss","../../components/grid/_pivot-data-selector-theme.scss","../../components/highlight/highlight-theme.scss","../../components/icon/_icon-theme.scss","../../base/animations/_easings.scss","../../components/overlay/_overlay-theme.scss","../../components/paginator/_paginator-theme.scss","../../base/animations/generic/_rotate.scss","../../components/progress/_progress-theme.scss","../../components/query-builder/_query-builder-theme.scss","../../components/scrollbar/scrollbar-theme.scss","../../base/animations/entrances/_fade.scss","../../components/watermark/_watermark-theme.scss"],"names":[],"mappings":"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","file":"../igniteui-bootstrap-dark.css","sourcesContent":["@use '../../base' as *;\n\n%display-container {\n display: inherit;\n flex-flow: 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@mixin component {\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}\n","@use '../../base' as *;\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@mixin component {\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","@use '../../base' as *;\n\n/// @group themes\n/// @access private\n%vhelper-display {\n display: block;\n overflow: auto;\n z-index: 10001;\n}\n\n%vhelper--vertical {\n position: absolute;\n top: 0;\n inset-inline-end: 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@mixin component {\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}\n","////\n/// @group themes\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n@use 'utilities' as *;\n\n// Common components\n@use '../components/_common/igx-control';\n@use '../components/_common/igx-display-container' as display-container;\n@use '../components/_common/igx-drag' as drag;\n@use '../components/_common/igx-vhelper' as vhelper;\n@use '../components/ripple/ripple-component' as ripple;\n\n// Other components\n@use '../components/action-strip/action-strip-component' as action-strip;\n@use '../components/avatar/avatar-component' as avatar;\n@use '../components/badge/badge-component' as badge;\n@use '../components/bottom-nav/bottom-nav-component' as bottom-nav;\n@use '../components/button/button-component' as button;\n@use '../components/divider/divider-component' as divider;\n@use '../components/button-group/button-group-component' as button-group;\n@use '../components/banner/banner-component' as banner;\n@use '../components/calendar/calendar-component' as calendar;\n@use '../components/card/card-component' as card;\n@use '../components/carousel/carousel-component' as carousel;\n@use '../components/checkbox/checkbox-component' as checkbox;\n@use '../components/chip/chip-component' as chip;\n@use '../components/column-actions/column-actions-component' as column-actions;\n@use '../components/combo/combo-component' as combo;\n@use '../components/charts/category-chart-component' as category-chart;\n@use '../components/charts/data-chart-component' as data-chart;\n@use '../components/charts/doughnut-chart-component' as doughnut-chart;\n@use '../components/charts/financial-chart-component' as financial-chart;\n@use '../components/charts/funnel-chart-component' as funnel-chart;\n@use '../components/charts/gauge-component' as gauge;\n@use '../components/charts/geo-map-component' as geo-map;\n@use '../components/charts/graph-component' as graph;\n@use '../components/charts/pie-chart-component' as pie-chart;\n@use '../components/charts/shape-chart-component' as shape-chart;\n@use '../components/charts/sparkline-component' as sparkline;\n@use '../components/date-picker/date-picker-component' as date-picker;\n@use '../components/date-range-picker/date-range-picker-component' as date-range-picker;\n@use '../components/dialog/dialog-component' as dialog;\n@use '../components/dock-manager/dock-manager-component' as dock-manager;\n@use '../components/rating/rating-component' as rating;\n@use '../components/drop-down/drop-down-component' as drop-down;\n@use '../components/expansion-panel/expansion-panel-component' as expansion-panel;\n@use '../components/grid/grid-component' as grid;\n@use '../components/grid/pivot-data-selector-component' as pivot-data-selector;\n@use '../components/grid-summary/grid-summary-component' as grid-summary;\n@use '../components/grid-toolbar/grid-toolbar-component' as grid-toolbar;\n@use '../components/highlight/highlight-component' as highlight;\n@use '../components/icon/icon-component' as icon;\n@use '../components/input/input-group-component' as input-group;\n@use '../components/list/list-component' as list;\n@use '../components/navbar/navbar-component' as navbar;\n@use '../components/navdrawer/navdrawer-component' as navdrawer;\n@use '../components/overlay/overlay-component' as overlay;\n@use '../components/paginator/paginator-component' as paginator;\n@use '../components/progress/progress-component' as progress;\n@use '../components/radio/radio-component' as radio;\n@use '../components/query-builder/query-builder-component' as query-builder;\n@use '../components/scrollbar/scrollbar-component' as scrollbar;\n@use '../components/slider/slider-component' as slider;\n@use '../components/splitter/splitter-component' as splitter;\n@use '../components/snackbar/snackbar-component' as snackbar;\n@use '../components/switch/switch-component' as switch;\n@use '../components/stepper/stepper-component' as stepper;\n@use '../components/tabs/tabs-component' as tabs;\n@use '../components/toast/toast-component' as toast;\n@use '../components/tooltip/tooltip-component' as tooltip;\n@use '../components/time-picker/time-picker-component' as time-picker;\n@use '../components/tree/tree-component' as tree;\n@use '../components/watermark/watermark-component' as watermark;\n@use '../print';\n\n/// @param {boolean} $print-layout [true] - Activates the printing styles of the components.\n/// @param {boolean} $enhanced-accesibility [false] - Switches component colors and other properties to more accessible values.\n/// @requires {mixin} igx-vhelper\n/// @requires {mixin} igx-print-layout\n@mixin core(\n $print-layout: true,\n $enhanced-accessibility: $enhanced-accessibility\n) {\n $enhanced-accessibility: $enhanced-accessibility !global;\n\n // Angular hack for binding to [hidden] property\n // not working\n [hidden] {\n display: none !important;\n }\n\n // Common styles\n @include vhelper.component();\n @include display-container.component();\n @include drag.component();\n\n // Includes the base for each theme.\n [class^='igx-'] {\n &,\n *,\n *::before,\n *::after {\n box-sizing: border-box;\n }\n }\n\n // Component styles\n @include ripple.component();\n @include action-strip.component();\n @include avatar.component();\n @include badge.component();\n @include banner.component();\n @include bottom-nav.component();\n @include button.component();\n @include button-group.component();\n @include divider.component();\n @include calendar.component();\n @include card.component();\n @include carousel.component();\n @include checkbox.component();\n @include chip.component();\n @include column-actions.component();\n @include combo.component();\n @include category-chart.component();\n @include data-chart.component();\n @include doughnut-chart.component();\n @include financial-chart.component();\n @include funnel-chart.component();\n @include gauge.component();\n @include geo-map.component();\n @include graph.component();\n @include pie-chart.component();\n @include shape-chart.component();\n @include sparkline.component();\n @include date-picker.component();\n @include date-range-picker.component();\n @include dialog.component();\n @include dock-manager.component();\n @include rating.component();\n @include drop-down.component();\n @include expansion-panel.component();\n @include grid.component();\n @include grid-summary.component();\n @include grid-toolbar.component();\n @include pivot-data-selector.component();\n @include highlight.component();\n @include icon.component();\n @include input-group.component();\n @include list.component();\n @include navbar.component();\n @include navdrawer.component();\n @include overlay.component();\n @include paginator.component();\n @include progress.component();\n @include radio.component();\n @include query-builder.component();\n @include scrollbar.component();\n @include slider.component();\n @include splitter.component();\n @include snackbar.component();\n @include switch.component();\n @include stepper.component();\n @include tabs.component();\n @include toast.component();\n @include tooltip.component();\n @include time-picker.component();\n @include tree.component();\n @include watermark.component();\n\n @if $print-layout == true {\n @include print.layout();\n }\n}\n\n","@use 'sass:string';\n@use 'sass:meta';\n@use 'sass:list';\n@use 'sass:selector';\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(meta.variable-exists(bem--sep-elem), $bem--sep-elem, '__');\n/// @type String - The Modifier separator used. Default '--'.\n$bem--sep-mod: if(meta.variable-exists(bem--sep-mod), $bem--sep-mod, '--');\n/// @type String - The Modifier Value separator used. Default '-'.\n$bem--sep-mod-val: if(meta.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\n @return string.slice(meta.inspect($s), 2, -3);\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: string.slice($x, 0, 1);\n @return if($first == '.', $x, string.insert($x, '.', -100));\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 meta.type-of($m) == 'map' {\n $mm: list.nth($m, 1);\n @return list.nth($mm, 1) + $bem--sep-mod-val + list.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 string.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 string.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 string.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 string.slice($x, 1, string.index($x, $bem--sep-mod)-1);\n } @else if bem--contains-elem($x) {\n @return string.slice($x, 1, string.index($x, $bem--sep-elem)-1);\n } @else if bem--contains-pseudo($x) {\n @return string.slice($x, 1, string.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: string.index($x, ' ') or -1;\n @return string.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 (meta.type-of($elem) == list) and list.nth($elem, 2) {\n // For now we don't support multiple elem-mods at once\n @if meta.type-of(list.nth($elem, 2)) == 'list' {\n @error 'Only one element-modifier allowed.';\n }\n $elem: string.slice(bem-selector(list.nth($elem, 1), $m: list.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 meta.type-of($mods) != 'list' {\n $mods: ($mods, );\n }\n $bemcls: '';\n @for $i from 1 to list.length($mods) {\n $bemcls: $bemcls + bem--bem-str($block, $elem, list.nth($mods, $i)) + ', ';\n }\n $bemcls: $bemcls + bem--bem-str($block, $elem, list.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 meta.type-of($mods) == 'list' {\n @each $i in $mods {\n $mx: list.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: list.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/// @see 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/// @see bem-block\n@mixin block($block) {\n @include bem-block($block) {\n @content;\n }\n}\n\n/// @alias bem-elem\n/// @see 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/// @see bem-mod\n@mixin mod($mod) {\n @include bem-mod($mod) {\n @content;\n }\n}\n\n/// @alias bem-mods\n/// @see bem-mods\n@mixin mods($mods...) {\n @include bem-mods($mods...) {\n @content;\n }\n}\n\n/// @alias bem-block\n/// @see bem-block\n@mixin b($block) {\n @include bem-block($block) {\n @content;\n }\n}\n\n/// @alias bem-elem\n/// @see 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/// @see bem-mod\n@mixin m($mod) {\n @include bem-mod($mod) {\n @content;\n }\n}\n\n/// @alias bem-mods\n/// @see bem-mods\n@mixin mx($mods...) {\n @include bem-mods($mods...) {\n @content;\n }\n}\n","@use '../../base' as *;\n@use 'sass:string';\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\n@mixin component {\n @include b(igx-icon) {\n $this: bem--selector-to-string(&);\n @include register-component(\n $name: string.slice($this, 2, -1),\n $deps: ()\n );\n\n @extend %igx-icon-display !optional;\n\n @include m(inactive) {\n @extend %igx-icon--inactive !optional;\n }\n\n @include m(success) {\n @extend %igx-icon--success !optional;\n }\n\n @include m(error) {\n @extend %igx-icon--error !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","@use '../../base' as *;\n@use 'sass:string';\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\n@mixin component {\n @include b(igx-radio) {\n $this: bem--selector-to-string(&);\n @include register-component(\n $name: string.slice($this, 2, -1),\n $deps: ()\n );\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 @extend %igx-radio--focused !optional;\n\n @include e(ripple) {\n @extend %radio-ripple--focused !optional;\n }\n }\n\n @include mx(focused, checked) {\n @extend %igx-radio--focused-checked !optional;\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 @include m(vertical) {\n display: flex;\n flex-flow: column;\n }\n }\n}\n","/// Defines printing styles for all components in the library.\n/// @group print\n/// @requires {mixin} igx-grid-print\n@mixin layout {\n @media print {\n html,\n body,\n app-root {\n min-height: 100vh;\n min-width: 100vw;\n margin: 0;\n }\n\n app-root {\n display: block;\n }\n\n * {\n -webkit-print-color-adjust: exact;\n // Fix shadows if you print to PDF using chrome START\n -webkit-filter: opacity(1);\n filter: opacity(1);\n // Fix shadows if you print to PDF using chrome END\n print-color-adjust: exact;\n text-shadow: none !important;\n }\n\n a[href^='http']::after {\n content: '[' attr(href) ']';\n color: blue;\n }\n\n .igx-no-print {\n display: none !important;\n }\n\n // Forcing Grayscale Printing\n .igx-bw-print {\n // CSS3 filter, at the moment Webkit only. Prefix it for future implementations\n -webkit-filter: grayscale(100%);\n filter: grayscale(100%); /* future-proof */\n }\n\n igx-circular-bar,\n igx-linear-bar,\n .igx-carousel__indicators,\n .igx-carousel__arrow--prev,\n .igx-carousel__arrow--next,\n .igx-ripple,\n .igx-grid__tbody-scrollbar,\n igx-switch__ripple,\n igx-virtual-helper {\n display: none !important;\n }\n\n igx-grid {\n .igx-grid-th__title,\n .igx-grid__td-text {\n white-space: unset !important;\n text-overflow: initial !important;\n overflow: visible !important;\n }\n }\n }\n}\n","@use 'sass:map';\n@use 'sass:string';\n@use '../base' as *;\n@use 'base' as *;\n@use 'variables' as *;\n\n////\n/// @group typography\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@use '../components/banner/banner-theme' as *;\n@use '../components/bottom-nav/bottom-nav-theme' as *;\n@use '../components/button/button-theme' as *;\n@use '../components/calendar/calendar-theme' as *;\n@use '../components/card/card-theme' as *;\n@use '../components/charts/category-chart-theme' as *;\n@use '../components/charts/data-chart-theme' as *;\n@use '../components/charts/financial-chart-theme' as *;\n@use '../components/charts/funnel-chart-theme' as *;\n@use '../components/charts/gauge-theme' as *;\n@use '../components/charts/graph-theme' as *;\n@use '../components/charts/pie-chart-theme' as *;\n@use '../components/charts/shape-chart-theme' as *;\n@use '../components/checkbox/checkbox-theme' as *;\n@use '../components/chip/chip-theme' as *;\n@use '../components/column-actions/column-actions-theme' as *;\n@use '../components/date-range-picker/date-range-picker-theme' as *;\n@use '../components/dialog/dialog-theme' as *;\n@use '../components/dock-manager/dock-manager-theme' as *;\n@use '../components/drop-down/drop-down-theme' as *;\n@use '../components/expansion-panel/expansion-panel-theme' as *;\n@use '../components/grid/excel-filtering-theme' as *;\n@use '../components/input/input-group-theme' as *;\n@use '../components/list/list-theme' as *;\n@use '../components/navbar/navbar-theme' as *;\n@use '../components/navdrawer/navdrawer-theme' as *;\n@use '../components/radio/radio-theme' as *;\n@use '../components/slider/slider-theme' as *;\n@use '../components/snackbar/snackbar-theme' as *;\n@use '../components/switch/switch-theme' as *;\n@use '../components/stepper/stepper-theme' as *;\n@use '../components/tabs/tabs-theme' as *;\n@use '../components/time-picker/time-picker-theme' as *;\n@use '../components/toast/toast-theme' as *;\n@use '../components/tooltip/tooltip-theme' as *;\n@use '../components/tree/tree-theme' as *;\n\n/// @access private\n@mixin _typography-styles($font-family, $type-scale, $prefix: 'igx') {\n $_variant: map.get(map.get($type-scale, '_meta'), 'variant');\n\n font-family: var(--#{$prefix}-font-family);\n font-size: $browser-context;\n line-height: $browser-line-height;\n font-size-adjust: 100%;\n\n @if $prefix == 'igc' {\n --#{$prefix}-font-family: var(--igx-font-family);\n } @else {\n --#{$prefix}-font-family: #{$font-family};\n }\n\n // Call the individual component styles with the type scale\n @include excel-filtering-typography($type-scale);\n @include banner-typography($type-scale);\n @include bottom-nav-typography($type-scale);\n @include button-typography($type-scale);\n @include category-chart-typography($type-scale);\n @include checkbox-typography($type-scale);\n @include chip-typography($type-scale);\n @include column-actions-typography($type-scale);\n @include data-chart-typography($type-scale);\n @include date-range-typography($type-scale);\n @include dock-manager-typography();\n @include expansion-panel-typography($type-scale);\n @include financial-chart-typography($type-scale);\n @include funnel-chart-typography($type-scale);\n @include gauge-typography();\n @include graph-typography();\n @include input-group-typography($type-scale);\n @include navbar-typography($type-scale);\n @include navdrawer-typography($type-scale);\n @include pie-chart-typography($type-scale);\n @include radio-typography($type-scale);\n @include shape-chart-typography($type-scale);\n @include slider-typography($type-scale);\n @include snackbar-typography($type-scale);\n @include switch-typography($type-scale);\n @include stepper-typography($type-scale);\n @include tabs-typography($type-scale);\n @include time-picker-typography($type-scale);\n @include toast-typography($type-scale);\n @include tooltip-typography($type-scale);\n @include tree-typography($type-scale);\n\n // Add theme type-scale specific quirks\n @if ($_variant == 'material') {\n @include calendar-typography($type-scale);\n @include card-typography($type-scale);\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n @include list-typography($type-scale);\n }\n\n @if ($_variant == 'material' or $_variant == 'fluent') {\n @include calendar-typography($type-scale);\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n }\n\n @if ($_variant == 'fluent') {\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include radio-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include switch-typography($type-scale, $categories: (\n label: 'body-2'\n ));\n\n @include input-group-typography($type-scale, $categories: (\n input-text: 'body-2'\n ));\n\n @include navdrawer-typography($type-scale, $categories: (\n item: 'body-2',\n header: 'caption'\n ));\n\n @include navbar-typography($type-scale, $categories: (\n title: 'subtitle-2'\n ));\n\n @include card-typography($type-scale, $categories: (\n title: 'subtitle-1',\n subtitle: 'body-2',\n ));\n\n @include list-typography($type-scale, $categories: (\n item: 'caption',\n title: 'caption',\n ));\n\n @include chip-typography($type-scale, $categories: (\n text: 'subtitle-2'\n ));\n\n @include expansion-panel-typography($type-scale, $categories: (\n title: 'subtitle-1',\n description: 'body-2',\n body: 'caption'\n ));\n\n @include snackbar-typography($type-scale, $categories: (\n text: 'caption'\n ));\n\n @include toast-typography($type-scale, $categories: (\n text: 'caption'\n ));\n\n @include banner-typography($type-scale, $categories: (\n message: 'caption'\n ));\n }\n\n @if ($_variant == 'bootstrap') {\n $calendar-labels: map.get($type-scale, 'calendar-labels');\n\n @include calendar-typography($type-scale, $categories: (\n header-year: 'subtitle-1',\n header-date: 'h4',\n weekday-label: if($calendar-labels, 'calendar-labels', 'body-1'),\n picker-date: 'subtitle-1',\n content: 'body-1',\n ));\n\n @include card-typography($type-scale, $categories: (\n title: 'h5',\n title-small: 'subtitle-2',\n subtitle: 'body-1',\n content: 'body-1',\n ));\n\n @include dialog-typography($type-scale, $categories: (\n title: 'h5',\n ));\n\n @include drop-down-typography($type-scale, $categories: (\n header: 'subtitle-1',\n item: 'subtitle-1',\n select-item: 'subtitle-1',\n ));\n\n @include list-typography($type-scale, $categories: (\n item: 'body-2',\n title: 'body-1',\n subtitle: 'subtitle-1',\n header: 'overline',\n ));\n\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-2',\n ));\n\n @include input-group-typography($type-scale, $categories: (\n helper-text: 'body-2',\n input-text: 'body-1'\n ));\n\n @include navbar-typography($type-scale, $categories: (\n title: 'h5'\n ));\n\n @include drop-down-typography($type-scale, $categories: (\n header: 'body-1',\n item: 'body-1',\n select-item: 'body-1'\n ));\n\n @include expansion-panel-typography($type-scale, $categories: (\n description: 'body-2',\n body: 'body-1'\n ));\n }\n\n @if ($_variant == 'indigo') {\n @include calendar-typography($type-scale);\n\n @include checkbox-typography($type-scale, $categories: (\n label: 'body-1',\n ));\n\n @include input-group-typography($type-scale, $categories: (\n input-text: 'body-1'\n ));\n\n @include list-typography($type-scale, $categories: (\n header: 'overline',\n subtitle: 'body-2'\n ));\n\n\n @include expansion-panel-typography($type-scale, $categories: (\n body: 'body-1'\n ));\n\n @include dialog-typography($type-scale);\n @include drop-down-typography($type-scale);\n @include list-typography($type-scale);\n }\n}\n\n/// @access private\n/// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.\n/// @param {Map} $type-scale [] - A type scale map as produced by type-scale.\n/// @param {Map} $type-scale [] - A type scale map as produced by type-scale.\n/// @param {Map} $prefix [] - The prefix used for css variables and scoping.\n@mixin _typography($font-family, $type-scale, $prefix) {\n @if (is-root()) {\n // Use the BEM notation to create a link\n // between the igx-typography class selector\n // and all typographic elements.\n @include b(#{$prefix}-typography) {\n @include _typography-styles($font-family, $type-scale, $prefix);\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 /* stylelint-disable max-nesting-depth */\n @each $category, $type-style in $type-scale {\n @if $category != _meta {\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 // Add CSS variables to .igx-typography class selector\n @each $key, $value in $type-style {\n @if $key == 'font-family' and $value == 'css-font-var' {\n --#{$prefix}-#{$category}-#{$key}: var(--#{$prefix}-font-family);\n } @else {\n --#{$prefix}-#{$category}-#{$key}: #{$value};\n }\n }\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 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 @extend %#{$category};\n }\n }\n }\n /* stylint-enable max-nesting-depth */\n }\n } @else {\n @include _typography-styles($font-family, $type-scale);\n }\n}\n\n/// Adds typography styles for h1-h6, paragraph and creates custom typography class selectors.\n/// The produces styles are based on the passed typeface and type scale.\n/// If omitted the $material-typeface and $material-type-scale will be used.\n/// @access public\n/// @param {String} $font-family [$material-typeface] - The font family to be used across all typographic elements.\n/// @param {Map} $type-scale [$material-type-scale] - A type scale map as produced by type-scale.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n/// @requires $material-typeface\n/// @requires $material-type-scale\n/// @see $material-typeface\n/// @see $material-type-scale\n@mixin typography($font-family: $material-typeface, $type-scale: $material-type-scale, $wc: false) {\n @include _typography($font-family, $type-scale, $prefix: 'igx');\n\n @if $wc {\n @include _typography($font-family, $type-scale, $prefix: 'igc');\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 palette as passed to the igx-theme mixin.\n$theme-palette: (\n primary: (\n 50: #c0c0ff,\n '50-contrast': black,\n 100: #a7a7fa,\n '100-contrast': black,\n 200: #6d6df1,\n '200-contrast': black,\n 300: #3c3cf2,\n '300-contrast': white,\n 400: #1d1df7,\n '400-contrast': white,\n 500: blue,\n '500-contrast': white,\n 600: #0000e5,\n '600-contrast': white,\n 700: #0000d2,\n '700-contrast': white,\n 800: #0000be,\n '800-contrast': white,\n 900: #0000a8,\n '900-contrast': white,\n 'A100': #55f,\n 'A100-contrast': white,\n 'A200': #2727ff,\n 'A200-contrast': white,\n 'A400': #0000eb,\n 'A400-contrast': white,\n 'A700': #00a,\n 'A700-contrast': white\n ),\n secondary: (\n 50: #ffc0c0,\n '50-contrast': black,\n 100: #faa7a7,\n '100-contrast': black,\n 200: #f16d6d,\n '200-contrast': black,\n 300: #f23c3c,\n '300-contrast': black,\n 400: #f71d1d,\n '400-contrast': black,\n 500: var(--some-dynamic-color),\n '500-contrast': black,\n 600: #e50000,\n '600-contrast': white,\n 700: #d20000,\n '700-contrast': white,\n 800: #be0000,\n '800-contrast': white,\n 900: #a80000,\n '900-contrast': white,\n 'A100': #f55,\n 'A100-contrast': black,\n 'A200': #ff2727,\n 'A200-contrast': black,\n 'A400': #eb0000,\n 'A400-contrast': white,\n 'A700': #a00,\n 'A700-contrast': white\n ),\n grays: (\n 50: hsl(0, 0%, 98%),\n '50-contrast': black,\n 100: hsl(0, 0%, 96%),\n '100-contrast': black,\n 200: hsl(0, 0%, 93%),\n '200-contrast': black,\n 300: hsl(0, 0%, 88%),\n '300-contrast': black,\n 400: hsl(0, 0%, 74%),\n '400-contrast': black,\n 500: hsl(0, 0%, 62%),\n '500-contrast': black,\n 600: hsl(0, 0%, 54%),\n '600-contrast': black,\n 700: hsl(0, 0%, 38%),\n '700-contrast': white,\n 800: hsl(0, 0%, 26%),\n '800-contrast': white,\n 900: hsl(0, 0%, 13%),\n '900-contrast': white,\n ),\n info: (\n 500: #1377d5,\n '500-contrast': black\n ),\n success: (\n 500: #4eb862,\n '500-contrast': black\n ),\n warn: (\n 500: #fbb13c,\n '500-contrast': black\n ),\n error: (\n 500: #ff134a,\n '500-contrast': black\n ),\n surface: (\n 500: #222,\n '500-contrast': white\n )\n) !default;\n\n/// Determines whether color-blind palettes are enabled.\n$enhanced-accessibility: false !default;\n\n/// Stores a list of dropped component themes.\n$dropped-themes: () !default;\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas/dark' as *;\n@use '../button-group/button-group-component' as *;\n@use '../button-group/button-group-theme' as *;\n@use '../tree/tree-theme' as *;\n@use 'sass:map';\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 color\n/// @requires rem\n/// @requires var-get\n@mixin excel-filtering($theme, $palette) {\n $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n\n $tree-node-indent: (\n comfortable: rem(16px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n $tree-node-expander-size: rem(20px);\n $tree-node-height: (\n comfortable: rem(40px),\n cosy: rem(32px),\n compact: rem(24px)\n );\n\n $checkbox-indent: (\n comfortable: calc(#{map.get($tree-node-indent, 'comfortable')} + #{$tree-node-expander-size} + #{rem(8px)}),\n cosy: calc((#{map.get($tree-node-indent, 'cosy')} * 2) + #{$tree-node-expander-size}),\n compact: calc((#{map.get($tree-node-indent, 'compact')} * 2) + #{$tree-node-expander-size}),\n );\n\n %grid-excel-filter {\n display: block;\n width: rem(320px);\n height: 100%;\n flex-grow: 1;\n box-shadow: elevation($elevation: 12);\n overflow: auto;\n min-width: rem(320px);\n }\n\n %grid-excel-filter--inline {\n box-shadow: none;\n width: 100%;\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 display: flex;\n cursor: pointer;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(15px)});\n height: var(--igx-icon-size, #{rem(15px)});\n font-size: var(--igx-icon-size, #{rem(15px)});\n }\n }\n\n %grid-excel-icon--filtered {\n igx-icon {\n color: if(\n $variant == 'indigo-design',\n color($palette, 'warn', 500),\n color($palette, 'secondary')\n );\n }\n }\n\n %grid-excel-menu {\n display: flex;\n flex-direction: column;\n height: 100%;\n background: var-get($theme, 'filtering-row-background');\n // TODO: The border-radius should not be hardcoded.\n border-radius: border-radius(rem(4px));\n\n igx-buttongroup {\n --shadow: none;\n --item-background: #{var-get($theme, 'filtering-row-background')};\n --item-hover-background: #{color($palette, 'grays', 100)};\n --item-selected-background: #{color($palette, 'grays', 100)};\n --item-text-color: #{color($palette, 'grays', 700)};\n --item-hover-text-color: #{color($palette, 'grays', 800)};\n --item-selected-text-color: #{if(\n $variant == 'indigo-design',\n contrast-color($palette, 'surface'),\n color($palette, 'secondary', 500)\n )};\n --item-border-color: transparent;\n --item-selected-border-color: transparent;\n --item-disabled-border: transparent;\n }\n\n @include tree(tree-theme(\n $background: color($palette, 'surface'),\n $background-selected: color($palette, 'surface'),\n $background-active: color($palette, 'surface'),\n $background-active-selected: color($palette, 'surface'),\n $foreground: contrast-color($palette, 'surface'),\n $foreground-selected: contrast-color($palette, 'surface'),\n $foreground-active: contrast-color($palette, 'surface'),\n $foreground-active-selected: contrast-color($palette, 'surface'),\n ));\n\n .igx-tree-node__wrapper {\n padding: 0;\n }\n\n igx-chips-area {\n padding: rem(16px) rem(16px) 0 rem(16px);\n gap: rem(8px);\n }\n }\n\n %grid-excel-menu__header {\n display: flex;\n align-items: center;\n padding: rem(16px);\n color: color($palette, 'grays', 700);\n }\n\n %grid-excel-menu__header-actions {\n display: flex;\n margin-inline-start: auto;\n\n [igxButton] + [igxButton] {\n margin-inline-start: rem(4px);\n }\n\n %grid-excel-actions__action {\n padding: 0 !important;\n margin: 0 !important;\n }\n\n %grid-excel-actions__action,\n %grid-excel-actions--selected {\n justify-content: center;\n }\n }\n\n %grid-excel-menu__footer {\n display: flex;\n justify-content: space-between;\n\n %grid-excel-filter__apply,\n %grid-excel-filter__cancel {\n flex-grow: 1;\n\n [igxButton] {\n width: 100%;\n }\n }\n }\n\n %grid-excel-filter__clear {\n flex-grow: 1;\n }\n\n %grid-excel-filter__cancel + %grid-excel-filter__apply {\n margin-inline-start: rem(16px);\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n display: block;\n padding: rem(8px) rem(16px);\n\n header {\n color: color($palette, 'grays', 700);\n margin-bottom: rem(4px);\n }\n\n igx-icon {\n display: initial;\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\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: color($palette, 'grays', 700);\n margin-inline-end: auto;\n }\n }\n\n %grid-excel-actions {\n padding: rem(8px) rem(16px);\n }\n\n %grid-excel-actions--selected {\n igx-icon {\n color: if(\n $variant == 'indigo-design',\n color($palette, 'primary', 200),\n color($palette, 'secondary')\n );\n }\n }\n\n %grid-excel-move .igx-button-group {\n [dir='rtl'] & {\n flex-direction: row-reverse;\n\n igx-icon,\n [igxButton] {\n direction: ltr;\n }\n }\n }\n\n %grid-excel-sort .igx-button-group {\n [dir='rtl'] & {\n flex-direction: row-reverse;\n\n igx-icon,\n [igxButton] {\n direction: ltr;\n }\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 cursor: pointer;\n color: color($palette, 'grays', 700);\n outline-style: none;\n\n &:hover,\n &:focus {\n background: color($palette, 'grays', 100);\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n }\n\n %grid-excel-actions__action--disabled {\n color: color($palette, 'grays', 400);\n pointer-events: none;\n }\n\n %igx-excel-filter__empty {\n display: grid;\n place-items: center;\n height: 100%;\n }\n\n %grid-excel-main {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\n padding: rem(16px);\n gap: rem(16px);\n\n igx-list {\n flex-grow: 1;\n overflow: hidden;\n margin-inline: -#{rem(16px)};\n border: 0;\n\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n border-bottom: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n border-bottom: 1px dashed color($palette, 'grays', 300);\n }\n }\n\n %igx-excel-filter__tree {\n background: color($palette, 'surface');\n overflow-y: auto;\n margin: 0 rem(-16px);\n flex: 1;\n\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n border-bottom: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n border-bottom: 1px dashed color($palette, 'grays', 300);\n }\n\n igx-icon {\n width: var(--igx-icon-size, #{$tree-node-expander-size});\n height: var(--igx-icon-size, #{$tree-node-expander-size});\n font-size: var(--igx-icon-size, #{$tree-node-expander-size});\n }\n\n > igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'comfortable');\n min-height: map.get($tree-node-height, 'comfortable');\n }\n\n .igx-tree-node__toggle-button {\n min-width: rem(20px);\n margin-inline-start: map.get($tree-node-indent, 'comfortable');\n }\n }\n\n %igx-excel-filter__tree-alike {\n background: color($palette, 'surface');\n display: flex;\n flex-direction: column;\n z-index: 1;\n }\n\n %igx-excel-filter__tree-alike-item {\n display: flex;\n align-items: center;\n height: map.get($tree-node-height, 'comfortable');\n background: color($palette, 'surface');\n\n &:hover,\n &:focus {\n background: color($palette, 'grays', 200);\n }\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'comfortable');\n }\n }\n }\n\n %grid-excel-menu--cosy {\n igx-chips-area {\n padding: rem(8px) rem(8px) 0 rem(8px);\n }\n\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-move {\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 }\n\n %grid-excel-main {\n padding: rem(8px);\n gap: rem(8px);\n }\n\n igx-list {\n margin-inline-start: -#{rem(8px)};\n margin-inline-end: -#{rem(8px)};\n }\n\n %igx-excel-filter__tree {\n margin: 0 rem(-8px);\n\n > igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'cosy');\n min-height: map.get($tree-node-height, 'cosy');\n }\n\n .igx-tree-node__toggle-button {\n margin-inline-start: map.get($tree-node-indent, 'cosy');\n }\n }\n\n %igx-excel-filter__tree-alike-item {\n height: map.get($tree-node-height, 'cosy');\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'cosy');\n }\n }\n }\n\n %grid-excel-menu--compact {\n igx-chips-area {\n padding: rem(4px) rem(4px) 0 rem(4px);\n gap: rem(4px);\n }\n\n %grid-excel-menu__header {\n justify-content: space-between;\n padding: rem(4px);\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n padding: rem(4px);\n\n @extend %grid-excel-action--compact;\n\n igx-buttongroup {\n width: rem(208px);\n }\n }\n\n %grid-excel-move {\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 }\n\n %grid-excel-main {\n padding: rem(4px);\n gap: rem(4px);\n }\n\n igx-list {\n margin-inline-start: -#{rem(4px)};\n margin-inline-end: -#{rem(4px)};\n }\n\n %igx-excel-filter__tree {\n margin: 0 rem(-4px);\n\n igx-checkbox,\n .igx-tree-node__wrapper {\n height: map.get($tree-node-height, 'compact');\n min-height: map.get($tree-node-height, 'compact');\n }\n\n .igx-tree-node__toggle-button {\n margin: 0 map.get($tree-node-indent, 'compact');\n }\n }\n\n %igx-excel-filter__tree-alike-item {\n height: map.get($tree-node-height, 'compact');\n\n > igx-checkbox {\n margin-inline-start: map.get($checkbox-indent, 'compact');\n }\n }\n }\n\n %grid-excel-menu__secondary {\n width: 520px;\n min-width: 520px;\n background: var-get($theme, 'filtering-row-background');\n box-shadow: elevation($elevation: 12);\n border-radius: 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 @if $bootstrap-theme {\n border-bottom: 1px solid color($palette, 'grays', 100);\n } @else {\n border-bottom: 1px solid color($palette, 'grays', 300);\n }\n }\n\n %grid-excel-menu__secondary-main {\n height: 232px;\n overflow: auto;\n }\n\n %grid-excel-menu__secondary-footer {\n @if $bootstrap-theme {\n border-top: 1px dashed color($palette, 'grays', 100);\n } @else {\n border-top: 1px dashed color($palette, 'grays', 300);\n }\n\n %grid-excel-filter__apply,\n %grid-excel-filter__cancel {\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-select {\n flex-grow: 1;\n flex-basis: 40%;\n margin: rem(16px) 0;\n\n ~ igx-input-group,\n ~ igx-date-picker {\n margin-inline-start: rem(16px);\n }\n }\n\n igx-buttongroup {\n min-width: 30%;\n }\n\n [igxButton='icon'] {\n margin-inline-start: rem(16px);\n }\n }\n\n %grid-excel-menu__add-filter {\n margin: 0 rem(16px) rem(16px);\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n igx-excel-style-filter-operations,\n [igxExcelStyleFilterOperations] {\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n overflow: hidden;\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 [(haeder-comfortable: 'overline', header-compact: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} 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 type-style($type-scale, 'h6')\n }\n }\n\n %grid-excel-menu__secondary {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6');\n }\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n header {\n @include type-style($type-scale, 'overline');\n }\n }\n\n %grid-excel-menu--cosy {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6')\n }\n }\n\n %grid-excel-menu--compact {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'subtitle-1')\n }\n\n %grid-excel-sort,\n %grid-excel-move {\n header {\n @include type-style($type-scale, 'body-2');\n text-transform: capitalize;\n }\n }\n\n %grid-excel-actions__action {\n span {\n @include type-style($type-scale, 'body-2');\n }\n }\n\n %cbx-label {\n @include type-style($type-scale, 'body-2');\n }\n }\n\n %grid-excel-menu__secondary--cosy {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'h6');\n }\n }\n\n %grid-excel-menu__secondary--compact {\n %grid-excel-menu__header > h4 {\n @include type-style($type-scale, 'subtitle-1');\n }\n }\n}\n","@use 'sass:map';\n@use '../base' as *;\n\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 family 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 {String} $font-style [null] - The font style 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 type-style(\n $font-family: null,\n $font-size: null,\n $font-weight: null,\n $font-style: 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 font-style: $font-style,\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 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 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 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 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 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 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 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 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 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 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 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 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 type-style function. This type scale styles elements with `igx-font-overline` class.\n/// @requires type-style\n/// @returns {Map} - A map of all defined type scales.\n@function 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 $_meta: ()\n) {\n $default-scale: (\n _meta: (variant: 'material'),\n h1: type-style(\n $font-family: css-font-var,\n $font-size: rem(96px),\n $font-weight: 300,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(60px),\n $font-weight: 300,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(48px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(34px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(24px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(20px),\n $font-weight: 600,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(16px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.15px),\n $line-height: rem(24px),\n $text-transform: none\n ),\n subtitle-2: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 600,\n $font-style: normal,\n $letter-spacing: rem(.1px),\n $line-height: rem(24px),\n $text-transform: none\n ),\n body-1: type-style(\n $font-family: css-font-var,\n $font-size: rem(16px),\n $font-weight: 400,\n $font-style: normal,\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: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.25px),\n $line-height: rem(20px),\n $text-transform: none\n ),\n button: type-style(\n $font-family: css-font-var,\n $font-size: rem(14px),\n $font-weight: 600,\n $font-style: normal,\n $letter-spacing: rem(.75px),\n $line-height: rem(16px),\n $text-transform: uppercase\n ),\n caption: type-style(\n $font-family: css-font-var,\n $font-size: rem(12px),\n $font-weight: 400,\n $font-style: normal,\n $letter-spacing: rem(.4px),\n $line-height: rem(16px),\n $text-transform: none\n ),\n overline: type-style(\n $font-family: css-font-var,\n $font-size: rem(10px),\n $font-weight: 400,\n $font-style: normal,\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 _meta: extend(map.get($default-scale, '_meta'), $_meta)\n );\n}\n\n/// Get type scale category config.\n/// @param {Map} $scale - A type scale map reference as produces by 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: type-scale-category($default-type-scale, 'h1');\n/// @returns {Map} - The config map for the selected category in the type scale.\n@function 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 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 type-style($default-type-scale, 'h1');\n/// font-family: 'GT Walsheim';\n/// color: mediumvioletred;\n/// }\n@mixin type-style($scale, $category) {\n $type-category: map.get($scale, $category);\n @each $key, $value in $type-category {\n #{$key}: var(--igx-#{$category}-#{$key});\n }\n @content;\n}\n\n/// Transforms a type style map into a font style rule assigned to a css variable.\n/// @param {String} $name - The custom CSS variable name.\n/// @param {Map} $type-style - A type style map reference as produces by type-style.\n/// @param {String} $prefix [null] - Optional prefix.\n/// @example scss Assign the `h1` styles to custom CSS property using the CSS font shorthand syntax.\n/// $h1-style: type-scale-category($type-scale, 'h1');\n/// @include font-var('h1-font', $h1-style);\n@mixin font-var($name, $type-style, $prefix: null) {\n $ff: var(--igx-font-family);\n $fz: map.get($type-style, 'font-size');\n $fw: map.get($type-style, 'font-weight');\n\n // unused for now\n $fs: map.get($type-style, 'font-style');\n $lh: map.get($type-style, 'line-height');\n $tt: map.get($type-style, 'text-transform');\n $ls: map.get($type-style, 'letter-spacing');\n $mt: map.get($type-style, 'margin-top');\n $mb: map.get($type-style, 'margin-bottom');\n\n @include css-vars((\n 'name': $prefix,\n #{$name}: #{$fw $fz $ff},\n ));\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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-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: banner-theme($banner-background: #000);\n/// // Pass the theme to the banner component mixin\n/// @include banner($my-banner-theme);\n@function banner-theme(\n $palette: null,\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 $selector: 'igx-banner, .igx-banner, .igx-banner--cosy, .igx-banner--compact';\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 selector: $selector,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin banner($theme) {\n @include css-vars($theme);\n $banner-padding: (\n comfortable: rem(8),\n cosy: rem(8),\n compact: rem(8)\n );\n\n %igx-banner-host {\n igx-expansion-panel-body {\n padding: 0;\n }\n }\n\n %igx-banner__actions,\n %igx-banner__actions > igx-banner-actions,\n %igx-banner__illustration,\n %igx-banner__message {\n display: flex;\n }\n\n %igx-banner__illustration,\n %igx-banner__message {\n align-items: center;\n }\n\n %igx-banner {\n display: flex;\n justify-content: flex-end;\n flex-wrap: wrap;\n grid-gap: 8px;\n padding-inline-start: calc(#{map.get($banner-padding, 'comfortable') * 2});\n padding-inline-end: map.get($banner-padding, 'comfortable');\n padding-block-start: map.get($banner-padding, 'comfortable');\n padding-block-end: map.get($banner-padding, 'comfortable');\n background: var-get($theme, 'banner-background');\n }\n\n %igx-banner__illustration {\n justify-content: center;\n width: rem(40);\n min-width: rem(40);\n height: rem(40);\n color: var-get($theme, 'banner-illustration-color');\n }\n\n %igx-banner__border-top {\n border-block-start: 1px solid var-get($theme, 'banner-border-color');\n inset-block-start: -1px\n }\n\n %igx-banner__border-bottom {\n border-block-end: 1px solid var-get($theme, 'banner-border-color');\n inset-block-start: 0;\n }\n\n %igx-banner__text {\n color: var-get($theme, 'banner-message-color');\n flex: 1 0 0%;\n\n > * {\n margin-block-start: 0 !important;\n }\n }\n\n %igx-banner--cosy {\n padding-inline-start: calc(#{map.get($banner-padding, 'cosy') * 2});\n padding-inline-end: map.get($banner-padding, 'cosy');\n padding-block-start: map.get($banner-padding, 'cosy');\n padding-block-end: map.get($banner-padding, 'cosy');\n }\n\n %igx-banner--compact {\n padding-inline-start: calc(#{map.get($banner-padding, 'compact') * 2});\n padding-inline-end: map.get($banner-padding, 'compact');\n padding-block-start: map.get($banner-padding, 'compact');\n padding-block-end: map.get($banner-padding, 'compact');\n }\n\n %igx-banner__message {\n min-width: rem(150px);\n flex: 1 0 0%;\n gap: rem(16px);\n }\n\n %igx-banner__actions,\n %igx-banner__actions > igx-banner-actions {\n flex-wrap: wrap;\n justify-content: flex-end;\n align-items: flex-end;\n align-self: flex-end;\n gap: rem(8px);\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 [(message: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin banner-typography($type-scale, $categories: (\n message: 'body-2')\n) {\n $message: map.get($categories, 'message');\n\n %igx-banner__text {\n @include type-style($type-scale, $message) {\n margin-block-start: 0;\n margin-block-end: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 elevation\n/// @requires $elevations\n///\n/// @example scss Set a custom background color\n/// $my-bottom-nav-theme: bottom-nav-theme($background: black);\n/// // Pass the theme to the bottom-nav component mixin\n/// @include bottom-nav($my-bottom-nav-theme);\n@function bottom-nav-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 meta.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: 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} css-vars\n/// @requires {mixin} ellipsis\n/// @requires igx-bottom-nav-theme\n/// @requires color\n/// @requires extend\n/// @requires rem\n/// @requires $ease-in-out-quad\n/// @requires var-get\n@mixin bottom-nav($theme) {\n @include css-vars($theme);\n\n $menu-height: rem(56px);\n $item-min-width: rem(80px);\n $item-max-width: rem(168px);\n $item-padding: 0 rem(12px, 16px);\n\n %igx-bottom-nav-panel {\n display: block;\n\n &:focus {\n outline-style: none;\n }\n\n &:empty {\n display: none;\n }\n }\n\n %igx-bottom-nav-menu {\n display: flex;\n position: fixed;\n justify-content: center;\n align-items: center;\n inset-inline-start: 0;\n inset-inline-end: 0;\n height: $menu-height;\n background: var-get($theme, 'background');\n overflow: hidden;\n z-index: 8;\n }\n\n %igx-bottom-nav-menu--top {\n inset-block-start: 0;\n inset-block-end: inherit;\n box-shadow: var-get($theme, 'shadow');\n }\n\n %igx-bottom-nav-menu--bottom {\n inset-block-start: inherit;\n inset-block-end: 0;\n box-shadow: var-get($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-get($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-style: none;\n }\n\n %igx-bottom-nav-menu-item--disabled {\n opacity: .5;\n cursor: default;\n pointer-events: none;\n }\n\n %igx-bottom-nav-menu-item--selected {\n color: var-get($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-block-start: rem(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\n %igx-tab-icon--selected {\n transform: translateY(-2px);\n }\n\n %igx-tab-label--selected {\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} type-style\n@mixin bottom-nav-typography($type-scale, $categories: (label: 'caption')) {\n $label: map.get($categories, 'label');\n\n %igx-tab-label {\n @include type-style($type-scale, $label) {\n margin: 0\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 {Color} $background [null] - The background color of the button.\n/// @param {Color} $foreground [null] - The text color of the button.\n/// @param {Color} $hover-background [null] - The hover background color of the button.\n/// @param {Color} $hover-foreground [null] - The hover text color of the button.\n/// @param {Color} $focus-background [null] - The focus background color of the button.\n/// @param {Color} $focus-foreground [null] - The focus text color of the button.\n/// @param {Color} $focus-visible-background [null] - The focus-visible background color of the button.\n/// @param {Color} $focus-visible-foreground [null] - The focus-visible text color of the button.\n/// @param {Color} $active-background [null] - The active background of the button.\n/// @param {Color} $active-foreground [null] - The active text color of the button.\n/// @param {Number} $border-radius [null] - The border radius of the button.\n/// @param {Color} $border-color [null] - The border color of the button.\n/// @param {Color} $hover-border-color [null] - The hover border color of the button.\n/// @param {Color} $focus-border-color [null] - The focus border color of the button.\n/// @param {Color} $focus-visible-border-color [null] - The focus-visible border color of the button.\n/// @param {Color} $active-border-color [null] - The active border color of the button.\n/// @param {Color} $shadow-color [null] - The shadow color of the button.\n/// @param {Color} $resting-shadow [null] - The shadow of the button in its idle state.\n/// @param {Color} $hover-shadow [null] - The shadow of the button in its hover state.\n/// @param {Color} $focus-shadow [null] - The shadow of the button in its focus state.\n/// @param {Color} $active-shadow [null] - The shadow of the button in its focus state.\n/// @param {Color} $disabled-background [null] - The disabled background color of the button.\n/// @param {Color} $disabled-foreground [null] - The disabled text color of the button.\n/// @param {Color} $disabled-border-color [null] - The disabled border color of the button.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n///\n/// @example scss Change the background and text colors in raised buttons\n/// $my-button-theme: button-theme(\n/// $foreground: white,\n/// $background: black\n/// );\n/// // Pass the theme to the button component mixin\n/// @include button($my-button-theme);\n@function button-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $background: null,\n $foreground: null,\n\n $hover-background: null,\n $hover-foreground: null,\n\n $focus-background: null,\n $focus-foreground: null,\n\n $focus-visible-background: null,\n $focus-visible-foreground: null,\n\n $active-background: null,\n $active-foreground: null,\n\n $border-radius: null,\n $border-color: null,\n $hover-border-color: null,\n $focus-border-color: null,\n $focus-visible-border-color: null,\n $active-border-color: null,\n\n $shadow-color: null,\n\n $resting-shadow: null,\n $hover-shadow: null,\n $focus-shadow: null,\n $active-shadow: null,\n\n $disabled-background: null,\n $disabled-foreground: null,\n $disabled-border-color: 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 $themes: ();\n $variant: null;\n\n @each $_name, $_schema in $button-schema {\n $_resting-shadow: $resting-shadow;\n $_hover-shadow: $hover-shadow;\n $_focus-shadow: $focus-shadow;\n $_active-shadow: $active-shadow;\n $_border-radius: $border-radius;\n\n @if not($variant) {\n $variant: map.get($_schema, 'variant');\n }\n\n @if not($foreground) and $background {\n $foreground: text-contrast($background);\n }\n\n @if not($hover-background) and $background {\n $hover-background: lighten-color($background, 5%);\n }\n\n @if not($hover-foreground) and $hover-background {\n $hover-foreground: text-contrast($hover-background);\n }\n\n @if not($focus-background) and $background {\n $focus-background: lighten-color($background, 5%);\n }\n\n @if not($focus-foreground) and $focus-background {\n $focus-foreground: text-contrast($focus-background);\n }\n\n @if not($focus-visible-background) and $focus-background {\n $focus-visible-background: $focus-background;\n }\n\n @if not($focus-visible-foreground) and $focus-foreground {\n $focus-visible-foreground: $focus-foreground;\n }\n\n @if not($focus-visible-border-color) and $focus-border-color {\n $focus-visible-border-color: $focus-border-color;\n }\n\n @if not($_resting-shadow) {\n $resting-elevation: map.get($_schema, 'resting-elevation');\n $_resting-shadow: elevation($elevations, $resting-elevation);\n }\n\n @if not($_hover-shadow) {\n $hover-elevation: map.get($_schema, 'hover-elevation');\n $_hover-shadow: elevation($elevations, $hover-elevation);\n }\n\n @if not($_focus-shadow) {\n $focus-elevation: map.get($_schema, 'focus-elevation');\n $_focus-shadow: elevation($elevations, $focus-elevation);\n }\n\n @if not($_active-shadow) {\n $active-elevation: map.get($_schema, 'active-elevation');\n $_active-shadow: elevation($elevations, $active-elevation);\n }\n\n @if not($_border-radius) {\n $_border-radius: border-radius(map.get($_schema, 'border-radius'));\n }\n\n $themes: map.merge($themes, (\n $_name: extend(apply-palette($_schema, $palette), (\n name: $name,\n background: $background,\n foreground: $foreground,\n\n hover-background: $hover-background,\n hover-foreground: $hover-foreground,\n\n focus-background: $focus-background,\n focus-foreground: $focus-foreground,\n\n focus-visible-background: $focus-visible-background,\n focus-visible-foreground: $focus-visible-foreground,\n\n active-background: $active-background,\n active-foreground: $active-foreground,\n\n border-radius: $_border-radius,\n border-color: $border-color,\n hover-border-color: $hover-border-color,\n focus-border-color: $focus-border-color,\n focus-visible-border-color: $focus-visible-border-color,\n active-border-color: $active-border-color,\n\n shadow-color: $shadow-color,\n\n resting-shadow: $_resting-shadow,\n hover-shadow: $_hover-shadow,\n focus-shadow: $_focus-shadow,\n active-shadow: $_active-shadow,\n\n disabled-background: $disabled-background,\n disabled-foreground: $disabled-foreground,\n disabled-border-color: $disabled-border-color,\n ))\n ));\n }\n\n @return (\n palette: $palette,\n name: $name,\n variant: $variant,\n themes: $themes,\n );\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin button($theme) {\n $button-width: rem(88px);\n\n $variant: map.get($theme, variant);\n\n $flat-theme: map.get(map.get($theme, 'themes'), 'flat');\n $outlined-theme: map.get(map.get($theme, 'themes'), 'outlined');\n $raised-theme: map.get(map.get($theme, 'themes'), 'raised');\n $fab-theme: map.get(map.get($theme, 'themes'), 'fab');\n $icon-theme: map.get(map.get($theme, 'themes'), 'icon');\n\n @include css-vars($flat-theme);\n @include css-vars($outlined-theme);\n @include css-vars($raised-theme);\n @include css-vars($fab-theme);\n @include css-vars($icon-theme);\n\n $time: map.get((\n material: .1s,\n fluent: .1s,\n bootstrap: .15s,\n indigo-design: .15s\n ), $variant);\n\n $button-transition: color $time ease-in-out,\n background-color $time ease-in-out,\n border-color $time ease-in-out,\n box-shadow $time ease-in-out;\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: map.get((\n material: rem(36px, 16px),\n fluent: rem(32px, 16px),\n bootstrap: rem(36px, 16px),\n indigo-design: rem(36px, 16px),\n ), $variant);\n\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 $outlined-button-padding-material: (\n comfortable: rem(7px, 16px) rem(14px, 16px),\n cosy: rem(4px, 16px) rem(14px, 16px),\n compact: rem(1px, 16px) rem(14px, 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-bootstrap: (\n comfortable: rem(6px, 16px) rem(12px, 16px),\n cosy: rem(4px, 16px) rem(10px, 16px),\n compact: rem(2px, 16px) rem(8px, 16px)\n );\n\n $button-padding-indigo: (\n comfortable: rem(3px, 16px) rem(12px, 16px),\n cosy: rem(2px, 16px) rem(12px, 16px),\n compact: rem(1px, 16px) rem(8px, 16px)\n );\n\n $outlined-button-padding-indigo: (\n comfortable: rem(6px, 16px) rem(14px, 16px),\n cosy: rem(4px, 16px) rem(10px, 16px),\n compact: rem(2px, 16px) rem(6px, 16px)\n );\n\n $icon-button-width-material: (\n comfortable: rem(36px, 16px),\n cosy: rem(30px, 16px),\n compact: rem(24px, 16px),\n );\n\n $icon-button-width-fluent: (\n comfortable: rem(38px, 16px),\n cosy: rem(32px, 16px),\n compact: rem(24px, 16px),\n );\n\n $icon-button-width-bootstrap: (\n comfortable: rem(48px, 16px),\n cosy: rem(38px, 16px),\n compact: rem(31px, 16px),\n );\n\n $icon-button-width-indigo: (\n comfortable: rem(36px, 16px),\n cosy: rem(32px, 16px),\n compact: rem(28px, 16px),\n );\n\n $button-padding: map.get((\n material: $button-padding-material,\n fluent: $button-padding-fluent,\n bootstrap: $button-padding-bootstrap,\n indigo-design: $button-padding-indigo,\n ), $variant);\n\n $outlined-button-padding: map.get((\n material: $outlined-button-padding-material,\n fluent: $button-padding-fluent,\n bootstrap: $button-padding-bootstrap,\n indigo-design: $outlined-button-padding-indigo\n ), $variant);\n\n $icon-button-width: map.get((\n material: $icon-button-width-material,\n fluent: $icon-button-width-fluent,\n bootstrap: $icon-button-width-bootstrap,\n indigo-design: $icon-button-width-indigo\n ), $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(38px),\n cosy: rem(32px),\n compact: rem(24px)\n );\n\n $button--size-bootstrap: (\n comfortable: rem(48px),\n cosy: rem(38px),\n compact: rem(31px)\n );\n\n $button--size-indigo: (\n comfortable: rem(36px),\n cosy: rem(32px),\n compact: rem(28px)\n );\n\n $button-size: map.get((\n material: $button--size-material,\n fluent: $button--size-fluent,\n bootstrap: $button--size-bootstrap,\n indigo-design: $button--size-indigo,\n ), $variant);\n\n $button-floating-padding: (\n comfortable: rem(8px) rem(14px),\n cosy: rem(4px) rem(10px),\n compact: 0 rem(6px)\n );\n\n $button-floating-size: (\n comfortable: rem(48px),\n cosy: rem(40px),\n compact: rem(32px)\n );\n\n $button-floating-size-indigo: (\n comfortable: rem(48px),\n cosy: rem(42px),\n compact: rem(36px)\n );\n\n $icon-in-button-margin: (\n comfortable: rem(12px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n $icon-sizes: map.get((\n material: rem(18px),\n fluent: rem(16px),\n bootstrap: rem(18px),\n indigo-design: rem(18px),\n ), $variant);\n $icon-in-button-size: $icon-sizes;\n\n $raised-shadow: map.get((\n material: var-get($raised-theme, 'resting-shadow'),\n fluent: var-get($raised-theme, 'resting-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $raised-shadow--hover: map.get((\n material: var-get($raised-theme, 'hover-shadow'),\n fluent: var-get($raised-theme, 'hover-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $raised-shadow--focus: map.get((\n material: var-get($raised-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color')\n ), $variant);\n\n $raised-shadow--active: map.get((\n material: var-get($raised-theme, 'active-shadow'),\n fluent: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color')\n ), $variant);\n\n $fab-shadow: map.get((\n material: var-get($fab-theme, 'resting-shadow'),\n fluent: var-get($fab-theme, 'resting-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $fab-shadow--hover: map.get((\n material: var-get($fab-theme, 'hover-shadow'),\n fluent: var-get($fab-theme, 'hover-shadow'),\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $fab-shadow--focus: map.get((\n material: var-get($fab-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')\n ), $variant);\n\n $fab-shadow--active: map.get((\n material: var-get($fab-theme, 'active-shadow'),\n fluent: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color')\n ), $variant);\n\n $icon-shadow: map.get((\n material: var-get($icon-theme, 'focus-shadow'),\n fluent: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'),\n bootstrap: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'),\n indigo-design: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color')\n ), $variant);\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: rem(1px) solid var-get($flat-theme, 'border-color');\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\n igx-icon {\n display: flex;\n justify-content: center;\n width: var(--igx-icon-size, #{$icon-in-button-size});\n height: var(--igx-icon-size, #{$icon-in-button-size});\n font-size: var(--igx-icon-size, #{$icon-in-button-size});\n color: inherit;\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'comfortable');\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 margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\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 margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--flat {\n background: var-get($flat-theme, 'background');\n color: var-get($flat-theme, 'foreground');\n border-radius: var-get($flat-theme, 'border-radius');\n\n &:hover {\n background: var-get($flat-theme, 'hover-background');\n color: var-get($flat-theme, 'hover-foreground');\n border-color: var-get($flat-theme, 'hover-border-color');\n }\n\n &:focus {\n background: var-get($flat-theme, 'focus-background');\n color: var-get($flat-theme, 'focus-foreground');\n box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');\n border-color: var-get($flat-theme, 'focus-border-color');\n }\n\n &:active {\n background: var-get($flat-theme, 'active-background');\n color: var-get($flat-theme, 'active-foreground');\n box-shadow: 0 0 0 rem(3px) var-get($flat-theme, 'shadow-color');\n border-color: var-get($flat-theme, 'active-border-color');\n }\n\n &:focus-visible {\n background: var-get($flat-theme, 'focus-visible-background');\n color: var-get($flat-theme, 'focus-visible-foreground');\n border-color: var-get($flat-theme, 'focus-visible-border-color');\n }\n\n @if($variant == 'bootstrap') {\n &:focus,\n &:active,\n &:focus-visible {\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n }\n }\n\n %igx-button--outlined {\n background: var-get($outlined-theme, 'background');\n color: var-get($outlined-theme, 'foreground');\n border-color: var-get($outlined-theme, 'border-color');\n border-radius: var-get($outlined-theme, 'border-radius');\n padding: map.get($outlined-button-padding, 'comfortable');\n\n @if $variant == 'indigo-design' {\n border-width: rem(2px);\n }\n\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n border-color: var-get($outlined-theme, 'hover-border-color');\n }\n\n &:focus {\n background: var-get($outlined-theme, 'focus-background');\n color: var-get($outlined-theme, 'focus-foreground');\n border-color: var-get($outlined-theme, 'focus-border-color');\n\n @if($variant == 'bootstrap') {\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n }\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n } @else if($variant == 'indigo-design') {\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n }\n\n &:active {\n background: var-get($outlined-theme, 'active-background');\n color: var-get($outlined-theme, 'active-foreground');\n border-color: var-get($outlined-theme, 'active-border-color');\n box-shadow: 0 0 0 rem(3px) var-get($outlined-theme, 'shadow-color');\n }\n\n &:focus-visible {\n background: var-get($outlined-theme, 'focus-visible-background');\n color: var-get($outlined-theme, 'focus-visible-foreground');\n border-color: var-get($outlined-theme, 'focus-visible-border-color');\n\n &:hover {\n background: var-get($outlined-theme, 'hover-background');\n color: var-get($outlined-theme, 'hover-foreground');\n border-color: var-get($outlined-theme, 'hover-border-color');\n }\n\n &:active {\n background: var-get($outlined-theme, 'active-background');\n color: var-get($outlined-theme, 'active-foreground');\n border-color: var-get($outlined-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(2px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\n }\n }\n }\n\n %igx-button--outlined-cosy {\n padding: map.get($outlined-button-padding, 'cosy');\n min-height: map.get($button-size, 'cosy');\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\n }\n\n %igx-button--outlined-compact {\n padding: map.get($outlined-button-padding, 'compact');\n min-height: map.get($button-size, 'compact');\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--raised {\n color: var-get($raised-theme, 'foreground');\n background: var-get($raised-theme, 'background');\n box-shadow: $raised-shadow;\n border-radius: var-get($raised-theme, 'border-radius');\n\n &:hover {\n color: var-get($raised-theme, 'hover-foreground');\n background: var-get($raised-theme, 'hover-background');\n border-color: var-get($raised-theme, 'hover-border-color');\n box-shadow: $raised-shadow--hover;\n }\n\n &:focus {\n color: var-get($raised-theme, 'focus-foreground');\n background: var-get($raised-theme, 'focus-background');\n border-color: var-get($raised-theme, 'focus-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--focus;\n } @else {\n box-shadow: $raised-shadow--focus;\n }\n }\n\n &:active {\n color: var-get($raised-theme, 'active-foreground');\n background: var-get($raised-theme, 'active-background');\n border-color: var-get($raised-theme, 'active-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($raised-theme, 'shadow-color'), $raised-shadow--active;\n } @else {\n box-shadow: $raised-shadow--active;\n }\n }\n\n &:focus-visible {\n background: var-get($raised-theme, 'focus-visible-background');\n color: var-get($raised-theme, 'focus-visible-foreground');\n border-color: var-get($raised-theme, 'focus-visible-border-color');\n\n &:hover {\n color: var-get($raised-theme, 'hover-foreground');\n background: var-get($raised-theme, 'hover-background');\n border-color: var-get($raised-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($raised-theme, 'active-foreground');\n background: var-get($raised-theme, 'active-background');\n border-color: var-get($raised-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(3px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\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 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-get($fab-theme, 'foreground');\n background: var-get($fab-theme, 'background');\n border-color: var-get($flat-theme, 'border-color');\n box-shadow: $fab-shadow;\n border-radius: var-get($fab-theme, 'border-radius');\n\n @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'comfortable');\n min-height: map.get($button-floating-size-indigo, 'comfortable');\n }\n\n &:hover {\n color: var-get($fab-theme, 'hover-foreground');\n background: var-get($fab-theme, 'hover-background');\n border-color: var-get($flat-theme, 'hover-border-color');\n box-shadow: $fab-shadow;\n }\n\n &:focus {\n color: var-get($fab-theme, 'focus-foreground');\n background: var-get($fab-theme, 'focus-background');\n border-color: var-get($flat-theme, 'focus-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--focus;\n } @else {\n box-shadow: $raised-shadow--focus;\n }\n }\n\n &:active {\n color: var-get($fab-theme, 'active-foreground');\n background: var-get($fab-theme, 'active-background');\n border-color: var-get($flat-theme, 'active-border-color');\n\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($fab-theme, 'shadow-color'), $fab-shadow--active;\n } @else {\n box-shadow: $raised-shadow--active;\n }\n }\n\n &:focus-visible {\n background: var-get($fab-theme, 'focus-visible-background');\n color: var-get($fab-theme, 'focus-visible-foreground');\n border-color: var-get($fab-theme, 'focus-visible-border-color');\n\n &:hover {\n color: var-get($fab-theme, 'hover-foreground');\n background: var-get($fab-theme, 'hover-background');\n border-color: var-get($fab-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($fab-theme, 'active-foreground');\n background: var-get($fab-theme, 'active-background');\n border-color: var-get($fab-theme, 'active-border-color');\n }\n }\n\n @if($variant == 'fluent') {\n &:focus-visible {\n &::after {\n $outline-btn-indent: rem(3px);\n content: '';\n position: absolute;\n top: $outline-btn-indent;\n inset-inline-start: $outline-btn-indent;\n pointer-events: none;\n border-radius: calc(#{border-radius(#{var-get($fab-theme, 'border-radius')})} - #{$outline-btn-indent});\n width: calc(100% - (#{$outline-btn-indent} * 2));\n height: calc(100% - (#{$outline-btn-indent} * 2));\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'focus-visible-foreground');\n }\n\n /* stylelint-disable */\n &:hover {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'hover-foreground');\n }\n }\n\n &:active {\n &::after {\n box-shadow: 0 0 0 rem(1px) var-get($outlined-theme, 'active-foreground');\n }\n }\n /* stylelint-enable */\n }\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'comfortable');\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 @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'cosy');\n min-height: map.get($button-floating-size-indigo, 'cosy');\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'cosy');\n }\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 @if $variant == 'indigo-design' {\n min-width: map.get($button-floating-size-indigo, 'compact');\n min-height: map.get($button-floating-size-indigo, 'compact');\n }\n\n * + * {\n margin-inline-start: map.get($icon-in-button-margin, 'compact');\n }\n }\n\n %igx-button--icon {\n width: map.get($icon-button-width, 'comfortable');\n height: map.get($icon-button-width, 'comfortable');\n min-width: unset;\n min-height: unset;\n font-size: $button-icon-font-size;\n padding: $button-icon-padding;\n color: var-get($icon-theme, 'foreground');\n background: var-get($icon-theme, 'background');\n border-radius: var-get($icon-theme, 'border-radius');\n border-color: var-get($icon-theme, 'border-color');\n\n @if $variant == 'indigo-design' {\n border-width: rem(3px);\n }\n\n\n &:hover {\n @if $variant != 'fluent' {\n transition: $button-transition;\n }\n\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'hover-border-color');\n }\n\n &:focus {\n color: var-get($icon-theme, 'focus-foreground');\n background: var-get($icon-theme, 'focus-background');\n border-color: var-get($icon-theme, 'focus-border-color');\n\n @if $variant == 'fluent' {\n &:hover {\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'hover-border-color');\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($icon-theme, 'active-border-color');\n }\n }\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($flat-theme, 'active-border-color');\n }\n\n &:focus-visible {\n color: var-get($icon-theme, 'focus-visible-foreground');\n background: var-get($icon-theme, 'focus-visible-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color') ;\n\n &:hover {\n color: var-get($icon-theme, 'hover-foreground');\n background: var-get($icon-theme, 'hover-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color');\n }\n\n &:active {\n color: var-get($icon-theme, 'active-foreground');\n background: var-get($icon-theme, 'active-background');\n border-color: var-get($icon-theme, 'focus-visible-border-color');\n }\n }\n\n &:focus,\n &:active {\n @if $variant == 'material' or $variant == 'fluent' {\n box-shadow: 0 0 0 rem(3px) var-get($icon-theme, 'shadow-color'), $icon-shadow;\n } @else {\n box-shadow: $icon-shadow;\n }\n }\n }\n\n %igx-button--icon-cosy {\n width: map.get($icon-button-width, 'cosy');\n height: map.get($icon-button-width, 'cosy');\n }\n\n %igx-button--icon-compact {\n width: map.get($icon-button-width, 'compact');\n height: map.get($icon-button-width, 'compact');\n }\n\n %igx-button--disabled {\n background: var-get($flat-theme, 'disabled-background');\n color: var-get($flat-theme, 'disabled-foreground');\n border-color: var-get($flat-theme, 'disabled-border-color');\n pointer-events: none;\n box-shadow: none;\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} type-style\n@mixin button-typography($type-scale, $categories: (text: 'button')) {\n $text: map.get($categories, 'text');\n\n %igx-button-display {\n @include type-style($type-scale, $text) {\n text-align: center;\n }\n }\n\n %igx-button--fab {\n @include type-style($type-scale, $text) {\n text-align: center;\n margin: 0;\n }\n }\n}\n","@use '../variables' as *;\n@use 'functions' as *;\n@use 'sass:color';\n@use 'sass:list';\n@use 'sass:map';\n@use 'sass:math';\n@use 'sass:meta';\n@use 'sass:string';\n\n////\n/// @group Utilities\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\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: string.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, $deps: ()) {\n $component: map.get($components, $name);\n\n @if $component == null {\n $components: map.merge($components, (\n #{$name}: (\n usedBy: ()\n ),\n )) !global;\n }\n\n @each $dep in $deps {\n @include register-component($dep);\n\n @if map.has-key($components, $dep) {\n $component: map.get($components, $dep);\n $usedBy: map.get($component, 'usedBy');\n\n $components: map.merge($components, (\n #{$dep}: map.merge($component, (\n usedBy: list.append($usedBy, $name, $separator: comma)\n ))\n )) !global;\n }\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: list.length($animate);\n $animations: '';\n @for $i from 1 through $max {\n $animations: #{$animations + list.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// stylelint-disable max-nesting-depth\n/// Generates CSS class names for all colors from\n/// for a given property and color palette, 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/// @param {Map} $palette [$default-palette] - The palette to use to generate css class names for.\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',\n/// $suffix: 'bg'\n/// );\n/// @requires {mixin} gen-color-class\n@mixin gen-color-classes($prop, $prefix, $suffix, $palette: $default-palette) {\n @each $name, $color in $palette {\n @each $variant, $value in $color {\n @if meta.type-of($value) != 'map' {\n @include gen-color-class($name, $variant, $prefix, $suffix) {\n #{$prop}: color($color: $name, $variant: $variant);\n }\n }\n }\n }\n}\n\n/// Generates CSS variables for a given palette.\n/// @access public\n/// @param {Map} $palette [null] - The palette to use to generate CSS variables for.\n/// @param {bool} $contrast [true] - Specify if contrast colors should be included.\n/// @param {string} $prefix [igx] - The prefix attached to the CSS variables.\n///\n/// @example scss Generate css variables for the `$default-palette`.\n/// @include palette-vars($default-palette);\n///\n@mixin palette-vars($palette, $contrast: true, $prefix: 'igx') {\n $scope: if(is-root(), ':root', '&');\n $_meta: map.get($palette, '_meta');\n $theme: if($_meta, map.get($_meta, 'variant'), null);\n $gray: if($_meta, map.get($_meta, 'grays'), #fff);\n $surface: map.get(map.get($palette, 'surface'), 500);\n\n #{$scope} {\n @each $name, $color in $palette {\n @each $variant, $value in $color {\n $_valid-base: meta.type-of(map.get($color, 500)) == 'color' and $theme;\n $_valid-variant: not(string.index(#{$variant}, 'contrast')) and not(string.index(#{$variant}, 'variant')) and $theme;\n\n @if $_valid-base and $variant == 500 {\n @if $prefix == 'igc' and $name != 'grays' {\n --#{$prefix}-#{$name}-h: var(--igx-#{$name}-h);\n --#{$prefix}-#{$name}-s: var(--igx-#{$name}-s);\n --#{$prefix}-#{$name}-l: var(--igx-#{$name}-l);\n } @else if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-h: var(--igx-#{$name}-h);\n --#{$prefix}-gray-s: var(--igx-#{$name}-s);\n --#{$prefix}-gray-l: var(--igx-#{$name}-l);\n } @else {\n --#{$prefix}-#{$name}-h: #{math.round(color.hue($value))};\n --#{$prefix}-#{$name}-s: #{math.round(color.saturation($value))};\n --#{$prefix}-#{$name}-l: #{math.round(color.lightness($value))};\n }\n\n @if $name != 'grays' {\n --#{$prefix}-#{$name}-a: #{color.alpha($value)};\n } @else if $name == 'grays' and $prefix == 'igc' {\n --#{$prefix}-gray-a: 1;\n } @else {\n --#{$prefix}-#{$name}-a: 1;\n }\n }\n\n @if $_valid-base and $_valid-variant {\n @if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-#{$variant}: #{gen-hsla-color('gray', $variant, $theme, $gray, #{$prefix}, $surface)};\n } @else {\n --#{$prefix}-#{$name}-#{$variant}: #{gen-hsla-color($name, $variant, $theme, $gray, #{$prefix}, $surface)};\n }\n } @else if $name != '_meta' {\n @if $prefix == 'igc' and $name == 'grays' {\n --#{$prefix}-gray-#{$variant}: #{$value};\n } @else {\n --#{$prefix}-#{$name}-#{$variant}: #{$value};\n }\n }\n }\n }\n }\n}\n// stylelint-enable max-nesting-depth\n\n/// Translates Ignite UI for Angular palette CSS variables\n/// into Ignite UI for Web Components compatible ones\n/// @access public\n/// @param {Map} $palette [null] - The palette to use to generate CSS variables for.\n///\n/// @example scss Translates igx- prefixed variables from `$default-palette` to igc- prefixed ones.\n/// @include palette-to-wc($default-palette);\n///\n@mixin palette-to-wc($palette) {\n @include palette-vars($palette, $contrast: true, $prefix: 'igc');\n}\n\n/// Generates CSS variables for a given elevations map.\n/// @access public\n/// @param {Map} $elevations - The elevations map to use to generate CSS variables for.\n/// @param {string} $prefix [igx] - The prefix attached to the CSS variables.\n///\n/// @example scss Generate CSS variables for elevations.\n/// $elevations: elevations(red, green, blue); // umbra, penumbra, ambient\n/// @include elevation-vars($elevations);\n///\n@mixin elevation-vars($elevations, $prefix: 'igx') {\n $scope: if(is-root(), ':root', '&');\n\n #{$scope} {\n @each $level, $shadow in $elevations {\n --#{$prefix}-elevation-#{$level}: #{$shadow};\n }\n }\n}\n\n/// Translates Ignite UI for Angular CSS variables for elevations\n/// into Ignite UI for Web Components compatible ones\n/// @access public\n/// @param {Map} $elevations - The elevations map to use to generate CSS variables for.\n///\n/// @example scss Translates igx- prefixed variables for elevations to igc- prefixed ones.\n/// $elevations: elevations(red, green, blue);\n/// @include elevations-to-wc($elevations);\n///\n@mixin elevations-to-wc($elevations) {\n @include elevation-vars($elevations, $prefix: 'igc');\n}\n\n/// Returns a middle value between an upper and lower bound\n/// @access private\n/// @param {Number} $radius - A preferred value\n/// @param {Number} $min - A minimum value\n/// @param {Number} $max - A maximum allowed value\n@mixin border-radius($radius, $min: rem(0), $max: $radius) {\n border-radius: clamp($min, calc(var(--igx-radius-factor) * $radius), $max);\n}\n\n/// Generates CSS class names for all colors from\n/// for a given property and color palette, with\n/// optional prefix and suffix attached to the class name.\n/// @access public\n/// @param {string} $prop - The CSS property to assign the palette color to.\n/// @param {string} $prefix [igx] - A prefix to be attached to the class name.\n/// @param {string} $suffix [null] - A suffix to be attached to the class name.\n/// @param {Map} $palette [$default-palette] - The igx palette to use to generate css class names for.\n/// @example scss Generate background classes with colors from the palette.\n/// // Will generate class names like\n/// // .igx-primary-500-bg { ... };\n/// @include color-classes(\n/// $prop: 'background-color',\n/// $suffix: 'bg'\n/// );\n/// @requires {mixin} gen-color-classes\n@mixin color-classes($prop, $suffix: null, $prefix: 'igx', $palette: $default-palette) {\n @include gen-color-classes($prop, $prefix, $suffix, $palette);\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: avatar-theme($icon-color: red);\n/// :root {\n/// @include css-vars-from-theme($my-theme);\n/// }\n@mixin css-vars-from-theme($theme, $prefix: null) {\n $name: map.get($theme, 'name');\n $ignore: ('name', 'palette', 'variant', 'selector');\n $webc-prefix: 'igc';\n $webc: list.nth(str-split($name, '-'), 1) == $webc-prefix;\n $themes: map.get($theme, 'themes');\n\n @if not($prefix) and $webc {\n $prefix: $webc-prefix;\n }\n\n @if not($name) or string.length($name) == 0 {\n @error 'Theme should have a non-null or empty name property. Example: my-theme: (name: my-theme)';\n }\n\n @if $themes and meta.type-of($themes) == 'map' {\n @each $theme in $themes {\n @include css-vars(list.nth($theme, 2));\n }\n }\n\n @each $key, $value in $theme {\n $elevation: string.index($key, 'elevation');\n\n @if not(list.index($ignore, $key) or $elevation) and meta.type-of($value) != 'map' {\n @if $prefix and $prefix != ignore {\n --#{$prefix}-#{$key}: var(--#{$name}-#{$key}, #{$value});\n } @else {\n --#{$key}: var(--#{$name}-#{$key}, #{$value});\n }\n }\n }\n}\n\n/// Add theme colors to a scope.\n/// @access public\n/// @param {map} $theme - The component theme to be used\n/// @requires {mixin} css-vars-from-theme\n@mixin css-vars($theme, $scope: null, $prefix: null) {\n $s: map.get($theme, 'selector');\n $n: map.get($theme, 'name');\n $name: if($scope, $scope, $s or $n);\n\n @if is-root() {\n #{$name} {\n @include css-vars-from-theme($theme, $prefix);\n }\n } @else {\n &,\n #{$name} {\n @include css-vars-from-theme($theme, $prefix);\n }\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 card-typography {\n/// @includescope('.igx-typography') {\n/// // style rules...\n/// }\n/// }\n///\n/// // Later\n/// .my-selector {\n/// @include card-typography();\n/// }\n///\n/// // Generated CSS\n/// // .igx-typography .my-selector {\n/// // ...styles rules as output by card-typography mixin\n/// // }\n@mixin scope($parent) {\n @each $selector in & {\n $len: list.length($selector);\n @if $len == null {\n $parent: $parent;\n } @else {\n @for $i from 1 through $len {\n $parent: list.append($parent, list.nth($selector, $i));\n }\n }\n\n @at-root #{$parent} {\n @content;\n }\n }\n}\n\n/// Truncates text at a specific number of lines\n/// @param {number|string} $lines - The number of lines to show\n/// @param {Boolean} $inline - Sets whether an element displays inline-box or box\n/// @param {Boolean} $vertical - Sets whether an element lays out its contents horizontally or vertically\n/// @example scss Truncates text after the fourth line\n/// @include line-clamp(4, true, true);\n@mixin line-clamp($lines, $inline, $vertical) {\n display: if($inline, -webkit-inline-box, -webkit-box);\n -webkit-line-clamp: if($lines, $lines, initial);\n -webkit-box-orient: if($vertical, vertical, initial);\n overflow: hidden;\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-component' as *;\n@use '../ripple/ripple-theme' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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 {Color} $disabled-indeterminate-color [null] - The disabled border and fill colors in indeterminate state.\n/// @param {Color} $disabled-color-label [null] - The disabled label color.\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/// @param {Color} $focus-outline-color [null] - The focus outlined color.\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 checkbox-theme(\n $palette: null,\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-indeterminate-color: null,\n $disabled-color-label: null,\n $border-radius-ripple: null,\n $focus-outline-color: 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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($border-radius-ripple) {\n $border-radius-ripple: border-radius(map.get($theme, 'border-radius-ripple'));\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-indeterminate-color: $disabled-indeterminate-color,\n disabled-color-label: $disabled-color-label,\n border-radius: $border-radius,\n border-radius-ripple: $border-radius-ripple,\n focus-outline-color: $focus-outline-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} hide-default\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} ripple\n/// @requires ripple-theme\n/// @requires rem\n/// @requires em\n/// @requires var-get\n@mixin checkbox($theme) {\n @include 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 $size-bs: em(16px);\n $checkbox-radius: math.div($size, 2);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n $size: map.get((\n material: $size,\n fluent: $size,\n bootstrap: $size-bs,\n indigo-design: $size,\n ), $variant);\n\n $border-width: map.get((\n material: 2px,\n fluent: 1px,\n bootstrap: 1px,\n indigo-design: 2px,\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n bootstrap: none,\n indigo-design: none,\n ), $variant);\n\n $label-margin: em(8px);\n\n $mark-stroke: map.get((\n material: 3,\n fluent: 1,\n bootstrap: 3,\n indigo-design: 3,\n ), $variant);\n\n $mark-offset: map.get((\n material: 0,\n fluent: -1px,\n bootstrap: 0,\n indigo-design: 0,\n ), $variant);\n\n $mark-length: 24;\n $mark-x-factor: math.div($mark-stroke, $mark-length);\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'fill-color')\n );\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 align-items: center;\n justify-content: center;\n display: flex;\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-get($theme, 'empty-color');\n border-radius: var-get($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 inset: 0;\n transition: background .2s $ease-out-quad;\n }\n }\n\n %cbx-composite--x {\n border-color: var-get($theme, 'fill-color');\n background: var-get($theme, 'fill-color');\n\n &::after {\n background: var-get($theme, 'fill-color');\n }\n }\n\n %cbx-composite--disabled {\n border-color: var-get($theme, 'disabled-color');\n background: transparent;\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'disabled-color-label');\n }\n }\n\n %cbx-composite--x--disabled {\n background: var-get($theme, 'disabled-color');\n\n &::after {\n background: var-get($theme, 'disabled-color');\n }\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'disabled-color');\n }\n }\n\n %cbx-composite-mark {\n position: absolute;\n inset: 0;\n stroke: var-get($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 inset-inline-start: $mark-offset;\n }\n\n @if $variant == 'material' {\n %cbx-composite--x--disabled {\n border: var-get($theme, 'disabled-indeterminate-color');\n \n &::after {\n background: var-get($theme, 'disabled-indeterminate-color');\n }\n }\n }\n\n @if $variant == 'fluent' {\n %cbx-composite-mark {\n stroke: transparent;\n }\n\n %cbx-composite {\n background: transparent;\n\n &::after {\n background: transparent;\n }\n\n &::before {\n content: '';\n position: absolute;\n top: calc($size / 2 - rem(6px));\n inset-inline-start: calc($size / 2 - rem(6px));\n width: rem(10px);\n height: rem(10px);\n border-radius: border-radius(rem(2px));\n border: rem(5px) solid var-get($theme, 'fill-color');\n z-index: 1;\n }\n }\n\n %cbx-composite--x--disabled {\n background: transparent;\n \n &::after {\n background: transparent;\n }\n\n &::before {\n border-color: var-get($theme, 'disabled-color');\n background: var-get($theme, 'disabled-color');\n }\n }\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-get($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-inline-start: $label-margin;\n }\n\n %cbx-label-pos--before {\n margin-inline-end: $label-margin;\n order: -1;\n }\n\n %cbx-label--disabled {\n color: var-get($theme, 'disabled-color-label');\n }\n\n %cbx-ripple {\n @include ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-end: calc(100% - #{$ripple-radius} - #{$checkbox-radius});\n width: $ripple-size;\n height: $ripple-size;\n border-radius: var-get($theme, 'border-radius-ripple');\n overflow: hidden;\n pointer-events: none;\n filter: opacity(1);\n }\n\n %igx-checkbox--focused {\n @if $variant == 'fluent' {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n\n @if $variant == 'bootstrap' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-checkbox--focused-checked {\n @if $variant == 'indigo-design' {\n %cbx-composite {\n border-radius: var-get($theme, 'border-radius');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %cbx-ripple--focused {\n background: var-get($theme, 'empty-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %cbx-ripple--focused-checked {\n background: var-get($theme, 'fill-color');\n }\n\n %cbx-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %cbx-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'empty-color');\n }\n }\n\n %cbx-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin checkbox-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %cbx-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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/// @param {Color} $ghost-background [null] - The chip ghost background color.\n/// @param {box-shadow} $ghost-shadow [null] - The chip ghost shadow.\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} $focus-text-color [null] - The chip text focus color.\n/// @param {Color} $focus-background [null] - The chip focus background color.\n/// @param {color} $focus-border-color [null] - The chip focus 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 chip-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $focus-outline-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 $focus-selected-outline-color: null,\n\n $ghost-shadow: null,\n $remove-icon-color: null,\n $remove-icon-color-focus: null,\n) {\n $name: 'igx-chip';\n $selector: 'igx-chip, .igx-chip__ghost, .igx-chip__ghost--compact, .igx-chip__ghost--cosy';\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 @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 meta.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(to-opaque($hover-background));\n }\n\n @if not($focus-background) and $background {\n $luminance: luminance($background);\n\n @if meta.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(to-opaque($focus-background));\n }\n\n @if not($selected-background) and $background {\n $luminance: luminance($background);\n\n @if meta.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(to-opaque($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(to-opaque($hover-selected-background));\n }\n\n @if not($focus-selected-background) and $selected-background {\n $luminance: luminance($selected-background);\n\n @if meta.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(to-opaque($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: elevation($elevations, $ghost-elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 focus-selected-outline-color: $focus-selected-outline-color,\n focus-outline-color: $focus-outline-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin chip($theme) {\n @include css-vars($theme);\n\n $transition: all 120ms $ease-in-out-quad;\n $chip-max-width: 32ch;\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\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 bootstrap: $chip-height-material,\n indigo-design: $chip-height-material\n ), $variant);\n\n $chip-padding: (\n comfortable: 0 rem(8px),\n cosy: 0 rem(4px),\n compact: 0 rem(2px)\n );\n\n $box-shadow: map.get((\n material: null,\n fluent: null,\n bootstrap: 0 0 0 rem(3px) var-get($theme, 'hover-background'),\n indigo-design: null\n ), $variant);\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 bootstrap: 0,\n indigo-design: 0\n ), $variant);\n\n $chip-icon-size: (\n comfortable: rem(18px),\n cosy: rem(18px),\n compact: rem(16px)\n );\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\n [dir='rtl'] & {\n transition-property: top right;\n }\n\n touch-action: none;\n\n &:focus {\n outline-style: none;\n\n %igx-chip__item {\n @extend %igx-chip__item--focus;\n }\n\n %igx-chip__item--selected {\n @extend %igx-chip__item--focus-selected;\n }\n }\n\n &:hover {\n %igx-chip__item {\n @extend %igx-chip__item--hover;\n }\n\n %igx-chip__item--selected {\n @extend %igx-chip__item--hover-selected;\n }\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: var(--igx-icon-size, map.get($chip-icon-size, 'comfortable'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'comfortable'));\n font-size: var(--igx-icon-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: var(--igx-icon-size, map.get($chip-icon-size, 'cosy'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'cosy'));\n font-size: var(--igx-icon-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: var(--igx-icon-size, map.get($chip-icon-size, 'compact'));\n height: var(--igx-icon-size, map.get($chip-icon-size, 'compact'));\n font-size: var(--igx-icon-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-inline-start: rem(4px);\n }\n }\n\n %igx-chip__prefix {\n + igx-prefix,\n + [igxPrefix] {\n margin-inline-start: rem(4px);\n\n igx-avatar {\n max-height: 100%;\n max-width: 100%;\n margin-inline-start: $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-inline-end: rem(4px);\n color: var-get($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-get($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-inline-start: 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-inline-start: 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-get($theme, 'text-color');\n background: var-get($theme, 'background');\n border-width: 1px;\n border-style: solid;\n border-color: var-get($theme, 'border-color');\n border-radius: var-get($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-get($theme, 'hover-text-color');\n background: var-get($theme, 'hover-background');\n border-color: var-get($theme, 'hover-border-color');\n transition: all 120ms ease-in;\n }\n\n %igx-chip__item--focus {\n color: var-get($theme, 'focus-text-color');\n background: var-get($theme, 'focus-background');\n border-color: var-get($theme, 'focus-border-color');\n outline-style: none;\n box-shadow: $box-shadow;\n\n @if $variant == 'indigo-design' {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-outline-color');\n }\n }\n\n %igx-chip__item--selected {\n color: var-get($theme, 'selected-text-color');\n background: var-get($theme, 'selected-background');\n border-color: var-get($theme, 'selected-border-color');\n }\n\n %igx-chip__item--hover-selected {\n color: var-get($theme, 'hover-selected-text-color');\n background: var-get($theme, 'hover-selected-background');\n border-color: var-get($theme, 'hover-selected-border-color');\n transition: $transition;\n }\n\n %igx-chip__item--focus-selected {\n color: var-get($theme, 'focus-selected-text-color');\n background: var-get($theme, 'focus-selected-background');\n border-color: var-get($theme, 'focus-selected-border-color');\n transition: $transition;\n\n @if $variant == 'indigo-design' {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'focus-selected-outline-color');\n }\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 box-shadow: var-get($theme, 'ghost-shadow');\n overflow: hidden;\n color: var-get($theme, 'focus-text-color');\n background: var-get($theme, 'ghost-background');\n\n &:hover,\n &:focus {\n background: var-get($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 // Remark: If z-index is not set, the chip would\n // hide behind it's parent grid as it has a z-index of 1\n %igx-chip__ghost,\n %igx-chip__ghost--cosy,\n %igx-chip__ghost--compact {\n z-index: 10;\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} type-style\n@mixin chip-typography(\n $type-scale,\n $categories: (text: 'body-2'))\n{\n $text: map.get($categories, 'text');\n\n %igx-chip {\n @include 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 type-style($type-scale, $text) {\n font-size: 12px;\n font-weight: 600;\n }\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 actions Theme\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n/// @param {Color} $title-color [null]- The text color used for the title of the list.\n/// @param {Color} $background-color [null] - The background color of the panel.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n/// @requires text-contrast\n///\n/// @example scss Change the title color\n/// $column-actions-theme: igx-column-actions-theme($title-color: black);\n/// // Pass the theme to the igx-column-actions component mixin\n/// @include igx-column-actions($column-actions-theme);\n////\n@function column-actions-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $title-color: null,\n $background-color: null\n) {\n $name: 'igx-column-actions';\n $column-actions-schema: ();\n\n @if map.has-key($schema, $name) {\n $column-actions-schema: map.get($schema, $name);\n } @else {\n $column-actions-schema: $schema;\n }\n\n $theme: apply-palette($column-actions-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 elevations: $elevations,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin column-actions($theme) {\n @include css-vars($theme);\n\n %column-actions-display {\n display: flex;\n flex-flow: column nowrap;\n background: var-get($theme, 'background-color');\n box-shadow: elevation(map.get($theme, 'elevations'), 8);\n width: 100%;\n flex: 1 1 auto;\n min-width: rem(180px);\n }\n\n %column-actions-title {\n color: var-get($theme, 'title-color');\n margin: 0;\n padding: rem(16px) rem(16px) rem(8px);\n }\n\n %column-actions-input {\n font-size: rem(16px) !important;\n margin: -16px 0 0 !important;\n padding: rem(8px) rem(16px);\n }\n\n %column-actions-columns {\n display: flex;\n flex-flow: column nowrap;\n overflow-y: auto;\n outline-style: none;\n }\n\n %column-actions-item {\n padding: rem(4px) rem(16px);\n min-height: rem(32px);\n }\n\n %column-actions-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-actions 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} type-style\n@mixin column-actions-typography($type-scale, $categories: (title: 'subtitle-1')) {\n $title: map.get($categories, 'title');\n\n %column-actions-title {\n @include type-style($type-scale, $title) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $accent-color [null] - Sets the pinned header background color, the joystick background and border colors, as well as the context menu background color.\n/// @param {Color} $active-color [null] - Sets the active text and border colors for tabs, panes, and menus.\n/// @param {Color} $border-color [null] - Sets the global border color in the dock manager. Also sets the pane content background and the context menu active background colors.\n/// @param {Color} $button-text [null] - Sets the button text color.\n/// @param {Color} $context-menu-background [null] - Sets the background color for context menus.\n/// @param {Color} $context-menu-background-active [null] - Sets the background color for active context menus.\n/// @param {Color} $context-menu-color [null] - Sets the text color for context menus.\n/// @param {Color} $context-menu-color-active [null] - Sets the text color for active context menus.\n/// @param {Color} $dock-background [null] - Sets the background color of the dock manager.\n/// @param {Color} $dock-text [null] - Sets the text color of the dock manager.\n/// @param {Color} $drop-shadow-background [null] - Sets the drop-shadow background color.\n/// @param {Color} $floating-pane-border-color [null] - Sets the border color for floating panes.\n/// @param {Color} $flyout-shadow-color [null] - Sets the flyout shadow color.\n/// @param {Color} $joystick-background [null] - Sets the background color of the joystick.\n/// @param {Color} $joystick-background-active [null] - Sets the background color of the joysticks.\n/// @param {Color} $joystick-border-color [null] - Sets the border color of the joystick.\n/// @param {Color} $joystick-icon-color [null] - Sets the color for the joystick icons.\n/// @param {Color} $joystick-icon-color-active [null] - Sets the color of the active joystick icons.\n/// @param {Color} $pane-content-background [null] - Sets the background color of the content panes.\n/// @param {Color} $pane-content-text [null] - Sets the text color of the content panes.\n/// @param {Color} $pane-header-background [null] - Sets the background color for pane headers.\n/// @param {Color} $pane-header-text [null] - Sets the text color for pane headers.\n/// @param {Color} $pinned-header-background [null] - Sets the background colors of pinned headers.\n/// @param {Color} $pinned-header-text [null] - Sets the text colors of pinned headers.\n/// @param {Color} $background-color [null] - Sets the base dock manager color as well as the pane headers and tabs background colors.\n/// @param {Color} $splitter-background [null] - Sets the background color for the splitters.\n/// @param {Color} $splitter-handle [null] - Sets the background color for the splitter handles.\n/// @param {Color} $tab-background [null] - Sets the background color for tabs.\n/// @param {Color} $tab-background-active [null] - Sets the background color for active tabs.\n/// @param {Color} $tab-border-color [null] - Sets the border color for tabs.\n/// @param {Color} $tab-border-color-active [null] - Sets the border color for active tabs.\n/// @param {Color} $tab-text [null] - Sets the text color for tabs.\n/// @param {Color} $tab-text-active [null] - Sets the text color for active tabs.\n/// @param {Color} $text-color [null] - Sets the text color for most elements in the dock manager. Used as the default joystick icon color.\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 dock-managers\n/// $my-dock-manager-theme: dock-manager-theme();\n/// // Pass the theme to the dock-manager component mixin\n/// @include css-vars($my-dock-manager-theme);\n@function dock-manager-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'igc-dockmanager';\n $dock-manager-schema: ();\n\n @if map.has-key($schema, $name) {\n $dock-manager-schema: map.get($schema, $name);\n } @else {\n $dock-manager-schema: $schema;\n }\n\n $theme: apply-palette($dock-manager-schema, $palette);\n\n @return extend($theme, (name: $name), keywords($rest));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n@mixin dock-manager($theme) {\n @include css-vars($theme);\n}\n\n/// Adds typography styles for the dock manager component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin dock-manager-typography() {\n igx-dock-manager {\n --igc-font-family: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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/// @param {Number} $expanded-margin [null] - The expansion panel margin in expanded state when positioned inside accordion.\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///\n/// @example scss Change the background color\n/// $my-expansion-panel-theme: expansion-panel($header-background: black);\n/// // Pass the theme to the expansion-panel component mixin\n/// @include expansion-panel($my-expansion-panel-theme);\n@function expansion-panel-theme(\n $palette: null,\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 $expanded-margin: 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 @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 meta.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 expanded-margin: $expanded-margin\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin expansion-panel($theme) {\n @include css-vars($theme);\n\n $panel-padding: rem(16px) rem(24px);\n\n %igx-expansion-panel {\n display: flex;\n flex-direction: column;\n border-radius: border-radius(var-get($theme, 'border-radius'));\n overflow: hidden;\n transition: margin 350ms $ease-out-quad;\n }\n\n %igx-expansion-panel__header-title {\n color: var-get($theme, 'header-title-color');\n margin-inline-end: rem(16px, 16px);\n }\n\n %igx-expansion-panel__header-description {\n color: var-get($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-accordion {\n overflow-y: auto;\n\n %igx-expansion-panel__header-title {\n @include line-clamp(4, true, true);\n\n white-space: initial;\n word-wrap: break-word;\n }\n\n %igx-expansion-panel--expanded {\n margin: var-get($theme, 'expanded-margin') 0;\n\n &:first-of-type {\n margin-top: 0;\n }\n\n &:last-of-type {\n margin-bottom: 0;\n }\n }\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-get($theme, 'header-background');\n\n &:focus,\n &:active\n {\n background: var-get($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-inline-start: rem(16px, 16px);\n }\n\n %igx-expansion-panel__header-icon--start {\n order: -1;\n margin-inline-end: 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-get($theme, 'header-icon-color');\n\n igx-icon {\n color: var-get($theme, 'header-icon-color');\n }\n }\n\n %igx-expansion-panel__body {\n color: var-get($theme, 'body-color');\n background: var-get($theme, 'body-background');\n overflow: hidden;\n padding: $panel-padding;\n }\n\n %igx-expansion-panel--disabled {\n pointer-events: none;\n\n %igx-expansion-panel__header-title,\n %igx-expansion-panel__header-description {\n color: var-get($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-get($theme, 'disabled-color');\n }\n }\n }\n}\n\n/// Adds typography styles for the igx-expansion-panel component.\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: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-expansion-panel__header-description {\n @include type-style($type-scale, $description) {\n margin: 0;\n }\n }\n\n %igx-expansion-panel__body {\n @include type-style($type-scale, $body) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/SisIvanova\" target=\"_blank\">Silvia Ivanova</a>\n////\n\n/// @param {Map} $palette [null] - 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} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.\n/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the color to use for the label font.\n/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.\n/// @param {Number} $needle-breadth [null] - Sets the needle breadth.\n/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.\n/// @param {Number} $needle-inner-base-width [null] - Sets the width of the needle's inner base.\n/// @param {Number} $needle-inner-point-width [null] - Sets the width of the needle's inner point.\n/// @param {Number} $needle-outer-base-width [null] - Sets the width of the needle's outer base.\n/// @param {Number} $needle-outer-point-width [null] - Sets the width of the needle's outer point.\n/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.\n/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.\n/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.\n/// @param {Color} $scale-outline [null] - Sets the color to use for the outline of the scale.\n/// @param {Number} $scale-stroke-thickness [null] - Sets the stroke thickness of the scale outline.\n/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $custom-gauge-theme: linear-gauge-theme($brushes: (red, green, blue));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($custom-gauge-theme);\n@function linear-gauge-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'linear-gauge';\n $selector: 'igx-linear-gauge';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n keywords($rest),\n (\n name: $name,\n selector: $selector,\n ),\n );\n}\n\n/// @param {Map} $palette [null] - 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} $width [null] - The width of the gauge in pixels, string (px) or percentage (%).\n/// @param {Map} $height [null] - The height of the gauge in pixels, string (px) or percentage (%).\n/// @param {Color} $backing-brush [null] - Sets the color to use to fill the backing of the linear gauge.\n/// @param {Color} $backing-outline [null] - Sets the color to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the color to use for the label font.\n/// @param {Number} $minor-tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering minor ticks.\n/// @param {Color} $needle-brush [null] - Sets the color to use for the needle element.\n/// @param {Color} $needle-outline [null] - Sets the color to use for the outline of needle element.\n/// @param {Number} $needle-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @param {List} $range-brushes [null] - Sets a collection of colors to be used as the palette for linear gauge ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of colors to be used as the palette for linear gauge outlines.\n/// @param {Color} $scale-brush [null] - Sets the color to use to fill the scale of the linear gauge.\n/// @param {Color} $tick-brush [null] - Sets the color to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @param {Color} $needle-pivot-brush [null] - Sets the color of the needle pivot point.\n/// @param {Color} $needle-pivot-outline [null] - Sets the outline color of the needle pivot point.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $custom-gauge-theme: radial-gauge-theme($brushes: (red, green, blue));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($custom-gauge-theme);\n@function radial-gauge-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n $name: 'radial-gauge';\n $selector: 'igx-radial-gauge';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n keywords($rest),\n (\n name: $name,\n selector: $selector,\n ),\n );\n}\n\n/// Adds typography styles for the linear-gauge component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin gauge-typography() {\n igx-linear-gauge {\n --linear-gauge-font: var(--igx-font-family, inherit);\n }\n\n igx-radial-gauge {\n --radial-gauge-font: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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} $backing-brush [null] - Sets the brush to use to fill the backing of the bullet graph.\n/// @param {Color} $backing-outline [null] - Sets the brush to use for the outline of the backing.\n/// @param {Number} $backing-stroke-thickness [null] - Sets the stroke thickness of the backing outline.\n/// @param {Color} $font-brush [null] - Sets the brush to use for the label font.\n/// @param {Color} $minor-tick-brush [null] - Sets the brush to use for the minor tickmarks.\n/// @param {Number} $minor-tick-thickness [null] - Stroke thickness to use when rendering minor ticks.\n/// @param {List} $range-brushes [null] - Sets a collection of brushes to be used as the palette for bullet graph ranges.\n/// @param {List} $range-outlines [null] - Sets a collection of brushes to be used as the palette for bullet graph outlines.\n/// @param {Color} $scale-background-brush [null] - Sets the background brush for the scale.\n/// @param {Color} $scale-background-outline [null] - Sets the background outline for the scale.\n/// @param {Number} $scale-background-thickness [null] - Sets the background outline thickness for the scale.\n/// @param {Number} $target-value-breadth [null] - Sets the breadth of the target value element.\n/// @param {Color} $target-value-brush [null] - Sets the brush to use when rendering the fill of the comparative marker.\n/// @param {Color} $target-value-outline [null] - Sets the brush to use when rendering the outline of the target value.\n/// @param {Number} $target-value-thickness [null] - Sets the stroke thickness of the outline of the target value bar.\n/// @param {Color} $tick-brush [null] - Sets the brush to use for the major tickmarks.\n/// @param {Number} $tick-stroke-thickness [null] - Sets the stroke thickness to use when rendering ticks.\n/// @param {Color} $value-brush [null] - Sets the brush to use for the actual value element.\n/// @param {Color} $value-outline [null] - Sets the brush to use for the outline of actual value element.\n/// @param {Number} $value-stroke-thickness [null] - Sets the stroke thickness to use when rendering single actual value element.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss\n/// $my-chart-theme: bullet-graph-theme($brushes: (orange, blue, pink));\n/// // Pass the theme to the css-vars mixin\n/// @include css-vars($my-chart-theme);\n@function bullet-graph-theme(\n $palette: null,\n $schema: $light-schema,\n\n $backing-brush: null,\n $backing-outline: null,\n $backing-stroke-thickness: null,\n $font-brush: null,\n $minor-tick-brush: null,\n $minor-tick-thickness: null,\n $range-brushes: null,\n $range-outlines: null,\n $scale-background-brush: null,\n $scale-background-outline: null,\n $scale-background-thickness: null,\n $target-value-breadth: null,\n $target-value-brush: null,\n $target-value-outline: null,\n $target-value-thickness: null,\n $tick-brush: null,\n $tick-stroke-thickness: null,\n $value-brush: null,\n $value-outline: null,\n $value-stroke-thickness: null,\n) {\n $name: 'bullet-graph';\n $selector: 'igx-bullet-graph';\n $chart-schema: ();\n\n @if map.has-key($schema, $name) {\n $chart-schema: map.get($schema, $name);\n } @else {\n $chart-schema: $schema;\n }\n\n $theme: apply-palette($chart-schema, $palette);\n\n @return extend(\n $theme,\n (\n name: $name,\n selector: $selector,\n backing-brush: $backing-brush,\n backing-outline: $backing-outline,\n backing-stroke-thickness: $backing-stroke-thickness,\n font-brush: $font-brush,\n minor-tick-brush: $minor-tick-brush,\n minor-tick-thickness: $minor-tick-thickness,\n range-brushes: $range-brushes,\n range-outlines: $range-outlines,\n scale-background-brush: $scale-background-brush,\n scale-background-outline: $scale-background-outline,\n scale-background-thickness: $scale-background-thickness,\n target-value-breadth: $target-value-breadth,\n target-value-brush: $target-value-brush,\n target-value-outline: $target-value-outline,\n target-value-thickness: $target-value-thickness,\n tick-brush: $tick-brush,\n tick-stroke-thickness: $tick-stroke-thickness,\n value-brush: $value-brush,\n value-outline: $value-outline,\n value-stroke-thickness: $value-stroke-thickness,\n )\n );\n}\n\n/// Adds typography styles for the graph component.\n/// @access private\n/// @group typography\n/// @requires {mixin} type-style\n@mixin graph-typography() {\n igx-bullet-graph {\n --bullet-graph-font: var(--igx-font-family, inherit);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a> //\n\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used. /\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-prefix-background [null] - The background color of an input prefix in the idle state.\n/// @param {Color} $input-suffix-color [null] - The input suffix color in the idle state.\n/// @param {Color} $input-suffix-background [null] - The background color of an input sufix 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 {Color} $success-border-color [null] - The border color for success state for bootstrap input group.\n/// @param {Color} $error-border-color [null] - The border color for error state for bootstrap input group.\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/// @param {Color} placeholder-color [null] - The placeholder color of an input group.\n/// @param {Color} disabled-placeholder-color [null] - The disabled placeholder color of an input group.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n///\n/// @example scss Change the focused border and label colors\n/// $my-input-group-theme: input-group-theme($focused-secondary-color: pink, $focused-bottom-line-color: pink);\n/// // Pass the theme to the input-group component mixin\n/// @include input-group($my-input-group-theme);\n@function input-group-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $success-shadow-color: null,\n $error-shadow-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 $label-floated-background: null,\n $label-floated-disabled-background: null\n) {\n $name: 'igx-input-group';\n $selector: 'igx-input-group, igx-date-range-start, igx-date-range-end';\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 $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: elevation($elevations, $search-resting-elevation);\n }\n\n @if not($search-hover-shadow) {\n $search-hover-shadow: elevation($elevations, $search-hover-elevation);\n }\n\n @if not($search-disabled-shadow) {\n $search-disabled-shadow: elevation($elevations, $search-disabled-elevation);\n }\n\n @if not($box-border-radius) {\n $box-border-radius: border-radius(map.get($theme, 'box-border-radius'));\n }\n\n @if not($border-border-radius) {\n $border-border-radius: border-radius(map.get($theme, 'border-border-radius'));\n }\n\n @if not($search-border-radius) {\n $search-border-radius: border-radius(map.get($theme, 'search-border-radius'));\n }\n\n @return extend($theme, (\n palette: $palette,\n name: $name,\n selector: $selector,\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\n success-shadow-color: $success-shadow-color,\n error-shadow-color: $error-shadow-color,\n\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 label-floated-background: $label-floated-background,\n label-floated-disabled-background: $label-floated-disabled-background,\n ));\n}\n\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires var-get\n@mixin input-group($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n\n $transition-timing: .25s $ease-out-cubic;\n\n $variant: map.get($theme, variant);\n $indigo-theme: $variant == 'indigo-design';\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 $bootstrap-padding: (\n 'comfortable': rem(8px) rem(16px),\n 'cosy': rem(6px) rem(12px),\n 'compact': rem(4px) rem(8px)\n );\n\n $bootstrap-font-size: (\n 'comfortable': rem(20px),\n 'cosy': rem(16px),\n 'compact': rem(14px),\n );\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\n igx-input-group {\n --theme: #{map.get($theme, 'variant')};\n }\n\n %form-group-display {\n position: relative;\n display: block;\n color: var-get($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 span {\n font: inherit;\n margin: 0;\n }\n\n input[type='file'] {\n @include hide-default();\n }\n\n textarea {\n overflow: auto;\n }\n\n input[type='number'] {\n -moz-appearance: textfield;\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--filled {\n igx-prefix,\n [igxPrefix],\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-prefix--filled;\n }\n }\n\n %form-group-box-wrapper {\n border-radius: var-get($theme, 'box-border-radius');\n @if $variant == 'material' {\n border-end-start-radius: border-radius(rem(0));\n border-end-end-radius: border-radius(rem(0));\n }\n overflow: hidden;\n }\n\n %form-group-display--hover {\n cursor: pointer;\n }\n\n %form-group-display--disabled {\n user-select: none;\n color: var-get($theme, 'disabled-text-color') !important;\n\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--disabled;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--disabled;\n }\n }\n\n %form-group-bundle {\n position: relative;\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n max-width: 100%;\n padding-top: rem(18px, map.get($base-scale-size, 'comfortable'));\n box-shadow: inset 0 -1px 0 0 var-get($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;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n background: var-get($theme, 'box-background');\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'idle-bottom-line-color');\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %form-group-bundle--indigo {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n background: transparent;\n transition: background $transition-timing, box-shadow $transition-timing;\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'idle-bottom-line-color');\n\n &:hover,\n &:focus {\n background: var-get($theme, 'box-background');\n }\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %indigo--box-focused {\n background: var-get($theme, 'box-background');\n }\n\n %form-group-bundle-success--indigo {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle-error--indigo {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle-error--indigo--hover {\n border-color: var-get($theme, 'error-secondary-color');\n box-shadow: 0 0 0 1px var-get($theme, 'error-secondary-color');\n }\n\n %form-group-helper--indigo--disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-bundle--box-cosy {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'cosy'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %form-group-bundle--box-compact {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'compact'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %form-group-bundle--hover {\n cursor: pointer;\n @if not $indigo-theme {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'hover-bottom-line-color');\n } @else {\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'hover-bottom-line-color');\n }\n }\n\n %form-group-bundle--focus {\n caret-color: var-get($theme, 'focused-secondary-color');\n @if not $indigo-theme {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'interim-bottom-line-color');\n } @else {\n box-shadow: inset 0 -2px 0 0 var-get($theme, 'focused-bottom-line-color');\n }\n }\n\n %form-group-bundle--success {\n caret-color: var-get($theme, 'success-secondary-color');\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle--error {\n caret-color: var-get($theme, 'error-secondary-color');\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle--disabled {\n @if not $indigo-theme {\n box-shadow: none;\n } @else {\n box-shadow: inset 0 -1px 0 0 var-get($theme, 'disabled-bottom-line-color');\n }\n background-image: linear-gradient(to left, var-get($theme, 'disabled-bottom-line-color') 40%, transparent 10%);\n background-position: bottom;\n background-size: 4px 1px;\n background-repeat: repeat-x;\n\n [dir='rtl'] & {\n background-image: linear-gradient(to right, var-get($theme, 'disabled-bottom-line-color') 40%, transparent 10%);\n }\n }\n\n %form-group-bundle--box-disabled {\n @if not $indigo-theme {\n background: var-get($theme, 'box-disabled-background');\n } @else {\n background: transparent;\n }\n }\n\n %form-group-bundle--border {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'comfortable'));\n box-shadow: inset 0 0 0 1px var-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-border-radius');\n background: var-get($theme, 'border-background');\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'comfortable'));\n }\n }\n\n %form-group-bundle--border-cosy {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'cosy'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %form-group-bundle--border-compact {\n padding: 0;\n padding-inline-start: rem(16px, map.get($base-scale-size, 'compact'));\n\n igx-suffix,\n [igxSuffix] {\n padding-inline-end: rem(16px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %form-group-bundle-border--hover {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'hover-border-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'hover-border-color');\n }\n }\n\n %form-group-bundle-border--focus {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'focused-border-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'focused-border-color');\n }\n }\n\n %form-group-bundle-border--error {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'error-secondary-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'error-secondary-color');\n }\n }\n\n %form-group-bundle-border--success {\n @if not $indigo-theme {\n box-shadow: inset 0 0 0 2px var-get($theme, 'success-secondary-color');\n } @else {\n box-shadow: inset 0 0 0 1px var-get($theme, 'success-secondary-color');\n }\n }\n\n %form-group-bundle-border--disabled {\n background: var-get($theme, 'border-disabled-background');\n box-shadow: inset 0 0 0 1px var-get($theme, 'disabled-border-color');\n }\n\n // FLUENT START\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-inline-start: 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-inline-start: 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 &::before {\n content: '*';\n position: absolute;\n top: rem(-8px);\n inset-inline-start: calc(100% + #{rem(4px)});\n color: var-get($theme, 'error-secondary-color');\n }\n }\n\n %fluent-label + %form-group-bundle-required--fluent {\n &::before {\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-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-border-radius');\n background: var-get($theme, 'border-background');\n position: relative;\n align-items: stretch;\n box-shadow: none !important;\n }\n\n %form-group-bundle--fluent--hover {\n border-color: var-get($theme, 'hover-border-color');\n box-shadow: none;\n }\n\n %form-group-bundle--fluent--focus {\n caret-color: var-get($theme, 'focused-text-color');\n border-color: var-get($theme, 'focused-border-color');\n\n &::after {\n pointer-events: none;\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border: rem(1px) solid var-get($theme, 'focused-border-color');\n }\n }\n\n %form-group-bundle--fluent--hover-disabled,\n %form-group-bundle--fluent-disabled {\n border-color: var-get($theme, 'disabled-border-color');\n background: var-get($theme, 'border-disabled-background');\n }\n\n %form-group-bundle-error--fluent,\n %form-group-bundle-error--fluent--hover,\n %form-group-bundle-error--fluent--focus {\n border-color: var-get($theme, 'error-secondary-color');\n }\n\n %form-group-bundle-success--fluent,\n %form-group-bundle-success--fluent--hover,\n %form-group-bundle-success--fluent--focus {\n border-color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-bundle-success--fluent--focus {\n &::after {\n border: rem(1px) solid var-get($theme, 'success-secondary-color');\n }\n }\n\n %form-group-bundle-error--fluent--focus {\n &::after {\n border: rem(1px) solid var-get($theme, 'error-secondary-color');\n }\n }\n\n %fluent-input {\n padding: 0;\n margin: 0;\n border: none;\n }\n\n %fluent-input-disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-bundle-main--fluent {\n padding-inline-start: rem(8px);\n align-self: center;\n cursor: default;\n }\n\n igx-prefix + %form-group-bundle-main--fluent,\n [igx-prefix] + %form-group-bundle-main--fluent {\n @if $variant != 'fluent' {\n padding-inline-start: 0;\n }\n }\n\n %fluent-placeholder-label {\n transform: translateY(0) scale(1);\n }\n\n %fluent-label {\n padding: rem(5px) 0;\n font-size: rem(14px, 16px);\n font-weight: 600;\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: color(map.get($theme, 'palette'), 'grays', 800);\n\n [dir='rtl'] & {\n transform-origin: top right;\n }\n }\n\n %fluent-label-success {\n color: var-get($theme, 'idle-text-color');\n }\n\n %fluent-label-error {\n color: var-get($theme, 'idle-text-color');\n }\n\n %fluent-label-disabled {\n color: 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: 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-get($theme, 'search-border-radius');\n background: var-get($theme, 'search-background');\n box-shadow: var-get($theme, 'search-resting-shadow');\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-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'hover-border-color');\n }\n\n %form-group-bundle-search--focus {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'hover-border-color');\n }\n\n %form-group-bundle-search--error {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'search-hover-shadow');\n }\n\n %form-group-bundle-search--success {\n box-shadow: var-get($theme, 'search-hover-shadow');\n border-color: var-get($theme, 'search-hover-shadow');\n }\n\n %form-group-bundle-search--disabled {\n background: var-get($theme, 'search-disabled-background');\n box-shadow: var-get($theme, 'search-disabled-shadow');\n border-color: var-get($theme, 'disabled-border-color');\n }\n\n %form-group-bundle-main {\n position: relative;\n flex-grow: 1;\n max-width: inherit;\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 [dir='rtl'] & {\n transform-origin: top right;\n }\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 + %form-group-input--box,\n ~ %form-group-file-input--box {\n transform: translateY(0);\n }\n }\n\n %form-group-label--border {\n padding: 0 rem(4px);\n transition: all $transition-timing;\n }\n\n %form-group-label--border,\n %form-group-label--search {\n transform: translateY(0);\n }\n\n %form-group-label--search {\n + %form-group-input--search {\n transform: translateY(0);\n }\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--float-border {\n // width: auto;\n transform: translateY(-130%) scale(.75);\n background: var-get($theme, 'label-floated-background', inherit);\n }\n\n %form-group-label--float-border-disabled {\n background: var-get($theme, 'label-floated-disabled-background', inherit);\n }\n\n %form-group-label--float-border-cosy {\n transform: translateY(-115%) scale(.75);\n }\n\n %form-group-label--float-border-compact {\n transform: translateY(-105%) scale(.75);\n }\n\n %form-group-label--fixed {\n transition: color $transition-timing;\n }\n\n %form-group-label--focus {\n color: var-get($theme, 'focused-secondary-color');\n }\n\n %form-group-label--success {\n color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-label--error {\n color: var-get($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-inline-start: $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 width: 100%;\n min-width: 0;\n overflow: visible;\n background: transparent;\n color: var-get($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 &:not([type='date']) {\n line-height: 0 !important; /* Reset typography */\n }\n\n &::-webkit-input-placeholder {\n line-height: normal;\n }\n\n &::placeholder {\n color: var-get($theme, 'placeholder-color');\n opacity: 1;\n line-height: normal; /* Fix placeholder position in Safari */\n }\n }\n\n %form-group-file-input {\n position: relative;\n width: 100%;\n max-width: 100%;\n overflow: hidden;\n height: rem(32px, map.get($base-scale-size, 'comfortable'));\n color: var-get($theme, 'filled-text-color');\n line-height: 1;\n\n span {\n @include ellipsis();\n position: absolute;\n display: inline-block;\n width: inherit;\n max-width: inherit;\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n %form-group-input--cosy {\n height: rem(32px, map.get($base-scale-size, 'cosy'));\n }\n\n %form-group-file-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 %form-group-file-input--compact {\n height: rem(32px, map.get($base-scale-size, 'compact'));\n }\n\n %form-group-upload-button {\n margin-bottom: rem(10px);\n }\n\n %form-group-clear-icon {\n &:focus {\n border-radius: border-radius(rem(4px));\n background-color: color($palette, 'primary', 500);\n color: contrast-color($palette, 'primary', 500);\n\n @if $variant == 'material' {\n background-color: transparent;\n color: color($palette, 'secondary', 500);\n }\n\n @if $variant == 'fluent' {\n border-radius: 0;\n }\n\n @if $variant == 'bootstrap' {\n border-radius: 0;\n color: contrast-color($palette, 'primary', 600);\n }\n }\n }\n\n %chrome-autofill-fix {\n &:-webkit-autofill,\n &:-webkit-autofill:hover,\n &:-webkit-autofill:focus,\n &:-webkit-autofill:active {\n -webkit-transition-delay: 99999s;\n transition-delay: 99999s;\n }\n }\n\n %edge-clear-icon-fix {\n &::-ms-clear {\n display: none;\n }\n }\n\n %form-group-input--box,\n %form-group-file-input--box,\n %form-group-input--search,\n %form-group-input--border,\n %form-group-input--indigo,\n %form-group-file-input-indigo {\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-get($theme, 'focused-text-color');\n }\n\n %form-group-input--disabled {\n color: var-get($theme, 'disabled-text-color') !important;\n\n &::placeholder {\n color: var-get($theme, 'disabled-placeholder-color');\n }\n }\n\n %form-group-textarea {\n // 3 lines * 22px + 8px bottom padding + 8px top padding\n min-height: rem(82px, map.get($base-scale-size, 'comfortable'));\n\n // this fixes resizing in chrome !?!?\n margin-inline-end: -#{rem(16px, map.get($base-scale-size, 'comfortable'))};\n\n height: auto;\n resize: vertical;\n overflow: hidden;\n\n // resets typography styles\n line-height: normal !important;\n\n &:not([type='*']) {\n line-height: normal !important; /* resets typography styles */\n }\n }\n\n %form-group-textarea--disabled {\n color: var-get($theme, 'disabled-text-color') !important;\n\n &::placeholder {\n color: var-get($theme, 'disabled-placeholder-color');\n }\n }\n\n %form-group-textarea--cosy {\n min-height: rem(82px, map.get($base-scale-size, 'cosy'));\n margin-inline-end: -#{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-inline-end: -#{rem(16px, map.get($base-scale-size, 'compact'))};\n }\n\n %form-group-textarea--indigo {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'comfortable'))} !important;\n }\n\n %form-group-textarea--indigo-cosy {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'cosy'))} !important;\n }\n\n %form-group-textarea--indigo-compact {\n margin-top: -#{rem(18px, map.get($base-scale-size, 'compact'))} !important;\n }\n\n %form-group-prefix,\n %form-group-suffix {\n position: relative;\n display: inline-flex;\n align-items: center;\n height: rem(32px, map.get($base-scale-size, 'comfortable'));\n transition: color $transition-timing;\n }\n\n %form-group-prefix {\n padding: rem(8px, map.get($base-scale-size, 'comfortable'));\n padding-inline-start: 0;\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: rem(32px, map.get($base-scale-size, '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 padding: rem(8px, map.get($base-scale-size, 'cosy'));\n padding-inline-start: 0;\n }\n\n %form-group-prefix--compact {\n padding: rem(8px, map.get($base-scale-size, 'compact'));\n padding-inline-start: 0;\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 igx-prefix.igx-prefix--upload,\n [igxPrefix].igx-prefix--upload {\n padding: 0 !important;\n }\n\n %form-group-prefix-fluent {\n color: var-get($theme, 'input-prefix-color');\n background: var-get($theme, 'input-prefix-background');\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n width: auto;\n height: auto;\n line-height: normal;\n font-weight: 400;\n border-radius: var-get($theme, 'border-border-radius') 0 0 var-get($theme, 'border-border-radius');\n\n &:last-of-type {\n margin-inline-end: rem(8px);\n }\n }\n\n %form-group-prefix-fluent-search {\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n %form-group-suffix-fluent {\n color: var-get($theme, 'input-suffix-color');\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n background: var-get($theme, 'input-suffix-background');\n width: auto;\n height: auto;\n line-height: normal;\n border-radius: 0 var-get($theme, 'border-border-radius') var-get($theme, 'border-border-radius') 0;\n\n &:first-of-type {\n margin-inline-start: rem(8px);\n }\n }\n\n %form-group-suffix-fluent-search {\n width: auto;\n height: auto;\n padding: 0 rem(8px, map.get($base-scale-size, 'comfortable'));\n line-height: normal;\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n }\n\n %form-group-prefix-fluent,\n %form-group-suffix-fluent,\n %form-group-suffix-fluent-search,\n %form-group-prefix-fluent-search {\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n %form-group-prefix-fluent,\n %form-group-suffix-fluent {\n .igx-typography [igx-button],\n .igx-typography igx-button,\n .igx-typography button,\n button {\n border-radius: rem(1px) 0 0 rem(1px);\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: auto;\n line-height: normal;\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: auto;\n line-height: normal;\n }\n\n %form-group-prefix-fluent-search--cosy,\n %form-group-prefix-fluent--cosy {\n padding: 0 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: 0 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: 0 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: 0 rem(8px, map.get($base-scale-size, 'compact'));\n }\n // FLUENT END\n\n %form-group-prefix--box {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'comfortable'));\n }\n\n %form-group-prefix--box-cosy {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'cosy'));\n }\n\n %form-group-prefix--box-compact {\n padding: 0;\n padding-inline-end: rem(8px, map.get($base-scale-size, 'compact'));\n }\n\n %form-group-suffix--box {\n padding: 0;\n }\n\n %form-group-prefix--filled {\n color: var-get($theme, 'filled-text-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-get($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-get($theme, 'success-secondary-color');\n }\n\n %form-group-border--warning {\n background: var-get($theme, 'warning-secondary-color');\n }\n\n %form-group-border--error {\n background: var-get($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 padding-top: rem(6px, map.get($base-scale-size, 'comfortable'));\n justify-content: space-between;\n\n > * {\n margin-inline-end: rem(8px);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\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-inline-start: $hint--box-margin; /* 16px, base is 12px */\n margin-inline-end: $hint--box-margin; /* 16px, base is 12px */\n }\n\n %form-group-helper--success {\n color: var-get($theme, 'success-secondary-color');\n }\n\n %form-group-helper--error {\n color: var-get($theme, 'error-secondary-color');\n }\n\n %form-group-helper-item {\n display: flex;\n align-items: center;\n position: relative;\n }\n\n %form-group-helper-item--start {\n justify-content: flex-start;\n }\n\n %form-group-helper-item--end {\n justify-content: flex-end;\n }\n\n %form-group-helper-item--start,\n %form-group-helper-item--end {\n width: 100%;\n }\n\n %form-group-prefix--disabled,\n %form-group-suffix--disabled {\n color: var-get($theme, 'disabled-text-color');\n }\n\n // Bootstrap\n %form-group-display--bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--bootstrap;\n }\n\n %form-group-prefix--bootstrap:first-child {\n border-start-start-radius: var-get($theme, 'box-border-radius');\n border-end-start-radius: var-get($theme, 'box-border-radius');\n }\n\n %form-group-suffix--bootstrap:last-child {\n border-start-end-radius: var-get($theme, 'box-border-radius');\n border-end-end-radius: var-get($theme, 'box-border-radius');\n }\n\n %bootstrap-input:not(:first-child),\n %bootstrap-file-input:not(:first-child) {\n border-start-start-radius: 0;\n border-end-start-radius: 0;\n }\n\n %bootstrap-input:not(:last-child),\n %bootstrap-file-input:not(:last-child) {\n border-start-end-radius: 0;\n border-end-end-radius: 0;\n }\n }\n\n %form-group-display--cosy-bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--cosy-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--cosy-bootstrap;\n }\n }\n\n %form-group-display--compact-bootstrap {\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--compact-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--compact-bootstrap;\n }\n }\n\n %form-group-display--disabled-bootstrap {\n background-image: none;\n\n igx-prefix,\n [igxPrefix] {\n @extend %form-group-prefix--disabled-bootstrap;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %form-group-suffix--disabled-bootstrap;\n }\n }\n\n %form-group-bundle--bootstrap {\n align-items: stretch;\n padding: 0;\n box-shadow: none;\n z-index: 0;\n }\n\n %form-group-bundle--bootstrap-hover {\n border: none;\n box-shadow: none;\n }\n\n %form-group-prefix--bootstrap,\n %form-group-suffix--bootstrap {\n border: 1px solid var-get($theme, 'border-color');\n padding: map.get($bootstrap-padding, 'comfortable');\n z-index: -1;\n width: auto;\n height: auto;\n font-size: map.get($bootstrap-font-size, 'comfortable');\n line-height: 1.5;\n white-space: nowrap;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'comfortable')});\n font-weight: 400;\n }\n }\n\n %form-group-prefix--bootstrap {\n color: var-get($theme, 'input-prefix-color');\n background: var-get($theme, 'input-prefix-background');\n border-inline-end: 0;\n }\n\n %form-group-suffix--bootstrap {\n color: var-get($theme, 'input-suffix-color');\n background: var-get($theme, 'input-suffix-background');\n border-inline-start: 0;\n }\n\n %form-group-prefix--disabled-bootstrap,\n %form-group-suffix--disabled-bootstrap {\n border: 1px solid var-get($theme, 'disabled-border-color');\n color: var-get($theme, 'disabled-text-color');\n }\n\n %form-group-prefix--cosy-bootstrap,\n %form-group-suffix--cosy-bootstrap {\n padding: map.get($bootstrap-padding, 'cosy');\n width: auto;\n height: auto;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'cosy')});\n }\n }\n\n %form-group-prefix--compact-bootstrap,\n %form-group-suffix--compact-bootstrap {\n padding: map.get($bootstrap-padding, 'compact');\n width: auto;\n height: auto;\n\n igx-icon {\n width: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n height: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n font-size: var(--igx-icon-size, #{map.get($bootstrap-font-size, 'compact')});\n }\n }\n\n %bootstrap-label {\n position: static;\n display: block;\n color: var-get($theme, 'idle-secondary-color');\n padding: 0;\n line-height: normal !important;\n transform: translateY(0);\n transform-origin: top left;\n margin-top: 0 !important;\n margin-bottom: rem(8px);\n height: auto;\n font-size: rem(16px);\n\n [dir='rtl'] & {\n transform-origin: top right;\n }\n }\n\n %bootstrap-label--cosy {\n font-size: rem(14px);\n margin-bottom: rem(6px);\n }\n\n %bootstrap-label--compact {\n font-size: rem(14px);\n margin-bottom: rem(4px);\n }\n\n %bootstrap-input {\n height: auto;\n line-height: 1.5 !important;\n margin: 0;\n border-radius: var-get($theme, 'box-border-radius');\n border: 1px solid var-get($theme, 'border-color');\n font-size: map.get($bootstrap-font-size, 'comfortable');\n padding: map.get($bootstrap-padding, 'comfortable');\n transition: box-shadow .15s ease-out, border .15s ease-out;\n }\n\n %bootstrap-file-input {\n width: calc(100% - #{2 * nth(map.get($bootstrap-padding, 'comfortable'), 2)});\n height: inherit;\n border-radius: var-get($theme, 'box-border-radius');\n border: rem(1px) solid var-get($theme, 'border-color');\n padding: map.get($bootstrap-padding, 'comfortable');\n }\n\n %bootstrap-input--focus {\n border: rem(1px) solid var-get($theme, 'focused-border-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'focused-secondary-color');\n }\n\n %bootstrap-input--success {\n border: rem(1px) solid var-get($theme, 'success-secondary-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'success-shadow-color');\n }\n\n %bootstrap-input--error {\n border: rem(1px) solid var-get($theme, 'error-secondary-color');\n box-shadow: 0 0 0 rem(4px) var-get($theme, 'error-shadow-color');\n }\n\n %bootstrap-input--disabled {\n background: var-get($theme, 'border-disabled-background');\n border: rem(1px) solid var-get($theme, 'disabled-border-color');\n box-shadow: none;\n }\n\n %bootstrap-input--search {\n transform: translateY(0);\n }\n\n %bootstrap-input--cosy {\n font-size: map.get($bootstrap-font-size, 'cosy');\n padding: map.get($bootstrap-padding, 'cosy');\n }\n\n %bootstrap-input--compact {\n font-size: map.get($bootstrap-font-size, 'compact');\n padding: map.get($bootstrap-padding, 'compact');\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} type-style\n@mixin 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: type-scale-category($type-scale, $input-text);\n\n %form-group-input {\n @include type-style($type-scale, $input-text) {\n margin: 0;\n }\n }\n\n %form-group-helper {\n @include type-style($type-scale, $helper-text) {\n margin: 0;\n }\n }\n\n %form-group-prefix,\n %form-group-suffix {\n @include type-style($type-scale, $input-text) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Change the background color\n/// $my-navbar-theme: navbar-theme($background: green);\n/// // Pass the theme to the navbar component mixin\n/// @include navbar($my-navbar-theme);\n@function navbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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: 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} css-vars\n/// @requires em\n/// @requires var-get\n@mixin navbar($theme) {\n @include css-vars($theme);\n\n $navbar-padding: rem(16px);\n $navbar-title-fz: rem(18px, 16px);\n $navbar-title-lh: rem(18px, 16px);\n $navbar-title-margin: 0;\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 min-height: 56px;\n max-height: 128px;\n padding-inline: $navbar-padding;\n background: var-get($theme, 'background');\n color: var-get($theme, 'text-color');\n box-shadow: var-get($theme, 'shadow');\n z-index: 4;\n overflow: hidden;\n }\n\n %igx-navbar-part {\n display: flex;\n align-items: center;\n }\n\n %igx-navbar-title {\n @include line-clamp(4, true, true);\n margin: $navbar-title-margin;\n flex-grow: 1;\n user-select: text;\n display: flex;\n flex-direction: row\n }\n\n %igx-navbar-bundle {\n @extend %igx-navbar-part;\n user-select: none;\n\n > * + * {\n margin-inline-start: rem(16px);\n }\n }\n\n %igx-navbar-icon-display {\n >igx-icon,\n [igxButton='icon'] {\n cursor: pointer;\n color: var-get($theme, 'idle-icon-color');\n transition: color .15s $ease-out-quad;\n\n &:hover {\n color: var-get($theme, 'hover-icon-color');\n }\n }\n }\n\n %igx-navbar-left {\n @extend %igx-navbar-bundle;\n @extend %igx-navbar-icon-display;\n flex-grow: 1;\n }\n\n %igx-navbar-right {\n @extend %igx-navbar-bundle;\n @extend %igx-navbar-icon-display;\n }\n\n igx-navbar-action,\n [igxNavbarAction] {\n @extend %igx-navbar-part;\n }\n\n igx-navbar-title,\n [igxNavbarTitle] {\n @extend %igx-navbar-part;\n @extend %igx-navbar-title !optional;\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} type-style\n@mixin navbar-typography($type-scale, $categories: (title: 'h6')) {\n $title: map.get($categories, 'title');\n\n %igx-navbar-title {\n @include type-style($type-scale, $title);\n margin-bottom: 0;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Change the background and item colors\n/// $navdrawer-theme: navdrawer-theme(\n/// $background: #2d313a,\n/// $item-active-background: #ecc256,\n/// $item-icon-color: #ecc256\n/// );\n/// // Pass the theme to the navdrawer component mixin\n/// @include navdrawer($navdrawer-theme);\n@function navdrawer-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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-nav-drawer';\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 @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 meta.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 meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin navdrawer($theme) {\n @include css-vars($theme);\n\n $drawer-icon-size: rem(24px);\n $drawer-item-margin: rem(8px);\n $text-side-padding: rem(8px);\n $drawer-item-min-h: auto;\n $drawer-item-max-h: rem(48px);\n $drawer-item-min-w: rem(32px);\n\n $variant: map.get($theme, variant);\n\n %navdrawer-display {\n transition: flex-basis;\n transition-duration: .3s;\n transition-timing-function: $ease-out-quad;\n flex-shrink: 0;\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-get($theme, 'background');\n top: 0;\n bottom: 0;\n inset-inline-start: 0;\n z-index: 999;\n transition: width, transform;\n transition-timing-function: $ease-out-quad, $ease-out-quad;\n box-shadow: var-get($theme, 'shadow');\n @if $variant != 'indigo-design' {\n border-inline-end: 1px solid var-get($theme, 'border-color');\n }\n border-radius: var-get($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 [dir='rtl'] & {\n transform: translate3d(-300px, 0, 0);\n }\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 transform: translate3d(-300px, 0, 0);\n\n [dir='rtl'] & {\n transform: translate3d(300px, 0, 0);\n }\n\n box-shadow: none;\n }\n\n %aside--right {\n inset-inline-start: auto;\n inset-inline-end: 0;\n border-inline-end: none;\n border-inline-start: 1px solid var-get($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 @if $variant == 'indigo-design' {\n max-width: rem(32px);\n // important is needed to override the typography margins\n margin: rem(14px) auto !important;\n }\n\n igx-icon {\n margin-inline-start: 0;\n }\n }\n }\n\n %aside--normal {\n width: rem(242px);\n transition-duration: .3s, .3s;\n }\n\n %overlay {\n opacity: 1;\n background: color(map.get($theme, 'palette'), 'grays', 500, .54);\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 inset-inline-start: 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-get($theme, 'item-text-color');\n max-height: $drawer-item-max-h;\n min-width: $drawer-item-min-w;\n\n @if $variant != 'indigo-design' {\n // important is needed to override the typography margins\n margin: $drawer-item-margin !important;\n padding: rem(12px) rem(8px);\n gap: rem(32px);\n } @else {\n // important is needed to override the typography margins\n margin: rem(15px) $drawer-item-margin !important;\n padding: rem(4px);\n gap: calc(32px - #{$text-side-padding});\n }\n\n cursor: pointer;\n user-select: none;\n outline: transparent;\n white-space: nowrap;\n border-radius: var-get($theme, 'item-border-radius');\n text-decoration: none;\n width: calc(100% - #{$drawer-item-margin * 2});\n border: none;\n justify-content: flex-start;\n\n igx-icon {\n color: var-get($theme, 'item-icon-color');\n @if $variant == 'indigo-design' {\n margin-inline-start: rem(4px);\n }\n }\n\n span {\n @if $variant == 'indigo-design' {\n padding-inline-start: $text-side-padding;\n }\n }\n\n // Need this to override the igx-buttons\n &[igxButton] {\n background: transparent;\n border: none;\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-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-text-color');\n box-shadow: none;\n\n igx-icon {\n color: var-get($theme, 'item-hover-icon-color');\n }\n }\n }\n\n %item--active {\n // should be app primary color\n color: var-get($theme, 'item-active-text-color');\n background: var-get($theme, 'item-active-background');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n\n &:focus,\n &:hover {\n color: var-get($theme, 'item-active-text-color');\n background: var-get($theme, 'item-active-background');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n }\n }\n\n %item,\n %item--active {\n // Need this to override the igx-buttons\n &[igxButton] {\n box-shadow: none;\n\n igx-icon {\n width: var(--igx-icon-size, #{$drawer-icon-size});\n height: var(--igx-icon-size, #{$drawer-icon-size});\n font-size: var(--igx-icon-size, #{$drawer-icon-size});\n margin: 0;\n }\n\n &:hover,\n &:focus {\n box-shadow: none;\n border: none;\n }\n }\n }\n\n %item--header {\n display: block;\n padding: rem(12px) rem(16px);\n white-space: nowrap;\n color: var-get($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 %disable-animation {\n transition-duration: 0s;\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} type-style\n@mixin 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 type-style($type-scale, $item);\n }\n\n %item--header {\n @include type-style($type-scale, $header) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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/// @param {Color} $disabled-label-color [null] - The disabled label color.\n/// @param {Color} $hover-color [null] - The border and dot colors on hover.\n/// @param {Color} $fill-color-hover [null] - The checked border and dot colors on hover.\n/// @param {Color} $fill-hover-border-color [null] - The checked dot border color on hover.\n/// @param {Color} $focus-outline-color [null] - The focus outlined color.\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: radio-theme($fill-color: magenta);\n/// // Pass the theme to the radio component mixin\n/// @include radio($my-radio-theme);\n@function radio-theme(\n $palette: null,\n $schema: $light-schema,\n\n $label-color: null,\n $empty-color: null,\n $fill-color: null,\n $fill-hover-border-color:null,\n $focus-outline-color: null,\n $disabled-color: null,\n $disabled-label-color: null,\n $hover-color: null,\n $fill-color-hover: null,\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 disabled-label-color: $disabled-label-color,\n hover-color: $hover-color,\n fill-color-hover: $fill-color-hover,\n focus-outline-color: $focus-outline-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires {mixin} ripple\n/// @requires {mixin} hide-default\n/// @requires ripple-theme\n/// @requires em\n/// @requires var-get\n@mixin radio($theme) {\n @include css-vars($theme);\n @include scale-in-out($start-scale: .9);\n\n $label-margin: em(8px);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $size: map.get((\n material: em(20px),\n fluent: em(20px),\n bootstrap: em(16px),\n indigo-design: em(20px),\n ), $variant);\n\n $scale: map.get((\n material: scale(.5),\n fluent: scale(.5),\n bootstrap: scale(.375),\n indigo-design: scale(.5),\n ), $variant);\n\n $border-width: map.get((\n material: rem(2px),\n fluent: rem(1px),\n bootstrap: rem(1px),\n indigo-design: rem(2px),\n ), $variant);\n\n $radio-hover-scale: map.get((\n material: null,\n fluent: scale(.5),\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n indigo-design: none,\n ), $variant);\n\n $border-style: solid;\n $border-radius: border-radius(50%);\n\n $transition: all .2s ease-in;\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($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-get($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-get($theme, 'disabled-label-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-get($theme, 'label-color');\n\n user-select: none;\n\n &::before,\n &::after {\n position: absolute;\n content: '';\n width: $size;\n height: $size;\n inset-inline-start: 0;\n top: 0;\n border-radius: $border-radius;\n }\n\n &::before {\n backface-visibility: hidden;\n transform: scale(0);\n\n @if $not-bootstrap-theme {\n transition: $transition;\n }\n\n z-index: 1;\n }\n\n &::after {\n border: $border-width $border-style var-get($theme, 'empty-color');\n }\n }\n\n %radio-composite--x {\n &::before {\n border: $border-width $border-style var-get($theme, 'fill-color');\n background: var-get($theme, 'fill-color');\n transform: $scale;\n\n @if $bootstrap-theme {\n border-color: var-get($theme, 'fill-hover-border-color');\n background: var-get($theme, 'fill-hover-border-color');\n }\n }\n\n &::after {\n border: $border-width $border-style var-get($theme, 'fill-color');\n\n @if $bootstrap-theme{\n background: var-get($theme, 'fill-color');\n }\n }\n }\n\n %igx-radio-hover__composite {\n &::before {\n background: var-get($theme, 'hover-color');\n transform: $radio-hover-scale;\n }\n }\n\n %igx-radio--checked-active__composite {\n &::before {\n background: var-get($theme, 'fill-color-hover');\n border-color: var-get($theme, 'fill-hover-border-color');\n }\n\n &::after {\n @if $bootstrap-theme {\n border-color: var-get($theme, 'fill-color');\n } @else {\n border-color: var-get($theme, 'fill-hover-border-color');\n }\n }\n }\n\n %radio-composite--disabled {\n &::after {\n border: $border-width $border-style var-get($theme, 'disabled-color');\n\n @if $bootstrap-theme {\n background: transparent;\n border: $border-width $border-style var-get($theme, 'disabled-label-color');\n }\n }\n }\n\n %radio-composite--x--disabled {\n &::after {\n border: $border-width $border-style var-get($theme, 'disabled-color');\n }\n\n &::before {\n background: var-get($theme, 'disabled-color');\n border: $border-width $border-style transparent;\n }\n\n @if $bootstrap-theme {\n &::after {\n background: var-get($theme, 'disabled-color');\n border-color: var-get($theme, 'disabled-color');\n }\n\n &::before {\n background: white;\n }\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-inline-start: $label-margin;\n }\n\n %radio-label--before {\n order: -1;\n margin-inline-end: $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 ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: calc(50% - #{$ripple-radius});\n width: $ripple-size;\n height: $ripple-size;\n border-radius: border-radius(math.div($ripple-size, 2));\n overflow: hidden;\n pointer-events: none;\n filter: opacity(1);\n\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %igx-radio--focused {\n @if $variant == 'fluent' {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n\n @if $variant == 'bootstrap' {\n %radio-composite {\n border-radius: $border-radius;\n box-shadow: 0 0 0 2px var-get($theme, 'focus-outline-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %radio-composite {\n border-radius: $border-radius;\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-radio--focused-checked {\n @if $variant == 'indigo-design' {\n %radio-composite {\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %radio-ripple--focused {\n background: var-get($theme, 'empty-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %radio-ripple--focused-checked {\n background: var-get($theme, 'fill-color');\n }\n\n %radio-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %radio-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'empty-color');\n }\n }\n\n %radio-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin radio-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %radio-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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} $track-step-color [null] - The color of the track steps.\n/// @param {Number} $track-step-size [null] - The size of the track steps.\n/// @param {Color} $track-hover-color [null] - The color of the track on hover.\n///\n/// @param {Color} $thumb-color [null] - The color of the thumb.\n/// @param {Color} $thumb-focus-color [null] - The focus color of the thumb.\n/// @param {Color} $thumb-border-color [null] - The thumb border color.\n/// @param {Color} $thumb-border-focus-color [null] - The thumb border color when focused.\n/// @param {Color} $thumb-disabled-border-color [null] - The thumb border color when it's disabled.\n/// @param {Color} $disabled-thumb-color [null] - The thumb color when its disabled.\n///\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} $base-track-color [null] - The base background color of the track.\n/// @param {Color} $base-track-hover-color [null] - The base background color of the track on hover.\n/// @param {Color} $disabled-base-track-color [null] - The base background color of the track when is disabled.\n/// @param {Color} $disabled-fill-track-color [null] - The base background color of the fill track when is disabled.\n///\n/// @param {Color} $tick-label-color [null] - The color of the tick label.\n/// @param {Color} $tick-color [null] - The background-color of the 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: slider-theme($thumb-color: black, $track-color: yellow);\n/// // Pass the theme to the slider component mixin\n/// @include slider($my-slider-theme);\n@function slider-theme(\n $palette: null,\n $schema: $light-schema,\n\n $track-color: null,\n $track-step-color: null,\n $track-step-size: null,\n $track-hover-color: null,\n $thumb-color: null,\n $thumb-focus-color: null,\n $thumb-border-color: null,\n $thumb-border-focus-color: null,\n $thumb-disabled-border-color: null,\n $disabled-thumb-color: null,\n $label-background-color: null,\n $label-text-color: null,\n\n $base-track-color: null,\n $base-track-hover-color: null,\n $disabled-base-track-color: null,\n $disabled-fill-track-color: null,\n\n $tick-label-color: null,\n $tick-color: 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-step-color: $track-step-color,\n track-step-size: $track-step-size,\n track-hover-color: $track-hover-color,\n thumb-color: $thumb-color,\n thumb-focus-color: $thumb-focus-color,\n thumb-border-color: $thumb-border-color,\n thumb-border-focus-color: $thumb-border-focus-color,\n thumb-disabled-border-color: $thumb-disabled-border-color,\n disabled-thumb-color: $disabled-thumb-color,\n label-background-color: $label-background-color,\n label-text-color: $label-text-color,\n base-track-color: $base-track-color,\n base-track-hover-color: $base-track-hover-color,\n disabled-base-track-color: $disabled-base-track-color,\n disabled-fill-track-color: $disabled-fill-track-color,\n tick-label-color: $tick-label-color,\n tick-color: $tick-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin slider($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n $variant: map.get($theme, variant);\n\n $slider-height: rem(48px);\n $ripple-size: rem(40px);\n $ripple-radius: math.div($ripple-size, 2);\n $thumb-label-width: rem(40px);\n $thumb-label-height: rem(30px);\n\n $slider-track-height: map.get((\n material: 6px,\n fluent: 4px,\n bootstrap: 8px,\n indigo-design: 2px\n ), $variant);\n\n $slider-outline-width: map.get((\n material: 0,\n fluent: 0,\n bootstrap: 3px,\n indigo-design: 3px\n ), $variant);\n\n // Slider ticks\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 // Slider Thumb\n $thumb-size: map.get((\n material: 20px,\n fluent: 16px,\n bootstrap: 16px,\n indigo-design: 14px\n ), $variant);\n $thumb-radius: math.div($thumb-size, 2);\n\n $thumb-border-width: map.get((\n material: 0,\n fluent: 2px,\n bootstrap: 1px,\n indigo-design: 0\n ), $variant);\n\n // Slider Steps\n $steps-top-position: map.get((\n material: 2px,\n fluent: 1px,\n bootstrap: 3px,\n indigo-design: 0\n ), $variant);\n\n // Slider Label\n $slider-label-width: 36px;\n $slider-label-height: $slider-label-width;\n $slider-label-radius: math.div($slider-label-width, 2);\n $slider-label-padding: 0 rem(2px);\n\n %igx-slider-display {\n display: flex;\n position: relative;\n // Z-index 0 is needed to set the stacking context for the inner elements with z-index.\n // https://github.com/IgniteUI/igniteui-angular/issues/11597\n z-index: 0;\n height: $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-get($theme, 'track-hover-color');\n }\n\n %igx-slider-track-inactive {\n background: var-get($theme, 'base-track-hover-color');\n }\n\n @if $variant == 'fluent'{\n %igx-slider-thumb__dot::before {\n border: rem($thumb-border-width) solid var-get($theme, 'thumb-focus-color');\n }\n }\n }\n }\n\n %igx-slider-disabled {\n pointer-events: none;\n\n %igx-slider-track-inactive {\n background: var-get($theme, 'disabled-base-track-color');\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 inset-inline-start: 0;\n }\n\n %igx-slider-track {\n position: relative;\n width: 100%;\n height: rem($slider-track-height);\n overflow: hidden;\n border-radius: border-radius(rem(32px));\n\n @if $variant == 'indigo-design' {\n border-radius: initial;\n }\n }\n\n %igx-slider-track-inactive {\n position: absolute;\n width: 100%;\n height: inherit;\n background: var-get($theme, 'base-track-color');\n transition: background .2s $ease-out-quad;\n border-radius: inherit;\n\n @if $variant == 'material' {\n height: rem(4px);\n top: 50%;\n transform: translateY(-50%);\n }\n }\n\n %igx-slider-track-fill {\n position: absolute;\n width: 100%;\n background: var-get($theme, 'track-color');\n transform-origin: left center;\n transform: scaleX(0);\n border-radius: inherit;\n height: inherit;\n\n [dir='rtl'] & {\n transform-origin: right center;\n }\n\n @if $variant == 'bootstrap' {\n display: none;\n }\n }\n\n %igx-slider-track-fill--disabled {\n background: var-get($theme, 'disabled-fill-track-color');\n }\n\n %igx-slider__ticks {\n width: 100%;\n display: flex;\n position: absolute;\n bottom: 0;\n justify-content: space-between;\n\n &%igx-slider__ticks--top {\n bottom: auto;\n top: 0;\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-inline-start: rem(-1px);\n }\n\n &:last-of-type {\n margin-inline-start: rem(-1px);\n }\n }\n\n %igx-slider__ticks-label {\n color: var-get($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 [dir='rtl'] & {\n left: 100%;\n }\n }\n\n %igx-slider__ticks-tick {\n background: var-get($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-get($theme, 'disabled-base-track-color') !important;\n }\n\n %igx-slider__ticks-labels--disabled {\n color: var-get($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 }\n\n %igx-slider__ticks-label {\n top: calc(#{$tick-height--tall} + #{$tick-height});\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 display: flex;\n width: 100%;\n height: rem(4px);\n opacity: .85;\n transition: opacity .2s ease-out;\n top: 50%;\n transform: translateY(-50%);\n color: var-get($theme, 'track-step-color');\n\n svg {\n clip-path: inset(0 rem(3px) 0 rem(3px));\n }\n\n line {\n stroke: currentColor;\n stroke-width: var-get($theme, 'track-step-size');\n stroke-linecap: round;\n }\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 %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: rem($thumb-size);\n height: rem($thumb-size);\n outline-style: none;\n top: -#{rem($thumb-radius)};\n margin-inline-start: -#{rem($thumb-radius)};\n\n @if $variant == 'material' {\n &:hover div::after {\n opacity: .12;\n transform: scale(1);\n }\n\n &:focus div::after {\n opacity: .18;\n transform: scale(1);\n }\n }\n\n &:focus div::before {\n box-shadow: 0 0 0 rem($slider-outline-width) var-get($theme, 'thumb-focus-color');\n\n @if $variant == 'bootstrap' {\n border-color: var-get($theme, 'thumb-border-focus-color');\n }\n }\n }\n\n @if $variant == 'fluent' {\n %igx-slider-thumb--focused { \n div::after {\n $focus-outline-offset: rem(2px);\n\n position: absolute;\n content: '';\n pointer-events: none;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n box-shadow: 0 0 0 rem(1px) var-get($theme, 'thumb-border-focus-color');\n width: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));\n height: calc(rem($thumb-size) + (#{$focus-outline-offset} * 2));\n }\n }\n }\n\n %igx-thumb--disabled {\n &:focus div::before {\n box-shadow: none;\n\n @if $variant == 'fluent' {\n border-color: var-get($theme, 'thumb-disabled-border-color') !important;\n }\n }\n\n &:focus div::after {\n transform: scale(0);\n }\n }\n\n %igx-label-display {\n position: absolute;\n pointer-events: none;\n display: flex;\n top: calc(((#{$thumb-label-height}) + rem(20px)) * -1);\n height: $thumb-label-height;\n }\n\n %igx-slider-thumb-label__container {\n border-radius: rem(2px);\n display: flex;\n align-items: center;\n justify-content: center;\n white-space: nowrap;\n margin-inline-start: -50%;\n padding: 0 rem(2px);\n background: var-get($theme, 'label-background-color');\n color: var-get($theme, 'label-text-color');\n min-width: $thumb-label-width;\n opacity: 0;\n\n &::after {\n content: '';\n position: absolute;\n top: 85%;\n border-inline-start: rem(10px) solid transparent;\n border-inline-end: rem(10px) solid transparent;\n border-top: rem(10px) solid var-get($theme, 'label-background-color');\n }\n }\n\n %igx-slider-thumb__dot {\n position: relative;\n inset-inline-start: 0;\n pointer-events: none;\n\n &::before {\n position: absolute;\n content: '';\n width: rem($thumb-size);\n height: rem($thumb-size);\n inset-inline-start: #{rem($thumb-radius) - math.div(rem($thumb-size), 2)};\n top: calc((#{$thumb-size} - #{$thumb-radius}) * -1);\n margin-inline-start: calc((#{$thumb-size} - #{$thumb-radius}) * -1);\n background: var-get($theme, 'thumb-color');\n border: rem($thumb-border-width) solid var-get($theme, 'thumb-border-color');\n transition: transform .1s $ease-out-quad, border-radius .1s $ease-out-quad;\n border-radius: border-radius(rem($thumb-radius));\n }\n\n @if $variant == 'material' {\n &::after {\n position: absolute;\n content: '';\n width: $ripple-size;\n height: $ripple-size;\n background: var-get($theme, 'thumb-color');\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: calc(50% - #{$ripple-radius});\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: border-radius(50%);\n overflow: hidden;\n }\n }\n }\n\n %igx-slider-thumb__dot--disabled {\n pointer-events: none;\n\n &::before {\n background: var-get($theme, 'disabled-thumb-color');\n border-color: var-get($theme, 'thumb-disabled-border-color');\n border-radius: border-radius(rem($thumb-radius));\n }\n }\n\n %igx-slider-thumb__dot--pressed {\n @if $variant == 'material' {\n &::after {\n opacity: .24 !important;\n transform: scale(1) !important;\n }\n }\n }\n\n %igx-slider-thumb-label__container--active {\n opacity: 1;\n }\n\n %igx-slider-thumb-label__container--pressed {\n z-index: 1;\n }\n}\n\n/// Adds typography styles for the igx-slider component.\n/// Uses the 'caption'\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 [(ticks-label: 'caption', thumb-label: 'caption')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin slider-typography(\n $type-scale,\n $categories: (\n ticks-label: 'caption',\n thumb-label: 'caption',\n )\n) {\n $ticks-label: map.get($categories, 'ticks-label');\n $thumb-label: map.get($categories, 'thumb-label');\n\n %igx-slider-thumb-label__container {\n @include type-style($type-scale, $thumb-label)\n }\n\n %igx-slider__tick-label {\n @include type-style($type-scale, $ticks-label)\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 elevation\n///\n/// @example scss Set a custom background color\n/// $my-snackbar-theme: snackbar-theme($background: white);\n/// // Pass the theme to the snackbar component mixin\n/// @include snackbar($my-snackbar-theme);\n@function snackbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 @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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin snackbar($theme) {\n @include css-vars($theme);\n @include fade-in();\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\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-get($theme, 'text-color');\n background: var-get($theme, 'background');\n backface-visibility: hidden;\n box-shadow: var-get($theme, 'shadow');\n border-radius: var-get($theme, 'border-radius');\n backdrop-filter: blur(8px);\n }\n\n %igx-snackbar-message {\n @include animation('fade-in' .35s ease-out);\n }\n\n %igx-snackbar-button {\n background: transparent;\n color: var-get($theme, 'button-color');\n border: 0;\n line-height: $snackbar-button-line-height;\n margin-inline-start: $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 @include animation('fade-in' .35s ease-out);\n\n &:hover {\n color: var-get($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} type-style\n@mixin snackbar-typography($type-scale, $categories: (text: 'body-2')) {\n $text: map.get($categories, 'text');\n\n %igx-snackbar-message {\n @include type-style($type-scale, $text);\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:math';\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 [null] - 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} $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} $track-on-hover-color [null] - The color of the track when the switch is on and hovered.\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} $thumb-on-disabled-color [null] - The color of the thumb when the switch is on and disabled.\n/// @param {Color} $track-disabled-color [null] - The color of the track when the switch is disabled.\n/// @param {Color} $track-on-disabled-color [null] - The color of the track when the switch is on and 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/// @param {Color} $border-color [null] - The border color of the switch.\n/// @param {Color} $border-hover-color [null] - The border color of the switch on hover.\n/// @param {Color} $border-disabled-color [null] - The border color of the switch when it is disabled.\n/// @param {Color} $border-on-color [null] - The border color when the switch is on.\n/// @param {Color} $border-on-hover-color [null] - The border color when the switch is on and hovered.\n/// @param {Color} $focus-outline-color [null] - The focus outlined color.\n/// @param {Color} $focus-outline-color-focused [null] - The focus outlined color for focused state.\n/// @param {Color} $focus-fill-color [null] - The focus fill color.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n///\n/// @example scss Set custom track and thumb on colors\n/// $my-switch-theme: switch-theme($thumb-on-color: black, $track-on-color: yellow);\n/// // Pass the theme to the switch component mixin\n/// @include switch($my-switch-theme);\n@function switch-theme(\n $palette: null,\n $schema: $light-schema,\n\n $thumb-on-color: null,\n $track-on-color: null,\n $track-on-hover-color: null,\n\n $thumb-off-color: null,\n $track-off-color: null,\n\n $track-disabled-color: null,\n $track-on-disabled-color: null,\n $thumb-disabled-color: null,\n $thumb-on-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 $focus-outline-color: null,\n $focus-outline-color-focused: null,\n $focus-fill-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 @if not($resting-shadow) {\n $resting-elevation: map.get($switch-schema, 'resting-elevation');\n $resting-shadow: elevation($elevation: $resting-elevation);\n }\n\n @if not($hover-shadow) {\n $hover-elevation: map.get($switch-schema, 'hover-elevation');\n $hover-shadow: elevation($elevation: $hover-elevation);\n }\n\n @if not($disabled-shadow) {\n $disabled-elevation: map.get($switch-schema, 'disabled-elevation');\n $disabled-shadow: elevation($elevation: $disabled-elevation);\n }\n\n @if not($border-radius-track) {\n $border-radius-track: border-radius(map.get($theme, 'border-radius-track'));\n }\n \n @if not($border-radius-thumb) {\n $border-radius-thumb: border-radius(map.get($theme, 'border-radius-thumb'));\n }\n \n @if not($border-radius-ripple) {\n $border-radius-ripple: border-radius(map.get($theme, 'border-radius-ripple'));\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 track-on-hover-color: $track-on-hover-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 track-on-disabled-color: $track-on-disabled-color,\n thumb-disabled-color: $thumb-disabled-color,\n thumb-on-disabled-color: $thumb-on-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 focus-outline-color: $focus-outline-color,\n focus-outline-color-focused: $focus-outline-color-focused,\n focus-fill-color: $focus-fill-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} css-vars\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} ripple\n/// @requires {mixin} hide-default\n/// @requires ripple-theme\n/// @requires em\n/// @requires {mixin} scale-in-out\n/// @requires {mixin} animation\n/// @requires var-get\n@mixin switch($theme) {\n @include css-vars($theme);\n @include scale-in-out($start-scale: .9);\n\n $variant: map.get($theme, variant);\n\n $switch-width: map.get((\n material: 36px,\n fluent: 40px,\n bootstrap: 32px,\n indigo-design: 34px\n ), $variant);\n\n $switch-height: map.get((\n material: 14px,\n fluent: 20px,\n bootstrap: 16px,\n indigo-design: 16px\n ), $variant);\n\n $switch-thumb-width: map.get((\n material: 20px,\n fluent: 12px,\n bootstrap: 10px,\n indigo-design: 8px\n ), $variant);\n\n $switch-on-offset: map.get((\n material: 1px,\n fluent: math.div($switch-thumb-width, 2),\n bootstrap: 4px,\n indigo-design: 7px\n ), $variant);\n\n $switch-off-offset: map.get((\n material: -1px,\n fluent: math.div($switch-thumb-width, 3),\n bootstrap: math.div($switch-thumb-width, 4),\n indigo-design: math.div($switch-thumb-width, 3),\n ), $variant);\n\n $ripple-display: map.get((\n material: block,\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-resting-shadow: map.get((\n material: var-get($theme, 'resting-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-hover-shadow: map.get((\n material: var-get($theme, 'hover-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $thumb-disabled-shadow: map.get((\n material: var-get($theme, 'disabled-shadow'),\n fluent: none,\n bootstrap: none,\n indigo-design: none\n ), $variant);\n\n $switch-thumb-height: $switch-thumb-width;\n\n $ripple-size: em(48px);\n $ripple-radius: math.div($ripple-size, 2);\n\n $label-margin: em(8px);\n\n $input-transition: all .2s $ease-in-out-quad;\n\n $ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'thumb-on-color')\n );\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-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-radius-track');\n background: var-get($theme, 'track-off-color');\n cursor: pointer;\n user-select: none;\n transition: $input-transition;\n\n @if $variant == 'indigo-design' {\n border: 2px solid var-get($theme, 'border-color');\n }\n\n @if $variant != 'bootstrap' {\n &:hover,\n &:focus {\n border-color: var-get($theme, 'border-hover-color');\n }\n }\n\n @if $variant == 'fluent' {\n &:hover {\n %switch-composite-thumb {\n background: var-get($theme, 'border-hover-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n }\n }\n }\n }\n\n %switch-composite--x {\n background: var-get($theme, 'track-on-color');\n border-color: var-get($theme, 'border-on-color');\n\n &:hover,\n &:focus {\n border-color: var-get($theme, 'border-on-hover-color');\n }\n\n @if $variant == 'fluent' {\n &:hover {\n background: var-get($theme, 'track-on-hover-color');\n }\n }\n }\n\n %switch-composite--disabled {\n background: var-get($theme, 'track-disabled-color');\n border-color: var-get($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-get($theme, 'border-radius-thumb');\n background: var-get($theme, 'thumb-off-color');\n box-shadow: $thumb-resting-shadow;\n transition: $input-transition;\n transform: translateX(#{rem($switch-off-offset)});\n\n [dir='rtl'] & {\n transform: translateX(#{rem(-1 * $switch-off-offset)});\n }\n\n @if $variant != 'bootstrap' {\n &:hover {\n box-shadow: $thumb-hover-shadow;\n }\n }\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n transform: translateX(#{rem($switch-width) - rem($switch-thumb-width) - rem($switch-on-offset)});\n\n [dir='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-get($theme, 'thumb-disabled-color');\n box-shadow: $thumb-disabled-shadow;\n }\n\n %switch-ripple {\n @include ripple($ripple-theme);\n @include css-vars($ripple-theme);\n display: $ripple-display;\n position: absolute;\n top: calc(50% - #{$ripple-radius});\n inset-inline-start: 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-get($theme, 'border-radius-ripple');\n }\n\n %igx-switch--focused {\n @if $variant == 'fluent' {\n %switch-composite {\n position: relative;\n $focus-outline-offset-top: rem(2px);\n $focus-outline-offset-left: rem(2px);\n\n &::after {\n content: '';\n position: absolute;\n top: -$focus-outline-offset-top;\n inset-inline-start: -$focus-outline-offset-left;\n box-shadow: 0 0 0 1px var-get($theme, 'focus-outline-color');\n width: calc(100% + (#{$focus-outline-offset-left} * 2));\n height: calc(100% + (#{$focus-outline-offset-top} * 2));\n }\n }\n }\n\n @if $variant == 'bootstrap' {\n %switch-composite {\n border-color: var-get($theme, 'focus-fill-color');\n box-shadow: 0 0 0 4px var-get($theme, 'focus-outline-color');\n }\n\n %switch-composite-thumb {\n background: var-get($theme, 'focus-fill-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %switch-composite {\n border-radius: var-get($theme, 'border-radius-thumb');\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color');\n }\n }\n }\n\n %igx-switch--focused-checked {\n @if $variant == 'bootstrap' {\n %switch-composite {\n border-color: var-get($theme, 'border-on-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-color');\n }\n }\n\n @if $variant == 'indigo-design' {\n %switch-composite {\n box-shadow: 0 0 0 3px var-get($theme, 'focus-outline-color-focused');\n }\n }\n }\n\n %igx-switch--disabled-checked {\n @if $variant != 'indigo-design' {\n %switch-composite--x {\n background: var-get($theme, 'track-on-disabled-color');\n }\n\n %switch-composite-thumb--x {\n background: var-get($theme, 'thumb-on-disabled-color');\n }\n }\n\n @if $variant == 'bootstrap' or $variant == 'fluent'{\n %switch-composite--x {\n border-color: var-get($theme, 'track-on-disabled-color');\n }\n }\n }\n\n %switch-ripple--focused {\n background: var-get($theme, 'track-off-color');\n transition: background .2s $ease-out-quad;\n opacity: .12;\n }\n\n %switch-ripple--focused-checked {\n background: var-get($theme, 'thumb-on-color');\n }\n\n %switch-label {\n display: inline-block;\n color: var-get($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-inline-start: $label-margin;\n }\n\n %switch-label--before {\n order: -1;\n margin-inline-end: $label-margin;\n }\n\n %switch-label--disabled {\n color: var-get($theme, 'label-disabled-color');\n }\n\n %switch-ripple--hover {\n &::after {\n position: absolute;\n content: '';\n opacity: .06;\n inset: 0;\n }\n }\n\n %switch-ripple--hover-unchecked {\n &::after {\n background: var-get($theme, 'track-off-color');\n }\n }\n\n %switch-ripple--hover-checked {\n &::after {\n background: var-get($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} type-style\n@mixin switch-typography(\n $type-scale,\n $categories: (label: 'subtitle-1')\n) {\n $label: map.get($categories, 'label');\n\n %switch-label {\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:math';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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} $step-background [null] - The background of the step header.\n/// @param {Color} $step-hover-background [null] - The background of the step header on hover.\n/// @param {Color} $step-focus-background [null] - The background of the step header on focus.\n/// @param {Color} $title-color [null] - The color of the step title.\n/// @param {Color} $title-hover-color [null] - The color of the step title on hover.\n/// @param {Color} $title-focus-color [null] - The color of the step title on focus.\n/// @param {Color} $subtitle-color [null] - The color of the step subtitle.\n/// @param {Color} $subtitle-hover-color [null] - The color of the step subtitle on hover.\n/// @param {Color} $subtitle-focus-color [null] - The color of the step subtitle on focus.\n/// @param {Color} $indicator-color [null] - The text color of the step indicator.\n/// @param {Color} $indicator-background [null] - The background color of the step indicator.\n/// @param {Color} $indicator-outline [null] - The outline color of the step indicator.\n///\n/// @param {Color} $invalid-step-background [null] - The background of the invalid step header.\n/// @param {Color} $invalid-step-hover-background [null] - The background of the invalid step header on hover.\n/// @param {Color} $invalid-step-focus-background [null] - The background of the invalid step header on focus.\n/// @param {Color} $invalid-title-color [null] - The color of the invalid step title.\n/// @param {Color} $invalid-title-hover-color [null] - The color of the invalid step title on hover.\n/// @param {Color} $invalid-title-focus-color [null] - The color of the invalid step title on focus.\n/// @param {Color} $invalid-subtitle-color [null] - The color of the invalid step subtitle.\n/// @param {Color} $invalid-subtitle-hover-color [null] - The color of the invalid step subtitle on hover.\n/// @param {Color} $invalid-subtitle-focus-color [null] - The color of the invalid step subtitle on focus.\n/// @param {Color} $invalid-indicator-color [null] - The color of the invalid step indicator.\n/// @param {Color} $invalid-indicator-background [null] - The background color of the invalid step indicator.\n/// @param {Color} $invalid-indicator-outline [null] - The outline color of the invalid step indicator.\n///\n/// @param {Color} $current-step-background [null] - The background of the current step header.\n/// @param {Color} $current-step-hover-background [null] - The background of the current step header on hover.\n/// @param {Color} $current-step-focus-background [null] - The background of the current step header on focus.\n/// @param {Color} $current-title-color [null] - The color of the current step title.\n/// @param {Color} $current-title-hover-color [null] - The color of the current step title on hover.\n/// @param {Color} $current-title-focus-color [null] - The color of the current step title on focus.\n/// @param {Color} $current-subtitle-color [null] - The color of the current step subtitle.\n/// @param {Color} $current-subtitle-hover-color [null] - The color of the current step subtitle on hover.\n/// @param {Color} $current-subtitle-focus-color [null] - The color of the current step subtitle on focus.\n/// @param {Color} $current-indicator-color [null] - The color of the current step indicator.\n/// @param {Color} $current-indicator-background [null] - The background color of the current step indicator.\n/// @param {Color} $current-indicator-outline [null] - The outline color of the current step indicator.\n///\n/// @param {Color} $complete-step-background [null] - The background of the complete step header.\n/// @param {Color} $complete-step-hover-background [null] - The background of the complete step header on hover.\n/// @param {Color} $complete-step-focus-background [null] - The background of the complete step header on focus.\n/// @param {Color} $complete-title-color [null] - The color of the complete step title.\n/// @param {Color} $complete-title-hover-color [null] - The color of the complete step title on hover.\n/// @param {Color} $complete-title-focus-color [null] - The color of the complete step title on focus.\n/// @param {Color} $complete-subtitle-color [null] - The color of the complete step subtitle.\n/// @param {Color} $complete-subtitle-hover-color [null] - The color of the complete step subtitle on hover.\n/// @param {Color} $complete-subtitle-focus-color [null] - The color of the complete step subtitle on focus.\n/// @param {Color} $complete-indicator-color [null] - The color of the completed step indicator.\n/// @param {Color} $complete-indicator-background [null] - The background color of the completed step indicator.\n/// @param {Color} $complete-indicator-outline [null] - The outline color of the completed step indicator.\n///\n/// @param {Color} $disabled-title-color [null] - The title color of the disabled step.\n/// @param {Color} $disabled-subtitle-color [null] - The subtitle color of the disabled step.\n/// @param {Color} $disabled-indicator-color [null] - The indicator color of the disabled step.\n/// @param {Color} $disabled-indicator-background [null] - The indicator background of the disabled step.\n/// @param {Color} $disabled-indicator-outline [null] - The indicator outline color of the disabled step.\n///\n/// @param {Color} $step-separator-color [null] - The separator border-color of between the steps.\n/// @param {Color} $complete-step-separator-color [null] - The separator border-color between the completed steps.\n///\n/// @param {Color} $step-separator-style [null] - The separator border-style of between the steps.\n/// @param {Color} $complete-step-separator-style [null] - The separator border-style between the completed steps.\n///\n/// @param {Color} $border-radius-indicator [null] - The border-radius of the step indicator.\n/// @param {Color} $border-radius-step-header [null] - The border-radius of the step header.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n///\n/// @example scss Set custom track and thumb on colors\n/// $my-stepper-theme: igx-stepper-theme();\n/// @include igx-stepper($my-stepper-theme);\n///\n/// @example scss Set custom steppet colors\n/// $my-stepper-theme: stepper-theme($step-hover-background: red);\n/// // Pass the theme to the stepper component mixin\n/// @include stepper($my-stepper-theme);\n@function stepper-theme(\n $palette: null,\n $schema: $light-schema,\n\n $step-background: null,\n $step-hover-background: null,\n $step-focus-background: null,\n\n $invalid-step-background: null,\n $invalid-step-hover-background: null,\n $invalid-step-focus-background: null,\n\n $current-step-background: null,\n $current-step-hover-background: null,\n $current-step-focus-background: null,\n\n $complete-step-background: null,\n $complete-step-hover-background: null,\n $complete-step-focus-background: null,\n\n // Incomplete\n $indicator-color: null,\n $indicator-background: null,\n $indicator-outline: null,\n\n $title-color: null,\n $title-hover-color: null,\n $title-focus-color: null,\n\n $subtitle-color: null,\n $subtitle-hover-color: null,\n $subtitle-focus-color: null,\n\n // Invalid\n $invalid-indicator-color: null,\n $invalid-indicator-background: null,\n $invalid-indicator-outline: null,\n\n $invalid-title-color: null,\n $invalid-title-hover-color: null,\n $invalid-title-focus-color: null,\n\n $invalid-subtitle-color: null,\n $invalid-subtitle-hover-color: null,\n $invalid-subtitle-focus-color: null,\n\n // Current\n $current-indicator-color: null,\n $current-indicator-background: null,\n $current-indicator-outline: null,\n\n $current-title-color: null,\n $current-title-hover-color: null,\n $current-title-focus-color: null,\n\n $current-subtitle-color: null,\n $current-subtitle-hover-color: null,\n $current-subtitle-focus-color: null,\n\n // complete\n $complete-indicator-color: null,\n $complete-indicator-background: null,\n $complete-indicator-outline: null,\n\n $complete-title-color: null,\n $complete-title-hover-color: null,\n $complete-title-focus-color: null,\n\n $complete-subtitle-color: null,\n $complete-subtitle-hover-color: null,\n $complete-subtitle-focus-color: null,\n\n // Disabled\n $disabled-indicator-color: null,\n $disabled-indicator-background: null,\n $disabled-indicator-outline: null,\n $disabled-title-color: null,\n $disabled-subtitle-color: null,\n\n // Separator\n $step-separator-color: null,\n $complete-step-separator-color: null,\n\n $step-separator-style: null,\n $complete-step-separator-style: null,\n\n // Border-radius\n $border-radius-indicator: null,\n $border-radius-step-header: null,\n) {\n $name: 'igx-stepper';\n $selector: 'igx-stepper';\n $stepper-schema: ();\n\n @if map.has-key($schema, $name) {\n $stepper-schema: map.get($schema, $name);\n } @else {\n $stepper-schema: $schema;\n }\n\n $theme: apply-palette($stepper-schema, $palette);\n\n @if not($indicator-background) and $step-background {\n $indicator-background: text-contrast($step-background);\n }\n\n @if not($indicator-color) and $indicator-background {\n $indicator-color: text-contrast($indicator-background);\n }\n\n @if not($complete-indicator-color) and $complete-indicator-background {\n $complete-indicator-color: text-contrast($complete-indicator-background);\n }\n\n @if not($invalid-indicator-color) and $invalid-indicator-background {\n $invalid-indicator-color: text-contrast($invalid-indicator-background);\n }\n\n @if not($current-indicator-color) and $current-indicator-background {\n $current-indicator-color: text-contrast($current-indicator-background);\n }\n\n @if not($title-color) and $step-background {\n $title-color: text-contrast($step-background);\n }\n\n @if not($subtitle-color) and $step-background {\n $subtitle-color: text-contrast($step-background);\n }\n\n @if not($title-hover-color) and $step-hover-background {\n $title-hover-color: text-contrast($step-hover-background);\n }\n\n @if not($subtitle-hover-color) and $step-hover-background {\n $subtitle-hover-color: text-contrast($step-hover-background);\n }\n\n @if not($title-focus-color) and $step-focus-background {\n $title-focus-color: text-contrast($step-focus-background);\n }\n\n @if not($subtitle-focus-color) and $step-focus-background {\n $subtitle-focus-color: text-contrast($step-focus-background);\n }\n\n @if not($border-radius-indicator) {\n $border-radius-indicator: border-radius(map.get($theme, 'border-radius-indicator'));\n }\n\n @if not($border-radius-step-header) {\n $border-radius-step-header: border-radius(map.get($theme, 'border-radius-step-header'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n selector: $selector,\n\n // Incomplete\n step-background: $step-background,\n step-hover-background: $step-hover-background,\n step-focus-background: $step-focus-background,\n indicator-color: $indicator-color,\n indicator-background: $indicator-background,\n indicator-outline: $indicator-outline,\n title-color: $title-color,\n title-hover-color: $title-hover-color,\n title-focus-color: $title-focus-color,\n subtitle-color: $subtitle-color,\n subtitle-hover-color: $subtitle-hover-color,\n subtitle-focus-color: $subtitle-focus-color,\n\n // Invalid\n invalid-step-background: $invalid-step-background,\n invalid-step-hover-background: $invalid-step-hover-background,\n invalid-step-focus-background: $invalid-step-focus-background,\n invalid-indicator-color: $invalid-indicator-color,\n invalid-indicator-background: $invalid-indicator-background,\n invalid-indicator-outline: $invalid-indicator-outline,\n invalid-title-color: $invalid-title-color,\n invalid-title-hover-color: $invalid-title-hover-color,\n invalid-title-focus-color: $invalid-title-focus-color,\n invalid-subtitle-color: $invalid-subtitle-color,\n invalid-subtitle-hover-color: $invalid-subtitle-hover-color,\n invalid-subtitle-focus-color: $invalid-subtitle-focus-color,\n\n // Current\n current-step-background: $current-step-background,\n current-step-hover-background: $current-step-hover-background,\n current-step-focus-background: $current-step-focus-background,\n current-indicator-color: $current-indicator-color,\n current-indicator-background: $current-indicator-background,\n current-indicator-outline: $current-indicator-outline,\n current-title-color: $current-title-color,\n current-title-hover-color: $current-title-hover-color,\n current-title-focus-color: $current-title-focus-color,\n current-subtitle-color: $current-subtitle-color,\n current-subtitle-hover-color: $current-subtitle-hover-color,\n current-subtitle-focus-color: $current-subtitle-focus-color,\n\n // Complete\n complete-step-background: $complete-step-background,\n complete-step-hover-background: $complete-step-hover-background,\n complete-step-focus-background: $complete-step-focus-background,\n complete-indicator-color: $complete-indicator-color,\n complete-indicator-background: $complete-indicator-background,\n complete-indicator-outline: $complete-indicator-outline,\n complete-title-color: $complete-title-color,\n complete-title-hover-color: $complete-title-hover-color,\n complete-title-focus-color: $complete-title-focus-color,\n complete-subtitle-color: $complete-subtitle-color,\n complete-subtitle-hover-color: $complete-subtitle-hover-color,\n complete-subtitle-focus-color: $complete-subtitle-focus-color,\n\n // Disabled\n disabled-indicator-color: $disabled-indicator-color,\n disabled-indicator-background: $disabled-indicator-background,\n disabled-indicator-outline: $disabled-indicator-outline,\n disabled-title-color: $disabled-title-color,\n disabled-subtitle-color: $disabled-subtitle-color,\n\n // Separator\n step-separator-color: $step-separator-color,\n complete-step-separator-color: $complete-step-separator-color,\n step-separator-style: $step-separator-style,\n complete-step-separator-style: $complete-step-separator-style,\n\n // Border-radius\n border-radius-indicator: $border-radius-indicator,\n border-radius-step-header: $border-radius-step-header,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin stepper($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $indicator-size: map.get((\n material: rem(24px),\n fluent: rem(24px),\n bootstrap: rem(40px),\n indigo-design: rem(24px)\n ), $variant);\n\n $step-header-padding: map.get((\n material: rem(24px),\n fluent: rem(8px),\n bootstrap: rem(24px),\n indigo-design: rem(16px)\n ), $variant);\n\n $step-header-padding-simple: map.get((\n material: rem(8px),\n fluent: rem(8px),\n bootstrap: rem(16px),\n indigo-design: rem(8px)\n ), $variant);\n\n $step-body-padding: rem(16px);\n $title-gap: rem(8px);\n $indicator-gap: rem(4px);\n $indicator-padding: rem(2px);\n $v-line-indent: calc(#{$step-header-padding} + (#{$indicator-size} / 2));\n $separator-position: 50%;\n\n $outline-width: map.get((\n material: rem(1px),\n fluent: rem(1px),\n bootstrap: rem(1px),\n indigo-design: rem(2px)\n ), $variant);\n\n $separator-size: map.get((\n material: rem(1px),\n fluent: rem(1px),\n bootstrap: rem(8px),\n indigo-design: rem(2px)\n ), $variant);\n\n $separator-title-top: calc(100% - ((#{$indicator-size} / 2) + #{$step-header-padding} + (#{$separator-size} / 2)));\n $separator-title-bottom: calc((#{$indicator-size} / 2) + #{$step-header-padding} - (#{$separator-size} / 2));\n\n %stepper-display,\n %igx-stepper__header,\n %igx-stepper__body,\n %igx-stepper__step {\n display: flex;\n }\n\n %stepper-display {\n flex-direction: column;\n width: 100%;\n }\n\n %igx-stepper__header {\n white-space: nowrap;\n flex-direction: column;\n width: 100%;\n }\n\n %igx-stepper__body {\n position: relative\n }\n\n %stepper-display,\n %igx-stepper__body,\n %igx-stepper__step-header,\n %igx-stepper__step-title-wrapper {\n overflow: hidden;\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'subtitle-color');\n }\n\n %igx-stepper__step {\n position: relative;\n flex-direction: column;\n align-content: center;\n justify-content: center;\n min-width: rem(100px);\n\n &:focus {\n outline: none;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'subtitle-focus-color');\n }\n\n %igx-stepper__step-header {\n background: var-get($theme, 'step-focus-background');\n color: var-get($theme, 'title-focus-color');\n\n @if $variant == 'bootstrap' {\n box-shadow: inset 0 0 0 $outline-width var-get($theme, 'indicator-outline');\n }\n }\n\n %igx-stepper__step-header--current {\n background: var-get($theme, 'current-step-focus-background') !important;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-focus-color');\n }\n }\n\n %igx-stepper__step-header--invalid {\n background: var-get($theme, 'invalid-step-focus-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-focus-color');\n }\n }\n }\n\n &:first-of-type {\n %igx-stepper__step-header {\n &::before {\n visibility: hidden;\n }\n }\n }\n\n &:last-of-type {\n %igx-stepper__step-content-wrapper {\n &::before {\n display: none;\n }\n }\n\n %igx-stepper__step-header {\n &::after {\n visibility: hidden;\n }\n }\n }\n }\n\n %igx-stepper__step-header {\n display: flex;\n padding: $step-header-padding;\n position: relative;\n line-height: normal;\n flex-direction: column;\n align-items: flex-start;\n gap: $title-gap;\n cursor: pointer;\n background: var-get($theme, 'step-background');\n border-radius: var-get($theme, 'border-radius-step-header');\n\n &:hover {\n background: var-get($theme, 'step-hover-background');\n color: var-get($theme, 'title-hover-color');\n }\n\n @if $variant != material {\n .igx-ripple__inner {\n display: none;\n }\n }\n }\n\n %igx-stepper__step-indicator {\n display: flex;\n align-items: center;\n justify-content: center;\n position: relative;\n font-size: rem(12px);\n height: $indicator-size;\n width: $indicator-size;\n white-space: nowrap;\n border-radius: var-get($theme, 'border-radius-indicator');\n color: var-get($theme, 'indicator-color');\n background: var-get($theme, 'indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'indicator-outline');\n\n @if $variant != 'bootstrap' {\n > igx-icon {\n width: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n height: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n font-size: var(--igx-icon-size, #{calc(#{$indicator-size} - #{rem(6px)})});\n color: inherit;\n }\n } @else if $variant == 'bootstrap' {\n > igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n div > igx-icon,\n div > igx-avatar,\n div > igx-circular-bar {\n max-height: $indicator-size;\n max-width: $indicator-size;\n }\n }\n\n %igx-stepper__step-header--current {\n background: var-get($theme, 'current-step-background') !important;\n color: var-get($theme, 'current-title-color');\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'current-indicator-color') !important;\n background: var-get($theme, 'current-indicator-background') !important;\n box-shadow: 0 0 0 $outline-width var-get($theme, 'current-indicator-outline') !important;\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-color');\n }\n\n &:hover {\n background: var-get($theme, 'current-step-hover-background') !important;\n\n %igx-stepper__step-title {\n color: var-get($theme, 'current-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'current-subtitle-hover-color');\n }\n }\n }\n\n %igx-stepper__step--disabled {\n color: var-get($theme, 'disabled-title-color');\n pointer-events: none;\n cursor: default;\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'disabled-indicator-color');\n background: var-get($theme, 'disabled-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'disabled-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'disabled-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'disabled-subtitle-color');\n }\n }\n\n %igx-stepper__step-header--invalid {\n background: var-get($theme, 'invalid-step-background');\n color: var-get($theme, 'invalid-title-color');\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'invalid-indicator-color');\n background: var-get($theme, 'invalid-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'invalid-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-color');\n }\n\n &:hover {\n background: var-get($theme, 'invalid-step-hover-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'invalid-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'invalid-subtitle-hover-color');\n }\n }\n }\n\n %igx-stepper__body-content {\n display: block;\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: -1;\n }\n\n %igx-stepper__step-content-wrapper,\n %igx-stepper__body-content {\n padding: $step-body-padding;\n }\n\n %igx-stepper__body-content--active {\n z-index: 1;\n position: relative;\n }\n\n %igx-stepper__step-content-wrapper {\n margin-inline-start: $v-line-indent;\n position: relative;\n min-height: rem(32px);\n\n &::before {\n content: '';\n position: absolute;\n inset-inline-start: calc(-#{$separator-size} / 2);\n top: calc(-#{$step-header-padding} + #{$title-gap});\n bottom: calc(-#{$step-header-padding} + #{$title-gap});\n width: $separator-size;\n border-inline-start: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n }\n\n %igx-stepper__step-title-wrapper {\n white-space: nowrap;\n text-overflow: ellipsis;\n min-width: rem(32px);\n\n &:empty {\n display: none;\n }\n\n > * {\n display: block;\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow: hidden;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--end {\n %igx-stepper__step-header {\n flex-direction: row;\n align-items: center;\n //gap: $title-gap--horizontal;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--top {\n %igx-stepper__step-title-wrapper {\n order: -1;\n }\n }\n\n %igx-stepper__step--completed {\n\n %igx-stepper__step-header {\n background: var-get($theme, 'complete-step-background');\n\n &:hover {\n background: var-get($theme, 'complete-step-hover-background');\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-hover-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-hover-color');\n }\n }\n\n &::after {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n }\n\n %igx-stepper__step-indicator {\n color: var-get($theme, 'complete-indicator-color');\n background: var-get($theme, 'complete-indicator-background');\n box-shadow: 0 0 0 $outline-width var-get($theme, 'complete-indicator-outline');\n }\n\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-color');\n }\n\n &:focus {\n %igx-stepper__step-header {\n background: var-get($theme, 'complete-step-focus-background');\n\n %igx-stepper__step-title {\n color: var-get($theme, 'complete-title-focus-color');\n }\n\n %igx-stepper__step-subtitle {\n color: var-get($theme, 'complete-subtitle-focus-color');\n }\n }\n }\n\n %igx-stepper__step-content-wrapper {\n &::before {\n border-inline-start-style: unquote(var-get($theme, 'complete-step-separator-style'));\n border-inline-start-color: var-get($theme, 'complete-step-separator-color');\n }\n }\n }\n\n %igx-stepper__step--completed + %igx-stepper__step {\n &::before {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n\n %igx-stepper__step-header {\n &::before {\n border-top-color: var-get($theme, 'complete-step-separator-color') !important;\n border-top-style: unquote(var-get($theme, 'complete-step-separator-style')) !important;\n }\n }\n }\n\n %igx-stepper__step--simple {\n %igx-stepper__step-indicator {\n min-width: $indicator-size;\n min-height: $indicator-size;\n width: initial;\n height: initial;\n\n div > igx-icon,\n div > igx-avatar,\n div > igx-circular-bar {\n max-width: initial;\n max-height: initial;\n }\n }\n }\n\n // HORIZONTAL MODE START\n %igx-stepper--horizontal {\n %igx-stepper__header {\n flex-direction: row;\n }\n\n %igx-stepper__step {\n overflow: hidden;\n flex-direction: row;\n flex-grow: 1;\n\n &::before {\n content: '';\n width: auto;\n min-width: rem(10px);\n height: $separator-size;\n flex: 1;\n position: relative;\n z-index: -1;\n top: $separator-title-bottom;\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n\n &:first-of-type {\n flex-grow: 0;\n min-width: 0;\n\n &::before {\n display: none;\n }\n }\n }\n\n %igx-stepper__step-header {\n display: flex;\n flex-direction: row;\n align-items: center;\n justify-content: center;\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n z-index: -1;\n height: $separator-size;\n width: calc(50% - (#{$indicator-size} - #{$indicator-gap}));\n top: $separator-title-bottom;\n flex: 1;\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n }\n\n &::before {\n inset-inline-start: 0;\n }\n\n &::after {\n inset-inline-end: 0;\n }\n }\n\n %igx-stepper__step--simple {\n text-align: center;\n\n %igx-stepper__step-header {\n align-self: center;\n padding: $step-header-padding-simple;\n height: auto;\n\n &::before,\n &::after {\n display: none;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n top: calc(50% - (#{$separator-size} / 2));\n }\n }\n }\n\n %igx-stepper__step-title-wrapper {\n width: 100%;\n }\n\n %igx-stepper__step--top {\n %igx-stepper__step-header {\n justify-content: flex-end;\n\n &::before,\n &::after {\n top: $separator-title-top;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n border-top: $separator-size unquote(var-get($theme, 'step-separator-style')) var-get($theme, 'step-separator-color');\n top: $separator-title-top;\n }\n }\n }\n\n %igx-stepper__step--bottom {\n %igx-stepper__step-header {\n justify-content: flex-start;\n }\n }\n\n %igx-stepper__step--top,\n %igx-stepper__step--bottom {\n %igx-stepper__step-title-wrapper {\n text-align: center;\n }\n\n %igx-stepper__step-header {\n flex-direction: column;\n }\n }\n\n %igx-stepper__step--start {\n %igx-stepper__step-title-wrapper {\n text-align: end;\n }\n }\n\n %igx-stepper__step--start,\n %igx-stepper__step--end {\n %igx-stepper__step-indicator {\n flex: 1 0 auto;\n }\n\n %igx-stepper__step-header {\n @if $variant != 'fluent' {\n padding: calc(#{$step-header-padding} / 2);\n }\n\n &::before,\n &::after {\n display: none;\n }\n }\n\n &%igx-stepper__step {\n &::before {\n top: calc(50% - (#{$separator-size} / 2));\n }\n }\n }\n\n %igx-stepper__step-content {\n &:focus {\n outline: none;\n }\n\n &::before {\n display: none;\n }\n }\n\n %igx-stepper__step-content-wrapper {\n text-align: center;\n }\n }\n // HORIZONTAL MODE END\n}\n\n/// Adds typography styles for the igx-stepper 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 [(title: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin stepper-typography(\n $type-scale,\n $categories: (\n title: 'body-2',\n subtitle: 'caption'\n )\n) {\n $title: map.get($categories, 'title');\n $subtitle: map.get($categories, 'subtitle');\n\n %igx-stepper__step-title {\n @include type-style($type-scale, $title) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-stepper__step-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-stepper__step-header--current {\n %igx-stepper__step-title {\n font-weight: 600;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../typography/base' as *;\n@use '../../themes/schemas' as *;\n@use '../ripple/ripple-theme' as *;\n@use '../ripple/ripple-component' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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-icon-color [null] - The color used for the tab icon.\n/// @param {Color} $item-active-icon-color [null] - The color used for the active tab icon.\n/// @param {Color} $item-hover-icon-color [null] - The color used for the tab icon on hover.\n/// @param {Color} $item-disabled-icon-color [null] - The color used for the disabled tab icon.\n///\n/// @param {Color} $item-active-color [null] - The color used for the active tabs text.\n/// @param {Color} $item-active-background [null] - The color used for the active/focused tab background.\n/// @param {Color} $item-disabled-color [null] - The color used for the disabled tabs text.\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-disabled-color [null] - The color used for the disabled button icon/text.\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 {border-radius} $border-radius [null] - The border radius for the tabs.\n/// @param {Color} $border-color [null] - The border color of the tabs.\n/// @param {Color} $border-color--hover [null] - The border color of the tabs 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///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires elevation\n/// @requires text-contrast\n///\n/// @example scss Set a custom background color\n/// $my-tabs-theme: tabs-theme(\n/// $item-background: orange\n/// );\n/// // Pass the theme to the tabs component mixin\n/// @include tabs($my-tabs-theme);\n@function tabs-theme(\n $palette: null,\n $schema: $light-schema,\n $item-text-color: null,\n $item-background: null,\n $item-hover-background: null,\n $item-hover-color: null,\n $item-icon-color: null,\n $item-active-icon-color: null,\n $item-hover-icon-color: null,\n $item-disabled-icon-color: null,\n $item-active-color: null,\n $item-active-background: null,\n $item-disabled-color: null,\n $indicator-color: null,\n $button-color: null,\n $button-background: null,\n $button-hover-background: null,\n $button-hover-color: null,\n $button-disabled-color: null,\n $tab-ripple-color: null,\n $button-ripple-color: null,\n $border-radius: null,\n $border-color: null,\n $border-color--hover: null,\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 $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'boostrap';\n\n @if not($item-text-color) and $item-background {\n @if meta.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 // 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 meta.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 meta.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 meta.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 // 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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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-icon-color: $item-icon-color,\n item-active-icon-color: $item-active-icon-color,\n item-hover-icon-color: $item-hover-icon-color,\n item-disabled-icon-color: $item-disabled-icon-color,\n item-active-color: $item-active-color,\n item-active-background: $item-active-background,\n item-disabled-color: $item-disabled-color,\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 button-disabled-color:$button-disabled-color,\n tab-ripple-color: $tab-ripple-color,\n button-ripple-color: $button-ripple-color,\n border-color: $border-color,\n border-radius: $border-radius,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires ripple-theme\n/// @requires {mixin} ripple\n/// @requires elevation\n/// @requires rem\n/// @requires var-get\n@mixin tabs($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-bootstrap-theme: $variant != 'bootstrap';\n $bootstrap-theme: $variant == 'bootstrap';\n $indigo-theme: $variant == 'indigo-design';\n\n $item-min-width: 90px;\n $item-max-width: 360px;\n\n $tabs-animation-function: cubic-bezier(.35, 0, .25, 1);\n\n $item-padding: rem(11px) rem(16px);\n\n $tabs-ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'tab-ripple-color')\n );\n $button-ripple-theme: ripple-theme(\n $schema: $light-schema,\n $color: var-get($theme, 'button-ripple-color')\n );\n\n $icon-space: (\n comfortable: rem(12px),\n cosy: rem(8px),\n compact: rem(4px)\n );\n\n %tabs-header,\n %tabs-header-button,\n %tabs-header-item-inner,\n %tabs-header-content {\n display: flex;\n }\n\n %tabs-display {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n %tabs-header {\n overflow: hidden;\n flex: 0 0 auto;\n background: var-get($theme, 'item-background');\n min-height: rem(42px);\n z-index: 1;\n }\n\n %tabs-header-content {\n flex: 1 1 auto;\n overflow: hidden;\n scroll-behavior: smooth;\n }\n\n %tabs-header-wrapper {\n position: relative;\n flex-grow: 1;\n\n @if $bootstrap-theme {\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 1px;\n background: var-get($theme, 'border-color');\n z-index: 0;\n }\n }\n }\n\n %tabs-header-scroll {\n display: flex;\n height: 100%;\n }\n\n %tabs-header-button {\n align-items: center;\n justify-content: center;\n z-index: 1;\n border: none;\n padding: 0;\n min-width: rem(48px);\n width: rem(48px);\n cursor: pointer;\n position: relative;\n background: var-get($theme, 'button-background');\n color: var-get($theme, 'button-color');\n outline: 0;\n\n &:hover {\n background: var-get($theme, 'button-hover-background');\n color: var-get($theme, 'button-hover-color');\n }\n\n &:focus {\n outline: 0;\n background: var-get($theme, 'button-hover-background');\n }\n\n &::-moz-focus-inner {\n // remove focus dotted border in firefox\n border: 0;\n }\n\n &:disabled {\n color: var-get($theme, 'button-disabled-color');\n }\n\n &--none {\n display: none;\n }\n\n\n @include ripple($button-ripple-theme);\n @include css-vars($button-ripple-theme);\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %tabs-header-item {\n > * {\n margin-inline-start: map.get($icon-space, 'comfortable');\n \n &:first-child {\n margin-inline-start: 0;\n }\n }\n display: inline-flex;\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 // 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 user-select: none;\n background: var-get($theme, 'item-background');\n color: var-get($theme, 'item-text-color');\n outline: 0;\n\n igx-icon { \n color: var-get($theme, 'item-icon-color');\n }\n\n @if $bootstrap-theme {\n border: 1px solid transparent;\n border-start-start-radius: var-get($theme, 'border-radius');\n border-start-end-radius: var-get($theme, 'border-radius');\n }\n\n @if $indigo-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n\n &::-moz-focus-inner {\n border: 0;\n }\n\n &:focus {\n background: var-get($theme, 'item-active-background');\n color: var-get($theme, 'item-hover-color');\n border-bottom-color: transparent;\n }\n\n &:hover {\n background: var-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-color');\n\n @if $bootstrap-theme {\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color--hover');\n }\n }\n\n &:hover,\n &:focus {\n igx-icon {\n color: var-get($theme, 'item-hover-icon-color');\n }\n }\n\n @if $bootstrap-theme {\n border-start-start-radius: border-radius(var-get($theme, 'border-radius'));\n border-start-end-radius: border-radius(var-get($theme, 'border-radius'));\n }\n\n @if $not-bootstrap-theme {\n transition: all .3s $tabs-animation-function;\n border: 1px solid var-get($theme, 'border-color');\n\n &:hover,\n &:focus {\n border: 1px solid var-get($theme, 'border-color--hover');\n }\n }\n\n @if $indigo-theme {\n border-top: transparent;\n border-inline: transparent;\n\n &:hover,\n &:focus {\n border-top: transparent;\n border-inline: transparent;\n }\n }\n\n @include ripple($tabs-ripple-theme);\n @include css-vars($tabs-ripple-theme);\n }\n\n %tabs-header-item--selected {\n outline: 0;\n color: var-get($theme, 'item-active-color');\n\n &:hover,\n &:focus {\n background: var-get($theme, 'item-active-background');\n color: var-get($theme, 'item-active-color');\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n }\n\n igx-icon {\n color: var-get($theme, 'item-active-icon-color');\n }\n\n @if $bootstrap-theme {\n background: var-get($theme, 'item-active-background');\n position: relative;\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');\n\n &::after {\n content: '';\n position: absolute;\n bottom: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 1px;\n background: var-get($theme, 'item-active-background');\n z-index: 1;\n }\n\n &:hover {\n box-shadow: inset 0 0 0 rem(1px) var-get($theme, 'border-color');\n }\n }\n }\n\n %tabs-header-item:focus,\n %tabs-header-item--selected:focus {\n @if $bootstrap-theme {\n border: none;\n box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'item-hover-color');\n border-radius: rem(4px);\n z-index: 1;\n\n &::after {\n display: none;\n }\n }\n }\n\n %tabs-header-item--disabled {\n outline: 0;\n color: var-get($theme, 'item-disabled-color');\n cursor: default;\n pointer-events: none;\n\n igx-icon {\n color: var-get($theme, 'item-disabled-icon-color');\n }\n }\n\n %tabs-header-item-inner {\n display: flex;\n align-items: center;\n justify-content: center;\n flex-direction: column;\n text-align: center;\n\n > [igxtabheaderlabel] {\n @include line-clamp(2, true, true);\n }\n\n > [igxtabheadericon] {\n margin-bottom: rem(8px);\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n }\n\n %tabs-header-active-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-get($theme, 'indicator-color');\n transition: transform .3s $tabs-animation-function, width .2s $tabs-animation-function;\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %tabs-panels {\n position: relative;\n overflow: hidden;\n display: flex;\n flex-direction: column;\n flex: 1 1 auto;\n }\n\n %tabs-panel {\n position: absolute;\n inset: 0;\n overflow-x: hidden;\n overflow-y: auto;\n flex: 1 1 auto;\n\n &::-moz-focus-inner {\n // remove focus dotted border in firefox\n border: 0;\n }\n\n &:focus {\n outline-width: 0;\n }\n\n &[tabindex='0'] {\n position: relative;\n }\n }\n\n %tabs-header-scroll--start {\n justify-content: flex-start;\n }\n\n %tabs-header-scroll--end {\n justify-content: flex-end;\n }\n\n %tabs-header-scroll--center {\n justify-content: center;\n }\n\n %tabs-header-scroll--justify {\n %tabs-header-item {\n flex-basis: 0;\n flex-grow: 1;\n max-width: 100%;\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} type-style\n@mixin tabs-typography($type-scale, $categories: (label: 'button')) {\n $label: map.get($categories, 'label');\n\n %tabs-header-item-inner > [igxtabheaderlabel]{\n @include type-style($type-scale, $label) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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} $disabled-text-color [null] - The text color for disabled values.\n/// @param {Color} $disabled-item-background [null] - The background color for disabled values .\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 elevation\n/// @requires extend\n///\n/// @example scss Change the background and text colors in time picker\n/// $my-time-picker-theme: time-picker-theme(\n/// $text-color: white,\n/// $background-color: black\n/// );\n/// // Pass the theme to the time-picker component mixin\n/// @include time-picker($my-time-picker-theme);\n@function time-picker-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $disabled-text-color: null,\n $disabled-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 $selector: '.igx-time-picker';\n\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 @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 meta.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 meta.type-of($background-color) == 'color' {\n $active-item-background: rgba(text-contrast($background-color), .12);\n }\n }\n\n @if not($disabled-text-color) and $disabled-item-background {\n @if meta.type-of($disabled-item-background) == 'color' {\n $disabled-text-color: rgba(text-contrast($disabled-item-background), .6);\n }\n }\n\n @if not($modal-shadow) {\n $elevation: map.get($time-picker-schema, 'modal-elevation');\n $modal-shadow: elevation($elevations, $elevation);\n }\n\n @if not($dropdown-shadow) {\n $elevation: map.get($time-picker-schema, 'dropdown-elevation');\n $dropdown-shadow: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($active-item-border-radius) {\n $active-item-border-radius: border-radius(map.get($theme, 'active-item-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 disabled-text-color: $disabled-text-color,\n disabled-item-background: $disabled-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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin time-picker($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $vertical-header-width: rem(168px);\n\n $picker-buttons-padding: map.get((\n material: rem(8px),\n fluent: rem(8px),\n bootstrap: rem(16px)\n ), $variant);\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-get($theme, 'border-radius');\n box-shadow: var-get($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-get($theme, 'background-color');\n flex: 1 1 auto;\n }\n\n %time-picker--dropdown {\n min-width: rem(200px);\n box-shadow: var-get($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: end;\n\n [dir='rtl'] & {\n order: 2;\n }\n }\n\n %time-picker__minuteList {\n text-align: center;\n\n [dir='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 [dir='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-get($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-get($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-get($theme, 'hover-text-color');\n }\n }\n\n %time-picker__item--selected {\n font-size: rem(24px);\n color: var-get($theme, 'selected-text-color');\n }\n\n %time-picker__item--active {\n background: var-get($theme, 'active-item-background');\n }\n\n %time-picker__item--disabled {\n color: var-get($theme, 'disabled-text-color');\n background: var-get($theme, 'disabled-item-background');\n pointer-events: none;\n }\n\n %time-picker__header {\n background: var-get($theme, 'header-background');\n padding: rem(24px) rem(16px);\n }\n\n %time-picker__header-ampm {\n color: var-get($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-get($theme, 'header-hour-text-color');\n\n [dir='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 @if $not-bootstrap-theme {\n height: rem(52px);\n }\n\n padding: $picker-buttons-padding;\n\n [igxButton] + [igxButton] {\n margin-inline-start: 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} type-style\n@mixin 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 type-style($type-scale, $time-period);\n }\n\n %time-picker__header-hour {\n @include type-style($type-scale, $header-hour) {\n margin-top: 0;\n }\n }\n\n %time-picker__column {\n @include type-style($type-scale, $content) {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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/// @param {box-shadow} $shadow [null] - Sets a shadow to be used for the toast.\n///\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires text-contrast\n/// @requires extend\n/// @requires elevation\n///\n/// @example scss Set a custom background color\n/// $my-toast-theme: toast-theme($background: green);\n/// // Pass the theme to the toast component mixin\n/// @include toast($my-toast-theme);\n@function toast-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background: null,\n $text-color: null,\n $shadow: 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 @if not($shadow) {\n $elevation: map.get($toast-schema, 'elevation');\n $shadow: elevation($elevation: $elevation);\n }\n\n @if not($text-color) and $background {\n $text-color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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 shadow: $shadow\n ));\n}\n\n/// Toast Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin toast($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $palette: map.get($theme, 'palette');\n $width: 52px;\n $margin: rem(42px) auto;\n\n $padding: map.get((\n 'material': rem(16px) rem(24px),\n 'fluent': rem(16px) rem(24px),\n 'bootstrap': rem(12px),\n 'indigo-design': rem(14px) rem(24px)\n ), $variant);\n\n $border: map.get((\n 'material': none,\n 'fluent': none,\n 'bootstrap': 1px solid color($palette, 'grays', 300),\n 'indigo-design': none\n ), $variant);\n\n %igx-toast-display {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n margin: $margin;\n padding: $padding;\n min-width: $width;\n color: var-get($theme, 'text-color');\n background: var-get($theme, 'background');\n border: $border;\n border-radius: var-get($theme, 'border-radius');\n box-shadow: map.get($theme, 'shadow');\n backdrop-filter: blur(10px);\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} type-style\n@mixin toast-typography($type-scale, $categories: (text: 'body-2')) {\n $text: map.get($categories, 'text');\n\n %igx-toast-display > *{\n @include type-style($type-scale, $text) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\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 [null] - 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///\n/// @example scss Change the tooltip background\n/// $my-tooltip-theme: tooltip-theme($background: magenta);\n/// // Pass the theme to the tooltip component mixin\n/// @include tooltip($my-checkbox-theme);\n@function tooltip-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background: null,\n $text-color: null\n) {\n $name: 'igx-tooltip';\n $selector: '.igx-tooltip--desktop, .igx-tooptip--mobile';\n\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 @if not($text-color) and $background {\n $text-color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $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} css-vars\n/// @requires var-get\n@mixin tooltip($theme) {\n @include css-vars($theme);\n\n %tooltip-display {\n display: inline-flex;\n justify-content: center;\n flex-flow: column wrap;\n background: var-get($theme, 'background');\n color: var-get($theme, 'text-color');\n border-radius: var-get($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} type-style\n@mixin 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 type-style($type-scale, $text-mobile);\n }\n\n @if $text-desktop != null {\n %tooltip--desktop {\n @include 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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n\n////\n/// @group themes\n/// @access public\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 of the tree component.\n/// @param {Map} $palette [null] - 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} background [null] - The background color used for the tree node.\n/// @param {Color} foreground [null] - The color used for the tree node content.\n/// @param {Color} background-selected [null] - The background color used for the selected tree node.\n/// @param {Color} foreground-selected [null] - The color used for the content of the selected tree node.\n/// @param {Color} background-active [null] - The background color used for the active tree node.\n/// @param {Color} foreground-active [null] - The color used for the content of the active tree node.\n/// @param {Color} background-active-selected [null] - The background color used for the active selected tree node.\n/// @param {Color} foreground-active-selected [null] - The color used for the content of the active selected tree node.\n/// @param {Color} background-disabled [null] - The background color used for the tree node in disabled state.\n/// @param {Color} foreground-disabled [null] - The color used for the content of the disabled tree node.\n/// @param {Color} drop-area-color [null] - The background color used for the tree node drop aria.\n/// @param {Color} border-color [null] - The outline shadow color used for tree node in focus state.\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @example scss Change the tree background\n/// $my-tree-theme: tree-theme($background: magenta);\n/// // Pass the theme to the tree component mixin\n/// @include tree($my-tree-theme);\n@function tree-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null,\n $background-selected: null,\n $background-active: null,\n $background-active-selected: null,\n $background-disabled: null,\n $foreground: null,\n $foreground-selected: null,\n $foreground-active: null,\n $foreground-active-selected: null,\n $foreground-disabled: null,\n $drop-area-color: null,\n $border-color: null,\n) {\n $name: 'igx-tree';\n $tree-schema: ();\n\n @if map.has-key($schema, $name) {\n $tree-schema: map.get($schema, $name);\n } @else {\n $tree-schema: $schema;\n }\n\n $theme: apply-palette($tree-schema, $palette);\n\n @if not($foreground) and $background {\n $foreground: text-contrast($background);\n }\n\n @if not($foreground-selected) and $background-selected {\n $foreground-selected: text-contrast($background-selected);\n }\n\n @if not($foreground-active) and $background-active {\n $foreground-active: text-contrast($background-active);\n }\n\n @if not($foreground-active-selected) and $background-active-selected {\n $foreground-active-selected: text-contrast($background-active-selected);\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n foreground: $foreground,\n background-selected: $background-selected,\n foreground-selected: $foreground-selected,\n background-active: $background-active,\n foreground-active: $foreground-active,\n background-active-selected: $background-active-selected,\n foreground-active-selected: $foreground-active-selected,\n background-disabled: $background-disabled,\n foreground-disabled: $foreground-disabled,\n drop-area-color: $drop-area-color,\n border-color: $border-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin tree($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $indigo-theme: $variant == 'indigo-design';\n\n $node-indent: (\n comfortable: rem(24px),\n cosy: rem(16px),\n compact: rem(12px)\n );\n\n $node-height: (\n comfortable: rem(50px),\n cosy: rem(40px),\n compact: rem(32px)\n );\n\n $icon-size: rem(24px);\n $icon-space: rem(8px);\n\n $drop-indicator-width: (\n comfortable: calc(100% - ((#{map.get($node-indent, 'comfortable')} * 2) + (#{$icon-size} + #{$icon-space}))),\n cosy: calc(100% - ((#{map.get($node-indent, 'cosy')} * 2) + (#{$icon-size} + #{$icon-space}))),\n compact: calc(100% - ((#{map.get($node-indent, 'compact')} * 2) + (#{$icon-size} + #{$icon-space})))\n );\n\n %tree-display {\n display: block;\n z-index: 0;\n overflow-y: auto;\n }\n\n %tree-node,\n %node-wrapper,\n %node-toggle-button,\n %node-content,\n %node-select {\n display: flex;\n }\n\n %tree-node {\n flex-direction: column;\n }\n\n %node-wrapper,\n %node-toggle-button,\n %node-select {\n align-items: center;\n }\n\n %node-toggle-button,\n %node-select {\n margin-inline-end: $icon-space;\n }\n\n %node-content,\n %node-toggle-button,\n %node-select {\n z-index: 1;\n }\n\n %node-toggle-button--hidden {\n visibility: hidden;\n }\n\n %node-wrapper {\n min-height: map.get($node-height, 'comfortable');\n padding: 0 map.get($node-indent, 'comfortable');\n position: relative;\n background: var-get($theme, 'background');\n color: var-get($theme, 'foreground');\n\n // We need this here, since we count on it to calculate the width of the tree drop indicator\n igx-icon {\n width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 100%;\n height: 100%;\n background: transparent;\n z-index: 0;\n }\n\n &:hover {\n &::after {\n background: var-get($theme, 'hover-color');\n }\n }\n\n &:focus {\n outline-width: 0;\n }\n\n igx-circular-bar {\n width: $icon-size;\n height: $icon-size;\n }\n\n &--cosy {\n min-height: map.get($node-height, 'cosy');\n padding: 0 map.get($node-indent, 'cosy');\n\n %node-spacer {\n width: map.get($node-indent, 'cosy')\n }\n\n %node-drop-indicator {\n inset-inline-end: map.get($node-indent, 'cosy');\n width: map.get($drop-indicator-width, 'cosy');\n }\n\n igx-circular-bar {\n width: calc(#{$icon-size} - 4px);\n height: calc(#{$icon-size} - 4px);\n }\n }\n\n &--compact {\n min-height: map.get($node-height, 'compact');\n padding: 0 map.get($node-indent, 'compact');\n\n %node-spacer {\n width: map.get($node-indent, 'compact')\n }\n\n %node-drop-indicator {\n inset-inline-end: map.get($node-indent, 'compact');\n width: map.get($drop-indicator-width, 'compact');\n }\n\n igx-circular-bar {\n width: calc(#{$icon-size} - 6px);\n height: calc(#{$icon-size} - 6px);\n }\n }\n }\n\n %node-wrapper--selected {\n background: var-get($theme, 'background-selected');\n color: var-get($theme, 'foreground-selected');\n }\n\n %node-wrapper--active {\n background: var-get($theme, 'background-active');\n color: var-get($theme, 'foreground-active');\n }\n\n %indigo-opacity {\n $bg-active: map.get($theme, 'background-active');\n\n @if ($indigo-theme) {\n @if meta.type-of($bg-active) == 'color' and lightness($bg-active) < 50 {\n opacity: .8;\n } @else {\n opacity: .3;\n }\n }\n }\n\n %node-wrapper--active-selected {\n background: var-get($theme, 'background-active-selected');\n color: var-get($theme, 'foreground-active-selected');\n }\n\n %node-wrapper--focused {\n box-shadow: inset 0 0 0 1px var-get($theme, 'border-color');\n }\n\n %node-wrapper--disabled {\n background: var-get($theme, 'background-disabled') !important;\n color: var-get($theme, 'foreground-disabled') !important;\n\n box-shadow: none !important;\n\n pointer-events: none;\n\n &::after {\n display: none;\n }\n\n %node-toggle-button {\n color: var-get($theme, 'foreground-disabled') !important;\n }\n }\n\n %node-spacer {\n display: inline-block;\n width: map.get($node-indent, 'comfortable');\n }\n\n %node-content {\n display: block;\n align-items: center;\n flex: 1;\n @include ellipsis();\n }\n\n %node-toggle-button {\n justify-content: center;\n cursor: pointer;\n user-select: none;\n min-width: $icon-size\n }\n\n %node-drop-indicator {\n display: flex;\n visibility: hidden;\n position: absolute;\n inset-inline-end: map.get($node-indent, 'comfortable');\n bottom: 0;\n width: map.get($drop-indicator-width, 'comfortable');\n\n > div {\n flex: 1;\n height: rem(1px);\n background: var-get($theme, 'drop-area-color');\n }\n }\n\n %node-group {\n overflow: hidden;\n }\n}\n\n/// Adds typography styles for the igx-tree 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} type-style\n@mixin tree-typography(\n $type-scale,\n $categories: (label: 'body-2')\n) {\n $text: map.get($categories, 'label');\n\n %node-content {\n @include type-style($type-scale, $text)\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:math';\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 [null] - 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} $picker-background-color [null] - The igx-calendar-picker background color.\n/// @param {Color} $border-color [null] - The calendar border 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 previous and next month dates.\n/// @param {Color} $label-color [null] - The text color for weekday labels.\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///\n/// @param {Color} $month-current-text-color [null]- The text color for the current/selected month.\n/// @param {Color} $month-hover-current-text-color [null]- The text color for the current/selected month on hover.\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/// @param {border-radius} $month-border-radius [null] - The border radius used for the outline outline of the month.\n///\n/// @param {Color} $year-hover-text-color [null] - The year hover text color.\n///\n/// @param {Color} $date-selected-background [null] - The background color for the selected date.\n/// @param {Color} $date-selected-hover-background [null] - The hover background color for the selected date.\n/// @param {Color} $date-selected-focus-background [null] - The focus background color for the selected date.\n/// @param {Color} $date-selected-text-color [null] - The text color for the selected date.\n/// @param {Color} $date-selected-hover-foreground [null] - The hover text color for the selected date.\n/// @param {Color} $date-selected-focus-foreground [null] - The focus text color for the selected date.\n///\n/// @param {Color} $date-hover-background [null] - The hover date background color.\n/// @param {Color} $date-focus-background [null] - The focus date background color.\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-current-hover-background [null] - The hover background color for the current date.\n/// @param {Color} $date-current-focus-background [null] - The focus background color for the current date.\n/// @param {Color} $date-current-hover-foreground [null] - The hover text color for the current date.\n/// @param {Color} $date-current-focus-foreground [null] - The focus text color for the current date.\n/// @param {Color} $date-selected-current-background [null] - The background color for the selected/current date.\n/// @param {Color} $date-selected-current-hover-background [null] - The hover background color for the selected/current date.\n/// @param {Color} $date-selected-current-focus-background [null] - The focus background color for the selected/current date.\n/// @param {Color} $date-selected-current-foreground [null] - The text color for the selected/current date.\n/// @param {Color} $date-selected-current-hover-foreground [null] - The hover text color for the selected/current date.\n/// @param {Color} $date-selected-current-focus-foreground [null] - The focus text color for the selected/current date.\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///\n/// @param {Color} $week-number-color [null] - The text color of the week number column.\n/// @param {Color} $week-number-background [null] - The background color of the week number column.\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 header and content background colors\n/// $my-calendar-theme: calendar-theme(\n/// $header-background: purple,\n/// $content-background: black\n/// );\n/// // Pass the theme to the calendar component mixin\n/// @include calendar($my-calendar-theme);\n@function calendar-theme(\n $palette: null,\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-current-text-color: null,\n $month-hover-background: null,\n\n $date-selected-background: null,\n $date-selected-hover-background: null,\n $date-selected-focus-background: null,\n $date-selected-text-color: null,\n $date-selected-hover-foreground: null,\n $date-selected-focus-foreground: null,\n\n $date-current-bg-color: null,\n $date-current-text-color: null,\n $date-current-hover-foreground: null,\n $date-current-focus-foreground: null,\n $date-current-hover-background: null,\n $date-current-focus-background: null,\n $date-selected-current-background: null,\n $date-selected-current-foreground: null,\n $date-selected-current-hover-background: null,\n $date-selected-current-hover-foreground: null,\n $date-selected-current-focus-background: null,\n $date-selected-current-focus-foreground: null,\n\n $date-hover-background: null,\n $date-focus-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 $border-color: null,\n $border-width: null,\n $picker-background-color: null,\n $label-color: null,\n $week-number-color: null,\n $week-number-background: null,\n) {\n $name: 'igx-calendar';\n $selector: 'igx-calendar, igx-days-view, igx-months-view, igx-years-view';\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 $variant: map.get($theme, variant);\n $not-bootstrap-theme: $variant != 'bootstrap';\n $bootstrap-theme: $variant == 'bootstrap';\n\n @if not($content-text-color) and $content-background {\n @if meta.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 meta.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 meta.type-of($content-background) == 'color' {\n $inactive-text-color: rgba($content-text-color, .5);\n }\n }\n\n @if not($label-color) and $content-background {\n @if meta.type-of($content-background) == 'color' {\n $label-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 meta.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($date-selected-text-color) and $date-selected-background {\n $date-selected-text-color: text-contrast($date-selected-background);\n }\n\n @if not($date-selected-hover-foreground) and $date-selected-hover-background {\n $date-selected-hover-foreground: text-contrast($date-selected-hover-background);\n }\n\n @if not($date-selected-focus-foreground) and $date-selected-focus-background {\n $date-selected-focus-foreground: text-contrast($date-selected-focus-background);\n }\n\n @if not($date-hover-background) and $content-background {\n @if meta.type-of($content-background) == 'color' {\n $date-hover-background: rgba(text-contrast($content-background), .12);\n }\n }\n\n @if $not-bootstrap-theme {\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-current-background) and $date-selected-background {\n $date-selected-current-background: $date-selected-background;\n }\n\n @if not($date-selected-current-hover-background) and $date-selected-hover-background {\n $date-selected-current-hover-background: $date-selected-hover-background;\n }\n\n @if not($date-selected-current-focus-background) and $date-selected-focus-background {\n $date-selected-current-focus-background: $date-selected-focus-background;\n }\n\n @if not($date-selected-text-color) and $header-background {\n $date-selected-text-color: text-contrast($header-background);\n }\n\n @if not($date-current-text-color) and $header-background {\n $date-current-text-color: $header-background;\n }\n\n @if not($date-current-hover-foreground) {\n $date-current-hover-foreground: $date-current-text-color;\n }\n\n @if not($date-current-focus-foreground) {\n $date-current-focus-foreground: $date-current-text-color;\n }\n\n @if not($year-hover-text-color) and $header-background {\n $year-hover-text-color: $header-background;\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\n @if not($date-special-background) and $content-background {\n @if meta.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($month-hover-text-color) and $month-hover-background {\n @if meta.type-of($month-hover-background) == 'color' {\n $month-hover-text-color: text-contrast($month-hover-background);\n }\n }\n\n @if not($month-hover-current-text-color) and $month-hover-background {\n @if meta.type-of($month-hover-background) == 'color' {\n $month-hover-current-text-color: text-contrast($month-hover-background);\n }\n }\n\n @if not($date-disabled-text-color) and $date-disabled-background {\n @if meta.type-of($date-disabled-background) == 'color' {\n $date-disabled-color: rgba(text-contrast($date-disabled-background), .38);\n }\n }\n\n @if not($week-number-color) and $week-number-background {\n $week-number-color: text-contrast($week-number-background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($month-border-radius) {\n $month-border-radius: border-radius(map.get($theme, 'month-border-radius'));\n }\n\n @if not($date-border-radius) {\n $date-border-radius: border-radius(map.get($theme, 'date-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 border-color: $border-color,\n picker-background-color: $picker-background-color,\n border-width: $border-width,\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 label-color: $label-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-current-text-color: $month-hover-current-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-selected-hover-background: $date-selected-hover-background,\n date-selected-focus-background: $date-selected-focus-background,\n date-selected-hover-foreground: $date-selected-hover-foreground,\n date-selected-focus-foreground: $date-selected-focus-foreground,\n\n date-current-bg-color: $date-current-bg-color,\n date-current-text-color: $date-current-text-color,\n\n date-current-hover-background: $date-current-hover-background,\n date-current-focus-background: $date-current-focus-background,\n date-current-hover-foreground: $date-current-hover-foreground,\n date-current-focus-foreground: $date-current-focus-foreground,\n\n date-selected-current-background: $date-selected-current-background,\n date-selected-current-hover-background: $date-selected-current-hover-background,\n date-selected-current-focus-background: $date-selected-current-focus-background,\n date-selected-current-foreground: $date-selected-current-foreground,\n date-selected-current-hover-foreground: $date-selected-current-hover-foreground,\n date-selected-current-focus-foreground: $date-selected-current-focus-foreground,\n\n date-hover-background: $date-hover-background,\n date-focus-background: $date-focus-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 week-number-color: $week-number-color,\n week-number-background: $week-number-background,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {function} text-contrast\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires rem\n/// @requires {mixin} ellipsis\n/// @requires var-get\n@mixin calendar($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\n $cal-header-year-margin: 0;\n $cal-header-date-margin: 0;\n $cal-header-padding: em(16px);\n\n $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $cal-picker-padding: map.get((\n material: em(16px),\n fluent: em(16px),\n bootstrap: em(8px),\n indigo-design: em(16px),\n ), $variant);\n\n $cal-value-w: map.get((\n material: em(40px),\n fluent: em(40px),\n bootstrap: em(32px),\n indigo-design: em(40px),\n ), $variant);\n\n $border-width: map.get((\n material: 0,\n fluent: 0,\n bootstrap: 1px,\n indigo-design: 0\n ), $variant);\n\n $border-radius: map.get((\n material: 4px,\n fluent: 0,\n bootstrap: 0,\n indigo-design: 8px\n ), $variant);\n\n $cal-value-h: $cal-value-w;\n $cal-value-br: math.div($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: rem(8px);\n $cal-row-margin: rem(2px) 0;\n\n %cal-display {\n display: flex;\n flex-flow: column nowrap;\n width: 100%;\n min-width: 290px;\n background: var-get($theme, 'content-background');\n outline: none;\n border-radius: var-get($theme, 'border-radius');\n overflow: hidden;\n border: $border-width solid var-get($theme, 'border-color');\n\n %cal-display {\n\n @if $bootstrap-theme {\n border: none;\n border-radius: 0;\n }\n }\n }\n\n igx-calendar-container {\n @if $bootstrap-theme {\n %cal-display {\n border: 0;\n border-radius: 0;\n }\n\n margin-bottom: 0;\n\n %cal-picker-display {\n padding-bottom: 0;\n }\n\n %cal-row-display {\n &:first-of-type {\n padding-top: 0;\n padding-bottom: math.div($cal-picker-padding, 2);\n }\n }\n\n %cal-picker-arrow {\n top: $cal-picker-padding;\n }\n }\n }\n\n igx-month-picker {\n %cal-picker-display {\n @if $bootstrap-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n }\n }\n\n %cal-display + %cal-display {\n margin-inline-start: 1rem;\n\n @if $bootstrap-theme {\n margin: 0;\n }\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-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n padding: $cal-header-padding;\n\n @if $bootstrap-theme {\n display: none;\n }\n }\n\n %cal-header-year {\n margin: $cal-header-year-margin;\n color: currentColor;\n opacity: .8;\n\n @if $variant == 'indigo-design' {\n opacity: 1;\n }\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 align-items: center;\n padding-bottom: $cal-picker-padding;\n background: var-get($theme, 'picker-background-color');\n\n @if $bootstrap-theme {\n height: auto;\n padding-top: $cal-picker-padding;\n }\n position: relative;\n\n div {\n text-align: center;\n }\n\n &:focus {\n outline: none;\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-get($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 @if $bootstrap-theme {\n top: math.div($cal-picker-padding, 2);\n }\n\n &:focus,\n &:hover {\n color: var-get($theme, 'picker-arrow-hover-color');\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %cal-picker-arrow__prev {\n inset-inline-start: 0;\n }\n\n %cal-picker-arrow__next {\n inset-inline-end: 0;\n }\n\n %cal-picker-date {\n color: var-get($theme, 'picker-text-color');\n text-align: center;\n outline: none;\n padding: 0 rem(2px);\n\n &:hover,\n &:focus {\n color: var-get($theme, 'picker-text-hover-color');\n cursor: pointer;\n }\n }\n\n %cal-body-display {\n flex: 1 1 auto;\n @if $not-bootstrap-theme {\n padding-top: $cal-picker-padding;\n }\n padding-bottom: $cal-picker-padding;\n\n overflow: hidden;\n }\n\n igx-years-view,\n igx-month-picker,\n igx-months-view {\n %cal-body-display {\n @if $bootstrap-theme {\n padding-bottom: 0;\n }\n }\n }\n\n %cal-value {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n color: var-get($theme, 'content-text-color');\n outline: none;\n\n &:first-of-type {\n padding-inline-start: $cal-row-padding;\n }\n\n &:last-of-type {\n padding-inline-end: $cal-row-padding;\n }\n\n // 100 divided by the number of weekdays\n min-width: 14.28%;\n\n // Quantity Query selector\n // 8 comes from the number of columns in the calendar\n &:nth-last-child(8):first-child,\n &:nth-last-child(8):first-child ~ * {\n // 100 divided by the number of weekdays + weeks number column\n min-width: 12.5% !important;\n }\n }\n\n %cal-row-display {\n display: flex;\n justify-content: space-between;\n margin: $cal-row-margin;\n padding: 0;\n\n &:first-of-type {\n @if $bootstrap-theme {\n margin-top: 0;\n background: var-get($theme, 'picker-background-color');\n border-bottom: 1px solid var-get($theme, 'border-color');\n padding-bottom: $cal-picker-padding;\n padding-top: $cal-picker-padding;\n }\n\n @if $not-bootstrap-theme{\n margin-bottom: 0;\n }\n }\n\n &:nth-child(2) {\n @if $not-bootstrap-theme {\n margin-top: 0;\n }\n }\n\n &:last-of-type {\n %cal-value-content--week-number {\n border-bottom-left-radius: $border-radius;\n border-bottom-right-radius: $border-radius;\n\n &::before {\n display: none;\n }\n }\n\n @if $bootstrap-theme {\n margin-bottom: 0;\n }\n }\n }\n\n %cal-row-display--wrap {\n flex-wrap: wrap;\n\n &:first-of-type {\n @if $bootstrap-theme {\n background: transparent;\n margin-bottom: 0;\n border-bottom: 0;\n padding: 0;\n }\n }\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 padding: 0;\n margin: 0;\n\n %cal-value--year {\n flex: 1 0 0;\n }\n }\n\n %cal-value--focus,\n %cal-value--hover {\n @if $bootstrap-theme {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n\n %cal-value--hover {\n %cal-value-content::after {\n background: var-get($theme, 'date-hover-background');\n }\n }\n\n %cal-value--focus {\n %cal-value-content::after {\n background: var-get($theme, 'date-focus-background');\n }\n }\n\n %cal-value--selected--hover {\n %cal-value-content{\n color: var-get($theme, 'date-selected-hover-foreground');\n }\n\n %cal-value-content::after {\n background: var-get($theme, 'date-selected-hover-background');\n }\n }\n\n %cal-value--current {\n %cal-value-content {\n color: var-get($theme, 'date-current-text-color');\n font-weight: $cal-value-fw ;\n background: var-get($theme, 'date-current-bg-color');\n }\n }\n\n %cal-value--current--hover {\n %cal-value-content {\n color: var-get($theme, 'date-current-hover-foreground');\n background: var-get($theme, 'date-current-hover-background');\n\n &::after {\n background: var-get($theme, 'date-current-hover-background');\n }\n }\n }\n\n %cal-value--current--focus {\n %cal-value-content {\n color: var-get($theme, 'date-current-focus-foreground');\n background: var-get($theme, 'date-current-focus-background');\n\n &::after {\n background: var-get($theme, 'date-current-focus-background');\n }\n }\n }\n\n %cal-value--selected--current {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-foreground');\n background: var-get($theme, 'date-selected-current-background');\n\n @if $variant == 'indigo-design' {\n font-weight: 700;\n }\n }\n }\n\n %cal-value--selected--current--hover {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-hover-foreground');\n\n &::after {\n background: var-get($theme, 'date-selected-current-hover-background');\n }\n }\n }\n\n %cal-value--selected--current--focus {\n %cal-value-content {\n color: var-get($theme, 'date-selected-current-focus-foreground');\n\n &::after {\n background: var-get($theme, 'date-selected-current-focus-background');\n }\n }\n }\n\n %cal-value--selected--focus {\n %cal-value-content {\n color: var-get($theme, 'date-selected-focus-foreground');\n }\n\n %cal-value-content::after {\n background: var-get($theme, 'date-selected-focus-background');\n }\n }\n\n %cal-value-content {\n position: relative;\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: $cal-value-w;\n min-width: $cal-value-w;\n height: $cal-value-h;\n border-radius: var-get($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 inset-inline-start: 2px;\n border-radius: inherit;\n z-index: -1;\n }\n }\n\n %cal-value--label {\n @if $not-bootstrap-theme{\n height: $cal-value-h;\n }\n\n color: var-get($theme, 'label-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'label-color');\n }\n\n border-radius: 0;\n\n @if $bootstrap-theme {\n font-style: italic;\n cursor: default;\n }\n }\n\n %cal-value--weekend {\n color: var-get($theme, 'weekend-text-color');\n }\n\n %cal-value-date--week-number + %cal-value {\n padding-inline-start: 0 !important;\n }\n\n %label--week-number,\n %cal-value-content--week-number {\n position: relative;\n color: var-get($theme, 'week-number-color') !important;\n border-radius: 0;\n pointer-events: none;\n }\n\n %cal-value-date--week-number {\n padding-inline-end: 0 !important;\n cursor: default;\n\n &:hover,\n &:focus {\n %cal-value-content--week-number {\n color: var-get($theme, 'week-number-color') !important;\n }\n }\n }\n\n %cal-value-content--week-number {\n position: relative;\n background: var-get($theme, 'week-number-background') !important;\n min-width: auto;\n\n &::after {\n display: none;\n }\n\n &::before {\n content: '';\n position: absolute;\n width: 100%;\n height: math.div($cal-row-padding, 2);\n inset-inline-start: 0;\n top: 100%;\n background: var-get($theme, 'week-number-background') !important;\n }\n }\n\n %label--week-number {\n padding-inline-end: 0 !important;\n text-align: center;\n\n span {\n width: $cal-value-w;\n position: relative;\n background: var-get($theme, 'week-number-background');\n\n &::before,\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n background: var-get($theme, 'week-number-background');\n inset-inline-start: 0;\n }\n\n &::after {\n top: 100%;\n height: if($not-bootstrap-theme, math.div($cal-row-padding, 2) + rem(2px), $cal-row-padding + rem(5px));\n }\n\n &::before {\n bottom: 100%;\n height: $cal-row-padding;\n border-top-left-radius: $border-radius;\n border-top-right-radius: $border-radius;\n }\n }\n }\n\n %label--week-number + %cal-value--label {\n padding-inline-start: 0 !important;\n }\n\n %cal-value--year {\n margin: 0;\n min-width: 8ch;\n line-height: rem(52px);\n\n &:first-of-type {\n padding-inline-start: 0;\n }\n\n &:last-of-type {\n padding-inline-end: 0;\n }\n }\n\n %cal-value--year-current {\n color: var-get($theme, 'year-current-text-color');\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'year-hover-text-color');\n }\n }\n }\n\n %cal-value--year-hover {\n color: var-get($theme, 'year-hover-text-color');\n }\n\n %cal-value--month-hover {\n color: var-get($theme, 'month-hover-text-color');\n outline-width: 0;\n\n &::after {\n background: var-get($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 inset-inline-start: 0;\n inset-inline-end: 0;\n transform: translateY(-50%);\n height: 48px;\n background: transparent;\n border-radius: var-get($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-get($theme, 'month-current-text-color');\n }\n\n %cal-value--month-current-hover {\n color: var-get($theme, 'month-hover-current-text-color');\n }\n\n %cal-value--inactive {\n cursor: pointer;\n color: var-get($theme, 'inactive-text-color');\n }\n\n %cal-value--inactive--single--hover {\n @if $bootstrap-theme {\n color: var-get($theme, 'date-selected-text-color');\n } @else {\n color: var-get($theme, 'inactive-text-color');\n }\n }\n\n %cal-value--special {\n %cal-value-content {\n background: var-get($theme, 'date-special-background');\n @if $not-bootstrap-theme {\n color: var-get($theme, 'date-special-text-color');\n }\n font-weight: 900;\n }\n }\n\n %cal-value--selected {\n position: relative;\n background: var-get($theme, 'date-selected-background');\n\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n background: var-get($theme, 'date-selected-background') ;\n }\n }\n\n %cal-value--disabled {\n pointer-events: none;\n cursor: not-allowed;\n color: var-get($theme, 'date-disabled-text-color');\n }\n\n %cal-value--single {\n background: transparent;\n\n &::before,\n &::after {\n background: transparent;\n }\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--disabled-range {\n background: var-get($theme, 'date-disabled-background') !important;\n\n %cal-value-content {\n color: var-get($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 %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n }\n\n &:focus,\n &:hover {\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--range%cal-value--inactive%cal-value--selected%cal-value--single {\n %cal-value-content {\n color: var-get($theme, 'date-selected-text-color');\n background: var-get($theme, 'date-selected-background') !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 inset-inline-start: 50%;\n bottom: 0;\n background: var-get($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 inset-inline-end: 50%;\n bottom: 0;\n background: var-get($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 %calendar__aria-off-screen {\n position: absolute!important;\n border: none!important;\n height: 1px!important;\n width: 1px!important;\n inset-inline-start: 0!important;\n top: 0!important;\n overflow: hidden!important;\n padding: 0!important;\n margin: 0 !important;\n user-select: none;\n pointer-events: none;\n\n &:focus {\n outline: none;\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} type-style\n@mixin calendar-typography($type-scale, $categories: (\n header-year: 'overline',\n header-date: 'h4',\n weekday-label: 'body-1',\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 $weekday-label: map.get($categories, 'weekday-label');\n $picker-date: map.get($categories, 'picker-date');\n $content: map.get($categories, 'content');\n\n %cal-header-year {\n @include type-style($type-scale, $header-year) {\n margin: 0;\n }\n }\n\n %cal-header-date {\n @include type-style($type-scale, $header-date) {\n margin: 0;\n }\n }\n\n %cal-picker-date {\n @include type-style($type-scale, $picker-date) {\n margin: 0;\n }\n }\n\n %cal-value-content {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n }\n\n %cal-value--label {\n @include type-style($type-scale, $weekday-label);\n margin: 0;\n }\n\n %cal-value--year-current {\n @include type-style($type-scale, $content) {\n font-size: rem(24px);\n line-height: rem(52px);\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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} $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 elevation\n///\n/// @example scss Change the background and content text colors in card\n/// $my-card-theme: card-theme(\n/// $background: #fff,\n/// $content-text-color: rgba(0, 0, 0, .8)\n/// );\n/// // Pass the theme to the card component mixin\n/// @include card($my-card-theme);\n@function card-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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) {\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 @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 meta.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 meta.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 meta.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: elevation($elevations, $resting-elevation);\n }\n\n @if not($hover-shadow) {\n $hover-elevation: map.get($card-schema, 'hover-elevation');\n $hover-shadow: elevation($elevations, $hover-elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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 ));\n}\n\n/// Card Component\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin card($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, 'variant');\n $not-material-theme: $variant != 'material';\n\n $card-heading-padding: rem(16px);\n $card-heading-compact-padding: rem(16px, 16px);\n $card-content-padding: rem(14px);\n $card-actions-padding: rem(8px);\n\n $card-tgroup-margin: 0 em(16px);\n\n $card-transitions: box-shadow .3s cubic-bezier(.25, .8, .25, 1);\n\n %igx-card-display {\n display: flex;\n flex-direction: column;\n box-shadow: var-get($theme, 'resting-shadow');\n overflow: hidden;\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background');\n transition: $card-transitions;\n backface-visibility: hidden;\n\n @if $not-material-theme {\n border: 1px solid var-get($theme, 'outline-color');\n }\n\n &:hover {\n box-shadow: var-get($theme, 'hover-shadow');\n }\n }\n\n %igx-card--outlined {\n box-shadow: none;\n border: 1px solid var-get($theme, 'outline-color');\n\n &:hover {\n box-shadow: none;\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-get($theme, 'header-text-color');\n\n &:empty {\n display: block;\n padding: 0;\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-inline-end: 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-inline-end: 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-subtitle {\n color: var-get($theme, 'subtitle-text-color');\n }\n\n %igx-card-tgroup {\n margin: $card-tgroup-margin;\n }\n\n %igx-card-content {\n display: block;\n width: 100%;\n flex: 1 1 auto;\n padding: $card-content-padding;\n color: var-get($theme, 'content-text-color');\n }\n\n %igx-card-media {\n display: block;\n overflow: hidden;\n line-height: 0;\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-inline-start: 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-inline-start: rem(8px);\n }\n }\n\n %igx-card-actions--vertical {\n flex-direction: column;\n\n [dir='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-get($theme, 'actions-text-color');\n margin-inline-start: 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-inline-start: 0;\n margin-top: rem(8px);\n }\n }\n\n %igx-card-actions__icons--vertical {\n margin-top: auto;\n margin-inline-start: 0;\n }\n\n %igx-card-actions__icons--reverse {\n order: 0;\n margin-inline-start: 0;\n }\n\n %igx-card-actions__buttons--reverse {\n order: 1;\n margin-inline-start: 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-inline-start: 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-get($theme, 'actions-text-color');\n }\n }\n\n %igx-card-actions-igroup--start {\n margin-inline-end: auto;\n }\n\n %igx-card-actions-igroup--end {\n margin-inline-start: 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: 'h6', title-small: 'subtitle-2', subtitle: 'subtitle-2', content: 'body-2')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-card-header-title--small {\n @include type-style($type-scale, $title-small) {\n margin: 0;\n }\n }\n\n %igx-card-header-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin: 0;\n }\n }\n\n %igx-card-content > p {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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/// @param {Color} $border-color [null] - The border color 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 elevation\n///\n/// @example scss Change the background color\n/// $my-dialog-theme: dialog-theme($background: black);\n/// // Pass the theme to the igx-dialog component mixin\n/// @include dialog($my-dialog-theme);\n@function dialog-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $border-radius: null,\n $border-color: null,\n\n $background: null,\n $title-color: null,\n $message-color: null,\n $shadow: null,\n) {\n $name: 'igx-dialog';\n $selector: '.igx-dialog';\n\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 @if not($title-color) and $background{\n $title-color: text-contrast($background);\n }\n\n @if not($message-color) and $background{\n @if meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 border-color: $border-color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin dialog($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant); \n $bootstrap-theme: map.get($theme, variant) == 'bootstrap';\n\n $dialog-min-width: map.get((\n material: rem(280px),\n fluent: rem(288px),\n bootstrap: rem(288px),\n ), $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 bootstrap: rem(16px),\n indigo-design: rem(16px) rem(24px),\n ), $variant);\n\n $dialog-message-padding: map.get((\n material: rem(12px) rem(24px),\n fluent: 0 rem(24px) rem(20px) rem(24px),\n bootstrap: rem(16px),\n indigo-design: 0 rem(24px) rem(8px) rem(24px),\n ), $variant);\n\n $dialog-actions-padding: map.get((\n material: rem(8px),\n fluent: 0 rem(24px) rem(24px) rem(24px),\n bootstrap: rem(16px),\n indigo-design: rem(8px),\n ), $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: 1px solid var-get($theme, 'border-color');\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background');\n box-shadow: var-get($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 display: flex;\n color: var-get($theme, 'title-color');\n padding: $dialog-title-padding;\n\n @if $bootstrap-theme {\n border-bottom: 1px solid var-get($theme, 'border-color');\n }\n }\n\n %igx-dialog-content {\n color: var-get($theme, 'message-color');\n padding: $dialog-message-padding;\n // The 2 rules below are related to https://github.com/IgniteUI/igniteui-angular/issues/11300\n position: relative;\n z-index: 0;\n }\n\n %igx-dialog-message {\n display: inline-block;\n max-width: 40ch;\n\n @media all and (-ms-high-contrast: none)\n {\n max-width: map.get((\n material: 62ch,\n fluent: 48ch,\n bootstrap: 60ch,\n indigo-design: 48ch,\n ), $variant);\n }\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 @if $bootstrap-theme {\n border-top: 1px solid var-get($theme, 'border-color');\n }\n\n button + button {\n margin-inline-start: 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} type-style\n@mixin 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 type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-dialog-content {\n @include type-style($type-scale, $content) {\n margin: 0;\n }\n\n > * {\n letter-spacing: normal;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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 {Number} $border-width [null] - The border width used for drop-down component.\n/// @param {Color} $border-color [null] - The border color used for drop-down component.\n/// @param {Number} $border-radius [null] - The border radius used for drop-down component.\n/// @param {Number} $item-border-radius [null] - The border radius used for drop-down items.\n///\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires extend\n/// @requires text-contrast\n/// @requires elevation\n@function drop-down-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $border-radius: null,\n $item-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 $border-color: null,\n $border-width: null,\n $shadow: null\n) {\n $name: 'igx-drop-down';\n $selector: '.igx-drop-down__list, .igx-grid-toolbar__dd-list';\n\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 @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 meta.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 meta.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 @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 @if not($disabled-item-text-color) and $background-color {\n @if meta.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 meta.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 meta.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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n background-color: $background-color,\n border-radius: $border-radius,\n item-border-radius: $item-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 border-color: $border-color,\n border-width: $border-width\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin drop-down($theme) {\n @include 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: 0 rem(24px);\n $item-padding-cosy: 0 rem(20px);\n $item-padding-compact: 0 rem(16px);\n\n $prefix-margin-comfortable: rem(20px);\n $prefix-margin-cosy: rem(16px);\n $prefix-margin-compact: rem(12px);\n\n $suffix-margin-comfortable: rem(8px);\n $suffix-margin-cosy: rem(6px);\n $suffix-margin-compact: rem(4px);\n\n $item-padding: (\n comfortable: $item-padding-comfortable,\n cosy: $item-padding-cosy,\n compact: $item-padding-compact\n );\n\n $prefix-margin: (\n comfortable: $prefix-margin-comfortable,\n cosy: $prefix-margin-cosy,\n compact: $prefix-margin-compact\n );\n\n $suffix-margin: (\n comfortable: $suffix-margin-comfortable,\n cosy: $suffix-margin-cosy,\n compact: $suffix-margin-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 {\n position: absolute;\n }\n\n %igx-drop-down__list {\n overflow: hidden;\n border-radius: var-get($theme, 'border-radius');\n background: var-get($theme, 'background-color');\n box-shadow: var-get($theme, 'shadow');\n min-width: rem(128px);\n border: var-get($theme, 'border-width') solid var-get($theme, 'border-color');\n }\n\n %igx-drop-down__list-scroll {\n overflow-y: auto;\n overflow-x: hidden;\n -webkit-overflow-scrolling: touch;\n position: relative;\n\n igx-input-group {\n margin-top: -16px !important;\n }\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 position: relative;\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix;\n }\n\n igx-divider {\n position: absolute;\n width: 100%;\n inset-inline-start: 0;\n bottom: 0;\n }\n }\n\n %igx-drop-down__item {\n color: var-get($theme, 'item-text-color');\n cursor: pointer;\n padding: map.get($item-padding, 'comfortable');\n border-radius: var-get($theme, 'item-border-radius');\n\n &:focus {\n outline: 0;\n outline-color: transparent;\n background: var-get($theme, 'focused-item-background');\n color: var-get($theme, 'focused-item-text-color');\n }\n\n &:hover {\n background: var-get($theme, 'hover-item-background');\n color: var-get($theme, 'hover-item-text-color');\n }\n }\n\n %igx-drop-down__content {\n display: flex;\n width: 100%;\n align-items: center;\n }\n\n %igx-drop-down__inner {\n display: block;\n @include ellipsis();\n margin-inline-end: auto;\n }\n\n %igx-drop-down__item--cosy {\n height: map.get($item-height, 'cosy');\n padding: map.get($item-padding, 'cosy');\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--cosy;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--cosy;\n }\n }\n\n %igx-drop-down__item--compact {\n height: map.get($item-height, 'compact');\n padding: map.get($item-padding, 'compact');\n\n igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--compact;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--compact;\n }\n }\n\n %igx-drop-down__prefix {\n margin-inline-end: map.get($prefix-margin, 'comfortable');\n }\n\n %igx-drop-down__suffix {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'comfortable');\n }\n }\n\n %igx-drop-down__prefix--cosy {\n margin-inline-end: map.get($prefix-margin, 'cosy');\n }\n\n %igx-drop-down__suffix--cosy {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'cosy');\n }\n }\n\n %igx-drop-down__prefix--compact {\n margin-inline-end: map.get($prefix-margin, 'compact');\n }\n\n %igx-drop-down__suffix--compact {\n + igx-suffix,\n + [igxSuffix] {\n margin-inline-start: map.get($suffix-margin, 'compact');\n }\n }\n\n %igx-drop-down__header {\n color: var-get($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 igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--cosy;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--cosy;\n }\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 igx-prefix,\n [igxPrefix] {\n @extend %igx-drop-down__prefix--compact;\n }\n\n igx-suffix,\n [igxSuffix] {\n @extend %igx-drop-down__suffix--compact;\n }\n }\n\n %igx-drop-down__group {\n pointer-events: auto;\n\n label {\n @extend %igx-drop-down__header !optional;\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-get($theme, 'focused-item-background');\n color: var-get($theme, 'focused-item-text-color');\n\n &:hover {\n color: var-get($theme, 'focused-item-text-color');\n background: var-get($theme, 'focused-item-background');\n }\n }\n\n %igx-drop-down__item--selected {\n background: var-get($theme, 'selected-item-background');\n color: var-get($theme, 'selected-item-text-color');\n\n &:hover {\n background: var-get($theme, 'selected-hover-item-background');\n color: var-get($theme, 'selected-hover-item-text-color');\n }\n }\n\n %igx-drop-down__item--selected--focused {\n background: var-get($theme, 'selected-focus-item-background');\n color: var-get($theme, 'selected-focus-item-text-color');\n }\n\n %igx-drop-down__item--disabled {\n background: var-get($theme, 'disabled-item-background');\n color: var-get($theme, 'disabled-item-text-color');\n cursor: default;\n pointer-events: none;\n\n &:hover {\n background: var-get($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', select-item: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $header) {\n margin: 0;\n }\n }\n\n %igx-drop-down__item {\n @include type-style($type-scale, $item) {\n margin: 0;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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/// @param {Color} $border-width [null] - The list border width.\n/// @param {Number} $border-color [null] - The list border color.\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 list background color\n/// $my-list-theme: list-theme($background: black);\n/// // Pass the theme to the list component mixin\n/// @include list($my-list-theme);\n@function list-theme(\n $palette: null,\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 $border-color: null,\n $border-width: 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 @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 meta.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 meta.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 @if meta.type-of($item-background) == 'color' {\n $item-subtitle-color: rgba(text-contrast($item-background), .74);\n }\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 @if meta.type-of($item-background-hover) == 'color' {\n $item-subtitle-color-hover: rgba(text-contrast($item-background-hover), .74);\n }\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 @if meta.type-of($item-background-active) == 'color' {\n $item-subtitle-color-active: rgba(text-contrast($item-background-active), .74);\n }\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 @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @if not($item-border-radius) {\n $item-border-radius: border-radius(map.get($theme, 'item-border-radius'));\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 border-color: $border-color,\n border-width: $border-width,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin list($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\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),\n cosy: rem(6px) rem(8px),\n compact: rem(4px)\n );\n\n $list-line-margin: (\n comfortable: rem(16px),\n cosy: rem(12px),\n compact: rem(8px)\n );\n\n %igx-list {\n position: relative;\n display: flex;\n flex-flow: column nowrap;\n background: var-get($theme, 'background');\n height: auto;\n overflow-y: auto;\n overflow-x: hidden;\n z-index: 0;\n border-radius: var-get($theme, 'border-radius');\n }\n\n %igx-list--empty {\n justify-content: center;\n align-items: center;\n }\n\n %igx-list__message--empty {\n text-align: center;\n color: var-get($theme, 'item-text-color');\n padding: map.get($list-empty-padding, 'comfortable');\n z-index: 1;\n }\n\n %igx-list-header {\n display: flex;\n align-items: center;\n color: var-get($theme, 'header-text-color');\n background: var-get($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-get($theme, 'item-border-radius');\n color: var-get($theme, 'item-text-color');\n background: var-get($theme, 'item-background');\n\n @if $bootstrap-theme {\n border-bottom: var-get($theme, 'border-width') solid var-get($theme, 'border-color');\n\n &:last-of-type {\n border-bottom: none;\n }\n }\n\n &:hover {\n color: var-get($theme, 'item-text-color-hover');\n background: var-get($theme, 'item-background-hover');\n\n %igx-list__item-lines {\n color: currentColor;\n }\n\n %igx-list__item-line-title {\n color: var-get($theme, 'item-title-color-hover');\n }\n\n %igx-list__item-line-subtitle {\n color: var-get($theme, 'item-subtitle-color-hover');\n }\n\n %igx-list__item-actions {\n color: var-get($theme, 'item-action-color-hover');\n\n igx-icon {\n color: var-get($theme, 'item-action-color-hover')\n }\n }\n\n %igx-list__item-thumbnail {\n color: var-get($theme, 'item-thumbnail-color-hover');\n\n igx-icon {\n color: var-get($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-get($theme, 'item-subtitle-color');\n opacity: .74\n }\n\n %igx-list__item-line-title {\n color: var-get($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-get($theme, 'item-action-color');\n\n > * {\n margin-inline-start: rem(8px);\n }\n\n &:empty {\n display: none;\n }\n\n igx-icon {\n color: var-get($theme, 'item-action-color')\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\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-get($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-get($theme, 'item-thumbnail-color');\n\n > igx-icon {\n margin: map.get($list-icon-margin, 'comfortable');\n margin-inline-start: 0;\n }\n\n > igx-avatar {\n > igx-icon {\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 margin: 0;\n margin-inline-start: map.get($list-line-margin, 'comfortable');\n }\n\n %igx-list__item-thumbnail--cosy:not(:empty) + %igx-list__item-lines {\n margin: 0;\n margin-inline-start: map.get($list-line-margin, 'cosy');\n }\n\n %igx-list__item-thumbnail--compact:not(:empty) + %igx-list__item-lines {\n margin: 0;\n margin-inline-start: map.get($list-line-margin, 'compact');\n }\n\n %igx-list__item-thumbnail--cosy {\n > igx-icon {\n margin: map.get($list-icon-margin, 'cosy');\n margin-inline-start: 0;\n }\n }\n\n %igx-list__item-thumbnail--compact {\n > igx-icon {\n margin: map.get($list-icon-margin, 'compact');\n margin-inline-start: 0;\n }\n }\n\n %igx-list__item-actions--cosy {\n > * {\n margin-inline-start: rem(6px);\n }\n }\n\n %igx-list__item-actions--compact {\n > * {\n margin-inline-start: rem(4px);\n }\n }\n\n %igx-list__item-lines + %igx-list__item-actions {\n margin-inline-start: rem(8px);\n }\n\n %igx-list-item-content--active {\n %igx-list__item-line-title {\n color: var-get($theme, 'item-title-color-active')\n }\n\n %igx-list__item-line-subtitle {\n color: var-get($theme, 'item-subtitle-color-active')\n }\n\n %igx-list__item-actions {\n color: var-get($theme, 'item-action-color-active');\n\n igx-icon {\n color: var-get($theme, 'item-action-color-active')\n }\n }\n\n %igx-list__item-thumbnail {\n color: var-get($theme, 'item-thumbnail-color-active');\n\n igx-icon {\n color: var-get($theme, 'item-thumbnail-color-active')\n }\n }\n\n color: var-get($theme, 'item-text-color-active');\n background: var-get($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', title: 'subtitle-1', subtitle: 'caption')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin 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 type-style($type-scale, $header) {\n margin: 0;\n }\n }\n\n %igx-list-item {\n @include type-style($type-scale, $item) {\n margin: 0;\n }\n }\n\n %igx-list__item-lines,\n %igx-list__item-line-title {\n @include type-style($type-scale, $title) {\n margin: 0;\n }\n }\n\n %igx-list__item-line-subtitle {\n @include type-style($type-scale, $subtitle) {\n margin: 0;\n }\n }\n}\n","////\n/// @group themes\n/// @author <a href=\"https://github.com/simeonoff\" target=\"_blank\">Simeon Simeonoff</a>\n////\n\n@use 'sass:list';\n@use 'sass:string';\n@use '../base' as *;\n@use 'schemas' as *;\n@use 'palettes' as *;\n@use '../components' as *;\n\n@forward 'palettes';\n@forward 'utilities';\n@forward 'schemas';\n@forward 'core';\n@forward '../components';\n\n/// Generates an Ignite UI for Angular global theme.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {Map} $schema [$light-schema] - The schema used as basis for styling the components.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Number} $roundness [null] - Sets the global roundness factor (the value can be any decimal fraction between 0 and 1) for all components.\n/// @param {Boolean} $elevation [true] - Turns on/off elevations for all components in the theme.\n/// @param {Map} $elevations [$elevations] - The elevation map to be used by all component themes.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n/// @requires $components\n/// @requires $theme-palette\n/// @requires $elevations\n/// @requires {function} is-component\n@mixin theme(\n $palette,\n $schema: $light-material-schema,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $elevations: $elevations,\n $wc: false\n) {\n // Stores all excluded component styles\n $excluded: ();\n $scope: if(is-root(), ':root', '&');\n\n @include palette-vars($palette, $contrast: true);\n @include elevation-vars($elevations);\n\n @if $wc {\n @include palette-to-wc($palette);\n @include elevations-to-wc($elevations);\n }\n\n @if $elevation == false {\n #{$scope} {\n --igx-elevation-factor: 0;\n\n @if $wc {\n --igc-elevation-factor: var(--igx-elevation-factor);\n }\n }\n }\n\n @if $roundness {\n #{$scope} {\n --igx-radius-factor: #{$roundness};\n\n @if $wc {\n --igc-radius-factor: var(--igx-radius-factor);\n }\n }\n }\n\n $theme-palette: $palette !global;\n\n @if list.length($exclude) > 0 {\n $excluded: is-component($exclude);\n }\n\n @if is-used('igx-ripple', $exclude) {\n @include ripple(ripple-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-avatar', $exclude) {\n @include avatar(avatar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-action-strip', $exclude) {\n @include action-strip(action-strip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-badge', $exclude) {\n @include badge(badge-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-bottom-nav', $exclude) {\n @include bottom-nav(bottom-nav-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-button', $exclude) {\n @include button(button-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-button-group', $exclude) {\n @include button-group(button-group-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-banner', $exclude) {\n @include banner(banner-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-calendar', $exclude) {\n @include calendar(calendar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-card', $exclude) {\n @include card(card-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-carousel', $exclude) {\n @include carousel(carousel-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-splitter', $exclude) {\n @include splitter(splitter-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('data-chart', $exclude) {\n @include css-vars(data-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('doughnut-chart', $exclude) {\n @include css-vars(doughnut-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('linear-gauge', $exclude) {\n @include css-vars(linear-gauge-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('radial-gauge', $exclude) {\n @include css-vars(radial-gauge-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('financial-chart', $exclude) {\n @include css-vars(financial-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('bullet-graph', $exclude) {\n @include css-vars(bullet-graph-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('category-chart', $exclude) {\n @include css-vars(category-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('geo-map', $exclude) {\n @include css-vars(geo-map-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('pie-chart', $exclude) {\n @include css-vars(pie-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('sparkline', $exclude) {\n @include css-vars(sparkline-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('funnel-chart', $exclude) {\n @include css-vars(funnel-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('shape-chart', $exclude) {\n @include css-vars(shape-chart-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-checkbox', $exclude) {\n @include checkbox(checkbox-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-chip', $exclude) {\n @include chip(chip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-column-actions', $exclude) {\n @include column-actions(column-actions-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-combo', $exclude) {\n @include combo(combo-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-date-picker', $exclude) {\n @include date-picker(calendar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-date-range-picker', $exclude) {\n @include date-range-picker(date-range-picker-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-dialog', $exclude) {\n @include dialog(dialog-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-divider', $exclude) {\n @include divider(divider-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igc-dockmanager', $exclude) {\n @include dock-manager(dock-manager-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igc-rating', $exclude) {\n @include rating(rating-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-drop-down', $exclude) {\n @include drop-down(drop-down-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-expansion-panel', $exclude) {\n @include expansion-panel(expansion-panel-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid', $exclude) {\n @include grid(grid-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid-summary', $exclude) {\n @include grid-summary(grid-summary-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-grid-toolbar', $exclude) {\n @include grid-toolbar(grid-toolbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-pivot-data-selector', $exclude) {\n @include pivot-data-selector(pivot-data-selector-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-highlight', $exclude) {\n @include highlight(highlight-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-icon', $exclude) {\n @include icon(icon-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-input-group', $exclude) {\n @include input-group(input-group-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-list', $exclude) {\n @include list(list-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-navbar', $exclude) {\n @include navbar(navbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-nav-drawer', $exclude) {\n @include navdrawer(navdrawer-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-overlay', $exclude) {\n @include overlay(overlay-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-paginator', $exclude) {\n @include paginator(paginator-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-circular-bar', $exclude) {\n @include progress-circular(progress-circular-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-linear-bar', $exclude) {\n @include progress-linear(progress-linear-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-radio', $exclude) {\n @include radio(radio-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-query-builder', $exclude) {\n @include query-builder(query-builder-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-scrollbar', $exclude) {\n @include scrollbar(scrollbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-slider', $exclude) {\n @include slider(slider-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-snackbar', $exclude) {\n @include snackbar(snackbar-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-switch', $exclude) {\n @include switch(switch-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-tabs', $exclude) {\n @include tabs(tabs-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-stepper', $exclude) {\n @include stepper(stepper-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-toast', $exclude) {\n @include toast(toast-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-tooltip', $exclude) {\n @include tooltip(tooltip-theme(\n $schema: $schema\n ));\n }\n\n @if is-used('igx-time-picker', $exclude) {\n @include time-picker(time-picker-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-tree', $exclude) {\n @include tree(tree-theme(\n $schema: $schema,\n ));\n }\n\n @if is-used('igx-watermark', $exclude) {\n @include watermark(watermark-theme(\n $schema: $schema\n ));\n }\n\n @if list.length($dropped-themes) > 0 {\n @warn string.unquote('You have excluded the following components from the theme: \"#{$dropped-themes}\".');\n }\n}\n\n/// Creates a global material theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $grays: color($palette, 'grays');\n $surface: color($palette, 'surface');\n\n $light-palette: palette(\n $primary: color($palette, 'primary'),\n $secondary: color($palette, 'secondary'),\n $info: color($palette, 'info'),\n $success: color($palette, 'success'),\n $warn: color($palette, 'warn'),\n $error: color($palette, 'error'),\n $surface: if($surface != #fff, $surface, #fff),\n $grays: if($grays != #9e9e9e, $grays, #000),\n );\n\n @include theme(\n $palette: $light-palette,\n $schema: $light-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global material theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $grays: color($palette, 'grays');\n $surface: color($palette, 'surface');\n\n $dark-palette: palette(\n $primary: color($palette, 'primary'),\n $secondary: color($palette, 'secondary'),\n $info: color($palette, 'info'),\n $success: color($palette, 'success'),\n $warn: color($palette, 'warn'),\n $error: color($palette, 'error'),\n $surface: if($surface != #fff, $surface, #222),\n $grays: if($grays != #9e9e9e, $grays, #fff),\n );\n\n @include theme(\n $palette: $dark-palette,\n $schema: $dark-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global fluent theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin fluent-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #fff),\n $grays: #000\n ),\n $schema: $light-fluent-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global fluent theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin fluent-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #222),\n $grays: #fff\n ),\n $schema: $dark-fluent-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n\n/// Creates a global bootstrap-like theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin bootstrap-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #f8f9fa, $surface, #f8f9fa),\n $grays: #212529\n ),\n $schema: $light-bootstrap-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global bootstrap-like theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin bootstrap-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != white, $surface, #222),\n $grays: #fff\n ),\n $schema: $dark-bootstrap-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global indigo theme that can be used with light backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin indigo-light-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != #fff, $surface, #fff),\n $grays: #060716,\n ),\n $schema: $light-indigo-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n\n/// Creates a global indigo theme that can be used with dark backgrounds.\n/// @param {Map} $palette - An palette to be used by the global theme.\n/// @param {List} $exclude [( )] - A list of igx components to be excluded from the global theme styles.\n/// @param {Boolean} $wc [false] - Enable theming support for Ignite UI for Web Components\n@mixin indigo-dark-theme(\n $palette,\n $exclude: (),\n $roundness: 1,\n $elevation: true,\n $wc: false,\n) {\n $primary: color($palette, 'primary');\n $secondary: color($palette, 'secondary');\n $surface: color($palette, 'surface');\n\n @include theme(\n $palette: palette(\n $primary,\n $secondary,\n $surface: if($surface != white, $surface, #2a2b2f),\n $grays: #fff\n ),\n $schema: $dark-indigo-schema,\n $exclude: $exclude,\n $roundness: $roundness,\n $elevation: $elevation,\n );\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 ripple-theme(\n $palette: null,\n $schema: $light-schema,\n $color: null\n) {\n $name: 'igx-ripple';\n $selector: '[igxRipple]';\n\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 selector: $selector,\n palette: $palette,\n color: $color\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin ripple($theme) {\n @include css-vars($theme);\n\n %igx-ripple-display {\n display: block;\n position: absolute;\n border-radius: border-radius(50%);\n background: var-get($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 margin: 0 !important;\n border: none !important;\n }\n\n %igx-ripple-wrapper {\n overflow: hidden;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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 text color used of the avatar.\n/// @param {Color} $background [null] - The background color used of the avatar.\n/// @param {number} $border-radius [null] - The border-radius used of the avatar.\n/// @param {number} $size [null] - The size of the avatar.\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: avatar-theme($icon-background: black, $icon-color: white);\n/// // Pass the theme to the avatar component mixin\n/// @include avatar($my-avatar-theme);\n@function avatar-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null,\n $color: null,\n $border-radius: null,\n $size: null,\n) {\n $name: 'igx-avatar';\n $avatar-schema: ();\n\n @if map.has-key($schema, $name) {\n $avatar-schema: map.get($schema, $name);\n } @else {\n $avatar-schema: $schema;\n }\n\n $theme: apply-palette($avatar-schema, $palette);\n\n @if not($color) and $background {\n $color: text-contrast($background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n color: $color,\n border-radius: $border-radius,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin avatar($theme) {\n @include css-vars($theme);\n\n $size: map.get($theme, 'size');\n $small-size: rem(40px);\n $medium-size: rem(64px);\n $large-size: rem(88px);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n $box-shadow: map.get((\n material: null,\n fluent: null,\n bootstrap: 0 0 0 rem(3px) var-get($theme, 'background'),\n indigo-design: null,\n ), $variant);\n\n %igx-avatar-outline {\n position: absolute;\n content: '';\n width: 100%;\n height: 100%;\n border-radius: inherit;\n opacity: .5;\n }\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-get($theme, 'color');\n background: var-get($theme, 'background');\n vertical-align: middle;\n border-radius: var-get($theme, 'border-radius');\n outline-style: none;\n flex-shrink: 0;\n\n &::after {\n box-shadow: none;\n @if $bootstrap-theme {\n @extend %igx-avatar-outline;\n }\n transition: box-shadow .15s $ease-in-out-quad;\n }\n\n &:focus::after {\n box-shadow: $box-shadow;\n }\n }\n\n %igx-avatar-image {\n width: 100%;\n height: 100%;\n border-radius: inherit;\n background-size: cover;\n background-repeat: no-repeat;\n background-position: center;\n }\n\n %igx-avatar--rounded {\n --igx-avatar-border-radius: #{rem(44px)};\n }\n\n %igx-avatar--initials {\n text-transform: uppercase;\n }\n\n %igx-avatar-initials--small {\n --size: #{$size or $small-size};\n font-size: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $small-size), 'size')} / 2);\n }\n\n %igx-avatar-initials--medium {\n --size: #{$size or $medium-size};\n font-size: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $medium-size), 'size')} / 2);\n }\n\n %igx-avatar-initials--large {\n --size: #{$size or $large-size};\n font-size: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);\n line-height: calc(#{var-get(('size': $size or $large-size), 'size')} / 2);\n }\n\n %igx-avatar--small {\n --size: #{$size or $small-size};\n width: var-get(('size': $size or $small-size), 'size');\n height: var-get(('size': $size or $small-size), 'size');\n }\n\n %igx-avatar--medium {\n --size: #{$size or $medium-size};\n width: var-get(('size': $size or $medium-size), 'size');\n height: var-get(('size': $size or $medium-size), 'size');\n }\n\n %igx-avatar--large {\n --size: #{$size or $large-size};\n width: var-get(('size': $size or $large-size), 'size');\n height: var-get(('size': $size or $large-size), 'size');\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $icon-color [null] - The color used for the actions icons.\n/// @param {Color} $background [null] - The color used for the action strip component content background.\n/// @param {Color} $actions-background [null] - The color used for the actions background.\n/// @param {Color} $delete-action [null] - The color used for the delete icon in action strip component.\n/// @param {actions-border-radius} $actions-border-radius [null] - The border radius used for actions container inside action strip component.\n///\n/// @requires extend\n/// @requires apply-palette\n/// @requires text-contrast\n///\n/// @example scss Change the background and icon colors in action strip\n/// $my-action-strip-theme: action-strip-theme($background: black);\n/// // Pass the theme to the action-strip component mixin\n/// @include action-strip($my-action-strip-theme);\n@function action-strip-theme(\n $palette: null,\n $schema: $light-schema,\n\n $background: null,\n $actions-background: null,\n $icon-color: null,\n $delete-action: null,\n $actions-border-radius: null,\n) {\n $name: 'igx-action-strip';\n $action-strip-schema: ();\n\n @if map.has-key($schema, $name) {\n $action-strip-schema: map.get($schema, $name);\n } @else {\n $action-strip-schema: $schema;\n }\n\n $theme: apply-palette($action-strip-schema, $palette);\n\n @if not($icon-color) and $actions-background {\n $icon-color: text-contrast($actions-background);\n }\n\n @if not($actions-border-radius) {\n $actions-border-radius: border-radius(map.get($theme, 'actions-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background: $background,\n actions-background: $actions-background,\n icon-color: $icon-color,\n delete-action: $delete-action,\n actions-border-radius: $actions-border-radius,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin action-strip($theme) {\n @include css-vars($theme);\n\n $padding: (\n comfortable: 0 rem(24px),\n cosy: 0 rem(16px),\n compact: 0 rem(12px)\n );\n\n $variant: map.get($theme, variant);\n\n %igx-action-strip-display {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n position: absolute;\n width: 100%;\n height: 100%;\n pointer-events: none;\n top: 0;\n inset-inline-start: 0;\n background: var-get($theme, 'background');\n color: inherit;\n padding: map.get($padding, 'comfortable');\n z-index: 9999;\n }\n\n %action-icons-density {\n [igxButton='icon'] {\n width: rem(28px);\n height: rem(28px);\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(14px)});\n height: var(--igx-icon-size, #{rem(14px)});\n font-size: var(--igx-icon-size, #{rem(14px)});\n }\n }\n }\n\n %igx-action-strip--cosy {\n @extend %action-icons-density;\n padding: map.get($padding, 'cosy');\n }\n\n %igx-action-strip--compact {\n @extend %action-icons-density;\n padding: map.get($padding, 'compact');\n }\n\n %igx-action-strip__editing-actions,\n %igx-action-strip__pinning-actions {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n %igx-action-strip__menu-item {\n [igxLabel] {\n cursor: pointer;\n }\n\n igx-icon {\n width: var(--igx-icon-size, rem(18px));\n height: var(--igx-icon-size, rem(18px));\n font-size: var(--igx-icon-size, rem(18px));\n }\n\n igx-icon + [igxLabel] {\n margin-inline-start: rem(12px);\n }\n\n &%igx-drop-down__item--cosy {\n igx-icon + [igxLabel] {\n margin-inline-start: rem(10px);\n }\n }\n\n &%igx-drop-down__item--compact {\n igx-icon + [igxLabel] {\n margin-inline-start: rem(8px);\n }\n }\n }\n\n %igx-action-strip__menu-item--danger {\n color: color(map.get($theme, 'palette'), 'error');\n\n &:hover {\n color: color(map.get($theme, 'palette'), 'error');\n }\n }\n\n %igx-action-strip__menu-button {\n display: flex;\n align-items: center;\n }\n\n %igx-action-strip__actions {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n pointer-events: all;\n position: relative;\n color: var-get($theme, 'icon-color');\n border-radius: var-get($theme, 'actions-border-radius');\n background: var-get($theme, 'actions-background');\n max-height: 36px;\n\n &:last-child {\n margin-inline-end: 0;\n }\n\n igx-icon {\n color: var-get($theme, 'icon-color');\n }\n\n [igxButton='icon'] {\n igx-icon {\n color: var-get($theme, 'icon-color');\n }\n\n @if $variant == 'indigo-design' or $variant == 'fluent' {\n border-radius: var-get($theme, 'actions-border-radius');\n }\n }\n }\n\n %igx-action-strip__editing-actions {\n > [igxButton] {\n margin-inline-start: rem(4px);\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n }\n }\n\n %igx-action-strip__delete {\n igx-icon {\n color: var-get($theme, 'delete-action');\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 [null] - 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 {Number} $border-width [null] - The border width of the badge component.\n/// @param {Color} $background-color [null] - The background color used.\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 elevation\n/// @requires text-contrast\n/// @requires rem\n///\n/// @example scss Change the text and icon colors in a badge\n/// $my-badge-theme: badge-theme($icon-color: black, $background-color: white);\n/// // IE Supported theme - Pass the theme to the badge component mixin\n/// @include badge($my-badge-theme);\n///\n/// // Theming using css variables (not supported in IE11):\n/// @include css-vars($my-badge-theme);\n@function badge-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $icon-color: null,\n $text-color: null,\n\n $border-color: null,\n $border-radius: null,\n $border-width: null,\n\n $background-color: null,\n $shadow: null,\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\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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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} css-vars\n/// @requires color\n/// @requires rem\n/// @requires var-get\n@mixin badge($theme) {\n @include css-vars($theme);\n\n $palette: map.get($theme, 'palette');\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-get($theme, 'text-color');\n line-height: 1;\n background: var-get($theme, 'background-color');\n border-radius: var-get($theme, 'border-radius');\n box-shadow: var-get($theme, 'shadow');\n border-width: var-get($theme, 'border-width');\n border-color: var-get($theme, 'border-color');\n border-style: $border-type;\n overflow: hidden;\n\n igx-icon {\n display: inline-flex;\n justify-content: center;\n align-items: center;\n width: var(--igx-icon-size, #{$badge-width - 2px});\n height: var(--igx-icon-size, #{$badge-width - 2px});\n font-size: var(--igx-icon-size, #{$badge-icon-font-size});\n font-weight: $badge-font-weight;\n color: var-get($theme, 'icon-color');\n }\n }\n\n %igx-badge-value {\n white-space: nowrap;\n padding: $badge-value-padding;\n }\n\n %igx-badge--success {\n background: color($palette, 'success');\n }\n\n %igx-badge--info {\n background: color($palette, 'info');\n }\n\n %igx-badge--warn {\n background: color($palette, 'warn');\n }\n\n %igx-badge--error {\n background: color($palette, 'error');\n }\n\n %igx-badge--hidden {\n visibility: hidden;\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - 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/// @param {Color} $item-disabled-border [null] - The border color for a disabled item in the button group.\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/// @param {Color} $item-disabled-border [null] - The border 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/// @param {Color} $selected-shadow-color [null] - The outline color of focused/selected button group items.\n/// @param {Color} $idle-shadow-color [null] - The outline color of focused button group items.\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 elevation\n///\n/// @example scss Change the background, text, and border colors\n/// $my-button-group-theme: 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 button-group component mixin\n/// @include button-group($my-button-group-theme);\n@function button-group-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $idle-shadow-color: 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 $selected-shadow-color: null\n) {\n $name: 'igx-button-group';\n $selector: 'igx-buttongroup';\n\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 @if not($item-text-color) and $item-background {\n @if meta.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 meta.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 meta.type-of($item-background) == 'color' {\n $item-selected-text-color: text-contrast($item-background);\n }\n }\n\n @if not($idle-shadow-color) and $selected-shadow-color {\n @if meta.type-of($selected-shadow-color) == 'color' {\n $idle-shadow-color: $selected-shadow-color;\n }\n }\n\n @if not($selected-shadow-color) and $idle-shadow-color {\n @if meta.type-of($idle-shadow-color) == 'color' {\n $selected-shadow-color: $idle-shadow-color;\n }\n }\n\n @if not($item-selected-text-color) and $item-selected-background {\n @if meta.type-of($item-selected-background) == 'color' {\n $item-selected-text-color: text-contrast($item-selected-background);\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: elevation($elevations, $elevation);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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 idle-shadow-color: $idle-shadow-color,\n selected-shadow-color: $selected-shadow-color,\n ));\n}\n\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires color\n/// @requires var-get\n@mixin button-group($theme) {\n @include 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 $variant: map.get($theme, 'variant');\n $bootstrap-theme: $variant == 'bootstrap';\n $indigo-theme: $variant == 'indigo-design';\n\n %igx-group-display {\n display: flex;\n box-shadow: var-get($theme, 'shadow');\n transition: $transition;\n border-radius: var-get($theme, 'border-radius');\n\n button {\n // The margin here is required to fix a bug in Safari #7858\n margin-top: 0;\n margin-inline-end: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-group-item {\n border: $group-item-border-thickness solid var-get($theme, 'item-border-color');\n color: var-get($theme, 'item-text-color');\n background: var-get($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 &[igxButton] {\n border-radius: 0;\n border-color: var-get($theme, 'item-border-color');\n }\n\n &:not(:nth-child(0)) {\n margin-inline-start: -1px;\n }\n\n &:first-of-type {\n border-start-start-radius: var-get($theme, 'border-radius');\n border-end-start-radius: var-get($theme, 'border-radius');\n }\n\n &:last-of-type {\n border-start-end-radius: var-get($theme, 'border-radius');\n border-end-end-radius: var-get($theme, 'border-radius');\n }\n\n &[igxButton][disabled='true'] {\n color: var-get($theme, 'disabled-text-color');\n background: var-get($theme, 'disabled-background-color');\n border-color: var-get($theme, 'item-disabled-border');\n }\n\n &:hover,\n &:focus {\n color: var-get($theme, 'item-hover-text-color');\n background: var-get($theme, 'item-hover-background');\n }\n\n &:focus {\n @if $bootstrap-theme or $indigo-theme {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'idle-shadow-color');\n }\n\n @if $indigo-theme {\n z-index: 2;\n }\n }\n }\n\n %igx-group-item-vertical {\n &:not(:nth-child(0)) {\n margin-top: -1px;\n margin-inline-start: 0;\n }\n\n &:first-of-type {\n border-start-start-radius: var-get($theme, 'border-radius');\n border-start-end-radius: var-get($theme, 'border-radius');\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &:last-of-type {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n border-end-start-radius: var-get($theme, 'border-radius');\n border-end-end-radius: var-get($theme, 'border-radius');\n }\n }\n\n %igx-group-item-selected {\n color: var-get($theme, 'item-selected-text-color');\n background: var-get($theme, 'item-selected-background');\n border-color: var-get($theme, 'item-selected-border-color');\n position: relative;\n z-index: 1;\n\n &:hover,\n &:focus {\n color: var-get($theme, 'item-selected-text-color');\n background: var-get($theme, 'item-selected-hover-background');\n }\n\n &:focus {\n z-index: 3;\n }\n\n @if $indigo-theme {\n &:focus {\n box-shadow: 0 0 0 rem(3px) var-get($theme, 'selected-shadow-color');\n }\n }\n\n &[igxButton][disabled='true'] {\n position: relative;\n\n &::before {\n position: absolute;\n content: '';\n top: 0;\n bottom: 0;\n inset-inline-end: 0;\n inset-inline-start: 0;\n background: color($palette, 'grays', 500, .12);\n }\n }\n }\n\n %igx-group-vertical {\n flex-flow: column;\n }\n\n %igx-group-item-content {\n display: flex;\n align-items: center;\n flex-flow: row nowrap;\n min-width: 0;\n\n * ~ * {\n margin-inline-start: $group-items-margin;\n }\n }\n\n %igx-button-group__button-text {\n width: 100%;\n @include ellipsis();\n }\n}\n","@use '../../utilities' as *;\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","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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 idle indicator dot color.\n/// @param {Color} $indicator-border-color [null] - The idle indicator border color.\n/// @param {Color} $indicator-active-dot-color [null] - The active indicator dot 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 elevation\n/// @requires text-contrast\n///\n/// @example scss Change the previous/next button colors\n/// $my-carousel-theme: carousel-theme(\n/// $button-background: black,\n/// $button-hover-background: white\n/// );\n/// // Pass the carousel theme to the carousel component mixin\n/// @include carousel($my-carousel-theme);\n@function carousel-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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-dot-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 @if not($button-shadow) {\n $button-elevation: map.get($carousel-schema, 'button-elevation');\n $button-shadow: 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 @if meta.type-of($button-disabled-background) == 'color' {\n $button-disabled-arrow-color: rgba(text-contrast($button-disabled-background), .3);\n }\n }\n\n @if not($border-radius){\n $border-radius: border-radius(map.get($theme, 'border-radius'));\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-dot-color: $indicator-active-dot-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} css-vars\n/// @requires color\n/// @requires elevation\n/// @requires {mixin} animation\n/// @requires {mixin} scale-in-center\n/// @requires {mixin} scale-out-center\n/// @requires var-get\n@mixin carousel($theme) {\n @include css-vars($theme);\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 $variant: map.get($theme, variant);\n $not-bootstrap-theme: $variant != 'bootstrap';\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 @if $not-bootstrap-theme {\n border-radius: border-radius(50%);\n } @else {\n border-radius: var-get($theme, 'border-radius');\n }\n\n outline-style: none;\n transition: all .15s ease-in-out;\n color: var-get($theme, 'button-arrow-color');\n background: var-get($theme, 'button-background');\n box-shadow: var-get($theme, 'button-shadow');\n }\n\n %igx-nav-arrow--disabled {\n background: var-get($theme, 'button-disabled-background');\n color: var-get($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-get($theme, 'button-hover-arrow-color');\n background: var-get($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 inset-inline-end: 0;\n }\n\n %igx-carousel-arrow--prev {\n inset-inline-start: 0;\n }\n\n %igx-carousel-arrow--next,\n %igx-carousel-arrow--prev {\n [dir='rtl'] & {\n transform: scaleX(-1);\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 inset-inline-start: 50%;\n transform: translateX(-50%);\n\n [dir='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\n @if $variant != 'indigo-design' {\n border: $indicator-border-style;\n border-color: var-get($theme, 'indicator-border-color');\n box-shadow: elevation($elevation: 1);\n opacity: .7;\n }\n\n border-radius: border-radius(50%);\n transition: all .15s $ease-out-quad;\n\n &::after {\n @if $variant != 'indigo-design' {\n @include animation('scale-out-center' .15s $ease-out-quad forwards);\n }\n content: '';\n position: absolute;\n @if $variant != 'indigo-design' {\n inset: 1px;\n } @else {\n inset: 0;\n }\n border-radius: inherit;\n background: var-get($theme, 'indicator-dot-color');\n }\n\n &:hover {\n opacity: 1;\n }\n }\n\n %igx-nav-dot--active {\n @if $variant != 'indigo-design' {\n border: $indicator-border-style;\n border-color: var-get($theme, 'indicator-active-border-color');\n }\n\n opacity: 1;\n\n &::after {\n background: var-get($theme, 'indicator-active-dot-color');\n @if $variant != 'indigo-design' {\n @include animation('scale-in-center' .15s $ease-out-quad forwards);\n }\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-get($theme, 'border-radius');\n min-height: 300px;\n min-width: 300px;\n }\n\n %igx-carousel-slide {\n position: absolute;\n width: 100%;\n height: 100%;\n inset: 0;\n z-index: -1;\n background: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n///\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n///\n/// @param {color} $bar-color [null] - The background color of the bar.\n/// @param {color} $handle-color [null] - The color for the bar drag handle.\n/// @param {color} $expander-color [null] - The color for the arrow expander's.\n/// @param {number} $border-radius [null] - the border radios of the splitter bar drag handle\n/// @param {color} $focus-color [null] - The color used for focused splitter bar.\n/// @param {number} $size [null] - The size of the splitter, its width for vertical and height for horizontal splitter.\n///\n@function splitter-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $bar-color: null,\n $handle-color: null,\n $expander-color: null,\n $border-radius: null,\n $focus-color: null,\n $size: null\n) {\n $name: 'igx-splitter';\n $splitter-schema: ();\n\n @if map.has-key($schema, $name) {\n $splitter-schema: map.get($schema, $name);\n } @else {\n $splitter-schema: $schema;\n }\n\n $theme: apply-palette($splitter-schema, $palette);\n\n @if not($handle-color) and $bar-color {\n $handle-color: text-contrast($bar-color);\n }\n\n @if not($expander-color) and $bar-color {\n $expander-color: text-contrast($bar-color);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n bar-color: $bar-color,\n handle-color: $handle-color,\n expander-color: $expander-color,\n border-radius: $border-radius,\n focus-color: $focus-color,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin splitter($theme) {\n @include css-vars($theme);\n $splitter-color: var-get($theme, 'bar-color');\n $hitbox-size: 4px;\n $debug-hitbox: false;\n $hitbox-debug-color: rgba(coral, .24);\n\n $variant: map.get($theme, 'variant');\n\n %igx-splitter-base {\n &[aria-orientation='horizontal'] {\n [dir='rtl'] & {\n flex-direction: row-reverse !important;\n }\n }\n }\n\n %handle-area {\n position: absolute;\n content: '';\n width: 100%;\n height: $hitbox-size;\n background: if($debug-hitbox, $hitbox-debug-color, transparent);\n }\n\n %handle-area--vertical {\n width: $hitbox-size;\n height: 100%;\n }\n\n %igx-splitter-bar {\n position: relative;\n display: flex;\n flex-grow: 1;\n justify-content: center;\n align-items: center;\n background: $splitter-color;\n border: 1px solid $splitter-color;\n z-index: 99;\n opacity: .68;\n transition: opacity .15s $ease-out-quad !important;\n\n &::before {\n @extend %handle-area;\n top: 100%;\n }\n\n &::after {\n @extend %handle-area;\n bottom: 100%;\n }\n\n &:hover {\n transition: all .25s ease-out;\n opacity: 1;\n }\n }\n\n %igx-splitter-bar--focus {\n // Remove the default browser outline styles\n outline: transparent solid 1px;\n box-shadow: inset 0 0 0 1px var-get($theme, 'focus-color');\n\n @if $variant == 'indigo-design' {\n background: var-get($theme, 'focus-color');\n }\n }\n\n %igx-splitter-bar--vertical {\n flex-direction: column;\n height: 100%;\n\n &::before {\n @extend %handle-area--vertical;\n top: 0;\n right: 100%;\n }\n\n &::after {\n @extend %handle-area--vertical;\n top: 0;\n left: 100%;\n }\n }\n\n %igx-splitter-handle {\n background: var-get($theme, 'handle-color');\n border-radius: var-get($theme, 'border-radius');\n }\n\n %igx-splitter-handle--horizontal {\n width: 25%;\n height: var-get($theme, 'size');\n margin: 0 rem(48px);\n }\n\n %igx-splitter-handle--vertical {\n width: var-get($theme, 'size');\n height: 25%;\n margin: rem(48px) 0;\n }\n\n %igx-splitter-hitbox {\n position: absolute;\n content: '';\n background: if($debug-hitbox, $hitbox-debug-color, transparent);\n }\n\n %igx-splitter-expander {\n position: relative;\n width: 0;\n height: 0;\n border-inline-end: var-get($theme, 'size') solid transparent;\n border-inline-start: var-get($theme, 'size') solid transparent;\n cursor: pointer;\n z-index: 1;\n }\n\n %igx-splitter-expander--start {\n border-bottom: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - #{map.get($theme, 'size')});\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 4);\n height: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n\n %igx-splitter-expander--end {\n border-bottom: unset;\n border-top: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 4);\n height: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n\n %igx-splitter-expander--start-vertical {\n border-top: var-get($theme, 'size') solid transparent;\n border-inline-end: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n border-bottom: var-get($theme, 'size') solid transparent;\n border-inline-start: unset;\n\n &::before {\n @extend %igx-splitter-hitbox;\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n width: calc(#{map.get($theme, 'size')} * 3);\n height: calc(#{map.get($theme, 'size')} * 4);\n }\n }\n\n %igx-splitter-expander--end-vertical {\n border-top: var-get($theme, 'size') solid transparent;\n border-inline-end: unset;\n border-bottom: var-get($theme, 'size') solid transparent;\n border-inline-start: var-get($theme, 'size') solid var-get($theme, 'expander-color');\n\n &::before {\n @extend %igx-splitter-hitbox;\n left: calc(100% - (#{map.get($theme, 'size')} * 2));\n top: calc(100% - (#{map.get($theme, 'size')} * 2));\n height: calc(#{map.get($theme, 'size')} * 4);\n width: calc(#{map.get($theme, 'size')} * 3);\n }\n }\n}\n","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 combo-theme(\n $palette: null,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin combo($theme) {\n @include css-vars($theme);\n\n %igx-combo {\n position: relative;\n display: block;\n }\n\n %igx-combo__checkbox {\n margin-inline-end: 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-get($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-get($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-get($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","@use '../../base' as *;\n@use 'sass:map';\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 elevation\n/// @requires text-contrast\n/// @requires var-get\n/// @requires rem\n@mixin date-picker($theme) {\n $palette: map.get($theme, 'palette');\n @include css-vars($theme, '.igx-date-picker');\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n %date-picker {\n box-shadow: elevation($elevation: 24);\n border-radius: border-radius(var-get($theme, 'border-radius'));\n background: var-get($theme, 'content-background');\n overflow: hidden;\n\n %cal-display {\n background: var-get($theme, 'content-background');\n }\n\n %cal-header-display {\n background: var-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n }\n\n %cal-picker-arrow {\n color: var-get($theme, 'picker-arrow-color');\n\n &:hover {\n color: var-get($theme, 'picker-arrow-hover-color');\n }\n }\n\n %cal-picker-date {\n color: var-get($theme, 'picker-text-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'picker-text-hover-color');\n }\n }\n\n %cal-value {\n color: var-get($theme, 'content-text-color');\n min-width: 14.28%;\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'date-selected-text-color');\n }\n }\n }\n\n %cal-value--label {\n color: var-get($theme, 'label-color');\n\n &:hover,\n &:focus {\n color: var-get($theme, 'label-color');\n }\n }\n\n %cal-value--weekend {\n color: var-get($theme, 'weekend-text-color');\n }\n\n %cal-value--special {\n color: var-get($theme, 'date-special-text-color');\n background: var-get($theme, 'date-special-background');\n }\n\n %cal-value--disabled {\n color: var-get($theme, 'date-disabled-text-color');\n }\n\n %cal-value--year-current {\n color: var-get($theme, 'year-current-text-color');\n\n @if $bootstrap-theme {\n &:hover,\n &:focus {\n color: var-get($theme, 'year-hover-text-color');\n }\n }\n }\n\n %cal-value--year-hover {\n color: var-get($theme, 'year-hover-text-color');\n }\n\n %cal-value--month-hover {\n color: var-get($theme, 'month-hover-text-color');\n }\n\n %cal-value--month-current {\n color: var-get($theme, 'month-current-text-color');\n }\n\n %cal-value--inactive {\n color: var-get($theme, 'inactive-text-color');\n\n &:hover {\n color: var-get($theme, 'inactive-text-color');\n }\n }\n\n %cal-value--selected {\n color: var-get($theme, 'date-selected-text-color');\n }\n\n %cal-value--current {\n color: var-get($theme, 'date-current-text-color');\n }\n }\n\n %date-picker--vertical {\n min-width: 368px; /* 168px for header + 200px for the content */\n }\n\n %date-picker--dropdown {\n display: flex;\n flex: 1 0 0;\n flex-direction: column;\n box-shadow: elevation($elevation: 3);\n }\n\n %date-picker__buttons {\n display: flex;\n justify-content: flex-end;\n padding: rem(8px);\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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 color for date range separator label.\n/// @requires var-get\n/// @requires rem\n@function date-range-picker-theme(\n $palette: null,\n $schema: $light-schema,\n $label-color: null\n) {\n $name: 'igx-date-range';\n $date-range-schema: ();\n\n @if map.has-key($schema, $name) {\n $date-range-schema: map.get($schema, $name);\n } @else {\n $date-range-schema: $schema;\n }\n\n $theme: apply-palette($date-range-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n label-color: $label-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin date-range-picker($theme) {\n @include css-vars($theme);\n\n $base-scale-size: (\n 'comfortable': rem(16px),\n 'cosy': rem(19px),\n 'compact': rem(22px)\n );\n\n %igx-date-range-picker {\n display: flex;\n\n > igx-icon {\n cursor: pointer;\n }\n\n igx-input-group {\n flex: 1;\n }\n }\n\n igx-date-range-start,\n igx-date-range-end,\n %igx-date-range-picker__start,\n %igx-date-range-picker__end {\n flex: 1 0 0%;\n }\n\n %igx-date-range-picker__label {\n display: flex;\n align-items: center;\n color: var-get($theme, 'label-color');\n margin: 0 rem(8px);\n padding-top: rem(18px, map.get($base-scale-size, 'comfortable'));\n }\n\n %igx-date-range-picker--cosy {\n %igx-date-range-picker__label {\n padding-top: rem(18px, map.get($base-scale-size, 'cosy'));\n }\n }\n\n %igx-date-range-picker--compact {\n %igx-date-range-picker__label {\n padding-top: rem(18px, map.get($base-scale-size, 'compact'));\n }\n }\n\n %igx-date-range-picker-buttons {\n display: flex;\n justify-content: flex-end;\n padding: 0 rem(16px) rem(16px) rem(16px);\n\n > * {\n margin-inline-end: rem(8px);\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n &:empty {\n display: none;\n }\n }\n}\n\n/// Adds typography styles for the igx-date-range-picker component.\n/// Uses the '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 [(label: 'subtitle-1')] - The categories from the typographic scale used for type styles.\n/// @requires {mixin} type-style\n@mixin date-range-typography(\n $type-scale,\n $categories: (\n label: 'subtitle-1',\n )\n) {\n $label: map.get($categories, 'label');\n\n %igx-date-range__label {\n @include type-style($type-scale, $label);\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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: divider-theme($color: orange);\n/// // Pass the theme to the igx-divider component mixin\n/// @include divider($my-divider-theme);\n@function divider-theme(\n $palette: null,\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} css-vars\n/// @requires var-get\n///\n@mixin divider($theme) {\n @include css-vars($theme);\n\n %igx-divider-display {\n display: block;\n height: 1px;\n background: var-get($theme, 'color');\n }\n\n %igx-divider--dashed {\n background: linear-gradient(to right, var-get($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-get($theme, 'color') 50%, transparent 50%);\n background-size: 1px 10px; /* dash size */\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use '../../typography/base' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access public\n/// @author <a href=\"https://github.com/desig9stein\" target=\"_blank\">Marin Popov</a>\n////\n\n/// @param {Map} $palette [null] - 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] - sets the color for the label.\n/// @param {Number} $symbol-size [null] - the size of the symbols.\n/// @param {Color} $symbol-empty-color [null] - sets the idle color for the symbol when it is a plane text.\n/// @param {Color} $symbol-full-color [null] - sets the color in selected state for the symbol when it is a plane text.\n/// @param {Color} $symbol-empty-filter [null] - the filter(s) used for the empty symbol.\n/// @param {Color} $symbol-full-filter [null] - the filter(s) used for the filled symbol.\n/// @param {Color} $disabled-label-color [null] - sets the color for the label in disabled state.\n/// @param {Color} $disabled-empty-symbol-color [null] - sets the idle color for the symbol in disabled state when it is a plane text.\n/// @param {Color} $disabled-full-symbol-color [null] - sets the color for the symbol in selected/disabled state when it is a plane text.\n///\n/// @requires $light-schema\n/// @requires extend\n///\n/// @example scss\n/// $my-rating-theme: rating-theme();\n/// @include rating($my-rating-theme);\n@function rating-theme(\n $palette: null,\n $schema: $light-schema,\n $rest...\n) {\n\n $name: 'igc-rating';\n $rating-schema: ();\n\n @if map.has-key($schema, $name) {\n $rating-schema: map.get($schema, $name);\n } @else {\n $rating-schema: $schema;\n }\n\n $theme: apply-palette($rating-schema, $palette);\n\n @return extend($theme, (name: $name), keywords($rest));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin rating($theme) {\n @include css-vars($theme: $theme, $prefix: ignore);\n\n igc-rating::part(label) {\n color: var-get($theme, 'label-color');\n }\n\n igc-rating::part(value-label) {\n color: color(map.get($theme, 'palette'), 'grays', 900);\n }\n \n igc-rating[disabled]::part(label),\n igc-rating[disabled]::part(value-label) {\n color: var-get($theme, 'disabled-label-color');\n }\n\n igc-rating[disabled] {\n --symbol-empty-color: var(--disabled-empty-symbol-color);\n --symbol-full-color: var(--disabled-full-symbol-color);\n --symbol-empty-filter: grayscale(100%) opacity(50%);\n --symbol-full-filter: grayscale(50%);\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use './excel-filtering-theme' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:color';\n@use 'sass:math';\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 [null] - 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 [null] - 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/// @param {Color} $header-selected-background [null] - The table header background color when selected (ex. column selection).\n/// @param {Color} $header-selected-text-color [null] - The table header text color when selected (ex. column selection).\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-selected-hover-text-color [null] - The selected row hover 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 cell that has been edited.\n/// @param {Color} $cell-new-color [null] - The text color of a new, unedited cell. Used when adding new row in a grid.\n/// @param {Color} $cell-disabled-color [null] - The text color of a disabled cell.\n/// @param {Color} $cell-selected-within-background [null] - The background of the selected cell inside a selected row/column.\n/// @param {Color} $cell-selected-within-text-color [null] - The color of the selected cell inside a selected row/column.\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/// @param {Color} $grouparea-color [null] - The grid group area 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-background-and [null] - The background color of advanced filtering \"AND\" condition.\n/// @param {Color} $filtering-background-and--focus [null] - The background color on focus/selected of advanced filtering \"AND\" condition.\n/// @param {Color} $filtering-background-or [null] - The background color of advanced filtering \"OR\" condition.\n/// @param {Color} $filtering-background-or--focus [null] - The background color on focus/selected of advanced filtering \"OR\" condition.\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 {Color} $grid-border-color [null] - The color of the grid border.\n/// @param {border-radius} $drop-area-border-radius [null] - The border radius used for column drop area.\n/// @requires $default-palette\n/// @requires $light-schema\n/// @requires apply-palette\n/// @requires luminance\n/// @requires text-contrast\n/// @requires to-opaque\n/// @requires extend\n/// @requires elevation\n@function grid-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $header-selected-background: null,\n $header-selected-text-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-selected-hover-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 $cell-new-color: null,\n $cell-disabled-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 $grouparea-color: 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 $filtering-background-and: null,\n $filtering-background-or: null,\n $filtering-background-and--focus: null,\n $filtering-background-or--focus: null,\n $tree-filtered-text-color: null,\n $tree-selected-filtered-row-text-color: null,\n $tree-selected-filtered-cell-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 $cell-selected-within-background: null,\n $cell-selected-within-text-color: null,\n) {\n $name: 'igx-grid';\n $selector: 'igx-grid, igx-hierarchical-grid, igx-pivot-grid, igx-tree-grid, igx-advanced-filtering-dialog, igx-grid-excel-style-filtering, .igx-excel-filter__secondary';\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 @if not($cell-selected-within-text-color) and $cell-selected-within-background {\n $cell-selected-within-text-color: text-contrast($cell-selected-within-background);\n }\n\n @if not($ghost-header-icon-color) and $ghost-header-background {\n @if meta.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 meta.type-of($header-background) == 'color' {\n $header-background: to-opaque($header-background, 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-selected-text-color) and $header-selected-background {\n $header-selected-text-color: text-contrast($header-selected-background);\n }\n\n @if not($header-border-color) and $header-background {\n @if meta.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 meta.type-of($row-odd-background) == 'color' and color.alpha($row-odd-background) != 1 {\n $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));\n\n $row-odd-background: to-opaque($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 meta.type-of($row-even-background) == 'color' and color.alpha($row-even-background) != 1 {\n $cbg: if($content-background, $content-background, map.get($theme, 'content-background'));\n\n $row-even-background: to-opaque($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 meta.type-of($content-background) == 'color' {\n $row-hover-background: to-opaque(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: text-contrast($row-selected-background);\n }\n\n @if not($row-selected-hover-text-color) and $row-selected-hover-background {\n $row-selected-hover-text-color: text-contrast($row-selected-hover-background);\n }\n\n @if not($row-border-color) and $content-background {\n @if meta.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 meta.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 meta.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($grouparea-color) and $grouparea-background {\n @if meta.type-of($grouparea-background) == 'color' {\n $grouparea-color: rgba(text-contrast($grouparea-background), .8)\n }\n }\n\n @if not($grouparea-color) and $header-background {\n @if meta.type-of($header-background) == 'color' {\n $grouparea-color: rgba(text-contrast($header-background), .8)\n }\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 meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {\n $filtering-header-background: to-opaque(lighten-color($header-background, 5%));\n } @else {\n $filtering-header-background: to-opaque(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 meta.type-of($header-background) == 'color' and luminance($header-background) < .5 {\n $filtering-row-background: to-opaque(lighten-color($header-background, 5%));\n } @else {\n $filtering-row-background: to-opaque(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(to-opaque($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: elevation($elevations, $grid-elevation);\n }\n\n @if not($drag-shadow) {\n $drag-elevation: map.get($grid-schema, 'drag-elevation');\n $drag-shadow: elevation($elevations, $drag-elevation);\n }\n\n @if not($drop-area-border-radius) {\n $drop-area-border-radius: border-radius(map.get($theme, 'drop-area-border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n\n header-background: $header-background,\n header-text-color: $header-text-color,\n header-selected-background: $header-selected-background,\n header-selected-text-color: $header-selected-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-selected-hover-text-color: $row-selected-hover-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 cell-new-color: $cell-new-color,\n\n cell-disabled-color: $cell-disabled-color,\n\n resize-line-color: $resize-line-color,\n\n drop-indicator-color: $drop-indicator-color,\n\n grouparea-background: $grouparea-background,\n grouparea-color: $grouparea-color,\n\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 filtering-background-and: $filtering-background-and,\n filtering-background-or: $filtering-background-or,\n filtering-background-and--focus: $filtering-background-and--focus,\n filtering-background-or--focus: $filtering-background-or--focus,\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\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 cell-selected-within-background: $cell-selected-within-background,\n cell-selected-within-text-color: $cell-selected-within-text-color,\n ));\n}\n\n@mixin _filtering-scroll-mask($theme, $dir) {\n display: block;\n position: absolute;\n width: rem(10px);\n content: '';\n inset-block: rem(-2px);\n background: linear-gradient(to #{$dir}, var-get($theme, 'filtering-row-background'), transparent);\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires {mixin} excel-filtering\n/// @requires color\n/// @requires contrast-color\n/// @requires rem\n/// @requires var-get\n@mixin grid($theme) {\n @include css-vars($theme);\n\n @include scale-in-ver-center();\n\n $palette: map.get($theme, 'palette');\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: $variant != 'bootstrap';\n\n $cbx-size: map.get((\n material: rem(20px),\n fluent: rem(20px),\n bootstrap: rem(14px),\n indigo-design: rem(20px),\n ), $variant);\n $cbx-bs-size: rem(14px);\n\n $grid-shadow: var-get($theme, 'grid-shadow');\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: end;\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: color($palette, 'grays', 300);\n\n $grid-header-border: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n\n $cell-pin: (\n style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),\n color: var-get($theme, 'pinned-border-color')\n );\n\n $padding-comfortable: rem(24px);\n $padding-cosy: rem(16px);\n $padding-compact: rem(12px);\n\n $grid-header-padding: (\n comfortable: 0 $padding-comfortable,\n cosy: 0 $padding-cosy,\n compact: 0 $padding-compact\n );\n\n $pivot-row-aria-padding: (\n comfortable: $padding-comfortable,\n cosy: $padding-cosy,\n compact: $padding-compact\n );\n\n $grid-cbx-padding: (\n comfortable: $padding-comfortable,\n cosy: $padding-cosy,\n compact: $padding-compact\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: 0 rem(24px),\n cosy: 0 rem(16px),\n compact: 0 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-header-weight: map.get((\n material: 600,\n fluent: 800,\n bootstrap: 700,\n indigo-design: 600,\n ), $variant);\n\n %disable-focus-styles {\n outline: 0;\n }\n\n %grid-display {\n --igx-tree-indent-size: #{rem(24px)};\n\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\n @if $variant == 'fluent' {\n box-shadow: 0 0 0 1px var-get($theme, 'grid-border-color');\n }\n\n outline-style: none;\n z-index: 1;\n\n %cbx-display {\n min-width: $cbx-size;\n }\n }\n\n %grid-display-cosy {\n --igx-tree-indent-size: #{rem(16px)};\n }\n\n %grid-display-compact {\n --igx-tree-indent-size: #{rem(12px)};\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-get($theme, 'header-background');\n color: var-get($theme, 'header-text-color');\n overflow: hidden;\n outline-style: none;\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 > [aria-activedescendant] {\n outline-style: none;\n }\n }\n\n %grid-thead {\n border-bottom: $grid-header-border;\n\n @if $bootstrap-theme {\n border-bottom-width: rem(2px);\n }\n\n z-index: 2;\n\n %grid__cbx-selection--push {\n align-items: flex-start;\n padding-top: math.div(map.get($grid-header-height, 'comfortable') - rem(20px), 2);\n }\n\n %grid-row {\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-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($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: math.div(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: math.div(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-inline-end: 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 position: relative;\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-inline-end: 1px solid var-get($theme, 'row-border-color');\n border-bottom: 1px solid var-get($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-get($theme, 'row-border-color');\n }\n }\n\n %grid-tbody {\n position: relative;\n background: var-get($theme, 'content-background');\n color: var-get($theme, 'content-text-color');\n overflow: hidden;\n z-index: 1;\n outline-style: none;\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-get($theme, 'content-text-color');\n flex-direction: column;\n padding: rem(24px);\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-get($theme, 'header-background');\n z-index: 10001;\n }\n\n %grid-thead-thumb {\n background: var-get($theme, 'header-background');\n border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');\n }\n\n %grid-tfoot-thumb {\n position: absolute;\n top: 0;\n inset-inline-end: 0;\n background: var-get($theme, 'header-background');\n border-inline-start: rem(1px) solid var-get($theme, 'header-border-color');\n }\n\n %grid-tbody-scrollbar {\n background: var-get($theme, 'content-background');\n border-inline-start: rem(1px) solid var-get($theme, 'row-border-color');\n position: relative;\n }\n\n %grid-tbody-scrollbar-start {\n background: var-get($theme, 'header-background');\n }\n\n %grid-tbody-scrollbar-main {\n position: relative;\n }\n\n %grid-tbody-scrollbar-end {\n background: var-get($theme, 'header-background');\n }\n\n %grid-scroll-start {\n background: var-get($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-get($theme, 'content-background');\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n outline-style: none;\n position: relative;\n background-clip: content-box !important;\n\n &:hover {\n background: var-get($theme, 'row-hover-background');\n color: var-get($theme, 'row-hover-text-color');\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-hover-text-color');\n background: var-get($theme, 'row-selected-hover-background');\n }\n\n %grid-cell--cross-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n }\n\n &%igx-grid__tr--ghost {\n @include css-vars((\n name: 'igx-grid-row',\n row-ghost-background: map.get($theme, 'row-ghost-background'),\n row-drag-color: map.get($theme, 'row-drago-color')\n ));\n\n background: var-get($theme, 'row-ghost-background');\n color: var-get($theme, 'row-drag-color');\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 flex: 1 0 auto;\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 border-inline-end: 1px solid transparent;\n background-clip: border-box;\n\n igx-icon {\n width: var(--igx-icon-size, #{$drag-icon-size});\n height: var(--igx-icon-size, #{$drag-icon-size});\n font-size: var(--igx-icon-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 }\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 }\n\n %igx-grid__drag-indicator--header {\n border-inline-end: $grid-header-border;\n }\n\n %igx-grid__drag-indicator--off {\n color: var-get($theme, 'row-drag-color');\n }\n\n %igx-grid__tr--drag {\n opacity: .5;\n }\n\n %grid-row--odd {\n background: var-get($theme, 'row-odd-background');\n color: var-get($theme, 'row-odd-text-color');\n }\n\n %grid-row--even {\n background: var-get($theme, 'row-even-background');\n color: var-get($theme, 'row-even-text-color');\n }\n\n %igx-grid__tr--expanded {\n border-bottom: none;\n }\n\n %igx-grid__tr--pinned {\n position: relative;\n background: inherit;\n z-index: 10000;\n\n %igx-grid__hierarchical-expander--empty {\n border-inline-end: rem(1px) solid var-get($theme, 'header-border-color');\n }\n }\n\n %igx-grid__tr--pinned-top {\n border-bottom: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n }\n\n %igx-grid__tr--pinned-bottom {\n border-top: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n position: absolute;\n bottom: 0;\n }\n\n %igx-grid__td--bool {\n justify-content: center;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n\n %igx-icon--error {\n color: color($palette, 'grays', 500);\n }\n }\n\n %igx-grid__td--bool-true {\n %igx-icon--success {\n color: color($palette, 'grays', 700);\n }\n }\n\n %igx-grid__tr--edit {\n border-bottom: 1px solid var-get($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 inset-inline-start: 0;\n background: var-get($theme, 'edit-mode-color');\n }\n\n &%grid-row {\n border-bottom: 1px solid var-get($theme, 'edit-mode-color');\n }\n\n %igx-grid__td--editing {\n border: none;\n\n %form-group-bundle--focus {\n caret-color: var-get($theme, 'edit-mode-color') !important;\n }\n\n %form-group-bundle--fluent--focus {\n &::after {\n border: none !important;\n }\n }\n\n %form-group-border {\n background: var-get($theme, 'edit-mode-color') !important;\n }\n }\n\n [aria-readonly='true'] {\n color: var-get($theme, 'cell-disabled-color');\n\n igx-icon {\n color: var-get($theme, 'cell-disabled-color');\n }\n }\n }\n\n %igx-grid__tr--inner {\n display: flex;\n background: inherit;\n }\n\n %igx-grid__tr--header {\n display: flex;\n align-items: center;\n }\n\n %igx-grid__tr--add-animate {\n @include animation(scale-in-ver-center .2s $ease-in-out-quad);\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: if($variant == 'indigo-design', rem(4px), rem(2px));\n height: 100%;\n z-index: 10000;\n background: var-get($theme, 'edited-row-indicator');\n }\n }\n\n %grid-row--group {\n position: relative;\n background: var-get($theme, 'header-background') !important;\n }\n\n %igx-grid-row--filtered {\n %grid-cell-text {\n color: var-get($theme, 'tree-filtered-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-filtered-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-filtered-text-color');\n }\n }\n\n %grid-cell--selected {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n }\n }\n }\n\n %grid-row--selected--filtered {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n\n &:hover {\n color: var-get($theme, 'tree-selected-filtered-row-text-color');\n }\n }\n\n %grid-cell--selected {\n %grid-cell-text {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'tree-selected-filtered-cell-text-color');\n\n &:hover {\n color: var-get($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-inline-end: rem(8);\n cursor: pointer;\n\n color: var-get($theme, 'expand-icon-color');\n\n &:hover {\n color: var-get($theme, 'expand-icon-hover-color')\n }\n\n [dir='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-inline-end: rem(8px, 16px);\n\n %circular-outer {\n stroke: var-get($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: start;\n background-clip: border-box !important;\n }\n\n // This is no longer being extended and is left\n // here for reference purposes only. It seems setting\n // overflow: hidden on the cell prevents drag and selection\n // of the cell.\n // See github issue #9821\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-get($theme, 'cell-active-border-color');\n\n %igx-grid__filtering-cell,\n %grid-cell-header {\n border-inline-end-color: var-get($theme, 'cell-active-border-color');\n border-bottom-color: var-get($theme, 'cell-active-border-color');\n }\n }\n\n %grid-cell--invalid {\n padding-inline-end: rem(4px) !important;\n\n > igx-icon {\n margin-inline-start: auto;\n color: color($palette, 'error', 500);\n width: var(--igx-icon-size, rem(18px));\n height: var(--igx-icon-size, rem(18px));\n font-size: var(--igx-icon-size, rem(18px));\n }\n\n %grid-cell-text {\n width: 100%;\n }\n\n .igx-input-group__bundle {\n &:focus-within {\n &::after {\n border: none !important;\n }\n }\n }\n }\n\n %grid-cell--valid {\n box-shadow: inset 0 0 0 rem(2px) color($palette, 'success', 500) !important;\n }\n\n %grid-cell--pinned-selected,\n %grid-cell--selected {\n color: var-get($theme, 'cell-selected-text-color');\n background: var-get($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 &:hover {\n color: var-get($theme, 'cell-selected-text-color');\n }\n }\n }\n\n %grid-row--selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n\n %grid-cell--selected,\n %grid-cell--pinned-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n\n &:hover {\n background: var-get($theme, 'row-selected-hover-background');\n color: var-get($theme, 'row-selected-hover-text-color');\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-hover-text-color');\n background: var-get($theme, 'row-selected-hover-background');\n }\n }\n\n %igx-grid__tree-grouping-indicator {\n color: var-get($theme, 'row-selected-text-color');\n\n &:hover {\n color: var-get($theme, 'row-selected-text-color');\n }\n }\n }\n\n %grid-cell--column-selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n }\n\n %grid-cell--cross-selected {\n color: var-get($theme, 'cell-selected-within-text-color');\n background: var-get($theme, 'cell-selected-within-background');\n }\n\n %igx-grid__td--new {\n color: var-get($theme, 'cell-new-color');\n }\n\n %igx-grid__td--edited {\n %grid-cell-text {\n font-style: italic;\n color: var-get($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: color(map.get($theme, 'palette'), 'error');\n text-decoration: line-through;\n }\n }\n\n %igx-grid__tr--disabled {\n %grid-cell-text {\n color: var-get($theme, 'cell-disabled-color');\n }\n }\n\n %igx-grid__td--editing {\n background: var-get($theme, 'cell-editing-background') !important;\n box-shadow: inset 0 0 0 rem(2px) var-get($theme, 'edit-mode-color');\n padding: 0 !important;\n\n // Have a more stable visual editing experience\n igx-input-group,\n igx-select,\n igx-date-picker,\n igx-time-picker {\n width: 100%;\n height: 100%;\n }\n\n igx-input-group {\n --theme: fluent;\n padding-top: 0 !important;\n }\n\n .igx-input-group__bundle {\n border: none !important;\n\n &::before {\n content: none !important;\n }\n }\n\n &.igx-grid__td--invalid {\n box-shadow: inset 0 0 0 rem(2px) color($palette, 'error', 500) !important;\n padding-inline-end: rem(4px) !important;\n }\n\n igx-prefix,\n igx-suffix {\n padding-top: 0 !important;\n padding-bottom: 0 !important;\n }\n\n igx-date-range-picker {\n height: 100%;\n }\n\n igx-time-picker [igxLabel] {\n display: none;\n }\n\n %form-group-bundle {\n height: 100%;\n }\n\n input {\n margin: 0 auto;\n max-width: 100%;\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--column-selected {\n color: var-get($theme, 'row-selected-text-color');\n background: var-get($theme, 'row-selected-background');\n\n &:hover {\n background: var-get($theme, 'row-selected-hover-background');\n color: var-get($theme, 'row-selected-text-color');\n }\n }\n\n %grid-cell--pinned-last {\n border-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n\n %igx-grid__filtering-cell,\n %grid-cell-header {\n border-inline-end: none;\n }\n\n &%grid-cell--editing {\n border-inline-end: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;\n }\n }\n\n %grid-cell--pinned-first {\n border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color') !important;\n\n &%grid-cell--editing {\n border-inline-start: map.get($cell-pin, 'style') var-get($theme, 'cell-selected-background') !important;\n }\n }\n\n %grid-cell--row-pinned-first {\n overflow: hidden;\n }\n\n %grid-cell--pinned-chip {\n margin-inline-end: rem(12px);\n }\n\n %grid-cell--pinned-chip--cosy {\n margin-inline-end: rem(8px);\n }\n\n %grid-cell--pinned-chip--compact {\n margin-inline-end: rem(4px);\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-inline-end: $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-get($theme, 'filtering-header-background');\n color: var-get($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: math.div(map.get($grid-header-height, 'comfortable'), $grid-head-fs);\n transition: color 250ms ease-in-out;\n }\n\n %grid-cell-header-title--cosy {\n line-height: math.div(map.get($grid-header-height, 'cosy'), $grid-head-fs);\n }\n\n %grid-cell-header-title--compact {\n line-height: math.div(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 position: relative;\n display: flex;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(15px)});\n height: var(--igx-icon-size, #{rem(15px)});\n font-size: var(--igx-icon-size, #{rem(15px)});\n }\n\n &::after {\n content: attr(data-sortIndex);\n position: absolute;\n top: -5px;\n inset-inline-end: -1px;\n font-size: rem(10px);\n text-align: end;\n font-family: sans-serif;\n line-height: rem(10px);\n }\n }\n }\n\n\n %igx-grid-th__expander {\n display: flex;\n align-items: center;\n justify-content: center;\n margin-inline-end: rem(8px);\n cursor: pointer;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n }\n\n &:hover {\n igx-icon {\n color: var-get($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--selectable {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n\n @if $variant != 'indigo-design' {\n opacity: .7;\n\n &%grid__drag-ghost-image {\n opacity: 1;\n }\n } @else {\n opacity: 1;\n }\n\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n ::after {\n background: var-get($theme, 'header-selected-background');\n }\n }\n\n &%igx-grid-th--sorted {\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n &:focus,\n &:hover {\n color: var-get($theme, 'header-selected-text-color');\n }\n }\n }\n }\n\n %igx-grid-th--selected {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n\n .sort-icon::after {\n background: var-get($theme, 'header-selected-background');\n }\n\n &%igx-grid-th--sorted {\n .sort-icon {\n color: var-get($theme, 'header-selected-text-color');\n\n &:focus,\n &:hover {\n color: var-get($theme, 'header-selected-text-color');\n }\n }\n }\n }\n\n %igx-grid-th--active {\n @extend %grid-cell--active;\n\n %igx-grid-th--selected,\n %igx-grid-th--selectable {\n @extend %grid-cell--active;\n }\n }\n\n %igx-grid-summary--active {\n @extend %grid-cell--active !optional;\n }\n\n %igx-grid-th--sortable {\n .sort-icon {\n cursor: pointer;\n opacity: .7;\n\n &:hover {\n opacity: 1;\n }\n }\n }\n\n %igx-grid-th--sorted {\n .sort-icon {\n opacity: 1;\n color: var-get($theme, 'sorted-header-icon-color');\n\n &:hover {\n color: var-get($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 cursor: pointer;\n opacity: .7;\n\n &:hover {\n opacity: 1;\n }\n }\n }\n\n .sort-icon {\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 background: inherit;\n z-index: 4;\n background-clip: border-box;\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 inset-inline-end: -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-get($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 inset-inline-end: 100%;\n }\n\n &::after {\n inset-inline-start: 100%;\n }\n }\n\n %grid-summaries {\n display: flex;\n overflow: hidden;\n background: var-get($theme, 'root-summaries-background');\n outline-style: none;\n\n %igx-grid-summary__result {\n color: var-get($theme, 'root-summaries-text-color');\n }\n }\n\n %grid-summaries--body {\n background: var-get($theme, 'body-summaries-background');\n border-bottom: 1px dashed var-get($theme, 'row-border-color');\n\n &:last-of-type {\n border-bottom: none;\n }\n\n %igx-grid-summary__result {\n color: var-get($theme, 'body-summaries-text-color');\n }\n }\n\n %grid-summaries-patch {\n @if $bootstrap-theme {\n background: color($palette, 'grays', 100);\n } @else {\n background: inherit;\n }\n position: relative;\n z-index: 1;\n border-inline-end: 1px solid var-get($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 inset-inline-start: -1px;\n }\n\n %igx-grid-th__drop-indicator-right {\n inset-inline-end: -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-inline-end: 1px solid var-get($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 inset-inline-start: -3px;\n }\n\n &::before {\n bottom: 0;\n border-width: 0 4px 4px;\n border-color: transparent transparent var-get($theme, 'drop-indicator-color');\n }\n\n &::after {\n top: 0;\n border-width: 4px 4px 0;\n border-color: var-get($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 inset-inline-start: 0;\n }\n\n %grid__scroll-on-drag-right {\n inset-inline-end: 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-get($theme, 'ghost-header-background');\n color: var-get($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 inset-inline-start: -99999px;\n border: none;\n box-shadow: var-get($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: end;\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-get($theme, 'ghost-header-icon-color');\n margin-inline-end: rem(12px);\n }\n\n %grid__drag-ghost-image-icon-group {\n color: var-get($theme, 'ghost-header-icon-color');\n padding: var-get($grid-header-padding, 'comfortable');\n padding-inline-end: 0;\n margin-inline-end: rem(8);\n }\n\n %igx-grid__drag-col-header {\n background: var-get($theme, 'header-background');\n\n %grid-cell-header {\n > * {\n opacity: .4;\n }\n }\n }\n\n // Group by section\n %igx-grid__group-row {\n background: var-get($theme, 'group-row-background');\n display: flex;\n outline-style: none;\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n min-height: map.get($grid-header-height, 'comfortable');\n\n %igx-grid__drag-indicator {\n cursor: default;\n flex-grow: 0;\n }\n }\n\n %igx-grid__group-row--active {\n background: var-get($theme, 'group-row-selected-background');\n @extend %grid-cell--active !optional;\n\n %igx-grid__grouping-indicator {\n color: var-get($theme, 'expand-icon-color');\n }\n\n %igx-grid__drag-indicator {\n border: 1px solid var-get($theme, 'cell-active-border-color');\n border-inline-start-width: 0;\n border-inline-end-width: 0;\n box-shadow: inset 1px 0 0 0 var-get($theme, 'cell-active-border-color');\n }\n\n &:hover {\n background: var-get($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-inline-end: rem(4px);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n\n %igx-group-label__icon {\n user-select: none;\n\n igx-icon {\n color: var-get($theme, 'group-label-icon');\n width: var(--igx-icon-size, #{rem(16px)});\n height: var(--igx-icon-size, #{rem(16px)});\n font-size: var(--igx-icon-size, #{rem(16px)});\n }\n }\n\n %igx-group-label__column-name {\n color: var-get($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-get($theme, 'group-count-background');\n color: var-get($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-get($theme, 'group-label-text')\n }\n\n [dir='rtl'] {\n %igx-grid__group-content {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n }\n\n %igx-grid__group-content--cosy {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n }\n\n %igx-grid__group-content--compact{\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n }\n\n %igx-group-label {\n > * {\n margin-inline-start: rem(4px);\n\n &:last-child {\n margin-inline-start: 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-inline-start: 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-inline-start: 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-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n min-height: map.get($grid-header-height, 'compact');\n }\n\n %igx-grid__row-indentation {\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable');\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n background: inherit;\n z-index: 1;\n background-clip: border-box;\n\n &::after {\n content: '';\n position: absolute;\n width: 100%;\n height: rem(1px);\n bottom: -1px;\n inset-inline-start: 0;\n background: transparent;\n }\n\n %igx-button--icon {\n width: rem(28px);\n height: rem(28px);\n color: var-get($theme, 'expand-all-icon-color');\n }\n\n &:focus,\n &:hover {\n %igx-button--icon {\n color: var-get($theme, 'expand-all-icon-hover-color');\n }\n }\n }\n\n %igx-grid__row-indentation--cosy {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy')\n }\n\n %igx-grid__row-indentation--compact {\n padding-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n padding-inline-end: 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-get($theme, 'grouparea-background');\n color: var-get($theme, 'grouparea-color');\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 %igx-chip {\n margin-top: rem(8px);\n margin-bottom: rem(8px);\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: var(--igx-icon-size, #{rem(16px)});\n height: var(--igx-icon-size, #{rem(16px)});\n font-size: var(--igx-icon-size, #{rem(16px)});\n }\n\n [dir='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 %igx-chip {\n margin-top: rem(8px);\n margin-bottom: rem(8px);\n }\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 %igx-chip {\n margin-top: rem(4px);\n margin-bottom: rem(4px);\n }\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-get($theme, 'drop-area-border-radius');\n padding: map.get($grid-cell-padding, 'comfortable');\n flex: 1 0 0%;\n background: var-get($theme, 'drop-area-background');\n\n %igx-drop-area__icon {\n color: var-get($theme, 'drop-area-icon-color');\n width: rem(16px);\n height: rem(16px);\n font-size: rem(16px);\n margin-inline-end: rem(8px);\n }\n }\n\n %igx-drop-area--hover {\n background: var-get($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-get($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-get($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-get($theme, 'drop-area-text-color');\n font-size: rem(13px);\n }\n\n %igx-grid__grouping-indicator {\n position: relative;\n display: flex;\n\n user-select: none;\n justify-content: center;\n align-items: center;\n z-index: 1;\n cursor: pointer;\n padding-inline-end: $grouping-padding-right;\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'comfortable')};\n min-height: map.get($grid-header-height, 'comfortable');\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n width: var(--igx-icon-size, #{$indicator-icon-width});\n }\n\n &:hover,\n &:focus {\n outline-style: none;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n }\n\n %igx-grid__grouping-indicator--cosy {\n min-height: map.get($grid-header-height, 'cosy');\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'cosy')};\n }\n\n %igx-grid__grouping-indicator--compact {\n min-height: map.get($grid-header-height, 'compact');\n margin-inline-start: #{map.get($grid-grouping-indicator-padding, 'compact')};\n }\n\n %igx-grid__header-indentation {\n position: relative;\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'comfortable');\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n background: var-get($theme, 'header-background');\n z-index: 4;\n }\n\n %igx-grid__header-indentation--cosy {\n padding-inline-end: map.get($grid-grouping-indicator-padding, 'cosy');\n }\n\n %igx-grid__header-indentation--compact {\n padding-inline-end: 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 inset-inline-start: map.get($grid-grouping-indicator-padding, 'comfortable');\n\n &:hover {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'comfortable') - rem(24px), 2);\n }\n }\n\n %igx-grid__group-expand-btn--cosy {\n inset-inline-start: map.get($grid-grouping-indicator-padding, 'cosy');\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'cosy') - rem(24px), 2);\n }\n }\n\n %igx-grid__group-expand-btn--compact {\n inset-inline-start: map.get($grid-grouping-indicator-padding, 'compact');\n\n &%igx-grid__group-expand-btn--push {\n top: math.div(map.get($grid-header-height, 'compact') - rem(24px), 2);\n }\n }\n\n @for $i from 1 through 10 {\n %igx-grid__row-indentation--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'comfortable')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'comfortable')};\n }\n }\n\n %igx-grid__row-indentation-cosy--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'cosy')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row-cosy--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'cosy')};\n }\n }\n\n %igx-grid__row-indentation-compact--level-#{$i} {\n padding-inline-start: calc(#{$i * map.get($grid-grouping-indicator-padding, 'compact')} + #{$indicator-icon-width});\n }\n\n %igx-grid__group-row-compact--padding-level-#{$i} {\n %igx-grid__grouping-indicator {\n padding-inline-start: #{$i * map.get($grid-grouping-indicator-padding, 'compact')};\n }\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__addrow-snackbar {\n position: absolute;\n z-index: 5;\n bottom: rem(24px);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n }\n\n %igx-grid__filtering-cell {\n display: flex;\n align-items: center;\n border-inline-end: $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--selected {\n color: var-get($theme, 'header-selected-text-color');\n background: var-get($theme, 'header-selected-background');\n }\n\n %igx-grid__filtering-cell-indicator {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n padding-inline-end: rem(8px);\n margin-inline-start: rem(8px);\n cursor: pointer;\n visibility: visible;\n\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(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 inset-inline-end: 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-get($theme, 'filtering-row-background');\n color: var-get($theme, 'filtering-row-text-color');\n inset-inline-start: 0;\n bottom: 0;\n z-index: 3;\n\n &::after {\n display: block;\n position: absolute;\n content: '';\n background: inherit;\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: 0;\n box-shadow: 0 1px 0 var-get($theme, 'filtering-row-background'),\n 0 4px 10px rgba(0, 0, 0, .12);\n z-index: -1;\n }\n\n igx-input-group {\n --theme: fluent;\n width: 100%;\n max-width: rem(200px);\n min-width: rem(140px);\n }\n\n igx-prefix:focus {\n color: color(map.get($theme, 'palette'), 'secondary');\n }\n\n igx-suffix {\n igx-icon {\n outline-style: none;\n\n &:focus {\n color: color($palette, 'secondary');\n }\n\n + igx-icon {\n margin-inline-start: rem(4px);\n }\n }\n }\n }\n\n %igx-grid__filtering-dropdown-items {\n display: flex;\n align-items: center;\n }\n\n %igx-grid__filtering-dropdown-text {\n margin-inline-start: rem(16px);\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 min-width: rem(56px);\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 inset-inline-start: rem(12px);\n /* IE fix for vertical alignment*/\n top: 50%;\n transform: translateY(-50%);\n }\n\n span {\n margin-inline-start: rem(16px);\n }\n }\n }\n\n %igx-grid__filtering-scroll-start {\n width: rem(24px);\n height: rem(24px);\n position: relative;\n overflow: visible;\n margin: 0 rem(8px);\n z-index: 1;\n\n &::after {\n @include _filtering-scroll-mask($theme, right);\n inset-inline-start: calc(100% + 6px);\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n\n &::after {\n content: initial;\n }\n\n &::before {\n @include _filtering-scroll-mask($theme, right);\n inset-inline-end: calc(100% + 6px);\n }\n }\n }\n\n %igx-grid__filtering-scroll-end {\n width: rem(24px);\n height: rem(24px);\n position: relative;\n overflow: visible;\n margin: 0 rem(8px);\n z-index: 1;\n\n &::before {\n @include _filtering-scroll-mask($theme, left);\n inset-inline-end: calc(100% + 6px);\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n\n &::before {\n content: initial;\n }\n\n &::after {\n @include _filtering-scroll-mask($theme, left);\n inset-inline-start: calc(100% + 6px);\n }\n }\n }\n\n %igx-grid__tr--highlighted {\n position: relative;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: 4px;\n height: 100%;\n background: var-get($theme, 'row-highlight');\n z-index: 3;\n }\n\n %igx-grid__tr--edited {\n &::before {\n inset-inline-start: rem(4px);\n }\n }\n\n &::before {\n inset-inline-start: rem(4px);\n }\n }\n\n %igx-grid__tr-container {\n border-bottom: 1px solid var-get($theme, 'row-border-color');\n }\n\n %igx-grid__tr-container--active {\n @extend %grid-cell--active !optional;\n }\n\n %igx-grid__hierarchical-expander {\n user-select: none;\n background: inherit;\n padding-inline-start: map.get($hierarchical-grid-indent, 'comfortable');\n padding-inline-end: 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-get($theme, 'expand-icon-color');\n background-clip: border-box;\n\n &:focus {\n outline: none;\n\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n &:hover {\n igx-icon {\n color: var-get($theme, 'expand-icon-hover-color');\n }\n }\n\n igx-icon {\n color: var-get($theme, 'expand-icon-color');\n max-width: $hierarchical-action-icon;\n min-width: $hierarchical-action-icon;\n }\n\n [dir='rtl'] & {\n transform: scaleX(-1);\n }\n\n &--empty {\n cursor: default;\n pointer-events: none;\n }\n }\n\n %igx-grid__hierarchical-expander--cosy {\n padding-inline-start: map.get($hierarchical-grid-indent, 'cosy');\n padding-inline-end: map.get($hierarchical-grid-indent, 'cosy');\n }\n\n %igx-grid__hierarchical-expander--compact {\n padding-inline-start: map.get($hierarchical-grid-indent, 'compact');\n padding-inline-end: map.get($hierarchical-grid-indent, 'compact');\n }\n\n %igx-grid__hierarchical-expander--header {\n background: inherit;\n border-inline-end: 1px solid var-get($theme, 'header-border-color');\n z-index: 3;\n background-clip: border-box;\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__header-indentation--no-border {\n border-inline-end: 1px solid transparent;\n }\n\n %igx-grid__hierarchical-indent {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'comfortable')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'comfortable');\n margin-inline-end: map.get($hierarchical-grid-indent, 'comfortable');\n margin-bottom: map.get($hierarchical-grid-indent, 'comfortable');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'comfortable')} + 18px);\n }\n }\n\n %igx-grid__hierarchical-indent--cosy {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'cosy')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'cosy');\n margin-inline-end: map.get($hierarchical-grid-indent, 'cosy');\n margin-bottom: map.get($hierarchical-grid-indent, 'cosy');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'cosy')} + 18px);\n }\n }\n\n %igx-grid__hierarchical-indent--compact {\n margin-inline-start: calc(2 * #{map.get($hierarchical-grid-indent, 'compact')} + #{$hierarchical-action-icon});\n margin-top: map.get($hierarchical-grid-indent, 'compact');\n margin-inline-end: map.get($hierarchical-grid-indent, 'compact');\n margin-bottom: map.get($hierarchical-grid-indent, 'compact');\n\n &--scroll {\n margin-inline-end: calc(#{map.get($hierarchical-grid-indent, 'compact')} + 18px);\n }\n }\n\n @include excel-filtering($theme, $palette);\n\n %advanced-filtering-dialog {\n background: var-get($theme, 'filtering-row-background');\n box-shadow: elevation($elevation: 12);\n\n igx-query-builder {\n --igx-query-builder-background: #{var-get($theme, 'filtering-row-background')};\n --igx-query-builder-background-and: #{var-get($theme, 'filtering-background-and')};\n --igx-query-builder-background-and--focus: #{var-get($theme, 'filtering-background-and--focus')};\n --igx-query-builder-background-or: #{var-get($theme, 'filtering-background-or')};\n --igx-query-builder-background-or--focus: #{var-get($theme, 'filtering-background-or--focus')};\n box-shadow: none;\n }\n\n igx-query-builder-header {\n cursor: grab;\n }\n }\n\n %igx-grid__filtering-row-editing-buttons--small,\n %igx-grid__filtering-row-editing-buttons {\n display: flex;\n align-items: center;\n\n button {\n transition: none;\n }\n }\n\n %igx-grid__filtering-row-editing-buttons--small {\n button {\n &:not([disabled]) {\n igx-icon {\n color: var-get($theme, 'sorted-header-icon-color');\n }\n }\n }\n }\n\n %igx-grid__tr-action {\n &:last-of-type {\n border-inline-end: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n }\n\n // Pivot grid\n %igx-grid__pivot--super-compact {\n %grid-cell-display,\n %grid-cell-header {\n padding: 0 rem(4px) !important;\n min-height: rem(24px) !important;\n height: rem(24px);\n }\n\n %grid-cell-header {\n > * {\n line-height: normal;\n align-self: initial;\n max-height: 100%;\n }\n }\n }\n\n\n %grid-thead--pivot {\n display: flex;\n\n %grid-thead--virtualizationWrapper {\n border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n }\n\n %grid-thead--virtualizationWrapper {\n height: 100%;\n }\n\n %grid-thead--virtualizationContainer {\n overflow: visible;\n height: 100%;\n }\n\n %igx-grid__tr-pivot {\n display: flex;\n align-items: center;\n background: inherit;\n overflow: hidden;\n z-index: 3;\n height: map.get($grid-header-height, 'comfortable');\n\n &--cosy {\n height: map.get($grid-header-height, 'cosy');\n padding: map.get($grid-header-padding, 'cosy');\n }\n\n &--compact {\n height: map.get($grid-header-height, 'compact');\n padding: map.get($grid-header-padding, 'compact');\n }\n\n padding: map.get($grid-header-padding, 'comfortable');\n background-clip: border-box !important;\n border-inline-start: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n\n igx-chips-area {\n flex-wrap: nowrap;\n width: auto;\n\n > * {\n margin-inline-end: rem(4px);\n }\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n\n %igx-grid__pivot-filter-toggle {\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n position: relative;\n\n > igx-badge {\n position: absolute;\n top: rem(-4px);\n inset-inline-start: 60%;\n width: rem(18px);\n min-width: rem(18px);\n height: rem(18px);\n font-size: rem(10px);\n pointer-events: none;\n user-select: none;\n }\n }\n\n %igx-grid__pivot-empty-chip-area {\n line-height: normal;\n font-size: rem(14px);\n margin-inline-end: 0 !important;\n }\n\n %igx-grid__tr-pivot--row-area {\n height: auto !important;\n align-items: flex-end;\n padding-bottom: map.get($pivot-row-aria-padding, 'comfortable');\n\n &--cosy{\n padding-bottom: map.get($pivot-row-aria-padding, 'cosy');\n }\n\n &--compact{\n padding-bottom: map.get($pivot-row-aria-padding, 'compact');\n }\n\n border-inline-start: 0;\n border-bottom: 0;\n }\n\n %igx-grid__tr-pivot--filter-container {\n display: flex;\n flex-direction: column;\n }\n\n %igx-grid__tr-pivot--chip_drop_indicator {\n width: 2px;\n background: var-get($theme, 'resize-line-color');\n }\n\n %igx-grid__tr-pivot--drop-row-area {\n flex-grow: 1;\n }\n\n %igx-grid__tr-pivot--filter {\n height: map.get($grid-header-height, 'comfortable');\n\n &--cosy {\n height: map.get($grid-header-height, 'cosy');\n }\n\n &--compact {\n height: map.get($grid-header-height, 'compact');\n }\n\n border-inline-start: 0;\n border-inline-end: 0;\n border-bottom: var-get($theme, 'header-border-width') var-get($theme, 'header-border-style') var-get($theme, 'header-border-color');\n }\n\n %igx-grid-thead__wrapper--pivot {\n border-bottom: 0;\n }\n\n %igx-grid__tr-pivot-group {\n flex: 1;\n }\n\n %igx-grid__tr-pivot-toggle-icons {\n display: inline-flex !important;\n }\n\n %igx-grid__tr-pivot--columnDimensionLeaf {\n box-shadow: none;\n\n igx-grid-header {\n border: none;\n }\n }\n\n %igx-grid__tr-pivot--columnMultiRowSpan {\n igx-grid-header {\n > * {\n visibility: hidden;\n }\n }\n }\n\n %igx-grid__tr-header-row {\n igx-pivot-row-dimension-header-group {\n igx-pivot-row-dimension-header {\n align-items: center;\n }\n }\n }\n // Pivot grid END\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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: grid-summary-theme(\n/// $background-color: black,\n/// $label-color: white\n/// );\n/// // Pass the theme to the grid-summary component mixin\n/// @include grid-summary($my-summary-theme);\n@function grid-summary-theme(\n $palette: null,\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 $selector: '.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 @if type-of($background-color) == 'color' {\n $border-color: rgba(text-contrast($background-color), .26);\n }\n }\n\n @if not($pinned-border-color) and $background-color {\n @if type-of($background-color) == 'color' {\n $pinned-border-color: rgba(text-contrast($background-color), .26);\n }\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\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} css-vars\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires var-get\n@mixin grid-summary($theme) {\n @include css-vars($theme);\n\n $cell-pin: (\n style: var-get($theme, 'pinned-border-width') var-get($theme, 'pinned-border-style'),\n color: var-get($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-get($theme, 'background-color', inherit);\n overflow: hidden;\n outline-style: none;\n\n &::after {\n position: absolute;\n inset: 0;\n }\n\n &:focus::after {\n background: var-get($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-inline-end: map.get($cell-pin, 'style') map.get($cell-pin, 'color');\n @media print {\n border-inline-end: map.get($cell-pin, 'style') #999;\n }\n }\n\n %igx-grid-summary--pinned-first {\n border-inline-start: map.get($cell-pin, 'style') map.get($cell-pin, 'color');\n @media print {\n border-inline-start: 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-get($theme, 'label-color');\n min-width: rem(30px);\n margin-inline-end: rem(3px);\n\n &:hover {\n color: var-get($theme, 'label-hover-color');\n }\n }\n\n %igx-grid-summary__result {\n color: var-get($theme, 'result-color');\n font-weight: 600;\n flex: 1 1 auto;\n text-align: end;\n }\n\n %igx-grid-summary__label,\n %igx-grid-summary__result {\n @include ellipsis();\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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 [null] - The elevations (shadows) map to be used.\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 elevation\n/// @requires text-contrast\n///\n/// @example scss Change the toolbar background color\n/// $my-toolbar-theme: grid-toolbar-theme(\n/// $background-color: black\n/// );\n/// // Pass the theme to the grid-toolbar component mixin\n/// @include grid-toolbar($my-toolbar-theme);\n\n@function grid-toolbar-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\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 $selector: 'igx-grid-toolbar, .igx-grid-toolbar__dd-list';\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 selector: $selector,\n palette: $palette,\n elevations: $elevations,\n background-color: $background-color,\n title-text-color: $title-text-color,\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} css-vars\n/// @requires color\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires em\n/// @requires var-get\n@mixin grid-toolbar($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n\n // Caption\n $grid-toolbar-fs: rem(16px);\n\n $grid-toolbar-padding: (\n comfortable: rem(24px) rem(16px),\n cosy: rem(16px) rem(12px),\n compact: rem(12px) rem(8px)\n );\n\n $grid-toolbar-spacer: (\n comfortable: rem(16px),\n cosy: rem(12px),\n compact: 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: space-between;\n grid-row: 1;\n font-size: $grid-toolbar-fs;\n\n @if $bootstrap-theme {\n border-bottom: 1px solid color(map.get($theme, 'palette'), 'grays', 100);\n } @else {\n border-bottom: 1px solid color(map.get($theme, 'palette'), 'grays', 300);\n }\n\n background: var-get($theme, 'background-color');\n height: auto;\n min-height: map.get($grid-toolbar-height, 'comfortable');\n position: relative;\n padding-block: 0;\n padding-inline: map.get($grid-toolbar-padding, 'comfortable');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable');\n\n &:first-of-type {\n margin-inline-start: 0;\n }\n\n &:last-of-type {\n margin-inline-end: 0;\n }\n }\n\n &[dir='rtl'] {\n text-align: end;\n\n [igxButton] {\n margin-inline-start: 0;\n margin-inline-end: rem(8);\n\n &:last-child {\n margin-inline-end: 0;\n }\n }\n }\n }\n\n %igx-grid-toolbar--cosy {\n min-height: map.get($grid-toolbar-height, 'cosy');\n padding-inline: map.get($grid-toolbar-padding, 'cosy');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'cosy');\n }\n }\n\n %igx-grid-toolbar--compact {\n min-height: map.get($grid-toolbar-height, 'compact');\n padding-inline: map.get($grid-toolbar-padding, 'compact');\n\n [igxButton] {\n margin-inline-start: map.get($grid-toolbar-spacer, 'compact');\n }\n }\n\n %igx-grid-toolbar__title {\n color: var-get($theme, 'title-text-color');\n flex: 1 1 auto;\n @include ellipsis();\n max-width: 40ch;\n margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable')\n }\n\n %igx-grid-toolbar__custom-content {\n display: flex;\n flex-wrap: wrap;\n flex-grow: 1;\n justify-content: flex-end;\n margin-inline-end: map.get($grid-toolbar-spacer, 'comfortable');\n }\n\n %igx-grid-toolbar__actions {\n display: flex;\n align-items: center;\n flex-flow: row wrap;\n margin-inline-start: auto;\n\n > * {\n display: flex;\n margin-inline-start: map.get($grid-toolbar-spacer, 'comfortable');\n\n &:first-child {\n margin-inline-start: 0;\n }\n }\n }\n\n %igx-grid-toolbar__actions,\n %igx-grid-toolbar__title,\n %igx-grid-toolbar__custom-content {\n &:empty {\n display: none;\n }\n }\n\n %igx-grid-toolbar__title:empty + %igx-grid-toolbar__custom-content:empty {\n + %igx-grid-toolbar__actions {\n width: 100%;\n margin-inline-start: 0;\n justify-content: flex-end;\n }\n }\n\n %igx-grid-toolbar__progress-bar {\n position: absolute;\n width: 100%;\n inset-inline-start: 0;\n inset-inline-end: 0;\n bottom: rem(-1px);\n height: rem(2px);\n overflow: hidden;\n background: var-get($theme, 'background-color');\n\n igx-linear-bar > * {\n border-radius: 0;\n\n &:first-child > div {\n background: color(map.get($theme, 'palette'), 'secondary');\n }\n }\n }\n\n %igx-grid-toolbar__adv-filter--filtered {\n border-color: color(map.get($theme, 'palette'), 'secondary') !important;\n\n @if $bootstrap-theme {\n border-width: 2px;\n border-color: color(map.get($theme, 'palette'), 'primary', 800) !important;\n color: color(map.get($theme, 'palette'), 'primary', 800);\n\n &:hover,\n &:focus {\n background: color(map.get($theme, 'palette'), 'primary', 800);\n }\n }\n }\n\n %igx-grid-toolbar__dropdown {\n position: relative;\n }\n\n %igx-grid-toolbar__dd-list {\n list-style: none;\n background: var-get($theme, 'dropdown-background');\n margin: 0;\n padding: 0;\n box-shadow: elevation($elevation: 8);\n }\n\n %igx-grid-toolbar__dd-list-items {\n cursor: pointer;\n position: relative;\n padding: em(8px) em(16px);\n color: var-get($theme, 'item-text-color');\n white-space: nowrap;\n\n &:hover {\n background: var-get($theme, 'item-hover-background');\n color: var-get($theme, 'item-hover-text-color');\n }\n\n &:focus {\n background: var-get($theme, 'item-focus-background');\n color: var-get($theme, 'item-focus-text-color');\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\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 [null] - 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@function pivot-data-selector-theme(\n $palette: null,\n $schema: $light-schema,\n $background: null\n) {\n $name: 'igx-pivot-data-selector';\n $selector: '.igx-pivot-data-selector';\n $pivot-data-selector-schema: ();\n\n @if map.has-key($schema, $name) {\n $pivot-data-selector-schema: map.get($schema, $name);\n } @else {\n $pivot-data-selector-schema: $schema;\n }\n\n $theme: apply-palette($pivot-data-selector-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires {mixin} ellipsis\n/// @requires rem\n/// @requires var-get\n@mixin pivot-data-selector($theme) {\n @include css-vars($theme);\n\n $chip-height-material: (\n comfortable: rem(22px),\n cosy: rem(20px),\n compact: rem(18px)\n );\n\n $chip-item-padding: 0 rem(2px);\n $panel-padding: rem(4px, 16px);\n\n %selector-base {\n display: flex;\n flex-direction: column;\n max-width: rem(280px);\n background: var-get($theme, 'background');\n z-index: 0;\n\n > igx-input-group {\n flex: 0 1 auto;\n }\n\n igx-display-container {\n display: flex;\n flex-direction: column;\n }\n\n > igx-list {\n igx-display-container {\n padding: rem(4px);\n }\n\n igx-list-item {\n display: flex;\n min-height: rem(28px);\n }\n\n %cbx-label {\n font-size: rem(13px);\n }\n }\n\n %form-group-input--box {\n transform: none;\n }\n\n %form-group-prefix,\n %form-group-prefix--cosy,\n %form-group-prefix--compact {\n padding-inline-end: rem(16px) !important;\n box-sizing: content-box;\n }\n\n %form-group-bundle-main--box,\n %form-group-bundle-main--box-cosy,\n %form-group-bundle-main--box-compact {\n padding-top: 0 !important;\n }\n\n %igx-expanded-panel-margin {\n igx-expansion-panel[aria-expanded='true'] {\n margin-top: 0;\n margin-bottom: 0;\n }\n }\n\n %igx-expansion-panel__body {\n position: relative;\n height: rem(128px);\n font-size: rem(14px);\n padding: $panel-padding;\n overflow-y: auto;\n\n > igx-list {\n height: auto;\n }\n }\n\n %igx-expansion-panel__header-icon--start {\n margin-inline-end: rem(8px);\n }\n\n %igx-expansion-panel__header-title {\n display: flex;\n\n > h6 {\n font-size: rem(12px);\n }\n }\n\n %igx-expansion-panel__header-inner {\n background: var-get($theme, 'header-color');\n padding: $panel-padding;\n \n .dragOver & {\n background: color($color: 'grays', $variant: 300);\n box-shadow: inset 0 0 0 1px color($color: 'grays', $variant: 400);\n }\n }\n }\n\n %selector-filter {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n\n igx-list {\n display: flex;\n flex-direction: column;\n padding: rem(8px) rem(4px);\n min-height: 186px;\n max-height: 208px;\n overflow-y: auto;\n }\n\n igx-list-item {\n display: flex;\n }\n\n igx-checkbox + span {\n margin-inline-start: rem(8px);\n line-height: rem(28px);\n }\n }\n\n %selector-header,\n %selector-header-extra {\n display: flex;\n align-items: center;\n }\n\n %selector-header-extra {\n igx-icon {\n padding: 0 rem(8px);\n box-sizing: content-box;\n }\n\n %igx-chip__item {\n height: map.get($chip-height-material, 'comfortable');\n }\n\n %igx-chip__item--cosy {\n height: map.get($chip-height-material, 'cosy');\n }\n\n %igx-chip__item--compact {\n height: map.get($chip-height-material, 'compact');\n }\n\n %igx-chip__content {\n padding: $chip-item-padding;\n }\n }\n\n %selector-item {\n display: flex;\n align-items: center;\n justify-content: space-between;\n min-height: rem(32px);\n width: 100%;\n\n .igx-drag--push & {\n padding-top: rem(32px);\n }\n }\n\n %selector-item-ghost {\n display: flex;\n align-items: center;\n justify-content: space-between;\n font-size: rem(14px);\n background: color($color: 'surface');\n min-height: rem(32px);\n height: auto;\n padding: 0 rem(2px) 0 rem(4px);\n cursor: grabbing;\n box-shadow: elevation($elevations, 24);\n border: 1px solid color($color: 'grays', $variant: 100);\n border-radius: border-radius(rem(2px));\n z-index: 10;\n }\n\n %selector-base,\n %selector-item-ghost {\n igx-icon {\n width: var(--igx-icon-size, #{rem(18px)});\n height: var(--igx-icon-size, #{rem(18px)});\n font-size: var(--igx-icon-size, #{rem(18px)});\n }\n }\n\n %selector-item-ghost-text {\n display: flex;\n align-items: center;\n\n igx-icon {\n margin-inline-end: rem(8px);\n }\n }\n\n %selector-item-ghost--no-drop {\n cursor: no-drop;\n }\n\n %selector-item-text {\n @include ellipsis();\n max-width: calc(100% - 18px + 8px);\n }\n\n %selector-item-text,\n %selector-action-sort,\n %selector-action-filter,\n %selector-action-move,\n %selector-action-summary {\n user-select: none;\n }\n\n %selector-action-sort,\n %selector-action-summary,\n %selector-action-filter {\n cursor: pointer;\n }\n\n %selector-action-move {\n cursor: grab;\n }\n\n %selector-item-start {\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex: 0 1 100%;\n margin-inline-end: rem(8px);\n overflow: hidden;\n }\n\n %selector-item-end {\n display: flex;\n\n igx-icon + igx-icon {\n margin-inline-start: rem(8px);\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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-highlight-theme: highlight-theme($resting-background: black, $active-color: white);\n/// // Pass the theme to the highlight component mixin\n/// @include highlight($my-highlight-theme);\n@function highlight-theme(\n $palette: null,\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 $selector: '.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 selector: $selector,\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin highlight($theme) {\n @include css-vars($theme);\n\n %igx-highlight {\n color: var-get($theme, 'resting-color');\n background: var-get($theme, 'resting-background');\n }\n\n %igx-highlight--active {\n color: var-get($theme, 'active-color');\n background: var-get($theme, 'active-background');\n }\n}\n\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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: icon-theme($color: orange);\n/// // Pass the theme to the icon component mixin\n/// @include icon($my-icon-theme);\n@function icon-theme(\n $palette: null,\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// stylelint-disable font-family-no-missing-generic-family-keyword\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin icon($theme) {\n @include css-vars($theme);\n\n $igx-icon-font-size: var-get($theme, 'size');\n\n %igx-icon-display {\n display: inline-flex;\n width: $igx-icon-font-size;\n height: $igx-icon-font-size;\n font-size: $igx-icon-font-size;\n color: var-get($theme, 'color');\n direction: inherit;\n\n div,\n svg {\n display: block;\n width: inherit;\n height: inherit;\n fill: currentColor;\n }\n\n &[igxPrefix].material-icons,\n &[igxSuffix].material-icons {\n font-family: 'Material Icons';\n }\n }\n\n %igx-icon--success {\n color: color(map.get($theme, 'palette'), 'success');\n }\n\n %igx-icon--error {\n color: color(map.get($theme, 'palette'), 'error');\n }\n\n %igx-icon--inactive {\n color: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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/// @requires extend\n///\n/// @example scss Change the background color\n/// $my-overlay-theme: overlay-theme($background-color: rgba(yellow, .74));\n/// // Pass the theme to the overlay component mixin\n/// overlay($my-overlay-theme);\n///\n@function overlay-theme(\n $palette: null,\n $schema: $light-schema,\n $background-color: null\n) {\n $name: 'igx-overlay';\n $selector: '.igx-overlay__wrapper--modal, .igx-overlay__content--modal';\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 selector: $selector,\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} css-vars\n/// @requires var-get\n///\n@mixin overlay($theme) {\n @include 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 inset: 0;\n background: transparent;\n transition: background .25s $ease-in-out-quad;\n pointer-events: none;\n z-index: 10005;\n box-sizing: content-box;\n }\n\n %overlay-wrapper--modal {\n background: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 [null] - 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} $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: paginator-theme(\n/// $stripes-color: orange\n/// );\n/// // Pass the theme to the paginator component mixin\n/// @include paginator($my-paginator-theme);\n@function paginator-theme(\n $palette: null,\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\n @if not($text-color) and $background-color {\n $text-color: text-contrast($background-color);\n }\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} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin paginator($theme) {\n @include 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 %igx-paginator {\n display: flex;\n justify-content: space-between;\n align-items: center;\n color: var-get($theme, 'text-color');\n background: var-get($theme, 'background-color');\n grid-row: 7;\n font-size: 12px;\n border-top: 1px solid var-get($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 %igx-paginator-content {\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n }\n\n %igx-page-size {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex: 1;\n }\n\n %igx-page-size__label {\n margin-inline-end: rem(8px);\n @include ellipsis();\n }\n\n %igx-page-size__select {\n display: flex;\n max-width: 90px;\n min-width: 80px;\n }\n\n %igx-page-nav {\n display: flex;\n justify-content: flex-end;\n align-items: center;\n flex: 1;\n\n > * {\n margin-inline-start: rem(8px);\n }\n\n [dir='rtl'] & {\n igx-icon {\n transform: scaleX(-1);\n }\n }\n }\n\n %igx-page-nav__text {\n display: flex;\n }\n}\n","@use '../../utilities' as *;\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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n@use 'sass:meta';\n@use 'sass:list';\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 [null] - 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/// @param {Number} $track-border-radius [null] - The border radius fraction, between 0 - 8 to be used fot the progress bar track\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: progress-linear-theme(\n/// $stripes-color: orange\n/// );\n/// // Pass the theme to the progress-linear component mixin\n/// @include progress-linear($my-progress-linear-theme);\n@function progress-linear-theme(\n $palette: null,\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 $track-border-radius: 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 track-border-radius: $track-border-radius,\n ));\n}\n\n@mixin striped-gradient($gradient-orientation, $stripe-color) {\n background-image: linear-gradient(\n $gradient-orientation,\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}\n\n@mixin striped-gradient--indigo($gradient-orientation, $stripe-color) {\n background-image: linear-gradient(\n $gradient-orientation,\n transparent 25%,\n $stripe-color 25%,\n $stripe-color 75%,\n transparent 75%,\n );\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires em\n/// @requires var-get\n@mixin progress-linear($theme) {\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $bar-height: map.get((\n material: rem(4px),\n fluent: rem(4px),\n bootstrap: rem(16px),\n indigo-design: rem(4px),\n ), $variant);\n\n $gradient-orientation: map.get((\n material: -45deg,\n fluent: -45deg,\n bootstrap: 45deg,\n indigo-design: 45deg,\n ), $variant);\n\n $gradient-orientation-rtl: map.get((\n material: 45deg,\n fluent: 45deg,\n bootstrap: -45deg,\n indigo-design: -45deg,\n ), $variant);\n\n $background-size: map.get((\n material: rem(40px) rem(40px),\n fluent: rem(40px) rem(40px),\n bootstrap: rem(16px) rem(16px),\n indigo-design: rem(20px),\n ), $variant);\n\n $stripe-color: var-get($theme, 'stripes-color');\n $value-fs: em(14px, 16px);\n $value-fw: 600;\n $value-margin: 0;\n\n %linear-display {\n position: relative;\n display: flex;\n width: 100%;\n flex: 1 1 100%;\n flex-direction: column;\n\n &[dir='rtl'],\n [dir='rtl'] & {\n %linear-bar {\n transform: rotateY(180deg);\n }\n }\n }\n\n %linear-bar {\n position: relative;\n width: inherit;\n height: $bar-height;\n background: var-get($theme, 'track-color');\n overflow: hidden;\n border-radius: border-radius(var-get($theme, 'track-border-radius'));\n z-index: 0;\n }\n\n %linear-indicator {\n width: 100%;\n position: absolute;\n height: 100%;\n }\n\n %linear-indicator--striped {\n @if $variant != 'indigo-design' {\n @include striped-gradient($gradient-orientation, $stripe-color);\n } @else {\n @include striped-gradient--indigo($gradient-orientation, $stripe-color);\n }\n\n background-size: $background-size;\n\n [dir='rtl'] & {\n @if $variant != 'indigo-design' {\n @include striped-gradient($gradient-orientation-rtl, $stripe-color);\n } @else {\n @include striped-gradient--indigo($gradient-orientation-rtl, $stripe-color);\n }\n }\n }\n\n %linear-indicator--indeterminate-secondary,\n %linear-indicator--indeterminate-primary\n {\n transform-origin: top left;\n width: 100% !important;\n height: inherit;\n position: absolute;\n background: transparent;\n\n &::after {\n content: '';\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n width: inherit;\n height: inherit;\n background: var-get($theme, 'fill-color-default');\n backface-visibility: hidden;\n }\n }\n\n %linear-indicator--indeterminate-primary {\n transform: scale3d(0, 1, 1);\n animation: indeterminate-primary 2000ms infinite linear;\n left: -145.166611%;\n\n &::after {\n animation: indeterminate-primary-scale 2000ms infinite linear;\n }\n }\n\n %linear-indicator--indeterminate-secondary {\n animation: indeterminate-secondary 2000ms infinite linear;\n left: -54.888891%;\n\n &::after {\n animation: indeterminate-secondary-scale 2000ms infinite linear;\n width: 100%;\n height: inherit;\n }\n }\n\n %linear-indicator--default {\n background: var-get($theme, 'fill-color-default')\n }\n\n %linear-indicator--danger {\n background-color: var-get($theme, 'fill-color-danger');\n }\n\n %linear-indicator--warning {\n background-color: var-get($theme, 'fill-color-warning');\n }\n\n %linear-indicator--info {\n background-color: var-get($theme, 'fill-color-info');\n }\n\n %linear-indicator--success {\n background-color: var-get($theme, 'fill-color-success');\n }\n\n %linear-value {\n margin: $value-margin;\n color: var-get($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 $indeterminate-primary-translate-step-2: cubic-bezier(.5, 0, .701732, .495819);\n $indeterminate-primary-translate-step-3: cubic-bezier(.302435, .381352, .55, .956352);\n\n $indeterminate-primary-scale-step-2: cubic-bezier(.334731, .12482, .785844, 1);\n $indeterminate-primary-scale-step-3: cubic-bezier(.06, .11, .6, 1);\n\n $indeterminate-secondary-translate-step-1: cubic-bezier(.15, 0, .515058, .409685);\n $indeterminate-secondary-translate-step-2: cubic-bezier(.31033, .284058, .8, .733712);\n $indeterminate-secondary-translate-step-3: cubic-bezier(.4, .627035, .6, .902026);\n\n $indeterminate-secondary-scale-step-1: cubic-bezier(.15, 0, .515058, .409685);\n $indeterminate-secondary-scale-step-2: cubic-bezier(.31033, .284058, .8, .733712);\n $indeterminate-secondary-scale-step-3: cubic-bezier(.4, .627035, .6, .902026);\n\n @keyframes indeterminate-primary {\n 0% {\n transform: translateX(0);\n }\n\n 20% {\n animation-timing-function: $indeterminate-primary-translate-step-2;\n transform: translateX(0);\n }\n\n 59.15% {\n animation-timing-function: $indeterminate-primary-translate-step-3;\n transform: translateX(83.67142%);\n }\n\n 100% {\n transform: translateX(200.611057%);\n }\n }\n\n @keyframes indeterminate-primary-scale {\n 0% {\n transform: scaleX(.08);\n }\n\n 36.65% {\n animation-timing-function: $indeterminate-primary-scale-step-2;\n transform: scaleX(.08);\n }\n\n 69.15% {\n animation-timing-function: $indeterminate-primary-scale-step-2;\n transform: scaleX(.661479);\n }\n\n 100% {\n transform: scaleX(.08);\n }\n }\n\n @keyframes indeterminate-secondary {\n 0% {\n animation-timing-function: $indeterminate-secondary-translate-step-1;\n transform: translateX(0);\n }\n\n 25% {\n animation-timing-function: $indeterminate-secondary-translate-step-2;\n\n transform: translateX(37.651913%);\n }\n\n 48.35% {\n animation-timing-function: $indeterminate-secondary-translate-step-3;\n transform: translateX(84.386165%);\n }\n\n 100% {\n transform: translateX(160.277782%);\n }\n }\n\n @keyframes indeterminate-secondary-scale {\n 0% {\n animation-timing-function: $indeterminate-secondary-scale-step-1;\n transform: scaleX(.08);\n }\n\n 19.15% {\n animation-timing-function: $indeterminate-secondary-scale-step-2;\n transform: scaleX(.457104);\n }\n\n 44.15% {\n animation-timing-function: $indeterminate-secondary-scale-step-3;\n transform: scaleX(.72796);\n }\n\n 100% {\n transform: scaleX(.08);\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 progress-circular-theme(\n $palette: null,\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 meta.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 list.length($progress-circle-color) == 2 {\n $progress-circle-color-start: list.nth($progress-circle-color, 1);\n $progress-circle-color-end: list.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\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires {mixin} rotate-center\n/// @requires var-get\n@mixin progress-circular($theme) {\n // Include rotate animation\n @include rotate-center();\n\n @include css-vars($theme);\n\n $variant: map.get($theme, variant);\n\n $stroke-width: map.get((\n material: rem(4px),\n fluent: rem(4px),\n bootstrap: rem(8px),\n indigo-design: rem(6px),\n ), $variant);\n\n $palette: map.get($theme, 'palette');\n\n %circular-display {\n display: inline-flex;\n flex: 1 1 auto;\n width: rem(32px);\n height: rem(32px);\n position: relative;\n\n svg {\n width: 100%;\n height: 100%;\n min-width: inherit;\n min-height: inherit;\n //transform-origin: 50% 50%;\n transform: rotate(-90deg);\n }\n }\n\n %circular-display--indeterminate {\n @include animation(rotate-center 3s linear normal infinite);\n\n [dir='rtl'] & {\n animation-direction: reverse;\n }\n }\n\n %circular-inner {\n stroke-width: $stroke-width;\n fill: transparent;\n stroke: var-get($theme, 'base-circle-color');\n }\n\n %circular-outer {\n fill: transparent;\n stroke-width: $stroke-width;\n stroke-dashoffset: 289;\n stroke-dasharray: 289;\n\n @if $variant == 'indigo-design' {\n stroke-linecap: round;\n }\n }\n\n %circular-outer--indeterminate {\n stroke-dasharray: 289;\n @include animation(indeterminate-accordion 1.5s cubic-bezier(0, .085, .68, .53) normal infinite);\n\n [dir='rtl'] & {\n animation-direction: reverse;\n }\n }\n\n %circular-text {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n font-size: rem(16px);\n line-height: 1;\n text-align: center;\n font-weight: 600;\n fill: var-get($theme, 'text-color');\n }\n\n %circular-text--hidden {\n visibility: hidden;\n }\n\n %circular-gradient-start {\n stop-color: var-get($theme, 'progress-circle-color-start');\n }\n\n %circular-gradient-end {\n stop-color: var-get($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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n/// @param {Map} $palette [null] - 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 [null] - The elevations (shadows) map to be used.\n///\n/// @prop {Color} background [null] - The background color of the filtering row.\n/// @prop {Color} header-background [null] - The background color of the query builder header.\n/// @prop {Color} header-foreground [null] - The foreground color of the query builder header.\n/// @prop {Map} background-and [null] - The background color of advanced filtering \"AND\" condition.\n/// @prop {Map} background-and--focus [null] - The background color on focus/selected of advanced filtering \"AND\" condition.\n/// @prop {Map} background-or [null] - The background color of advanced filtering \"OR\" condition.\n/// @prop {Map} background-or--focus [null] - The background color on focus/selected of advanced filtering \"OR\" condition.\n@function query-builder-theme(\n $palette: null,\n $schema: $light-schema,\n $elevations: null,\n\n $background: null,\n $header-background: null,\n $header-foreground: null,\n $background-and: null,\n $background-and--focus: null,\n $background-or: null,\n $background-or--focus: null,\n) {\n $name: 'igx-query-builder';\n $selector: 'igx-query-builder';\n $query-builder-schema: ();\n\n @if map.has-key($schema, $name) {\n $query-builder-schema: map.get($schema, $name);\n } @else {\n $query-builder-schema: $schema;\n }\n\n $theme: apply-palette($query-builder-schema, $palette);\n\n @if not($header-foreground) and $header-background {\n $header-foreground: text-contrast($header-background);\n }\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n\n background: $background,\n header-background: $header-background,\n header-foreground: $header-foreground,\n background-and: $background-and,\n background-and--focus: $background-and--focus,\n background-or: $background-or,\n background-or--focus: $background-or--focus,\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 color\n/// @requires rem\n/// @requires var-get\n@mixin query-builder($theme) {\n $variant: map.get($theme, variant);\n $bootstrap-theme: $variant == 'bootstrap';\n $not-bootstrap-theme: not($bootstrap-theme);\n\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 $icon-size: rem(18px);\n\n @include css-vars($theme);\n\n %advanced-filter {\n width: auto;\n min-width: 660px;\n background-color: var-get($theme, 'background');\n border-radius: border-radius(rem(4px));\n box-shadow: elevation($elevation: 12);\n }\n\n %advanced-filter__header {\n display: flex;\n align-items: center;\n padding: $vertical-space-comfortable;\n background-color: var-get($theme, 'header-background');\n color: var-get($theme, 'header-foreground');\n user-select: none;\n\n h4,\n .igx-typography__h6 {\n margin-bottom: 0;\n }\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-inline-start: rem(8px);\n }\n }\n\n %advanced-filter__outlet {\n igx-select-item > igx-icon {\n width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n margin-inline-end: 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-inline-end: $horizontal-space-comfortable;\n outline-style: none;\n border-radius: border-radius(rem(4px));\n cursor: pointer;\n }\n\n %filter-tree__line--and {\n background: var-get($theme, 'background-and');\n\n &-selected {\n background: var-get($theme, 'background-and--focus');\n }\n\n &:focus {\n box-shadow: inset 0 0 0 2px var-get($theme, 'background-and--focus');\n }\n }\n\n %filter-tree__line--or {\n background: var-get($theme, 'background-or');\n\n &-selected {\n background-color: var-get($theme, 'background-or--focus');\n }\n\n &:focus {\n box-shadow: inset 0 0 0 2px var-get($theme, 'background-or--focus');\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 > igx-chip igx-prefix {\n display: flex;\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: color(null, 'grays', 500);\n outline-style: none;\n\n &:hover,\n &:focus {\n color: color(null, 'grays', 800);\n }\n }\n\n igx-icon + igx-icon {\n margin-inline-start: rem(8px);\n }\n }\n\n %filter-tree__expression-condition {\n opacity: .7;\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 align-items: center;\n\n igx-select + igx-select,\n igx-select + igx-input-group,\n igx-select + igx-date-picker,\n igx-select + igx-time-picker,\n igx-input-group + igx-select {\n margin-inline-start: 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] {\n transition: none;\n }\n\n [igxButton] + [igxButton] {\n margin-inline-start: rem(8px);\n }\n }\n\n %filter-legend {\n display: flex;\n margin-inline-start: 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: border-radius(rem(4px));\n margin-inline-end: rem(8px);\n }\n\n + %filter-legend__item {\n margin-inline-start: rem(24px);\n }\n }\n\n %filter-legend__item--and::before {\n background: var-get($theme, 'background-and');\n }\n\n %filter-legend__item--or::before {\n background: var-get($theme, 'background-or');\n }\n\n %filter-con-menu {\n position: relative;\n display: flex;\n flex-flow: column;\n width: 196px;\n background-color: var-get($theme, 'background');\n padding: rem(16px);\n margin-inline-start: rem(16px);\n border-radius: border-radius(rem(4px));\n border: 1px solid color(null, '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-inline-start: 8px;\n }\n\n igx-buttongroup > * {\n box-shadow: none;\n }\n }\n\n %filter-con-menu__delete-btn {\n color: color(null, 'error');\n @if $bootstrap-theme {\n border-color: color(null, 'error');\n }\n\n &:hover,\n &:focus {\n @if $bootstrap-theme {\n background: color(null, 'error');\n border-color: color(null, 'error');\n color: color(null, 'grays', 100);\n } @else {\n color: color(null, 'error');\n }\n }\n }\n\n %filter-con-menu__close-btn {\n position: absolute;\n top: rem(-18px);\n inset-inline-end: rem(-18px);\n background-color: var-get($theme, 'background');\n border: 1px solid color(null, 'grays', 200);\n\n &:hover,\n &:focus {\n @if $not-bootstrap-theme {\n background-color: var-get($theme, 'background');\n }\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: color(null, '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__line {\n margin-inline-end: $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 width: var(--igx-icon-size, #{$icon-size});\n height: var(--igx-icon-size, #{$icon-size});\n font-size: var(--igx-icon-size, #{$icon-size});\n }\n\n %filter-tree__line {\n margin-inline-end: $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","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\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 is specified, text/icon color will be assigned automatically to a contrasting color.\n/// @param {Map} $palette [null] - 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} $thumb-background [null] - The background color used for the thumb.\n/// @param {Color} $track-background [null] - The background color used for the track.\n/// @param {Number | String} $size [null] - The size of the track.\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 track colors\n/// $my-scrollbar-theme: scrollbar-theme($thumb-background: black, $track-background: gray);\n/// // Pass the theme to the scrollbar component mixin\n/// @include scrollbar($my-scrollbar-theme);\n@function scrollbar-theme(\n $palette: null,\n $schema: $light-schema,\n $size: null,\n $thumb-background: null,\n $track-background: null,\n) {\n $name: 'igx-scrollbar';\n $selector: '.igx-scrollbar';\n $scrollbar-schema: ();\n\n @if map.has-key($schema, $name) {\n $scrollbar-schema: map.get($schema, $name);\n } @else {\n $scrollbar-schema: $schema;\n }\n\n $theme: apply-palette($scrollbar-schema, $palette);\n\n @return extend($theme, (\n name: $name,\n selector: $selector,\n palette: $palette,\n thumb-background: $thumb-background,\n track-background: $track-background,\n size: $size\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires rem\n/// @requires var-get\n@mixin scrollbar($theme) {\n @include css-vars($theme);\n\n %scrollbar-display {\n @if type-of(map.get($theme, 'size') == 'string') {\n scrollbar-width: var-get($theme, 'size');\n }\n\n scrollbar-color: var-get($theme, 'thumb-background') var-get($theme, 'track-background');\n\n ::-webkit-scrollbar {\n width: var-get($theme, 'size');\n height: var-get($theme, 'size');\n background: var-get($theme, 'track-background');\n }\n\n ::-webkit-scrollbar-thumb {\n background: var-get($theme, 'thumb-background');\n }\n }\n\n @media (hover: none) {\n %scrollbar-display ::-webkit-scrollbar {\n width: auto;\n height: auto;\n }\n }\n}\n\n","@use '../../utilities' as *;\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 fade-in-bck {\n @include keyframes(fade-in-bck) {\n 0% {\n transform: translateZ(80px);\n opacity: 0;\n }\n\n 100% {\n transform: translateZ(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-bl {\n @include keyframes(fade-in-bl) {\n 0% {\n transform: translateX(-50px) translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-bottom {\n @include keyframes(fade-in-bottom) {\n 0% {\n transform: translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-br {\n @include keyframes(fade-in-br) {\n 0% {\n transform: translateX(50px) translateY(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-fwd {\n @include keyframes(fade-in-fwd) {\n 0% {\n transform: translateZ(-80px);\n opacity: 0;\n }\n\n 100% {\n transform: translateZ(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-left {\n @include keyframes(fade-in-left) {\n 0% {\n transform: translateX(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-right {\n @include keyframes(fade-in-right) {\n 0% {\n transform: translateX(50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-tl {\n @include keyframes(fade-in-tl) {\n 0% {\n transform: translateX(-50px) translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-top {\n @include keyframes(fade-in-top) {\n 0% {\n transform: translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in-tr {\n @include keyframes(fade-in-tr) {\n 0% {\n transform: translateX(50px) translateY(-50px);\n opacity: 0;\n }\n\n 100% {\n transform: translateX(0) translateY(0);\n opacity: 1;\n }\n }\n}\n\n/// @requires {mixin} keyframes\n@mixin fade-in {\n @include keyframes(fade-in) {\n 0% {\n opacity: 0;\n }\n\n 100% {\n opacity: 1;\n }\n }\n}\n","@use '../../base' as *;\n@use '../../themes/schemas' as *;\n@use 'sass:map';\n\n////\n/// @group themes\n/// @access privet\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 watermark directive.\n/// @param {Map} $palette [null] - 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 {Number} $border-radius [null] - The border radius used for the link.\n/// @param {Color} $border-color [null] - The border color used for the link.\n/// @param {Color} $link-background [null] - The background color used for the link.\n/// @param {Color} $color [null] - The color used for the link text.\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 watermark link background\n/// $my-watermark-theme: watermark-theme($link-background: magenta);\n/// // Pass the theme to the watermark component mixin\n/// @include watermark($my-watermark-theme);\n@function watermark-theme(\n $palette: null,\n $schema: $light-schema,\n\n $border-radius: null,\n $background-image: null,\n $link-background: null,\n $color: null,\n $border-color: null,\n) {\n $name: 'igx-watermark';\n $watermark-schema: ();\n\n @if map.has-key($schema, $name) {\n $watermark-schema: map.get($schema, $name);\n } @else {\n $watermark-schema: $schema;\n }\n\n $theme: apply-palette($watermark-schema, $palette);\n\n @if not($color) and $link-background {\n $color: text-contrast($link-background);\n }\n\n @if not($border-radius) {\n $border-radius: border-radius(map.get($theme, 'border-radius'));\n }\n\n @return extend($theme, (\n name: $name,\n palette: $palette,\n background-image: $background-image,\n link-background: $link-background,\n border-radius: $border-radius,\n color: $color,\n border-color: $border-color,\n ));\n}\n\n/// @param {Map} $theme - The theme used to style the component.\n/// @requires {mixin} css-vars\n/// @requires var-get\n@mixin watermark($theme) {\n @include css-vars($theme);\n\n %igx-watermark {\n display: block;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n width: 100%;\n height: 100%;\n z-index: 10000;\n pointer-events: none;\n }\n\n %igx-watermark__link {\n display: inline-flex;\n align-items: center;\n position: absolute;\n bottom: 0;\n inset-inline-end: 0;\n font-size: rem(14px);\n padding: rem(2px) rem(4px);\n line-height: normal;\n border-radius: var-get($theme, 'border-radius');\n border: 1px solid var-get($theme, 'border-color');\n color: var-get($theme, 'color');\n z-index: 10002;\n background-color: var-get($theme, 'link-background');\n pointer-events: all;\n text-decoration: none;\n }\n\n %igx-watermark__background-img {\n width: 100%;\n height: 100%;\n position: absolute;\n top: 0;\n inset-inline-start: 0;\n z-index: 10001;\n pointer-events: none;\n background-image: var-get($theme, 'background-image');\n background-repeat: repeat;\n background-position: rem(16px) rem(16px);\n // Target only IE 10,11.\n @media all and (-ms-high-contrast: none)\n {\n background-image: none;\n }\n }\n}\n"]}