@import "./base/var";
@import "./mixins/index.scss";

@include c(skeleton-item) {
    width: 100%;
    background-color: #f2f2f2;
    position: relative;
    margin: 10px 0;

    @include m(line) {
        height: $--skeleton-item-line-height;
    }

    @include m(circle) {
        width: $--skeleton-item-circle-height;
        height: $--skeleton-item-circle-height;
        border-radius: 50%;
    }

    @include m(animation) {
        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            opacity: 0;
            background-color: #ffffff;
            animation: skeleton-active 1.5s ease-out infinite;
        }
    }
}


@include c(skeleton) {
    @include m(list) {

    }
    @include m(avatar) {
        display: flex;
    }
    @include e(avatar-line) {
        flex: 1;
        margin-left: 20px;
        padding-top: 10px;
    }
    @include e(title) {
        margin-bottom: 30px;
    }
}


@keyframes skeleton-active {
    from {
        opacity: 0.6;
        width: 0;
    }
    to {
        opacity: 0;
        width: 100%;
    }
}
