/* @docs */
$skeleton-background: linear-gradient(90deg, $grey-lighter 25%, rgba($grey-lighter, 0.5) 50%, $grey-lighter 75%) !default;
$skeleton-border-radius: $base-border-radius !default;
$skeleton-duration: 1.5s !default;
$skeleton-margin: .5rem 0 0 0 !default;
/* @docs */

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

@mixin steps-size($size, $name: null) {
    @if ($name != null) {
        @include avariable('line-height', ('skeleton-font-size-' + #{$name}), $size);
    } @else {
        @include avariable('line-height', 'skeleton-font-size', $size);
    }
}

.o-sklt {
    display: inline-flex;
    flex-direction: column;
    vertical-align: middle;
    width: 100%;
    &__item {
        width: 100%;
        @include avariable('background', 'skeleton-background', $skeleton-background);
        &--rounded {
            @include avariable('border-radius', 'skeleton-border-radius', $skeleton-border-radius);
        }
        &--animated {
            background-size: 400% 100%;
            animation-name: skeleton-loading;
            animation-iteration-count: infinite;
            @include avariable('animation-duration', 'skeleton-duration', $skeleton-duration);
        }
        &::after {
            content: "\00a0";
        }
        @include avariable('margin', 'skeleton-margin', $skeleton-margin);
        @include steps-size($base-font-size);
        @each $name, $value in $sizes {
            &--#{$name} {
                @include steps-size($value, $name);
            }
        }
    }
    &--centered {
        align-items: center;
    }
    &--right {
        align-items: flex-end;
        @include avariable('margin', 'skeleton-margin', $skeleton-margin);
    }
}