@use "../../../bulma/sass/utilities" as bulma-utilities;

$skeleton-color: var(--grey-lightest) !default;
$skeleton-shine-color: var(--scheme-main-bis) !default;
$skeleton-background: linear-gradient(to right, $skeleton-color 25%, $skeleton-shine-color 50%, $skeleton-color 75%) !default;
$skeleton-border-radius: var(--radius) !default;
$skeleton-duration: 1.5s !default;
$skeleton-margin-top: .5rem !default;
$skeleton-line-height-size: var(--size-normal) !default;

// Map Local variables
$-css-vars-map: (
    "skeleton-color": $skeleton-color,
    "skeleton-shine-color": $skeleton-shine-color,
    "skeleton-background": $skeleton-background,
    "skeleton-border-radius": $skeleton-border-radius,
    "skeleton-duration": $skeleton-duration,
    "skeleton-margin-top": $skeleton-margin-top,
    "skeleton-line-height-size": $skeleton-line-height-size,
);

// Register & Export CSS Variabless
@include bulma-utilities.exportCSSVars($-css-vars-map);
@include bulma-utilities.registerComponentCSSVars("b-skeleton", $-css-vars-map);

.b-skeleton {
    display: inline-flex;
    flex-direction: column;
    width: 100%;
    vertical-align: middle;

    >.b-skeleton-item {
        width: 100%;
        line-height: var(--skeleton-line-height-size);
        background: $skeleton-background;
        background-size: 400% 100%;

        &.is-rounded {
            border-radius: var(--skeleton-border-radius)
        }

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

        +.b-skeleton-item {
            margin-top: var(--skeleton-margin-top);
        }
    }

    &.is-animated {
        >.b-skeleton-item {
            animation: skeleton-loading var(--skeleton-duration) infinite;
        }
    }

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

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

    +.b-skeleton {
        margin-top: var(--skeleton-margin-top);
    }

    @include bulma-utilities.control-sizes(skeleton-line-height-size);
}

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

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