@reference "../app/globals.css";

.dataTable {
    @apply body-medium text-onSurface;
    border-collapse: separate;
    font-weight: 600;
    border-spacing: 0 0.25rem !important;
}

.tableWrapper {
    @apply border-1 border-transparent;
    overflow: hidden;
}

.dataTableHeader tr {
    @apply !bg-secondaryContainer text-onSecondaryContainer !border-b-0;
    /* background-color: var(--md-sys-color-secondary-container); */
    /* color: var(--md-sys-color-on-secondary-container); */
    /* border-bottom: 2px solid var(--md-sys-color-outline-variant); */
}

.dataTableRow {
    @apply border-b-0 mb-4 border-outlineVariant;
}

.dataTableRow:nth-child(n+1) {
    @apply bg-secondaryContainer/50 text-onSecondaryContainer;
    /* background-color: var(--md-sys-color-secondary-container); */
    /* @apply border-b-1 border-outlineVariant; */
}


.dataTableRow:nth-child(2n+1) {
    @apply bg-secondaryContainer/20 text-onSecondaryContainer;
    /* background-color: var(--md-sys-color-secondary-container); */
    /* @apply border-b-1 border-outlineVariant; */
}


.dataTableCaption {
    padding: 0.5rem 1rem;
}

.dataTableHead {
    height: 76px;
    font-weight: 600;
    @apply title-small;
    max-height: 76px;
    padding: 0 1rem;
    position: sticky;
    color: var(--md-sys-color-text-on-surface-variant);
}

.dataTableHead {
    &:first-child {
        border-radius: 1.5rem 0 0 0.5rem;
    }

    &:last-child {
        border-radius: 0 1.5rem 0.5rem 0;
    }

    &:not(:last-child) {
        /* border-right: 1px solid var(--md-sys-color-outline-variant); */
    }
}

.dataTableData {

    /* &:not(:last-child) {
        border-right: 1px solid var(--md-sys-color-outline-variant);
    } */

    height: 76px;
    max-height: 76px;
    padding: 0.5rem 1rem;
}

/* .dataTableHead[data-value="itemDescription"] {
    width: 40px;
} */

.dataTableData[data-value="action"] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.dataTableNoResult td {
    /* border-bottom: 1px solid var(--md-sys-color-outline-variant); */
}

.dataTableData[data-value="action"] div {
    justify-content: center;
}

.dataTableHead[data-value="action"] {
    text-align: center;
}

.dataTableHead[data-value="select"],
.dataTableData[data-value="select"] {
    text-align: center;
}