table.#{$package-prefix}-table {
    position: relative;
    border: none;
    border-collapse: collapse;
    
    tr {
        height: 47px;
    }

    th {
        border: 1px solid $medium-gray !important;
    }

    td {
        border: 1px solid $medium-gray !important;

        span {
            &.highlight {
                color: $primary-color;
            }
            
            &.background {
                background-color: $white;
                padding: 2px 10px;
                border-radius: 20px;
            }
        }
    }

    thead {
        font-family: 'Athelas Regular';

        th {
            text-align: center;
            font-weight: normal;
        }
    }

    tbody {
        font-size: rem-calc(14);

        td {
            font-weight: normal;
        }
    }

    tfoot {
        td {
            span {
                &.background {
                    background-color: $light-gray;
                }
            }
        }
    }

    &.no-borders {
        border: none !important;

        th,
        td {
            border: none !important;
        }
    }

    &.no-vertical-borders {
        border-left: none !important;
        border-right: none !important;

        th,
        td {
            border-left: none !important;
            border-right: none !important;
        }
    }

    &.no-horizontal-borders {
        border-top: none !important;
        border-bottom: none !important;

        th,
        td {
            border-top: none !important;
            border-bottom: none !important;
        }
    }
}