.ability-panel-container{
    border: solid 1px var(--border-color);
    background-color: var(--field-background-color);
    box-shadow: var(--shadow-small);
    border-radius: 10px;
    height: 48rem;
    display:flex;
    flex-direction: column;
}

.tab-row{
    display: flex;
    flex: 0 0 3rem;
    > *{
        flex: 1 1 0;
    }
    > :first-child{
      border-radius: 10px 0 0 0
    }
    > :last-child{
      border-radius: 0 10px 0 0
    }
}

.tab-button{
    height: 2.25rem;
    font-size: 1.375rem;
    font-weight: 600;
    color: black;
    border: solid 1px var(--border-color);
    transition: all 0.25s ease-in-out;
    background-color: var(--primary-color-light);

    &.active{
        height: 2.75rem;
        background-color: var(--primary-color);
    }
}

.button-margin{
    margin: 1rem 0rem;

}

ability-table{
    flex: 0 0 calc(100% - 8rem);
    overflow: auto;
}

trait-table{
    flex: 0 0 calc(100% - 8rem);
    overflow: auto;
}

spellslots{
    flex: 0 0 calc(100% - 8rem);
    overflow: auto;
}

proficiencies-table{
    flex: 0 0 calc(100% - 8rem);
    overflow: auto;
}








// .ability-table-container{
//     display: flex;
//     flex-direction: column;
//     flex: 0 0 calc(100% - 3rem);
//     overflow: auto;
// }





// button:hover{

//     color: black;
//     background-color: var(--primary-color);
// }

// button.active{
//     // height: 4.5rem;
//     // font-size: 1.625rem;
//     background-color: var(--primary-color) !important;
// }


// li{
//     display: flex;
//     align-items: flex-start;
// }