.ys-icon {
  --color: inherit;
  --font-size: inherit;
  --text-color: var(--color);
  --text-size: inherit;

  display: inline-flex;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  color: var(--color);
  font-size: var(--font-size);
  &.ys-icon--rtl {
    flex-direction: row-reverse;
    .ys-icon__text {
      margin-left: 0;
      margin-right: 4px;
    }
  }
  &.ys-is--loading .ys-icon__svg {
    animation: ys-icon-rotating 2s linear infinite;
  }
}
.ys-icon__svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  line-height: 1em;
  svg {
    width: 1em;
    height: 1em;
  }
}
.ys-icon__text {
  height: 1em;
  line-height: 1em;
  font-size: var(--text-size);
  color: var(--text-color);
  margin-left: 4px;
}

@keyframes ys-icon-rotating {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}