@layer atoms {
  .mobius-icon {
    height: 1em;
    vertical-align: -0.2em;
    transform-origin: center;

    /* 16px */
    &.--size-xs {
      font-size: 1em;
    }

    /* 20px */
    &.--size-sm {
      font-size: 1.25em;
      line-height: 0.05em;
      vertical-align: -0.075em;
    }

    /* 24px */
    &.--size-md {
      font-size: 1.5em;
      line-height: 0.0416666682em;
      vertical-align: -0.125em;
    }

    /* 32px */
    &.--size-lg {
      font-size: 2em;
      line-height: 0.03125em;
      vertical-align: -0.1875em;
    }
  }

  .mobius-icon.--is-spinning {
    animation: MobiusIconSpinningKeyframes 2s linear infinite;
  }

  @keyframes MobiusIconSpinningKeyframes {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(1turn);
    }
  }
}
