.table {
    composes: cos-table from global;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--rounded-md);
    text-align: left;
    border-top: 1px solid var(--color-gray-200);
    border-left: 1px solid var(--color-gray-200);
}

.thead, .th, .td {
    composes: -v-text from global;
    vertical-align: middle;
}

.th, .td {
    background-image: linear-gradient(var(--color-gray-200), var(--color-gray-200)),
        linear-gradient(var(--color-gray-200), var(--color-gray-200));
    background-repeat: no-repeat;
    background-size: 1px 100%, 100% 1px;
    background-position: 100% 0, 100% 100%;
}

.tr {
    composes: -v-bg-inapparent from global;
}

.thead .tr {
    color: var(--color-white);
    background-color: var(--color-primary-500);
}

.thead .th {
    color: var(--color-white);
}