.ability-block-wrapper {
    & .ability-block {
        display: block;
        position: relative;

        margin: 8px;
        padding: 8px;

        width: 300px;
        z-index: 2;

        border-radius: 8px;

        font-size:24px;
        color: var(--theme-white);

        & .name {
            padding: 8px;

            width: 100%;

            background: linear-gradient(var(--theme-accent-2-dark) 0%, var(--theme-accent-2-light) 50%, var(--theme-accent-2-dark) 0%);  
            clip-path: polygon(0% 50%, 16px 0%, calc(100% - 16px) 0%, calc(100%) 50%, calc(100% - 16px) 100%, 16px 100%);    

            text-align: center;
        }

        & .content {
            position: absolute;

            margin-left: 16px;
            padding: 8px;
            padding-top: 24px;
            transform: translate(0, 16);

            width: calc(100% - 24px);
            top: 28px;
            left: -6px;
            z-index: -1;

            border: solid 3px var(--theme-accent-2-base);   
            background-color: var(--theme-black);
   
            justify-self: center;
            font-size: 20px;
        }

        & .dummy {
            padding: 8px;
            padding-left: 0px;
            padding-top: 4px;
            margin-left: 16px;

            width: calc(100% - 8px);  

            justify-self: center;
            font-size: 20px;
            opacity: 0%;
        }

        &:hover {
            & .name {
                background: linear-gradient(var(--theme-accent-2-light) 0%, var(--theme-accent-2-base) 50%, var(--theme-accent-2-light) 0%);       
            }
    
            & .content {
                background-color: var(--theme-gray-base);
            }       
        }

    }

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

        & .name {
            background: linear-gradient(var(--theme-accent-1-dark) 0%, var(--theme-accent-1-base) 50%, var(--theme-accent-1-dark) 0%);       
        }

        & .content {
            border-color: var(--theme-accent-1-light);
        }   

        &:hover {
            & .name {
                background: linear-gradient(var(--theme-accent-1-base) 0%, var(--theme-accent-1-light) 50%, var(--theme-accent-1-base) 0%);     
            }
    
            & .content {
                background-color: var(--theme-gray-base);
            }       
        }
    }
}

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