sy-icon.sy-icon-host,
.sy-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: currentColor;
  line-height: 1;
  vertical-align: middle;
}

.sy-icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
  color: currentColor;
  fill: currentColor;
  pointer-events: none;
  user-select: none;
}

.sy-icon use {
  pointer-events: none;
}

.side-btn .ico,
.mobile-nav-btn > span,
.mobile-menu-link > span,
.workspace-module-menu button > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}

.side-btn .ico,
.mobile-nav-btn > span,
.mobile-menu-link > span {
  width: 22px;
  height: 22px;
}

.workspace-module-menu button > i {
  width: 18px;
  height: 18px;
  font-style: normal;
}

button > .sy-icon,
a > .sy-icon,
label > .sy-icon {
  flex: 0 0 auto;
}

.sy-icon-spin {
  animation: sy-icon-spin 0.8s linear infinite;
}

@keyframes sy-icon-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sy-icon-spin {
    animation: none;
  }
}