table.table {
    border-collapse: collapse;
    width: 100%;
    background: var(--color-gray-50);
}

div.table-responsive {
    overflow-x: auto;
    padding-bottom: 8px;
}

table.table thead.table-head tr.table-row {
    background: var(--color-primary);
    color: var(--color-onPrimary);
}

table.table thead.table-head tr.table-row:hover {
    background-color: var(--color-primary-500);
}

table.table tbody.table-body tr.table-row {
    border-bottom: 1px solid var(--color-gray-200);
}

table.table tbody.table-body tr.table-row:hover {
    background-color: var(--color-gray-100);
}

table.table thead.table-head tr.table-row th.table-column,
table.table thead.table-head tr.table-row td.table-column {
    font-weight: normal;
    text-align: start;
    padding: 10px;
    text-transform: uppercase;
}

table.table tbody.table-body tr.table-row td.table-column {
    padding: 10px;
}

/* prettier-ignore */
table.table thead.table-head tr.table-row th.table-column[data-text-align='center'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='center'],
table.table thead.table-head tr.table-row td.table-column[data-text-align='center'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='center'] input.visible {
    text-align: center;
}

/* prettier-ignore */
table.table thead.table-head tr.table-row th.table-column[data-text-align='right'],
table.table thead.table-head tr.table-row td.table-column[data-text-align='right'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='right'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='right'] input.visible {
    text-align: end;
}

/* prettier-ignore */
table.table thead.table-head tr.table-row th.table-column[data-text-align='left'],
table.table thead.table-head tr.table-row td.table-column[data-text-align='left'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='left'],
table.table tbody.table-body tr.table-row td.table-column[data-text-align='left'] input.visible {
    text-align: start;
}

table.table thead.table-head tr.table-row th.table-column[data-align="middle"],
table.table thead.table-head tr.table-row td.table-column[data-align="middle"],
table.table tbody.table-body tr.table-row td.table-column[data-align="middle"] {
    vertical-align: middle;
}

/* prettier-ignore */
div.table-responsive table.table thead.table-head tr.table-row th.table-column,
div.table-responsive table.table thead.table-head tr.table-row td.table-column,
div.table-responsive table.table tbody.table-body tr.table-row td.table-column {
    white-space: nowrap;
    text-wrap: nowrap;
}

/* prettier-ignore */
table.table tbody.table-body tr.table-row td.table-column:has(.visible, .hidden) {
    cursor: pointer;
}

/* prettier-ignore */
table.table tbody.table-body tr.table-row td.table-column:has(.visible, .hidden):focus-within {
    outline: 3px solid var(--color-primary-500);
    border-radius: 10px;
}

table.table tbody.table-body tr.table-row td.table-column .hidden {
    display: none;
}

/* prettier-ignore */
table.table tbody.table-body tr.table-row td.table-column input.visible {
    background: transparent;
    padding: 0;
    margin: 0;
    width: 100%;
}