/* Shared skeleton design system */

@keyframes a21-skeleton-shimmer {
    100% {
        transform: translateX(100%);
    }
}

.sk,
.dashboard-skeleton {
    position: relative;
    display: block;
    overflow: hidden;
    background: var(--skeleton-color-base);
    border-radius: var(--skeleton-radius-md);
}

.sk::after,
.dashboard-skeleton::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        var(--skeleton-color-highlight) 45%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: var(--skeleton-shimmer-size);
    background-repeat: no-repeat;
    animation: a21-skeleton-shimmer var(--skeleton-shimmer-duration) var(--skeleton-shimmer-easing) infinite;
}

.sk-line {
    border-radius: var(--skeleton-radius-sm);
    height: var(--skeleton-height-line-md);
}

.sk-circle {
    border-radius: var(--skeleton-radius-circle);
    aspect-ratio: 1 / 1;
}

.sk-block {
    border-radius: var(--skeleton-radius-md);
}

.sk-input {
    border-radius: var(--skeleton-radius-sm);
    height: var(--skeleton-height-input);
}

.sk-button {
    border-radius: var(--skeleton-radius-sm);
    height: var(--skeleton-height-button);
}

.sk-h-xs {
    height: var(--skeleton-height-line-xs);
}

.sk-h-sm {
    height: var(--skeleton-height-line-sm);
}

.sk-h-md {
    height: var(--skeleton-height-line-md);
}

.sk-h-lg {
    height: var(--skeleton-height-line-lg);
}

.sk-radius-sm {
    border-radius: var(--skeleton-radius-sm);
}

.sk-radius-md {
    border-radius: var(--skeleton-radius-md);
}

.sk-radius-lg {
    border-radius: var(--skeleton-radius-lg);
}

.sk-radius-circle {
    border-radius: var(--skeleton-radius-circle);
}

.sk-loadable {
    position: relative;
    overflow: hidden;
    border-radius: var(--sk-loadable-radius, var(--skeleton-radius-sm));
}

.sk-loadable.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.sk-loadable.is-loading::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--skeleton-color-base);
    overflow: hidden;
}

.sk-loadable.is-loading::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        rgba(255, 255, 255, 0) 0%,
        var(--skeleton-color-highlight) 45%,
        rgba(255, 255, 255, 0) 100%
    );
    background-size: var(--skeleton-shimmer-size);
    background-repeat: no-repeat;
    animation: a21-skeleton-shimmer var(--skeleton-shimmer-duration) var(--skeleton-shimmer-easing) infinite;
    z-index: 1;
}

.sk-loadable.is-loading select,
.sk-loadable.is-loading input,
.sk-loadable.is-loading textarea,
.sk-loadable.is-loading .select-selected {
    color: transparent !important;
    caret-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    .sk::after,
    .dashboard-skeleton::after,
    .sk-loadable.is-loading::before {
        animation: none;
    }
}