igniteui-theming/tailwind/utilities/material.css

A set of Sass variables, mixins, and functions for generating palettes, typography, and elevations used by Ignite UI components.

@utility light-avatar{--background: var(--ig-avatar-background, var(--ig-gray-400));--color: var(--ig-avatar-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-avatar-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--border-radius: var(--ig-avatar-border-radius, 0.5rem);--size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--ig-avatar-default-size, 1);--ig-theme: material}@utility dark-avatar{--background: var(--ig-avatar-background, var(--ig-gray-200));--color: var(--ig-avatar-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-avatar-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--border-radius: var(--ig-avatar-border-radius, 0.5rem);--size: var(--ig-avatar-size, max(var(--is-large, 1) * max(5.5rem, -1 * 5.5rem), var(--is-medium, 1) * max(4rem, -1 * 4rem), var(--is-small, 1) * max(2.5rem, -1 * 2.5rem)));--default-size: var(--ig-avatar-default-size, 1);--ig-theme: material}@utility light-badge{--elevation: var(--ig-badge-elevation, var(--ig-elevation-1));--icon-color: var(--ig-badge-icon-color, hsla(from color(from var(--background-color) var(--y-contrast)) h 0 l/1));--text-color: var(--ig-badge-text-color, hsla(from color(from var(--background-color) var(--y-contrast)) h 0 l/1));--border-color: var(--ig-badge-border-color, var(--ig-gray-50));--background-color: var(--ig-badge-background-color, var(--ig-primary-500));--border-radius: var(--ig-badge-border-radius, 0);--shadow: var(--ig-badge-shadow, var(--ig-elevation-1));--ig-theme: material}@utility dark-badge{--elevation: var(--ig-badge-elevation, var(--ig-elevation-1));--icon-color: var(--ig-badge-icon-color, hsla(from color(from var(--background-color) var(--y-contrast)) h 0 l/1));--text-color: var(--ig-badge-text-color, hsla(from color(from var(--background-color) var(--y-contrast)) h 0 l/1));--border-color: var(--ig-badge-border-color, var(--ig-gray-50));--background-color: var(--ig-badge-background-color, var(--ig-primary-500));--border-radius: var(--ig-badge-border-radius, 0);--shadow: var(--ig-badge-shadow, var(--ig-elevation-1));--ig-theme: material}@utility light-bottom-nav{--elevation: var(--ig-bottom-nav-elevation, var(--ig-elevation-8));--background: var(--ig-bottom-nav-background, var(--ig-gray-50));--icon-color: var(--ig-bottom-nav-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-selected-color: var(--ig-bottom-nav-icon-selected-color, var(--ig-primary-500));--label-color: var(--ig-bottom-nav-label-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--label-selected-color: var(--ig-bottom-nav-label-selected-color, var(--ig-primary-500));--icon-disabled-color: var(--ig-bottom-nav-icon-disabled-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--label-disabled-color: var(--ig-bottom-nav-label-disabled-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--border-color: var(--ig-bottom-nav-border-color, transparent);--shadow: var(--ig-bottom-nav-shadow, var(--ig-elevation-8));--ig-theme: material}@utility dark-bottom-nav{--elevation: var(--ig-bottom-nav-elevation, var(--ig-elevation-8));--background: var(--ig-bottom-nav-background, var(--ig-gray-50));--icon-color: var(--ig-bottom-nav-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-selected-color: var(--ig-bottom-nav-icon-selected-color, var(--ig-primary-500));--label-color: var(--ig-bottom-nav-label-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--label-selected-color: var(--ig-bottom-nav-label-selected-color, var(--ig-primary-500));--icon-disabled-color: var(--ig-bottom-nav-icon-disabled-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--label-disabled-color: var(--ig-bottom-nav-label-disabled-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--border-color: var(--ig-bottom-nav-border-color, transparent);--shadow: var(--ig-bottom-nav-shadow, var(--ig-elevation-8));--ig-theme: material}@utility light-button-group{--elevation: var(--ig-button-group-elevation, var(--ig-elevation-2));--idle-shadow-color: var(--ig-button-group-idle-shadow-color, hsla(from var(--item-background) h s l/0.5));--selected-shadow-color: var(--ig-button-group-selected-shadow-color, var(--idle-shadow-color));--item-text-color: var(--ig-button-group-item-text-color, hsla(from color(from var(--item-background) var(--y-contrast)) h 0 l/1));--item-background: var(--ig-button-group-item-background, var(--ig-gray-50));--item-border-color: var(--ig-button-group-item-border-color, hsl(from var(--item-background) h s calc(l * 0.8)));--item-hover-background: var(--ig-button-group-item-hover-background, hsl(from var(--item-background) h s calc(l * 0.9)));--item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(from color(from var(--item-hover-background) var(--y-contrast)) h 0 l/1));--item-focused-text-color: var(--ig-button-group-item-focused-text-color, hsla(from color(from var(--item-focused-background) var(--y-contrast)) h 0 l/1));--item-focused-border-color: var(--ig-button-group-item-focused-border-color, var(--item-border-color));--disabled-background-color: var(--ig-button-group-disabled-background-color, var(--item-background));--disabled-selected-background: var(--ig-button-group-disabled-selected-background, hsla(from var(--item-selected-background) h s l/0.3));--border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--default-size: var(--ig-button-group-default-size, 3);--item-icon-color: var(--ig-button-group-item-icon-color, var(--item-text-color));--item-hover-icon-color: var(--ig-button-group-item-hover-icon-color, var(--item-hover-text-color));--item-hover-border-color: var(--ig-button-group-item-hover-border-color, var(--item-border-color));--item-focused-background: var(--ig-button-group-item-focused-background, var(--item-hover-background));--item-focused-hover-background: var(--ig-button-group-item-focused-hover-background, hsl(from var(--item-focused-background) h s calc(l * 0.9)));--item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(from color(from var(--item-selected-background) var(--y-contrast)) h 0 l/1));--item-selected-icon-color: var(--ig-button-group-item-selected-icon-color, var(--item-selected-text-color));--item-selected-background: var(--ig-button-group-item-selected-background, hsl(from var(--item-background) h s calc(l * 0.7)));--item-selected-border-color: var(--ig-button-group-item-selected-border-color, var(--item-border-color));--item-selected-hover-text-color: var(--ig-button-group-item-selected-hover-text-color, hsla(from color(from var(--item-selected-hover-background) var(--y-contrast)) h 0 l/1));--item-selected-hover-icon-color: var(--ig-button-group-item-selected-hover-icon-color, var(--item-selected-hover-text-color));--item-selected-hover-border-color: var(--ig-button-group-item-selected-hover-border-color, var(--item-border-color));--item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsl(from var(--item-selected-background) h s calc(l * 1.1)));--item-selected-focus-background: var(--ig-button-group-item-selected-focus-background, var(--item-selected-background));--item-selected-focus-hover-background: var(--ig-button-group-item-selected-focus-hover-background, var(--item-selected-hover-background));--disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(from hsla(from color(from var(--disabled-background-color) var(--y-contrast)) h 0 l/1) h s l/0.4));--item-disabled-border: var(--ig-button-group-item-disabled-border, var(--item-border-color));--disabled-selected-text-color: var(--ig-button-group-disabled-selected-text-color, var(--disabled-text-color));--disabled-selected-icon-color: var(--ig-button-group-disabled-selected-icon-color, var(--ig-gray-400));--disabled-selected-border-color: var(--ig-button-group-disabled-selected-border-color, var(--item-border-color));--border: var(--ig-button-group-border, none);--shadow: var(--ig-button-group-shadow, var(--ig-elevation-2));--ig-theme: material}@utility dark-button-group{--elevation: var(--ig-button-group-elevation, var(--ig-elevation-2));--idle-shadow-color: var(--ig-button-group-idle-shadow-color, hsla(from var(--item-background) h s l/0.5));--selected-shadow-color: var(--ig-button-group-selected-shadow-color, var(--idle-shadow-color));--item-text-color: var(--ig-button-group-item-text-color, hsla(from color(from var(--item-background) var(--y-contrast)) h 0 l/1));--item-background: var(--ig-button-group-item-background, var(--ig-gray-50));--item-border-color: var(--ig-button-group-item-border-color, hsl(from var(--item-background) h s calc(l * 0.8)));--item-hover-background: var(--ig-button-group-item-hover-background, hsl(from var(--item-background) h s calc(l * 0.9)));--item-hover-text-color: var(--ig-button-group-item-hover-text-color, hsla(from color(from var(--item-hover-background) var(--y-contrast)) h 0 l/1));--item-focused-text-color: var(--ig-button-group-item-focused-text-color, hsla(from color(from var(--item-focused-background) var(--y-contrast)) h 0 l/1));--item-focused-border-color: var(--ig-button-group-item-focused-border-color, var(--item-border-color));--disabled-background-color: var(--ig-button-group-disabled-background-color, var(--item-background));--disabled-selected-background: var(--ig-button-group-disabled-selected-background, hsla(from var(--item-selected-background) h s l/0.3));--border-radius: var(--ig-button-group-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--default-size: var(--ig-button-group-default-size, 3);--item-icon-color: var(--ig-button-group-item-icon-color, var(--item-text-color));--item-hover-icon-color: var(--ig-button-group-item-hover-icon-color, var(--item-hover-text-color));--item-hover-border-color: var(--ig-button-group-item-hover-border-color, var(--item-border-color));--item-focused-background: var(--ig-button-group-item-focused-background, var(--item-hover-background));--item-focused-hover-background: var(--ig-button-group-item-focused-hover-background, hsl(from var(--item-focused-background) h s calc(l * 0.9)));--item-selected-text-color: var(--ig-button-group-item-selected-text-color, hsla(from color(from var(--item-selected-background) var(--y-contrast)) h 0 l/1));--item-selected-icon-color: var(--ig-button-group-item-selected-icon-color, var(--item-selected-text-color));--item-selected-background: var(--ig-button-group-item-selected-background, hsl(from var(--item-background) h s calc(l * 0.7)));--item-selected-border-color: var(--ig-button-group-item-selected-border-color, var(--item-border-color));--item-selected-hover-text-color: var(--ig-button-group-item-selected-hover-text-color, hsla(from color(from var(--item-selected-hover-background) var(--y-contrast)) h 0 l/1));--item-selected-hover-icon-color: var(--ig-button-group-item-selected-hover-icon-color, var(--item-selected-hover-text-color));--item-selected-hover-border-color: var(--ig-button-group-item-selected-hover-border-color, var(--item-border-color));--item-selected-hover-background: var(--ig-button-group-item-selected-hover-background, hsl(from var(--item-selected-background) h s calc(l * 1.1)));--item-selected-focus-background: var(--ig-button-group-item-selected-focus-background, var(--item-selected-background));--item-selected-focus-hover-background: var(--ig-button-group-item-selected-focus-hover-background, var(--item-selected-hover-background));--disabled-text-color: var(--ig-button-group-disabled-text-color, hsla(from hsla(from color(from var(--disabled-background-color) var(--y-contrast)) h 0 l/1) h s l/0.4));--item-disabled-border: var(--ig-button-group-item-disabled-border, var(--item-border-color));--disabled-selected-text-color: var(--ig-button-group-disabled-selected-text-color, var(--disabled-text-color));--disabled-selected-icon-color: var(--ig-button-group-disabled-selected-icon-color, var(--ig-gray-400));--disabled-selected-border-color: var(--ig-button-group-disabled-selected-border-color, var(--item-border-color));--border: var(--ig-button-group-border, none);--shadow: var(--ig-button-group-shadow, var(--ig-elevation-2));--ig-theme: material}@utility light-flat-button{--shadow-color: var(--ig-flat-button-shadow-color, transparent);--border-color: var(--ig-flat-button-border-color, transparent);--hover-border-color: var(--ig-flat-button-hover-border-color, transparent);--focus-border-color: var(--ig-flat-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-flat-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-flat-button-active-border-color, transparent);--disabled-border-color: var(--ig-flat-button-disabled-border-color, transparent);--disabled-background: var(--ig-flat-button-disabled-background, transparent);--disabled-foreground: var(--ig-flat-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-flat-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-flat-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-flat-button-default-size, 3);--resting-elevation: var(--ig-flat-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-flat-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-flat-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-flat-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-flat-button-background, transparent);--focus-foreground: var(--ig-flat-button-focus-foreground, hsla(from var(--focus-background) h s l/1));--border-radius: var(--ig-flat-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-flat-button-foreground, var(--ig-secondary-500));--icon-color: var(--ig-flat-button-icon-color, var(--ig-secondary-500));--icon-color-hover: var(--ig-flat-button-icon-color-hover, var(--hover-foreground));--hover-background: var(--ig-flat-button-hover-background, hsla(from var(--foreground) h s l/0.08));--hover-foreground: var(--ig-flat-button-hover-foreground, hsla(from var(--hover-background) h s l/1));--focus-background: var(--ig-flat-button-focus-background, hsla(from var(--foreground) h s l/0.32));--focus-visible-background: var(--ig-flat-button-focus-visible-background, hsla(from var(--foreground) h s l/0.16));--focus-hover-background: var(--ig-flat-button-focus-hover-background, hsla(from var(--foreground) h s l/0.24));--focus-hover-foreground: var(--ig-flat-button-focus-hover-foreground, hsla(from var(--focus-hover-background) h s l/1));--focus-visible-foreground: var(--ig-flat-button-focus-visible-foreground, hsla(from var(--focus-visible-background) h s l/1));--active-background: var(--ig-flat-button-active-background, hsla(from var(--foreground) h s l/0.16));--active-foreground: var(--ig-flat-button-active-foreground, hsla(from var(--active-background) h s l/1));--resting-shadow: var(--ig-flat-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--ig-flat-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--ig-flat-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--ig-flat-button-active-shadow, var(--ig-elevation-0));--ig-theme: material}@utility dark-flat-button{--shadow-color: var(--ig-flat-button-shadow-color, transparent);--border-color: var(--ig-flat-button-border-color, transparent);--hover-border-color: var(--ig-flat-button-hover-border-color, transparent);--focus-border-color: var(--ig-flat-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-flat-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-flat-button-active-border-color, transparent);--disabled-border-color: var(--ig-flat-button-disabled-border-color, transparent);--disabled-background: var(--ig-flat-button-disabled-background, transparent);--disabled-foreground: var(--ig-flat-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-flat-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-flat-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-flat-button-default-size, 3);--resting-elevation: var(--ig-flat-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-flat-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-flat-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-flat-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-flat-button-background, transparent);--focus-foreground: var(--ig-flat-button-focus-foreground, hsla(from var(--focus-background) h s l/1));--border-radius: var(--ig-flat-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-flat-button-foreground, var(--ig-secondary-500));--icon-color: var(--ig-flat-button-icon-color, var(--ig-secondary-500));--icon-color-hover: var(--ig-flat-button-icon-color-hover, var(--hover-foreground));--hover-background: var(--ig-flat-button-hover-background, hsla(from var(--foreground) h s l/0.08));--hover-foreground: var(--ig-flat-button-hover-foreground, hsla(from var(--hover-background) h s l/1));--focus-background: var(--ig-flat-button-focus-background, hsla(from var(--foreground) h s l/0.32));--focus-visible-background: var(--ig-flat-button-focus-visible-background, hsla(from var(--foreground) h s l/0.16));--focus-hover-background: var(--ig-flat-button-focus-hover-background, hsla(from var(--foreground) h s l/0.24));--focus-hover-foreground: var(--ig-flat-button-focus-hover-foreground, hsla(from var(--focus-hover-background) h s l/1));--focus-visible-foreground: var(--ig-flat-button-focus-visible-foreground, hsla(from var(--focus-visible-background) h s l/1));--active-background: var(--ig-flat-button-active-background, hsla(from var(--foreground) h s l/0.16));--active-foreground: var(--ig-flat-button-active-foreground, hsla(from var(--active-background) h s l/1));--resting-shadow: var(--ig-flat-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--ig-flat-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--ig-flat-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--ig-flat-button-active-shadow, var(--ig-elevation-0));--ig-theme: material}@utility light-contained-button{--shadow-color: var(--ig-contained-button-shadow-color, transparent);--border-color: var(--ig-contained-button-border-color, transparent);--hover-border-color: var(--ig-contained-button-hover-border-color, transparent);--focus-border-color: var(--ig-contained-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-contained-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-contained-button-active-border-color, transparent);--disabled-border-color: var(--ig-contained-button-disabled-border-color, transparent);--disabled-background: var(--ig-contained-button-disabled-background, var(--ig-gray-100));--disabled-foreground: var(--ig-contained-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-contained-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-contained-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-contained-button-default-size, 3);--resting-elevation: var(--ig-contained-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-contained-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-contained-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-contained-button-active-elevation, var(--ig-elevation-4));--background: var(--ig-contained-button-background, var(--ig-secondary-500));--active-background: var(--ig-contained-button-active-background, var(--focus-background));--border-radius: var(--ig-contained-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-contained-button-foreground, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-contained-button-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color-hover: var(--ig-contained-button-icon-color-hover, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--hover-background: var(--ig-contained-button-hover-background, hsl(from var(--background) h s calc(l * 1.05)));--hover-foreground: var(--ig-contained-button-hover-foreground, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--focus-background: var(--ig-contained-button-focus-background, hsl(from var(--background) h s calc(l * 1.1)));--focus-foreground: var(--ig-contained-button-focus-foreground, hsla(from color(from var(--focus-background) var(--y-contrast)) h 0 l/1));--focus-hover-background: var(--ig-contained-button-focus-hover-background, var(--hover-background));--focus-hover-foreground: var(--ig-contained-button-focus-hover-foreground, hsla(from color(from var(--focus-hover-background) var(--y-contrast)) h 0 l/1));--focus-visible-background: var(--ig-contained-button-focus-visible-background, var(--focus-background));--focus-visible-foreground: var(--ig-contained-button-focus-visible-foreground, hsla(from color(from var(--focus-visible-background) var(--y-contrast)) h 0 l/1));--active-foreground: var(--ig-contained-button-active-foreground, hsla(from color(from var(--active-background) var(--y-contrast)) h 0 l/1));--resting-shadow: var(--ig-contained-button-resting-shadow, var(--ig-elevation-2));--hover-shadow: var(--ig-contained-button-hover-shadow, var(--ig-elevation-4));--focus-shadow: var(--ig-contained-button-focus-shadow, var(--ig-elevation-8));--active-shadow: var(--ig-contained-button-active-shadow, var(--ig-elevation-4));--ig-theme: material}@utility dark-contained-button{--shadow-color: var(--ig-contained-button-shadow-color, transparent);--border-color: var(--ig-contained-button-border-color, transparent);--hover-border-color: var(--ig-contained-button-hover-border-color, transparent);--focus-border-color: var(--ig-contained-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-contained-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-contained-button-active-border-color, transparent);--disabled-border-color: var(--ig-contained-button-disabled-border-color, transparent);--disabled-background: var(--ig-contained-button-disabled-background, var(--ig-gray-100));--disabled-foreground: var(--ig-contained-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-contained-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-contained-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-contained-button-default-size, 3);--resting-elevation: var(--ig-contained-button-resting-elevation, var(--ig-elevation-2));--hover-elevation: var(--ig-contained-button-hover-elevation, var(--ig-elevation-4));--focus-elevation: var(--ig-contained-button-focus-elevation, var(--ig-elevation-8));--active-elevation: var(--ig-contained-button-active-elevation, var(--ig-elevation-4));--background: var(--ig-contained-button-background, var(--ig-secondary-500));--active-background: var(--ig-contained-button-active-background, var(--focus-background));--border-radius: var(--ig-contained-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-contained-button-foreground, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-contained-button-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color-hover: var(--ig-contained-button-icon-color-hover, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--hover-background: var(--ig-contained-button-hover-background, hsl(from var(--background) h s calc(l * 1.05)));--hover-foreground: var(--ig-contained-button-hover-foreground, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--focus-background: var(--ig-contained-button-focus-background, hsl(from var(--background) h s calc(l * 1.1)));--focus-foreground: var(--ig-contained-button-focus-foreground, hsla(from color(from var(--focus-background) var(--y-contrast)) h 0 l/1));--focus-hover-background: var(--ig-contained-button-focus-hover-background, var(--hover-background));--focus-hover-foreground: var(--ig-contained-button-focus-hover-foreground, hsla(from color(from var(--focus-hover-background) var(--y-contrast)) h 0 l/1));--focus-visible-background: var(--ig-contained-button-focus-visible-background, var(--focus-background));--focus-visible-foreground: var(--ig-contained-button-focus-visible-foreground, hsla(from color(from var(--focus-visible-background) var(--y-contrast)) h 0 l/1));--active-foreground: var(--ig-contained-button-active-foreground, hsla(from color(from var(--active-background) var(--y-contrast)) h 0 l/1));--resting-shadow: var(--ig-contained-button-resting-shadow, var(--ig-elevation-2));--hover-shadow: var(--ig-contained-button-hover-shadow, var(--ig-elevation-4));--focus-shadow: var(--ig-contained-button-focus-shadow, var(--ig-elevation-8));--active-shadow: var(--ig-contained-button-active-shadow, var(--ig-elevation-4));--ig-theme: material}@utility light-outlined-button{--shadow-color: var(--ig-outlined-button-shadow-color, transparent);--border-color: var(--ig-outlined-button-border-color, var(--foreground));--hover-border-color: var(--ig-outlined-button-hover-border-color, var(--hover-foreground));--focus-border-color: var(--ig-outlined-button-focus-border-color, var(--focus-foreground));--focus-visible-border-color: var(--ig-outlined-button-focus-visible-border-color, var(--focus-visible-foreground));--active-border-color: var(--ig-outlined-button-active-border-color, var(--active-foreground));--disabled-border-color: var(--ig-outlined-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-outlined-button-disabled-background, transparent);--disabled-foreground: var(--ig-outlined-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-outlined-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-outlined-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-outlined-button-default-size, 3);--resting-elevation: var(--ig-outlined-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-outlined-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-outlined-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-outlined-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-outlined-button-background, transparent);--focus-foreground: var(--ig-outlined-button-focus-foreground, hsla(from var(--focus-background) h s l/1));--border-radius: var(--ig-outlined-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-outlined-button-foreground, var(--ig-secondary-500));--icon-color: var(--ig-outlined-button-icon-color, var(--ig-secondary-500));--icon-color-hover: var(--ig-outlined-button-icon-color-hover, var(--hover-foreground));--hover-background: var(--ig-outlined-button-hover-background, hsla(from var(--foreground) h s l/0.08));--hover-foreground: var(--ig-outlined-button-hover-foreground, hsla(from var(--hover-background) h s l/1));--focus-background: var(--ig-outlined-button-focus-background, hsla(from var(--foreground) h s l/0.32));--focus-visible-background: var(--ig-outlined-button-focus-visible-background, hsla(from var(--foreground) h s l/0.16));--focus-hover-background: var(--ig-outlined-button-focus-hover-background, hsla(from var(--foreground) h s l/0.24));--focus-hover-foreground: var(--ig-outlined-button-focus-hover-foreground, hsla(from var(--focus-hover-background) h s l/1));--focus-visible-foreground: var(--ig-outlined-button-focus-visible-foreground, hsla(from var(--focus-visible-background) h s l/1));--active-background: var(--ig-outlined-button-active-background, hsla(from var(--foreground) h s l/0.16));--active-foreground: var(--ig-outlined-button-active-foreground, hsla(from var(--active-background) h s l/1));--resting-shadow: var(--ig-outlined-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--ig-outlined-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--ig-outlined-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--ig-outlined-button-active-shadow, var(--ig-elevation-0));--ig-theme: material}@utility dark-outlined-button{--shadow-color: var(--ig-outlined-button-shadow-color, transparent);--border-color: var(--ig-outlined-button-border-color, var(--foreground));--hover-border-color: var(--ig-outlined-button-hover-border-color, var(--hover-foreground));--focus-border-color: var(--ig-outlined-button-focus-border-color, var(--focus-foreground));--focus-visible-border-color: var(--ig-outlined-button-focus-visible-border-color, var(--focus-visible-foreground));--active-border-color: var(--ig-outlined-button-active-border-color, var(--active-foreground));--disabled-border-color: var(--ig-outlined-button-disabled-border-color, var(--ig-gray-300));--disabled-background: var(--ig-outlined-button-disabled-background, transparent);--disabled-foreground: var(--ig-outlined-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-outlined-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-outlined-button-size, max(var(--is-large, 1) * max(2.25rem, -1 * 2.25rem), var(--is-medium, 1) * max(1.875rem, -1 * 1.875rem), var(--is-small, 1) * max(1.5rem, -1 * 1.5rem)));--default-size: var(--ig-outlined-button-default-size, 3);--resting-elevation: var(--ig-outlined-button-resting-elevation, var(--ig-elevation-0));--hover-elevation: var(--ig-outlined-button-hover-elevation, var(--ig-elevation-0));--focus-elevation: var(--ig-outlined-button-focus-elevation, var(--ig-elevation-0));--active-elevation: var(--ig-outlined-button-active-elevation, var(--ig-elevation-0));--background: var(--ig-outlined-button-background, transparent);--focus-foreground: var(--ig-outlined-button-focus-foreground, hsla(from var(--focus-background) h s l/1));--border-radius: var(--ig-outlined-button-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.2) * 1.25rem), 1.25rem));--foreground: var(--ig-outlined-button-foreground, var(--ig-secondary-500));--icon-color: var(--ig-outlined-button-icon-color, var(--ig-secondary-500));--icon-color-hover: var(--ig-outlined-button-icon-color-hover, var(--hover-foreground));--hover-background: var(--ig-outlined-button-hover-background, hsla(from var(--foreground) h s l/0.08));--hover-foreground: var(--ig-outlined-button-hover-foreground, hsla(from var(--hover-background) h s l/1));--focus-background: var(--ig-outlined-button-focus-background, hsla(from var(--foreground) h s l/0.32));--focus-visible-background: var(--ig-outlined-button-focus-visible-background, hsla(from var(--foreground) h s l/0.16));--focus-hover-background: var(--ig-outlined-button-focus-hover-background, hsla(from var(--foreground) h s l/0.24));--focus-hover-foreground: var(--ig-outlined-button-focus-hover-foreground, hsla(from var(--focus-hover-background) h s l/1));--focus-visible-foreground: var(--ig-outlined-button-focus-visible-foreground, hsla(from var(--focus-visible-background) h s l/1));--active-background: var(--ig-outlined-button-active-background, hsla(from var(--foreground) h s l/0.16));--active-foreground: var(--ig-outlined-button-active-foreground, hsla(from var(--active-background) h s l/1));--resting-shadow: var(--ig-outlined-button-resting-shadow, var(--ig-elevation-0));--hover-shadow: var(--ig-outlined-button-hover-shadow, var(--ig-elevation-0));--focus-shadow: var(--ig-outlined-button-focus-shadow, var(--ig-elevation-0));--active-shadow: var(--ig-outlined-button-active-shadow, var(--ig-elevation-0));--ig-theme: material}@utility light-fab-button{--shadow-color: var(--ig-fab-button-shadow-color, transparent);--border-color: var(--ig-fab-button-border-color, transparent);--hover-border-color: var(--ig-fab-button-hover-border-color, transparent);--focus-border-color: var(--ig-fab-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-fab-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-fab-button-active-border-color, transparent);--disabled-border-color: var(--ig-fab-button-disabled-border-color, transparent);--disabled-background: var(--ig-fab-button-disabled-background, var(--ig-gray-100));--disabled-foreground: var(--ig-fab-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-fab-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-fab-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-fab-button-default-size, 3);--resting-elevation: var(--ig-fab-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-fab-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-fab-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-fab-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-fab-button-background, var(--ig-secondary-500));--active-background: var(--ig-fab-button-active-background, var(--focus-background));--border-radius: var(--ig-fab-button-border-radius, clamp(0.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--ig-fab-button-foreground, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-fab-button-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color-hover: var(--ig-fab-button-icon-color-hover, var(--icon-color));--hover-background: var(--ig-fab-button-hover-background, hsl(from var(--background) h s calc(l * 1.05)));--hover-foreground: var(--ig-fab-button-hover-foreground, var(--foreground));--focus-background: var(--ig-fab-button-focus-background, hsl(from var(--background) h s calc(l * 1.1)));--focus-foreground: var(--ig-fab-button-focus-foreground, var(--foreground));--focus-hover-background: var(--ig-fab-button-focus-hover-background, var(--hover-background));--focus-hover-foreground: var(--ig-fab-button-focus-hover-foreground, var(--foreground));--focus-visible-background: var(--ig-fab-button-focus-visible-background, var(--focus-background));--focus-visible-foreground: var(--ig-fab-button-focus-visible-foreground, hsla(from color(from var(--focus-visible-background) var(--y-contrast)) h 0 l/1));--active-foreground: var(--ig-fab-button-active-foreground, hsla(from color(from var(--active-background) var(--y-contrast)) h 0 l/1));--resting-shadow: var(--ig-fab-button-resting-shadow, var(--ig-elevation-6));--hover-shadow: var(--ig-fab-button-hover-shadow, var(--ig-elevation-12));--focus-shadow: var(--ig-fab-button-focus-shadow, var(--ig-elevation-12));--active-shadow: var(--ig-fab-button-active-shadow, var(--ig-elevation-12));--ig-theme: material}@utility dark-fab-button{--shadow-color: var(--ig-fab-button-shadow-color, transparent);--border-color: var(--ig-fab-button-border-color, transparent);--hover-border-color: var(--ig-fab-button-hover-border-color, transparent);--focus-border-color: var(--ig-fab-button-focus-border-color, transparent);--focus-visible-border-color: var(--ig-fab-button-focus-visible-border-color, transparent);--active-border-color: var(--ig-fab-button-active-border-color, transparent);--disabled-border-color: var(--ig-fab-button-disabled-border-color, transparent);--disabled-background: var(--ig-fab-button-disabled-background, var(--ig-gray-100));--disabled-foreground: var(--ig-fab-button-disabled-foreground, var(--ig-gray-500));--disabled-icon-color: var(--ig-fab-button-disabled-icon-color, var(--ig-gray-500));--size: var(--ig-fab-button-size, max(var(--is-large, 1) * max(3rem, -1 * 3rem), var(--is-medium, 1) * max(2.5rem, -1 * 2.5rem), var(--is-small, 1) * max(2rem, -1 * 2rem)));--default-size: var(--ig-fab-button-default-size, 3);--resting-elevation: var(--ig-fab-button-resting-elevation, var(--ig-elevation-6));--hover-elevation: var(--ig-fab-button-hover-elevation, var(--ig-elevation-12));--focus-elevation: var(--ig-fab-button-focus-elevation, var(--ig-elevation-12));--active-elevation: var(--ig-fab-button-active-elevation, var(--ig-elevation-12));--background: var(--ig-fab-button-background, var(--ig-secondary-500));--active-background: var(--ig-fab-button-active-background, var(--focus-background));--border-radius: var(--ig-fab-button-border-radius, clamp(0.75rem, calc(var(--ig-radius-factor, 1) * 1.75rem), 1.75rem));--foreground: var(--ig-fab-button-foreground, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color: var(--ig-fab-button-icon-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--icon-color-hover: var(--ig-fab-button-icon-color-hover, var(--icon-color));--hover-background: var(--ig-fab-button-hover-background, hsl(from var(--background) h s calc(l * 1.05)));--hover-foreground: var(--ig-fab-button-hover-foreground, var(--foreground));--focus-background: var(--ig-fab-button-focus-background, hsl(from var(--background) h s calc(l * 1.1)));--focus-foreground: var(--ig-fab-button-focus-foreground, var(--foreground));--focus-hover-background: var(--ig-fab-button-focus-hover-background, var(--hover-background));--focus-hover-foreground: var(--ig-fab-button-focus-hover-foreground, var(--foreground));--focus-visible-background: var(--ig-fab-button-focus-visible-background, var(--focus-background));--focus-visible-foreground: var(--ig-fab-button-focus-visible-foreground, hsla(from color(from var(--focus-visible-background) var(--y-contrast)) h 0 l/1));--active-foreground: var(--ig-fab-button-active-foreground, hsla(from color(from var(--active-background) var(--y-contrast)) h 0 l/1));--resting-shadow: var(--ig-fab-button-resting-shadow, var(--ig-elevation-6));--hover-shadow: var(--ig-fab-button-hover-shadow, var(--ig-elevation-12));--focus-shadow: var(--ig-fab-button-focus-shadow, var(--ig-elevation-12));--active-shadow: var(--ig-fab-button-active-shadow, var(--ig-elevation-12));--ig-theme: material}@utility light-card{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s calc(l * 0.85)));--content-text-color: var(--ig-card-content-text-color, hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s calc(l * 0.85)));--actions-text-color: var(--ig-card-actions-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.54));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--resting-shadow: var(--ig-card-resting-shadow, var(--ig-elevation-4));--hover-shadow: var(--ig-card-hover-shadow, var(--ig-elevation-6));--ig-theme: material}@utility dark-card{--resting-elevation: var(--ig-card-resting-elevation, var(--ig-elevation-4));--hover-elevation: var(--ig-card-hover-elevation, var(--ig-elevation-6));--background: var(--ig-card-background, var(--ig-surface-500));--header-text-color: var(--ig-card-header-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--subtitle-text-color: var(--ig-card-subtitle-text-color, hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s calc(l * 0.85)));--content-text-color: var(--ig-card-content-text-color, hsl(from hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1) h s calc(l * 0.85)));--actions-text-color: var(--ig-card-actions-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--outline-color: var(--ig-card-outline-color, hsl(from var(--ig-gray-400) h s l/0.38));--border-radius: var(--ig-card-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 0.1666666667) * 1.5rem), 1.5rem));--default-size: var(--ig-card-default-size, 2);--resting-shadow: var(--ig-card-resting-shadow, var(--ig-elevation-4));--hover-shadow: var(--ig-card-hover-shadow, var(--ig-elevation-6));--ig-theme: material}@utility light-chip{--ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-8));--remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');--focus-outline-color: var(--ig-chip-focus-outline-color, transparent);--focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);--remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');--background: var(--ig-chip-background, var(--ig-gray-300));--border-color: var(--ig-chip-border-color, var(--background));--ghost-background: var(--ig-chip-ghost-background, var(--ig-gray-400));--hover-text-color: var(--ig-chip-hover-text-color, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--hover-background: var(--ig-chip-hover-background, hsl(from var(--background) h s calc(l * 0.9)));--hover-border-color: var(--ig-chip-hover-border-color, var(--border-color));--focus-text-color: var(--ig-chip-focus-text-color, hsla(from color(from var(--focus-background) var(--y-contrast)) h 0 l/1));--focus-border-color: var(--ig-chip-focus-border-color, var(--border-color));--selected-text-color: var(--ig-chip-selected-text-color, hsla(from color(from var(--selected-background) var(--y-contrast)) h 0 l/1));--selected-background: var(--ig-chip-selected-background, var(--background));--selected-border-color: var(--ig-chip-selected-border-color, var(--selected-background));--hover-selected-text-color: var(--ig-chip-hover-selected-text-color, hsla(from color(from var(--hover-selected-background) var(--y-contrast)) h 0 l/1));--hover-selected-background: var(--ig-chip-hover-selected-background, hsl(from var(--selected-background) h s calc(l * 0.9)));--hover-selected-border-color: var(--ig-chip-hover-selected-border-color, var(--hover-selected-background));--focus-selected-border-color: var(--ig-chip-focus-selected-border-color, var(--focus-selected-background));--border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));--disabled-text-color: var(--ig-chip-disabled-text-color, var(--ig-gray-500));--disabled-background: var(--ig-chip-disabled-background, var(--ig-gray-200));--disabled-border-color: var(--ig-chip-disabled-border-color, var(--ig-gray-200));--size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));--default-size: var(--ig-chip-default-size, 2);--text-color: var(--ig-chip-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--focus-background: var(--ig-chip-focus-background, hsl(from var(--background) h s calc(l * 0.8)));--focus-selected-text-color: var(--ig-chip-focus-selected-text-color, hsla(from color(from var(--focus-selected-background) var(--y-contrast)) h 0 l/1));--focus-selected-background: var(--ig-chip-focus-selected-background, hsl(from var(--selected-background) h s calc(l * 0.8)));--ghost-shadow: var(--ig-chip-ghost-shadow, var(--ig-elevation-8));--ig-theme: material}@utility dark-chip{--ghost-elevation: var(--ig-chip-ghost-elevation, var(--ig-elevation-8));--remove-icon-color: var(--ig-chip-remove-icon-color, 'currentColor');--focus-outline-color: var(--ig-chip-focus-outline-color, transparent);--focus-selected-outline-color: var(--ig-chip-focus-selected-outline-color, transparent);--remove-icon-color-focus: var(--ig-chip-remove-icon-color-focus, 'currentColor');--background: var(--ig-chip-background, var(--ig-gray-300));--border-color: var(--ig-chip-border-color, var(--background));--ghost-background: var(--ig-chip-ghost-background, var(--ig-gray-400));--hover-text-color: var(--ig-chip-hover-text-color, hsla(from color(from var(--hover-background) var(--y-contrast)) h 0 l/1));--hover-background: var(--ig-chip-hover-background, hsl(from var(--background) h s calc(l * 0.9)));--hover-border-color: var(--ig-chip-hover-border-color, var(--border-color));--focus-text-color: var(--ig-chip-focus-text-color, hsla(from color(from var(--focus-background) var(--y-contrast)) h 0 l/1));--focus-border-color: var(--ig-chip-focus-border-color, var(--border-color));--selected-text-color: var(--ig-chip-selected-text-color, hsla(from color(from var(--selected-background) var(--y-contrast)) h 0 l/1));--selected-background: var(--ig-chip-selected-background, var(--background));--selected-border-color: var(--ig-chip-selected-border-color, var(--selected-background));--hover-selected-text-color: var(--ig-chip-hover-selected-text-color, hsla(from color(from var(--hover-selected-background) var(--y-contrast)) h 0 l/1));--hover-selected-background: var(--ig-chip-hover-selected-background, hsl(from var(--selected-background) h s calc(l * 0.9)));--hover-selected-border-color: var(--ig-chip-hover-selected-border-color, var(--hover-selected-background));--focus-selected-border-color: var(--ig-chip-focus-selected-border-color, var(--focus-selected-background));--border-radius: var(--ig-chip-border-radius, clamp(0rem, calc(var(--ig-radius-factor, 1) * 1rem), 1rem));--disabled-text-color: var(--ig-chip-disabled-text-color, var(--ig-gray-500));--disabled-background: var(--ig-chip-disabled-background, var(--ig-gray-200));--disabled-border-color: var(--ig-chip-disabled-border-color, var(--ig-gray-200));--size: var(--ig-chip-size, max(var(--is-large, 1) * max(2rem, -1 * 2rem), var(--is-medium, 1) * max(1.5rem, -1 * 1.5rem), var(--is-small, 1) * max(1.25rem, -1 * 1.25rem)));--default-size: var(--ig-chip-default-size, 2);--text-color: var(--ig-chip-text-color, hsla(from color(from var(--background) var(--y-contrast)) h 0 l/1));--focus-background: var(--ig-chip-focus-background, hsl(from var(--background) h s calc(l * 0.8)));--focus-selected-text-color: var(--ig-chip-focus-selected-text-color, hsla(from color(from var(--focus-selected-background) var(--y-contrast)) h 0 l/1));--focus-selected-background: var(--ig-chip-focus-selected-background, hsl(from var(--selected-background) h s calc(l * 0.8)));--ghost-shadow: var(--ig-chip-ghost-shadow, var(--ig-elevation-8));--ig-theme: material}@utility light-carousel{--button-elevation: var(--ig-carousel-button-elevation, var(--ig-elevation-1));--slide-background: var(--ig-carousel-slide-background, var(--ig-gray-900-contrast));--button-background: var(--ig-carousel-button-background, var(--ig-gray-50));--button-hover-background: var(--ig-carousel-button-hover-background, var(--button-background));--button-arrow-color: var(--ig-carousel-button-arrow-color, hsla(from hsla(from color(from var(--button-background) var(--y-contrast)) h 0 l/1) h s l/0.85));--button-hover-arrow-color: var(--ig-carousel-button-hover-arrow-color, hsla(from color(from var(--button-hover-background) var(--y-contrast)) h 0 l/1));--button-disabled-background: var(--ig-carousel-button-disabled-background, var(--button-background));--button-disabled-arrow-color: var(--ig-carousel-button-disabled-arrow-color, hsla(from hsla(from color(from var(--button-disabled-background) var(--y-contrast)) h 0 l/1) h s l/0.4));--indicator-focus-color: var(--ig-carousel-indicator-focus-color, hsla(from color(from var(--indicator-background) var(--y-contrast)) h 0 l/1));--button-focus-border-color: var(--ig-carousel-button-focus-border-color, var(--button-focus-arrow-color));--button-border-color: var(--ig-carousel-button-border-color, transparent);--button-hover-border-color: var(--ig-carousel-button-hover-border-color, transparent);--button-disabled-border-color: var(--ig-carousel-button-disabled-border-color, transparent);--indicator-dot-color: var(--ig-carousel-indicator-dot-color, hsla(from hsla(from color(from var(--indicator-background) var(--y-contrast)) h 0 l/1) h s l/0.8));--indicator-hover-dot-color: var(--ig-carousel-indicator-hover-dot-color, hsla(from var(--indicator-dot-color) h s l/1));--indicator-background: var(--ig-carousel-indicator-background, var(--ig-gray-50));--label-indicator-background: var(--ig-carousel-label-indicator-background, hsl(from var(--ig-gray-50) h s l/0.8));--indicator-color: var(--ig-carousel-indicator-color, var(--ig-gray-700));--