$size-major: 24px;
$size-minor: 16px;
$size-micro: 16px;

.Icon {
  &--size {
    &-major {
      height: $size-major;
      width: $size-major;
    }

    &-minor {
      height: $size-minor;
      width: $size-minor;
    }

    &-micro {
      height: $size-micro;
      width: $size-micro;
    }
  }
  svg {
    display: block;
  }

  &__spinner {
    -webkit-animation: spinner-animation 500ms infinite linear;
    -moz-animation: spinner-animation 500ms infinite linear;
    animation: spinner-animation 500ms infinite linear;

    height: $size-minor;
    width: $size-minor;
    align-items: center;
    justify-content: center;
    display: flex;
    overflow: visible;
    vertical-align: middle;

    @-webkit-keyframes spinner-animation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @-moz-keyframes spinner-animation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }

    @keyframes spinner-animation {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
    }
  }
}