// Functions
@function colour($value)
    @return map-get($colours, $value)

// Variables
$preloader-height: 7px

$colours: (dark: #373737, red: #ce2020, blue: #3c81e8, yellow: #fda100)

$animation-duration: 3.5s

[role="progressbar"][aria-busy="true"]
    position: fixed
    width: 100%
    top: 0
    z-index: 9
    left: 0
    padding-top: $preloader-height
    width: 100%
    background-color: colour(dark)
    animation: preloader-background linear $animation-duration infinite

    &.btm
        top: auto
        bottom: 0

    &::before,
    &::after
        display: block
        position: absolute
        top: 0
        z-index: 2
        width: 0
        height: $preloader-height
        background: #afa
        animation: preloader-front linear $animation-duration infinite
        content: ''

    &::before
        right: 50%

    &::after
        left: 50%

// Animations
@keyframes preloader-background
    0%, 24.9%
        background-color: colour(dark)

    25%, 49.9%
        background-color: colour(red)

    50%, 74.9%
        background-color: colour(blue)

    75%, 100%
        background-color: colour(yellow)

@keyframes preloader-front
    0%
        width: 0
        background-color: colour(red)

    24.9%
        width: 50%
        background-color: colour(red)

    25%
        width: 0
        background-color: colour(blue)

    49.9%
        width: 50%
        background-color: colour(blue)

    50%
        width: 0
        background-color: colour(yellow)

    74.9%
        width: 50%
        background-color: colour(yellow)

    75%
        width: 0%
        background-color: colour(dark)

    100%
        width: 50%
        background-color: colour(dark)

.preloader--main
    background: rgba(255, 255, 255, 0.9)
    position: fixed
    height: 100%
    width: 100%
    left: 0
    top: 0
    z-index: 8
    text-align: center

    @extend .flex_center

.preloader-spin
    height: 40px
    width: 40px
    display: inline-block
    background: transparent
    border-radius: 50%
    border-width: 4px
    border-style: solid
    border-color: #d0d0d0 #d0d0d0 #111 #d0d0d0
    animation: 1s linear 0s normal none infinite running spinner_preloader

@keyframes spinner_preloader
    0%
        transform: rotate(0deg)

    50%
        transform: rotate(360deg)

    100%
        transform: rotate(720deg)