container[name="table__container"]{
    container: table-container / inline-size;
    min-inline-size: 100%;
    overflow-x: auto;
}

table{
    inline-size: 100%;
    border-collapse: collapse;
    border-spacing: 0;

    > thead{
        border-bottom: 2px solid var(--_color-gray-3);
        
        :is(a, p){
            padding-inline: 2ch;
            font-size: var(--_font-size-h5);
            font-family: var(--_font-family-bold);
            color: var(--_color-black);
            padding-block: 12px;
        }
    }

    > tbody{
        > tr{
            cursor: pointer;
            border-radius: 8px;
            transition: all .3s ease;

            &:hover{
                background: var(--_color-gray-2);

                :is(a, p){
                    color: var(--_color-black);
                }
            }

            :is(a, p){
                font-size: var(--_font-size-p);
                font-family: var(--_font-family-medium);
                padding-inline: 2ch;
                color: var(--_color-gray-1);
                padding-block: 12px;
                text-decoration: none;
                transition: all .3s ease;
            }
        }

        
    }
}