@use "../utils/helpers" as h;
@use "../utils/variables" as vars;

/* @docs */
$skeleton-spacer: 0.5em !default;
$skeleton-duration: 1.5s !default;
$skeleton-font-size: h.useVar("font-size") !default;
$skeleton-background-color: vars.$grey-lighter !default;
$skeleton-background: linear-gradient(
    90deg,
    $skeleton-background-color 25%,
    rgba($skeleton-background-color, 0.5) 50%,
    $skeleton-background-color 75%
) !default;
$skeleton-border-radius: h.useVar("border-radius") !default;
$skeleton-border-radius-rounded: h.useVar("border-radius-rounded") !default;
/* @docs */

.o-skeleton {
    @include h.defineVar("skeleton-duration", $skeleton-duration);
    @include h.defineVar("skeleton-spacer", $skeleton-spacer);
    @include h.defineVar("skeleton-font-size", $skeleton-font-size);
    @include h.defineVar("skeleton-background", $skeleton-background);
    @include h.defineVar("skeleton-border-radius", $skeleton-border-radius);
    @include h.defineVar(
        "skeleton-border-radius-rounded",
        $skeleton-border-radius-rounded
    );

    @keyframes skeleton-loading {
        0% {
            background-position: 100% 50%;
        }

        100% {
            background-position: 0 50%;
        }
    }

    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    width: 100%;

    &__item {
        width: 100%;
        background: h.useVar("skeleton-background");
        line-height: h.useVar("skeleton-font-size");
        border-radius: h.useVar("skeleton-border-radius");

        &--rounded {
            @include h.defineVar(
                "skeleton-border-radius",
                h.useVar("skeleton-border-radius-rounded")
            );
        }

        &--animated {
            background-size: 400% 100%;
            animation-name: skeleton-loading;
            animation-iteration-count: infinite;
            animation-duration: h.useVar("skeleton-duration");
        }

        &::after {
            content: "\00a0";
        }

        // size variants
        @each $name, $value in vars.$sizes {
            &--#{$name} {
                @include h.defineVar(
                    "skeleton-font-size",
                    h.useVar("size-#{$name}")
                );
            }
        }

        & + .o-skeleton__item {
            margin-top: h.useVar("skeleton-spacer");
        }
    }

    &--centered {
        align-items: center;
    }

    &--right {
        align-items: flex-end;
    }
}