@keyframes rotation
  0%
    transform: rotate3d(0, 0, 1, 0deg)
  100%
    transform: rotate3d(0, 0, 1, 360deg)

.spinner
  --spinner-color: $secondary
  --spinner-color-1: alpha($secondary, .45)
  --spinner-color-2: alpha($secondary, .5)
  --spinner-bg: $commonBg
  z-index: 0 // NOTE: create its own context stack
  position: relative
  display: inline-block
  width: 40px
  height: @width
  border-radius: 50%
  overflow: hidden
  animation: rotation 1.5s linear infinite
  &::before
  &::after
    content: ''
    absolute: 0 0 0 0
    position: absolute
    left: 0
    width: 100%
    height: 50%
    display: block
  &::before
    top: 0
    background: linear-gradient(90deg, var(--spinner-color-1) 0%, var(--spinner-color) 100%) // NOTE: .45 is intended
  &::after
    bottom: 0
    background: linear-gradient(90deg, var(--spinner-color-2) 0%, transparent 100%)
  &.large
    width: 60px
    height: @width
    .inner
      width: 48px
      height: @width
  &.small
    width: 24px
    height: @width
    .inner
      width: 16px
      height: @width

  .inner
    z-index: 1
    position: absolute
    top: 0
    right: @top
    bottom: @right
    left: @bottom
    display: block
    width: 30px
    height: @width
    border-radius: 50%
    margin: auto
    background: white
    overflow: hidden
    &::before
      content: ''
      display: block
      width: 100%
      height: @width
      background: var(--spinner-bg)