// Import bulma utilities
@import '_bulma_utitlities.sass'

.custom-loader
  position: relative
  width: 48px
  height: 48px
  display: inline-block
  &.is-small
    width: 24px
    height: 24px
  &.is-medium
    width: 96px
    height: 96px
  &.is-large
    width: 144px
    height: 144px
  .dot
    position: absolute
    width: 100%
    height: 100%
    opacity: 0
    transform: rotate(225deg)
    animation: orbit 7.15s infinite
    .inner-dot
      position: absolute
      width: 15%
      height: 15%
      background: $dark
      left: 0
      top: 0
      border-radius: 50%
    &:nth-child(1)
      animation-delay: 0.31s
    &:nth-child(2)
      animation-delay: 0.62s
    &:nth-child(3)
      animation-delay: 0.93s
    &:nth-child(4)
      animation-delay: 1.24s
    &:nth-child(5)
      animation-delay: 1.55s
@each $name, $pair in $colors
  $color: nth($pair, 1)
  .custom-loader
    &.is-#{$name}
      .dot
        .inner-dot
          background-color: $color

// Custom Loader animation
@keyframes orbit
  0%
    opacity: 1
    transform: rotate(180deg)
    animation-timing-function: ease-out
  7%
    opacity: 1
    transform: rotate(300deg)
    animation-timing-function: linear
    origin: 0%
  30%
    opacity: 1
    transform: rotate(410deg)
    animation-timing-function: ease-in-out
    origin: 7%
  39%
    opacity: 1
    transform: rotate(645deg)
    animation-timing-function: linear
    origin: 30%
  70%
    opacity: 1
    transform: rotate(770deg)
    animation-timing-function: ease-out
    origin: 39%
  75%
    opacity: 1
    transform: rotate(900deg)
    animation-timing-function: ease-out
    origin: 70%
  76%
    opacity: 0
    transform: rotate(900deg)
  100%
    opacity: 0
    transform: rotate(900deg)