@use "bulma/sass/utilities/css-variables" as cv;
@use "bulma/sass/utilities/initial-variables" as iv;
@use "bulma/sass/base/skeleton" as skeleton;
@use "bulma/sass/utilities/functions" as functions;


$skeleton-gradient: linear-gradient(90deg, cv.getVar('border') 25%, cv.getVar('border-active') 50%, cv.getVar('border') 75%) !default;
$skeleton-duration: 1.5s !default;
$skeleton-margin-top: .5rem !default;

.#{iv.$class-prefix}b-skeleton {

    @include cv.register-vars(
        (
            "skeleton-gradient": #{$skeleton-gradient},
            "skeleton-duration": #{$skeleton-duration},
            "skeleton-margin-top": #{$skeleton-margin-top}
        )
    );
}

@mixin steps-size($size) {
    > .b-skeleton-item {
        line-height: cv.getVar($size);
    }
}

.#{iv.$class-prefix}b-skeleton {

    // @include skeleton;

    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    width: 100%;
    > .b-skeleton-item {
        background: cv.getVar("skeleton-gradient");
        background-size: 400% 100%;
        width: 100%;
        &.is-rounded {
            border-radius: cv.getVar("skeleton-radius");
        }
        &::after {
            content: "\00a0";
        }
        + .b-skeleton-item {
            margin-top: cv.getVar("skeleton-margin-top");
        }
    }
    &.is-animated {
        > .b-skeleton-item {
            animation: skeleton-loading cv.getVar("skeleton-duration") infinite;
        }
    }
    &.is-centered {
        align-items: center;
    }
    &.is-right {
        align-items: flex-end;
    }
    + .b-skeleton {
        margin-top: cv.getVar("skeleton-margin-top");
    }
    @include steps-size("size-normal");
    &.is-small {
        @include steps-size("size-small");
    }
    &.is-medium {
        @include steps-size("size-medium");
    }
    &.is-large {
        @include steps-size("size-large");
    }
}

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