.aw-content-placeholder {
    --ph-gap-x: 1rem;
    --ph-gap-y: 1rem;
    --ph-border-radius: 0.5rem;

    opacity: 0;
    animation: aw-appear 200ms ease-in-out 100ms forwards;

    display: grid;
    grid-template-columns: repeat(var(--ph-columns), 1fr);
    gap: var(--ph-gap-y) var(--ph-gap-x);

    span {
        display: block;
        border-radius: var(--ph-border-radius);
        width: var(--ph-width);
        height: var(--ph-height);
        aspect-ratio: var(--ph-aspect-ratio);

        position: relative;
        overflow: hidden;
        background-color: rgba(var(--c-mono-800-rgb), 0.6);

        &::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100vw;
            max-width: 1000px;
            height: 100%;
            background: linear-gradient(
                to right,
                transparent 0%,
                rgba(var(--c-mono-800-rgb), 0.75) 15%,
                transparent 30%
            );

            animation-duration: 1.5s;
            animation-fill-mode: forwards;
            animation-iteration-count: infinite;
            animation-name: aw-placeholder;
            animation-timing-function: linear;
        }
    }

    &--text,
    &--island {
        --ph-gap-y: 0.625rem;
        --ph-height: 1rem;
    }

    &--text > span {
        width: 90%;

        &:nth-child(n + 2) {
            width: 100%;
        }

        &:nth-child(2n + 3) {
            width: 95%;
        }
    }

    &--form {
        --ph-border-radius: 0.625rem;
        --ph-gap-y: 1.5rem;
        --ph-height: 3.5rem;
    }

    &--button {
        display: flex;
        align-items: center;

        --ph-height: 2.5rem;

        @screen lg {
            --ph-height: 3.5rem;
        }

        & > span {
            width: 8rem;
        }
    }

    &--image {
        --ph-width: minmax(1rem, 100%);
        --ph-aspect-ratio: 16 / 9;
    }

    &--avatar {
        --ph-width: 40px;
        --ph-aspect-ratio: 1;
        --ph-border-radius: 50%;
    }
}

/* [data-dark='true'] .aw-content-placeholder span {
    background-color: rgba(255, 255, 255, 0.08);
}

[data-dark='false'] .aw-content-placeholder span {
    background-color: rgba(0, 0, 0, 0.04);
} */