/**
* @file _table.scss
* @author Darko Pervan, darko.pervan@dataport.de / KERN-Team
* @author Tom Marienfeld, tom.marienfeld@dataport.de / KERN-Team
* @date 16.12.2024
* @modified 09.04.2026
* @@VERSION@@
* @brief Styles für die Table Komponente.
*
* Diese Datei enthält die CSS-Regeln, um die Table Komponente
* visuell darzustellen. Sie definiert das Grundaussehen.
* Variationen (small, default und responsive).
*/

@use "../utilities/mixins";

.kern-table {
    width: 100%;
    border-spacing: var(--kern-metric-space-none, 0px);
    border-collapse: collapse;

    &--small {
        .kern-title {
            @include mixins.heading-small;
        }

        .kern-table__header,
        .kern-table__cell {
            @include mixins.body-small;
            padding: calc(var(--kern-metric-baseline-body-small-padding-top, 7px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-small-padding-bottom, 1px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
        }

        .kern-table__cell {
            &--action {
                padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
                text-wrap: nowrap;
            }
        }

        .kern-table__header {
            font-weight: var(--kern-typography-font-weight-semi-bold, 600);
        }
    }

    &--striped {
        .kern-table__body {
            .kern-table__row {
                &:nth-child(odd) {

                    .kern-table__header,
                    .kern-table__cell {
                        background-color: var(--kern-color-layout-layer-surface-contextual, #F3F4F7);
                    }
                }
            }
        }
    }

    .kern-title {
        display: table-caption;
        text-align: left;
    }

    &__header,
    &__cell {
        text-align: left;
        vertical-align: top;
        //border-bottom: 1px solid var(--kern-color-layout-border, #A5AAC3);
        box-shadow: inset 0 -1px 0 0 var(--kern-color-layout-border-contextual, #6E7597);
        @include mixins.body-default;
        padding: calc(var(--kern-metric-baseline-body-default-padding-top, 6px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px)) calc(var(--kern-metric-baseline-body-default-padding-bottom, 2px) + var(--kern-metric-space-small, 8px)) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));

        &--numeric {
            text-align: right;
            text-wrap: nowrap;
        }

        &--action {
            text-align: right;
        }

        @media (forced-colors: active) {
            border-bottom: 1px solid transparent;
        }
    }

    &__cell {
        &--action {
            padding: var(--kern-metric-space-none, 0px) calc(var(--kern-metric-space-none, 0px) + var(--kern-metric-space-x-small, 4px));
            text-wrap: nowrap;
        }
    }


    &__header {
        font-weight: var(--kern-typography-font-weight-semi-bold, 600);
    }

    &__footer {
        //border-top: 2px solid var(--kern-color-layout-border, #A5AAC3);
        box-shadow: inset 0 1px 0 0 var(--kern-color-layout-border-contextual, #6E7597);

        .kern-table__cell {
            font-weight: var(--kern-typography-font-weight-semi-bold, 600);
        }
    }

    &-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        // // TODO: eine bessere Lösung für Schatten finden!
        // // Scroling shadow
        // background:
        // linear-gradient(90deg, white 30%, rgba(255,255,255,0)),
        // linear-gradient(90deg, rgba(255,255,255,0), white 70%) 0 100%,
        // radial-gradient(farthest-side at 0% 50%, rgba(0,0,0, 0.35), white),
        // radial-gradient(farthest-side at 100% 50%, rgba(0,0,0, 0.35), white) 0 100%;
        // background-repeat: no-repeat;
        // background-color: white;
        // background-position: top left, top right, top left, top right;
        // background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
        // background-attachment: local, local, scroll, scroll;
    }
}