:root {
  --size-icon-xxs: 20px;
  --size-icon-xs: 22px;
  --size-icon-s: 23px;
  --size-icon-m: 24px;
  --size-icon-l: 25px;
  --size-icon-xl: 30px;
  --size-icon-xxl: 32px;
}

.icon {
  display: grid;
  align-items: center;
  position: relative;
}
.icon svg {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.icon svg path,
.icon svg circle,
.icon svg rect {
  transition: all var(--transition);
}
.icon_position_before {
  order: -1;
}
.icon_position_after {
  order: 1;
}
.icon_size_xxs {
  width: var(--size-icon-xxs);
  height: var(--size-icon-xxs);
}
.icon_size_xs {
  width: var(--size-icon-xs);
  height: var(--size-icon-xs);
}
.icon_size_s {
  width: var(--size-icon-s);
  height: var(--size-icon-s);
}
.icon_size_m {
  width: var(--size-icon-m);
  height: var(--size-icon-m);
}
.icon_size_l {
  width: var(--size-icon-l);
  height: var(--size-icon-l);
}
.icon_size_xl {
  width: var(--size-icon-xl);
  height: var(--size-icon-xl);
}
.icon_size_xxl {
  width: var(--size-icon-xxl);
  height: var(--size-icon-xxl);
}/*# sourceMappingURL=icon.css.map */