.loading-overlay
{
    position: absolute;
    z-index: 200;
    width: 2rem;
}
price-per-item .loading-overlay
{
    position: relative;
}
price-per-item .loading-overlay-spinner
{
    display: flex;
}
@media screen and (max-width: 819px)
{
    .loading-overlay
    {
        top: 0;
        right: 0;
    }
}
@media screen and (min-width: 820px)
{
    .loading-overlay
    {
        left: 0;
    }
}
.loading-overlay-spinner
{
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2rem;
    display: table;
    margin: 0 auto;
    transform: translate(-50%,-50%);
}
.loading>.loading-overlay-spinner
{
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    position: absolute;
    height: 100%;
    display: flex;
    align-items: center;
}
.loading>.loading-overlay-spinner .spinner
{
    width: fit-content;
}
.loading>.loading-overlay-spinner .path
{
    stroke: var(--color-primary);
}
.spinner
{
    animation: rotator 1.4s linear infinite;
}
@keyframes rotator
{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(270deg);
    }
}
.path
{
    stroke-dasharray: 280;
    stroke-dashoffset: 0;
    transform-origin: center;
    stroke: var(--color-primary);
    animation: dash 1.4s ease-in-out infinite;
}
@media screen and (forced-colors: active)
{
    .path
    {
        stroke: canvastext;
    }
}
@keyframes dash
{
    0%
    {
        stroke-dashoffset: 280;
    }
    50%
    {
        stroke-dashoffset: 75;
        transform: rotate(135deg);
    }
    100%
    {
        stroke-dashoffset: 280;
        transform: rotate(450deg);
    }
}
.loading-overlay:not(.hidden)+.cart-item-price-wrapper, .loading-overlay:not(.hidden)~cart-remove-button
{
    opacity: .5;
}
.loading-overlay:not(.hidden)~cart-remove-button
{
    pointer-events: none;
    cursor: default;
}