/// Global namespace for loader component
/// @access public
/// @group loader
/// @type string
$DBloadingindicator-namespace: "c-loader";

/// Color for loader component
/// @access public
/// @group loader
/// @type color
$DBloadingindicator-color: color(gray, dark);

/// Size of loader component
/// @access public
/// @group loader
/// @type number
$DBloadingindicator-size: 6px;

/// Animation speed of loader component
/// @access public
/// @group loader
/// @type number
$DBloadingindicator-speed: 0.9s;

// Loading indicator component
// @example html
//  <div class="c-loader">Loading...</div>
.#{$DBloadingindicator-namespace} {
    display: inline-block;
    position: relative;
    width: $DBloadingindicator-size;
    height: $DBloadingindicator-size;
    margin: ($DBloadingindicator-size * 2) 0;

    font-size: 0;

    color: transparent;
    border-radius: 100%;
    background-color: rgba($DBloadingindicator-color, 0.3);

    &, &:after, &:before {
        animation: loaderFade $DBloadingindicator-speed ease-in-out infinite;
    }

    &:after, &:before {
        content: "";
        vertical-align: middle;
        position: absolute;
        left: 100%;
        width: $DBloadingindicator-size;
        height: $DBloadingindicator-size;
        margin-left: round($DBloadingindicator-size * 0.6);

        border-radius: 100%;
        background-color: rgba($DBloadingindicator-color, 0.3);
        animation-delay: ($DBloadingindicator-speed / 3);
    }

    &:after {
        left: 200%;
        margin-left: (round($DBloadingindicator-size * 0.3) + $DBloadingindicator-size);

        animation-delay: (($DBloadingindicator-speed / 3) * 2);
    }
}

@keyframes loaderFade {
    50% {
        background-color: rgba($DBloadingindicator-color, 1);
    }

    0%, 100% {
        background-color: rgba($DBloadingindicator-color, 0.3);
    }
}
