.Icon {
  --Icon-fill: 'FILL' 1;

  direction: ltr;
  display: inline-block;
  /* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */
  font-family: 'Material Symbols Outlined';
  font-feature-settings: 'liga';
  font-size: var(--Icon-size);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  font-style: normal;
  font-variation-settings: var(--Icon-fill);
  font-weight: normal;
  letter-spacing: normal;
  line-height: 1;
  position: relative;
  text-rendering: optimizeLegibility;
  text-transform: none;
  top: calc((var(--Text-height) - var(--Icon-size)) / 2);
  transform: var(--Icon-transform);
  vertical-align: top;
  white-space: nowrap;
  word-wrap: normal;
}

.Icon.is-s {
  --Icon-size: var(--iconSize-s);
}

.Icon.is-m {
  --Icon-size: var(--iconSize-m);
}

.Icon.is-l {
  --Icon-size: var(--iconSize-l);
}

.Icon.is-xl {
  --Icon-size: var(--iconSize-xl);
}

[data-icon-mode='rotate90'] {
  --Icon-transform: rotate(90deg);
}

[data-icon-mode='rotate180'] {
  --Icon-transform: rotate(180deg);
}

[data-icon-mode='rotate270'] {
  --Icon-transform: rotate(270deg);
}
