/* */
/* Shimmer: pattern is defined on first 800px of a layer sized (100% + 800px); animating
   background-position by 800px sweeps the band across the full element (no tiling, no
   “stuck in the middle” from %-stops on a 200%-wide image). */
.loading-active {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: #efefef;
    background-image: linear-gradient(
        to right,
        #efefef 0,
        #efefef 64px,
        #dcdbdb 144px,
        #efefef 264px,
        #efefef 800px,
        #efefef 100%
    );
    background-repeat: no-repeat;
    background-size: calc(100% + 800px) 100%;
    min-height: 96px;
    position: relative;
    pointer-events: none;
}

.loading-active-translucid {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 100;

    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: rgba(0, 0, 0, 0.4);
    background-image: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.4) 0,
        rgba(0, 0, 0, 0.4) 64px,
        rgba(164, 164, 164, 0.8) 144px,
        rgba(0, 0, 0, 0.4) 264px,
        rgba(0, 0, 0, 0.4) 800px,
        rgba(0, 0, 0, 0.4) 100%
    );
    background-repeat: no-repeat;
    background-size: calc(100% + 800px) 100%;
    min-height: 96px;
    pointer-events: none;
}

.loading-active:not(button, tbody) > * {
    /*display: none !important;*/
    visibility: hidden;
}

tbody.loading-active > tr > td > div {
    visibility: hidden;
}

.loading-active.loading-h100-block {
    min-height: 100px;
}
.loading-active.loading-h150-block {
    min-height: 150px;
}
.loading-active.loading-h200-block {
    min-height: 200px;
}

.loading-disabled {
    opacity: 0.4 !important;
    pointer-events: none;
}
@keyframes placeHolderShimmer {
    0% {
        background-position: -200px 0;
    }
    100% {
        background-position: 800px 0;
    }
}

button.loading-active {
    animation-duration: 1.25s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeHolderShimmer;
    animation-timing-function: linear;
    background-color: transparent;
    background-image: linear-gradient(
        to right,
        rgba(239, 239, 239, 0) 0,
        rgba(239, 239, 239, 0) 64px,
        rgba(220, 219, 219, 0.5) 144px,
        rgba(239, 239, 239, 0) 264px,
        rgba(239, 239, 239, 0) 800px,
        rgba(239, 239, 239, 0) 100%
    );
    background-repeat: no-repeat;
    background-size: calc(100% + 800px) 100%;
    min-height: auto;
    position: relative;
    pointer-events: none;
    transition: height 0.5s;

    opacity: 0.4;
}

p.loading-active {
    color: transparent;
}

/* */

/* */
.heartbeat {
    animation: beat .5s infinite alternate;
    transform-origin: center;
}

@keyframes beat {
    to {
        transform: scale(1.1);
    }
}
/* */

/* Dark theme — background-image only (keeps background-size / repeat / animation from base). */
html[data-theme="dark"] .loading-active,
html[data-theme="dark"] .loading-active-translucid,
html[data-theme="dark"] button.loading-active {
    --go-loading-shimmer: color-mix(
        in srgb,
        var(--go-dark-media-placeholder, #354042) 88%,
        #fff 12%
    );
}

html[data-theme="dark"] .loading-active {
    background-color: var(--go-dark-media-placeholder, #354042);
    background-image: linear-gradient(
        to right,
        var(--go-dark-media-placeholder, #354042) 0,
        var(--go-dark-media-placeholder, #354042) 64px,
        var(--go-loading-shimmer) 144px,
        var(--go-dark-media-placeholder, #354042) 264px,
        var(--go-dark-media-placeholder, #354042) 800px,
        var(--go-dark-media-placeholder, #354042) 100%
    );
}

html[data-theme="dark"] .loading-active-translucid {
    background-color: rgba(53, 64, 66, 0.55);
    background-image: linear-gradient(
        to right,
        rgba(53, 64, 66, 0.55) 0,
        rgba(53, 64, 66, 0.55) 64px,
        color-mix(in srgb, var(--go-loading-shimmer) 78%, transparent 22%) 144px,
        rgba(53, 64, 66, 0.55) 264px,
        rgba(53, 64, 66, 0.55) 800px,
        rgba(53, 64, 66, 0.55) 100%
    );
}

html[data-theme="dark"] button.loading-active {
    background-color: transparent;
    background-image: linear-gradient(
        to right,
        rgba(53, 64, 66, 0) 0,
        rgba(53, 64, 66, 0) 64px,
        color-mix(in srgb, var(--go-loading-shimmer) 55%, transparent 45%) 144px,
        rgba(53, 64, 66, 0) 264px,
        rgba(53, 64, 66, 0) 800px,
        rgba(53, 64, 66, 0) 100%
    );
}