@use '~flux/components/css/mixin';

.skeleton {
    position: relative;
    display: block;
    height: 1em;
    width: 100%;
    background: var(--gray-100);
    border-radius: var(--radius);
    overflow: hidden;

    &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(90deg, transparent 0%, var(--gray-50) 50%, transparent 100%);
        translate: -100% 0;
        animation: skeleton-shimmer 1.6s ease-in-out infinite;
    }

    @media (prefers-reduced-motion: reduce) {
        animation: skeleton-pulse 1.6s ease-in-out infinite;

        &::after {
            display: none;
        }
    }
}

.skeleton.isText {
    height: 1em;
    margin-block: calc((1lh - 1em) / 2);
    border-radius: var(--radius-half);
    vertical-align: middle;
}

.skeleton.isCircle {
    height: 40px;
    width: 40px;
    flex-shrink: 0;
    border-radius: 50%;
}

.skeleton.isRectangle {
    height: 120px;
    border-radius: 0;
}

.skeleton.isRounded {
    height: 120px;
    border-radius: calc(var(--radius) * 2);
}

@keyframes skeleton-shimmer {
    from {
        translate: -100% 0;
    }

    to {
        translate: 100% 0;
    }
}

@keyframes skeleton-pulse {
    50% {
        opacity: .5;
    }
}