@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;
}