@import '../global/globalCssVariables.module.scss';

.collectionCardView-outer {
    height: 100%;
    width: 100%;
    position: relative;
    background-color: white;
    overflow: hidden;
}

.card-wrapper {
    display: grid;
    grid-template-columns: repeat(10, 1fr);
    // width: 100%;
    transform-origin: top left;

    position: absolute;
    align-items: center;
    justify-items: center;
    justify-content: center;

    transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

.card-button-container {
    display: flex;
    padding: 3px;
    // width: 300px;
    // height:100px;
    pointer-events: none; /* This ensures the container does not capture hover events */

    background-color: rgb(218, 218, 218); /* Background color of the container */
    border-radius: 50px; /* Rounds the corners of the container */
    transform: translateY(25px);
    // box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* Optional: Adds shadow for depth */
    align-items: center; /* Centers buttons vertically */
    justify-content: start; /* Centers buttons horizontally */

    button {
        pointer-events: auto; /* Re-enable pointer events for the buttons */
    
        width: 70px;
        height: 70px;
        border-radius: 50%;
        background-color: $dark-gray;
        // border-color: $medium-blue;
        margin: 5px; // transform: translateY(-50px);
        background-color: transparent;
    }
}

.no-card-span{
    position: relative;
    width: fit-content;
    text-align: center;
    font-size: 65px;
    


}



// button:hover {
//     transform: translateY(-50px);
// }

// .card-wrapper::after {
//     content: "";
//     width: 100%; /* Forces wrapping */
// }

// .card-wrapper > .card-item:nth-child(10n)::after {
//     content: "";
//     width: 100%; /* Forces wrapping after every 10th item */
// }

// .card-row{
//     display: flex;
//     position: absolute;
//     align-items: center;
//     transition: transform 0.3s cubic-bezier(0.455, 0.03, 0.515, 0.955);

// }

.card-item-inactive,
.card-item-active,
.card-item {
    position: relative;
    transition: transform 0.5s ease-in-out;
    display: flex;
    flex-direction: column;
}

// .card-item:hover {
//     box-shadow: 0 20px 20px $medium-blue;
//     transform: scale(1.05);
    

// }

.card-item-inactive {
    opacity: 0.5;
}

.card-item-active {
    position: absolute;
    z-index: 100;
}