@use "../utilities/mixins";

/**
 * @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 30.07.2025
 * @@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).
 */

.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__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-background-hued, #F7F7F9);
            // background-color: light-dark(rgba(14,16,30,0.04), rgba(14,16,30,0.04)); 
          }
        }
      }
    }
  }

  .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, #A5AAC3);
    @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;
    }
    @media (forced-colors: active) {
      border-bottom: 1px solid transparent;
    }
  }

  &__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, #A5AAC3);

    .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;
  }
}