.s-icon {
  color: var(--theme-icons-active);
  font-size: var(--s-icon-size);
  transform: rotate(var(--s-icon-rotate));
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-flex;
  font-feature-settings: 'liga';
  justify-content: center;
  position: relative;
  align-items: center;
  text-indent: 0;
  vertical-align: middle;
  cursor: inherit;
  user-select: none;
  direction: ltr;
  transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1), visibility 0s;

  &.disabled {
    color: var(--theme-icons-inactive);
  }

  &.spin {
    animation: infinite s-icon-spin linear 1s;
  }

  > svg {
    fill: currentColor;
  }
}

@keyframes s-icon-spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}