:root {
  --in-zero-percentage: 0%;
  /* The var that will switch between different theme mode */
  --in-sys-color-switch: var(--in-ref-palette-white);
  --in-sys-color-switch-rgb: 255 255 255;
  --in-sys-color-switch-reverse: var(--in-ref-palette-black);
  --in-sys-color-switch-reverse-rgb: 0 0 0;
  --in-sys-color-disabled-level-0: rgb(
    var(--md-sys-color-on-surface-rgb) /
      var(--md-sys-state-disabled-state-layer-opacity)
  );
  --in-sys-color-disabled-level-1: rgb(
    var(--md-sys-color-on-surface-rgb) / 0.12
  );
  --in-sys-color-ripple: var(--in-sys-color-switch);
}

:root[data-theme='dark'] {
  /* The var that will switch between different theme mode */
  --in-sys-color-switch: var(--in-ref-palette-black);
  --in-sys-color-switch-rgb: 0 0 0;
  --in-sys-color-switch-reverse: var(--in-ref-palette-white);
  --in-sys-color-switch-reverse-rgb: 255 255 255;
}

.in-icon-material {
  user-select: none;
  width: 1em;
  height: 1em;
  display: inline-block;
  fill: currentcolor;
  flex-shrink: 0;
  transition: fill 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
  font-size: var(--in-icon-font-size, 'inherit');
  color: var(--in-icon-color);
}