/* One four-piece motion for panels, popovers, messages and small controls. */
.pm-loader {
    --pm-loader-size: 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-block-size: 150px;
    padding: 24px 16px;
    box-sizing: border-box;
    color: var(--color-primary);
    text-align: center;
    list-style: none;
}
.pm-loader-mark {
    position: relative;
    display: block;
    flex: 0 0 auto;
    inline-size: var(--pm-loader-size);
    block-size: var(--pm-loader-size);
    animation: pm-loader-turn 2.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.pm-loader-mark > span {
    position: absolute;
    top: 50%;
    left: 50%;
    inline-size: 24%;
    block-size: 36%;
    background: currentColor;
    border-radius: 40% 65% 30% 60%;
    transform: translate(-50%, -50%) rotate(var(--petal-angle, 0deg)) translateY(-85%);
}
.pm-loader-mark > span:nth-child(2) { --petal-angle: 90deg; opacity: .76; }
.pm-loader-mark > span:nth-child(3) { --petal-angle: 180deg; opacity: .5; }
.pm-loader-mark > span:nth-child(4) { --petal-angle: 270deg; opacity: .28; }
.pm-loader-mark::after {
    content: '';
    position: absolute;
    inset: 44%;
    background: currentColor;
    border-radius: 2px;
    transform: rotate(45deg);
    opacity: .4;
}
.pm-loader-label { color: var(--color-muted); font: inherit; font-size: .78rem; line-height: 1.8; overflow-wrap: anywhere; }
.pm-loader-compact { --pm-loader-size: 20px; display: inline-flex; flex-direction: row; gap: 9px; min-block-size: 0; padding: 0; vertical-align: middle; }
.pm-loader-on-control { color: inherit; }
.pm-loading-position { position: relative; }
.pm-loading-region { min-block-size: var(--pm-loading-height, 150px); }
.pm-loading-region > :not(.pm-loader) { opacity: .22; pointer-events: none; }
.pm-loading-region > .pm-loader-overlay { position: absolute; inset: 0; z-index: 2; margin: 0; min-block-size: 0; border-radius: inherit; }
.pm-loading-small { min-block-size: 0; }
.pm-loader-overlay.pm-loader-compact .pm-loader-label { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes pm-loader-turn { 0%, 8% { transform: rotate(0deg); } 48%, 58% { transform: rotate(180deg); } 96%, 100% { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pm-loader-mark { animation: none; } }