// Loaders
//
// Communicate that somethings is happening with a loader.
// They can be used on almost all elements `div`, `span` etc.
// Use type or size modifiers to adopt the loader to your context.
// Out of the box there are three sizes `small`, `default` and `large`.
// To control the visibility of the loader use the trait
// `pam-visibility="hidden | invisible"`.
//
// Weight: 15
//
// Style guide: loaders

// Examples
//
// Some examples of circle loader in button and input context.
//
// Markup:
// <form pam-Form>
//     <div pam-Form-Inline="reverse">
//         <label for="group-input-loader" pam-Form-Icon>
//             <div pam-Loader="circle small"></div>
//         </label>
//         <input id="group-input-loader" type="text" placeholder="Input group loader" pam-Form-Control disabled>
//     </div>
// <form>
//
// <button pam-Button>
//     Button
//     <div pam-Loader="circle small"></div>
// </button>
//
// Weight: 3
//
// Style guide: loaders.examples

//  Variables
// ==================================================================

@circle-height: @space-24;
@circle-width: @space-24;
@circle-border-width: 0.2rem;
@circle-border-color: rgba(0, 0, 0, 0.2);
@circle-border-indicator-color: @skin-darker;

@pulse-background-color: #3a3a3a;
@pulse-height: @space-24;
@pulse-margin: 0 @space-16;
@pulse-width: @space-base + 2;
@pulse-animation-speed: 750ms;
@pulse-animation-delay: 250ms;

@pulse-small-bar-height: @space-16;
@pulse-small-bar-offset: @space-12;

// ==================================================================
//  Loader
// ==================================================================

[pam-Loader] {
    display: inline-block;
    line-height: 0;
    margin: 0;
    overflow: visible;
    padding: 0;
    text-transform: none;
    vertical-align: middle;
}

//  Modifier: Circle
// ==================================================================

// Circle
//
// The classic spinning loader, can for example be used in buttons.
//
// Markup:
// <div pam-Loader="circle small"></div>
// <div pam-Loader="circle"></div>
// <div pam-Loader="circle large"></div>
//
// Weight: 1
//
// Style guide: loaders.circle

[pam-Loader~="circle"] {
    animation: spin 750ms infinite linear;
    border-radius: 50%;
    border: @circle-border-width solid @circle-border-color;
    border-top-color: @circle-border-indicator-color;
    height: @circle-height;
    width: @circle-width;
}

//  Size modifier: Circle
// ==================================================================

[pam-Loader~="circle"][pam-Loader~="small"] {
    border-width: @circle-border-width / 2;
    height: @circle-height / 2;
    width: @circle-width / 2;
}

[pam-Loader~="circle"][pam-Loader~="large"] {
    border-width: @circle-border-width * 1.25;
    height: @circle-height * 2;
    width: @circle-width * 2;
}

//  Animation: Spin
// ==================================================================

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

//  Modifier: Pulse
// ==================================================================

// Pulse
//
// Suitable for centered generic context loading.
//
// Markup:
// <div pam-Loader="pulse small"></div>
// <div pam-Loader="pulse"></div>
// <div pam-Loader="pulse large"></div>
//
// Weight: 2
//
// Style guide: loaders.pulse

[pam-Loader~="pulse"] {
    animation: pulse @pulse-animation-speed infinite;
    animation-delay: @pulse-animation-delay;
    background: @pulse-background-color;
    height: @pulse-height;
    margin: @pulse-margin;
    position: relative;
    width: @pulse-width;

    &::before {
        animation: pulse @pulse-animation-speed infinite;
        background: @pulse-background-color;
        content: "";
        display: block;
        height: @pulse-small-bar-height;
        left: -@pulse-small-bar-offset;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: @pulse-width;
    }

    &::after {
        animation: pulse @pulse-animation-speed infinite;
        animation-delay: 0.5s;
        background: @pulse-background-color;
        content: "";
        display: block;
        height: @pulse-small-bar-height;
        left: @pulse-small-bar-offset;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: @pulse-width;
    }
}

//  Size modifier: Pulse
// ==================================================================

[pam-Loader~="pulse"][pam-Loader~="small"] {
    height: @pulse-height / 2;
    margin: 0 16px / 2;
    width: @pulse-width / 2;

    &::before {
        height: @pulse-small-bar-height / 2;
        left: -@pulse-small-bar-offset / 2;
        width: @pulse-width / 2;
    }

    &::after {
        height: @pulse-small-bar-height / 2;
        left: @pulse-small-bar-offset / 2;
        width: @pulse-width / 2;
    }
}

[pam-Loader~="pulse"][pam-Loader~="large"] {
    height: @pulse-height * 2;
    margin: 0 16px * 2;
    width: @pulse-width * 2;

    &::before {
        height: @pulse-small-bar-height * 2;
        left: -@pulse-small-bar-offset * 2;
        width: @pulse-width * 2;
    }

    &::after {
        height: @pulse-small-bar-height * 2;
        left: @pulse-small-bar-offset * 2;
        width: @pulse-width * 2;
    }
}

//  Animation: Pulse
// ==================================================================

@keyframes pulse {
    50% {
        background: @skin-light;
    }
}