@keyframes wave {
    from {
        transform: translateX(calc(var(--kbq-skeleton-wave-width) * -1));
    }

    to {
        transform: translateX(100vw);
    }
}

.kbq-skeleton:not(.kbq-skeleton_disabled) {
    --kbq-skeleton-min-height: var(--kbq-size-l);
    --kbq-skeleton-animation-duration: 1200ms;
    --kbq-skeleton-animation-delay: 0ms;
    --kbq-skeleton-border-radius: var(--kbq-size-xxs);
    --kbq-skeleton-wave-width: 100px;
    --kbq-skeleton-z-index: 1;

    &:is(kbq-skeleton) {
        display: flex;
        min-height: var(--kbq-skeleton-min-height);
        border-radius: var(--kbq-skeleton-border-radius);
    }

    position: relative;
    overflow: hidden;
    clip-path: inset(0);
    user-select: none;
    pointer-events: none;
    border-color: transparent;
    outline-color: transparent;

    &::before {
        content: '';
        position: absolute;
        inset: 0;
        background-color: var(--kbq-skeleton-background);
        z-index: var(--kbq-skeleton-z-index);
    }

    &::after {
        content: '';
        position: fixed;
        inset-block: 0;
        left: calc(var(--kbq-skeleton-wave-width) * -1);
        width: var(--kbq-skeleton-wave-width);
        z-index: var(--kbq-skeleton-z-index);
        background: linear-gradient(
            90deg,
            var(--kbq-skeleton-animation-wave-start) 0%,
            var(--kbq-skeleton-animation-wave-center) 50%,
            var(--kbq-skeleton-animation-wave-end) 100%
        );
        animation: wave var(--kbq-skeleton-animation-duration) ease-in var(--kbq-skeleton-animation-delay) infinite;
    }
}