:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons) {
  --icon-font-size: inherit;
  --icon-line-height: inherit;
  --icon-svg-width: 1em;
  --icon-svg-height: 1em;
  --icon-svg-vertical-align: text-bottom;
  --icon-material-vertical-align: bottom;
  --icon-dark-color: var(--theme-dark);
  --icon-light-color: var(--theme-light);
  --icon-primary-color: var(--theme-primary);
  --icon-secondary-color: var(--theme-secondary);
  --icon-info-color: var(--theme-info);
  --icon-success-color: var(--theme-success);
  --icon-warning-color: var(--theme-warning);
  --icon-danger-color: var(--theme-danger);
  --icon-fit-width: 1em;
  --icon-disabled-color: var(--theme-dark);
  --icon-disabled-color-alpha: 36%;
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons) {
  --icon-disabled-color-mix: color-mix(
    in srgb,
    var(--icon-disabled-color) var(--icon-disabled-color-alpha),
    transparent calc(100% - var(--icon-disabled-color-alpha))
  );
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons) {
  font-size: var(--icon-font-size);
  line-height: var(--icon-line-height);
}

:where(svg).icon {
  display: inline-block;
  flex: none;
  width: var(--icon-svg-width);
  height: var(--icon-svg-height);
  vertical-align: var(--icon-svg-vertical-align);
}

.material-icons {
  vertical-align: var(--icon-material-vertical-align);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark {
  color: var(--icon-dark-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-1 {
  color: color-mix(in srgb, var(--icon-dark-color) 87%, transparent 13%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-2 {
  color: color-mix(in srgb, var(--icon-dark-color) 70%, transparent 30%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-3 {
  color: color-mix(in srgb, var(--icon-dark-color) 60%, transparent 40%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-4 {
  color: color-mix(in srgb, var(--icon-dark-color) 50%, transparent 50%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-5 {
  color: color-mix(in srgb, var(--icon-dark-color) 40%, transparent 60%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-6 {
  color: color-mix(in srgb, var(--icon-dark-color) 26%, transparent 74%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-7 {
  color: color-mix(in srgb, var(--icon-dark-color) 15%, transparent 85%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-8 {
  color: color-mix(in srgb, var(--icon-dark-color) 12%, transparent 88%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-dark-9 {
  color: color-mix(in srgb, var(--icon-dark-color) 5%, transparent 95%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light {
  color: var(--icon-light-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-1 {
  color: color-mix(in srgb, var(--icon-light-color) 87%, transparent 13%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-2 {
  color: color-mix(in srgb, var(--icon-light-color) 70%, transparent 30%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-3 {
  color: color-mix(in srgb, var(--icon-light-color) 60%, transparent 40%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-4 {
  color: color-mix(in srgb, var(--icon-light-color) 50%, transparent 50%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-5 {
  color: color-mix(in srgb, var(--icon-light-color) 40%, transparent 60%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-6 {
  color: color-mix(in srgb, var(--icon-light-color) 26%, transparent 74%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-7 {
  color: color-mix(in srgb, var(--icon-light-color) 15%, transparent 85%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-8 {
  color: color-mix(in srgb, var(--icon-light-color) 12%, transparent 88%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-light-9 {
  color: color-mix(in srgb, var(--icon-light-color) 5%, transparent 95%);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-tx-1 {
  color: var(--theme-tx-1);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-tx-2 {
  color: var(--theme-tx-2);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-tx-3 {
  color: var(--theme-tx-3);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-lk {
  color: var(--theme-lk);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-lk-tx {
  color: var(--theme-lk-tx);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-primary {
  color: var(--icon-primary-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-secondary {
  color: var(--icon-secondary-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-info {
  color: var(--icon-info-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-success {
  color: var(--icon-success-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-warning {
  color: var(--icon-warning-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-danger {
  color: var(--icon-danger-color);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons):is(
    [disabled],
    [aria-disabled="true"],
    .is-disabled
  ) {
  pointer-events: none;
  color: var(--icon-disabled-color-mix);
}

:is(.icon, .im, .fa, .fas, .far, .fal, .fab, .material-icons).is-fit {
  width: var(--icon-fit-width);
  text-align: center;
}