Styling stand-alone table component

_global_styles.scss

.modhyobitto-table{
    border: solid 1px map-get($modhyobitto-colors, primary);
    .modhyobitto-table__grid{
        width: 100%;
        .mat-header-row{
            background-color: map-get($modhyobitto-colors, primary);
            .mat-header-cell{
                color: white;
                font-family: 'Roboto', sans-serif;
                font-size: 1rem;
            }        
        }
        .highlighted-row{
            animation-name: highlighted-row-pulse;
            animation-duration: 1s;
            animation-direction: alternate;
            animation-iteration-count: 4;
              
            @keyframes highlighted-row-pulse {
                0% {
                    background-color: transparent;
                }
                100% {
                    background-color: map-get($modhyobitto-colors, primary-light);
                }
            }
        }
        .mat-cell{
            color: map-get($modhyobitto-colors, default-text);
            &.row-action-column{
                padding: 0 8px 0 1.5rem;
                width: 72px;
            }
        }
        .numeric-col{
            &.mat-cell, &.mat-header-cell{
                text-align: right;
                padding-right: 1.5rem;
            }
            &.mat-cell{
                font-family: 'RobotoMono', sans-serif;
            }
        }
    }
    .modhyobitto-table__add{
        display: flex;
        justify-content: flex-end;
        padding: 10px 8px 0;
    }
    .modhyobitto-table__action-button{
        background: transparent;
        border-radius: 50%;
        color: map-get($modhyobitto-colors, primary);
        height: 40px;
        padding: 0;
        width: 40px;
        display: flex;
        justify-content: center;
        align-items: center;
        &:focus{
            background: map-get($modhyobitto-colors, disabled-bg);
        }
        &:hover{
            background: transparent;
        }
        &:focus, &:hover{
            color: map-get($modhyobitto-colors, primary);
        }
    }
}
.mat-paginator-container{
    font-family: 'Roboto', sans-serif;
    .mat-paginator-page-size-label, .mat-select-trigger, .mat-paginator-range-label{
        color: map-get($modhyobitto-colors, default-text);
        font-size: 14px;
    }
    .mat-paginator-range-actions{
        button{
            color: map-get($modhyobitto-colors, primary);
        }
    }
}
.modhyobitto-table-drawer-container{
    mat-drawer{
        .table-update{
            padding: 1rem 2rem;
            .table-update__header{
                h2{
                    border-bottom: 1px solid map-get($modhyobitto-colors, divider);
                    color: map-get($modhyobitto-colors, primary-dark);
                    font-family: 'Roboto', sans-serif;
                    margin-bottom: 1rem;
                    padding-bottom: 0.5rem;
                }
                margin-bottom: 2rem;
            }
            .table-update__footer{
                margin: 1.5rem 0;
                @include media-breakpoint-down(sm) { 
                    margin: 1rem 0;
                }
                button{
                    width: 100%;
                }
            }
        }
    }
}