.loader
  .loader__figure
  p.loader__label A7G

@import "bourbon"


// GLOBALS
  --------

$background-color: #1B101F
$loader-color: #FE665C

$loader-size: em(32)
$loader-animation-duration: 1.15s


// SETUP
  ------

body
  height: 100vh
  font-family: $monospace
  -webkit-font-smoothing: antialiased
  background-color: $background-color

  &::before
    content: ''
    +position(absolute, 0 null null 0)
    +size(100%)
    background: url(http://magdeleine.co/wp-content/uploads/2015/07/photo-1418226970361-9f1f7227d638-1400x933.jpeg) 50% 50% no-repeat
    background-size: cover
    opacity: 0.25


// LOADER
  -------

.loader,
.loader__figure
  +position(absolute, 50% null null 50%)
  +transform(translate(-50%, -50%))

.loader
  overflow: visible
  padding-top: $loader-size
  +size($loader-size 0)

.loader__figure
  +size(0)
  box-sizing: border-box
  border: 0 solid $loader-color
  border-radius: 50%
  +animation(loader-figure $loader-animation-duration infinite $ease-out-cubic)

.loader__label
  float: left
  margin-left: 50%
  +transform(translateX(-50%))
  margin: 0.5em 0 0 50%

  font-size: em(14)
  letter-spacing: 0.1em
  line-height: 1.5em
  color: mix($loader-color, $background-color)
  white-space: nowrap
  +animation(loader-label $loader-animation-duration infinite $ease-out-cubic)


// LOADER KEYFRAMES
  -----------------

+keyframes(loader-figure)
  0%
    +size(0)
    background-color: $loader-color

  29%
    background-color: $loader-color

  30%
    +size($loader-size)
    background-color: transparent
    border-width: $loader-size / 2
    opacity: 1

  100%
    +size($loader-size)
    border-width: 0
    opacity: 0
    background-color: transparent

+keyframes(loader-label)
  0%
    opacity: 0.25
  
  30%
    opacity: 1

  100%
    opacity: 0.25