:root {
    --darkTransparentGreen: rgb(var(--theme-accent-2-dark-rgb) / 0.2);
    --baseTransparentGreen: rgb(var(--theme-accent-2-base-rgb) / 0.8);

    --darkTransparentPurple: rgb(var(--theme-selection-dark-rgb) / 0.2);
    --baseTransparentPurple: rgb(var(--theme-selection-base-rgb) / 0.8);
}
    

.perk-block-wrapper {
    display: flex;
    position: relative;
    max-width: 300px;
    height: fit-content;

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

    transition: 0.5s;

    margin: 24px 8px 24px 8px;

    & .perk-block {
        position: relative;
        left: 0;
    
        outline: solid var(--theme-gray-light) 2px;
        backdrop-filter: blur(10px);
        border-radius: 8px;
        transform: 0.5s;
    
        color: var(--theme-white);
        text-align: center;
        font-family: "BW";
        padding-top: 8px;
    
        z-index: 1;
        
        overflow: hidden;
        cursor: pointer;

        &.custom {
            background: rgb(var(--theme-golden-dark-rgb) / 0.5);
            outline: solid var(--theme-golden-base) 2px;
    
    
            &:hover {
                outline: solid var(--theme-golden-base) 2px;
    
                &::after {
                    background: var(--theme-golden-base);
                }
            }
    
            &::before {
                position: absolute;
                top: 0;
                left: -350px;
                width: 50%;
                height: 100%;
    
                transform: skewX(-30deg);
                transition: 0.3s;
                animation: shine 2s infinite linear;
    
                content: '';
            }
        }
    
        & .cost {
            width:min-content;

            padding-left:8px;
            padding-right:9px;
            margin-right:24px;
            padding-bottom:0px;

            border-radius:16px;
            background-color: var(--theme-black);
        }

        &::after {
            position: absolute;
            top: calc(100% - 8px);
            left: calc(50% - 32px);
            
            width: 64px;
            height: 16px;
    
            background: var(--theme-white);
            border-radius: 16px;
    
            content:'';
        }
    
        &:hover {
            outline: solid var(--theme-accent-1-base) 2px;
            
            &::after {
                background: var(--theme-accent-1-base);
            }
        }
    }

    &::before
    {
        position: absolute;
        top: -16px;
        left: 10%;
        width: 80%;
        height: calc(100% + 32px);

        background: linear-gradient(0deg, var(--darkTransparentGreen) 0%, var(--baseTransparentGreen) 100%);
        outline: solid rgb(var(--theme-accent-2-dark-rgb) / 0.5) 2px;
        border-radius: 8px;
        transition: 0.5s;

        text-decoration: none;

        content:'';
    }

    &::after
    {
        position: absolute;
        top: -16px;
        left: 10;
        width: 80%;
        height: calc(100% + 32px);
        
        background: linear-gradient(0deg, var(--darkTransparentGreen) 0%, var(--baseTransparentGreen) 100%);
        border-radius: 8px;
        transition: 0.5s;


        content:'';
    }  

    &.selected {
        animation: wobble 1s linear infinite;

        & .perk-block {
            &:hover {
                outline: solid var(--theme-golden-base) 2px;
                
                &::after {
                    background: var(--theme-accent-2-base);
                }

                &.custom {
                    outline: solid var(--theme-golden-base) 2px;

                    &::after {
                        background: var(--theme-golden-base);
                    }
                }
            }        
        }

        &::before
        {
            background: linear-gradient(0deg, var(--darkTransparentPurple) 0%, var(--baseTransparentPurple) 100%);
            outline: solid rgb(var(--theme-selection-base-rgb) / 0.5) 2px;
        }
    
        &::after
        {
            background: linear-gradient(0deg, var(--darkTransparentPurple) 0%, var(--baseTransparentPurple) 100%);
        }     
    }

}


.perk-block-wrapper .perk-block .content {
    position : relative;

    max-height: 1px;

    opacity : 0;
    transition : 0.3s ease-in-out;

    color: var(--theme-white);
    text-align: center;

    padding: 8px 8px 16px 8px;
}
  
.perk-block-wrapper .perk-block:hover .content {
    max-height: 600px;
    visibility : visible;

    opacity : 1;
    transition-delay: 0.2s;
    transition : 0.5s ease-in-out;

    font-size: 16px;
}

@keyframes shine {
    0% {
        left: -400px;
    }
 
    30% {
        left: 400px;
      }

    99.9999% {
      left: 400px;
    }

    100% {
        left: -400px;
    }
}

@keyframes wobble {
    0% {
        transform: rotate(0deg);
    }
    33% {
        transform: rotate(1.5deg);
    }
    66% {
        transform: rotate(-1.5deg);
    }
    100% {
        transform: rotate(0deg);
    }
  }