/* 
This CSS file contains styles for the loading spinner used across various buttons. 
It defines the appearance, animations, and behavior of the loading indicator, 
ensuring a consistent and visually appealing loading experience for users.
*/

/* Spinner container with z-index for stacking */
.loading__spinner {
    z-index: 1;
    /* Ensures the spinner is above other elements */
    width: 1.8rem;
    /* Sets the width of the spinner */
}

/* Spinner with relative positioning and inline-block display */
.loading__spinner {
    position: relative !important;
    /* Allows positioning without affecting surrounding elements */
    width: 1.8rem;
    /* Sets the width of the spinner */
    display: inline-block;
    /* Allows it to be inline with other elements */
}

/* Animation for the spinner rotation */
.spinner {
    animation: rotator 1.4s linear infinite;
    /* Applies rotation animation continuously */
}

/* Keyframes for the spinner rotation */
@keyframes rotator {
    0% {
        transform: rotate(0deg);
        /* Starts at 0 degrees */
    }

    100% {
        transform: rotate(270deg);
        /* Ends at 270 degrees for a smooth rotation */
    }
}

/* Styles for the path of the spinner */
.path {
    stroke-dasharray: 280;
    /* Sets the total length of the stroke */
    stroke-dashoffset: 0;
    /* Initially sets the dash offset to 0 */
    transform-origin: center;
    /* Sets the origin for transformations */
    stroke: rgb(var(--color-foreground));
    /* Sets the stroke color using a CSS variable */
    animation: dash 1.4s ease-in-out infinite;
    /* Applies dash animation continuously */
}

/* Adjusts stroke color for high contrast mode */
@media screen and (forced-colors: active) {
    .path {
        stroke: CanvasText;
        /* Uses CanvasText color in forced colors mode */
    }
}

/* Keyframes for the dash animation */
@keyframes dash {
    0% {
        stroke-dashoffset: 280;
        /* Starts with the stroke offset set to total length */
    }

    50% {
        stroke-dashoffset: 75;
        /* Moves the dash offset for a visible animation */
        transform: rotate(135deg);
        /* Rotates to 135 degrees at the halfway point */
    }

    100% {
        stroke-dashoffset: 280;
        /* Resets dash offset to total length */
        transform: rotate(450deg);
        /* Completes the rotation back to the starting point */
    }
}

/* Reduces opacity of other elements when the spinner is visible */
.loading__spinner:not(.hidden)+.cart-item__price-wrapper,
.loading__spinner:not(.hidden)~cart-remove-button {
    opacity: 50%;
    /* Lowers opacity to indicate loading state */
}

/* Disables interaction with the cart remove button when loading */
.loading__spinner:not(.hidden)~cart-remove-button {
    pointer-events: none;
    /* Prevents clicks on the button */
    cursor: default;
    /* Changes the cursor to default to indicate non-interaction */
}

/* Styles for a different loading spinner */
.scarce-loading {
    display: block;
    /* Ensures the loading spinner is displayed as a block */
    width: 21px;
    /* Sets the width of the loading spinner */
    height: 21px;
    /* Sets the height of the loading spinner */
    border: 3px solid #4e4e4e;
    /* Sets the border color and width */
    border-top: 3px solid #ffffff;
    /* Sets the top border color to white for effect */
    border-radius: 50%;
    /* Makes the spinner circular */
    animation: spin 1s linear infinite;
    /* Applies spin animation continuously */
    margin: auto;
    /* Centers the spinner */
}

/* Ensures empty scarce loading spinner is displayed as a block */
.scarce-loading:empty {
    display: block;
    /* Keeps the display block even if empty */
}

/* Small spinner variation */
.small {
    width: 20px !important;
    /* Sets a smaller width for the spinner */
    height: 20px !important;
    /* Sets a smaller height for the spinner */
}

/* Keyframes for the spin animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
        /* Starts at 0 degrees */
    }

    100% {
        transform: rotate(360deg);
        /* Completes a full rotation */
    }
}