/**
 * @license EUPL-1.2
 * Copyright (c) 2021 Robbert Broersma
 */

@import "./mixin";

.utrecht-table-container--overflow-inline {
  background-attachment: local, local, scroll, scroll;
  background-image: 
    /* Shadows */ linear-gradient(to right, white, white), linear-gradient(to right, white, white),
    /* Shadow covers */ linear-gradient(to right, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%)),
    linear-gradient(to left, rgba(0 0 0 / 25%), rgba(255 255 255 / 0%));
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size:
    /* left */ 20px 100%, /* right */ 20px 100%, /* left */ 10px 100%, /* right */ 10px 100%;
  overflow: auto;
}

.utrecht-table {
  @include utrecht-table;
}
.utrecht-table--distanced {
  @include utrecht-table--distanced;
}

.utrecht-table--html-table > caption,
.utrecht-table__caption {
  @include utrecht-table__caption;
}

.utrecht-table--html-table > figcaption,
.utrecht-table__figcaption {
  @include utrecht-table__figcaption;
}

.utrecht-table--html-table > thead,
.utrecht-table__header {
  @include utrecht-table__header;
}

.utrecht-table__header--sticky {
  @include utrecht-table__header--sticky;
}

.utrecht-table__footer {
  @include utrecht-table__footer;
}

.utrecht-table__footer--sticky {
  @include utrecht-table__footer--sticky;
}

.utrecht-table--html-table > tbody,
.utrecht-table__body {
  @include utrecht-table__body;
}

.utrecht-table--fixed {
  inline-size: fit-content;
  table-layout: fixed;
}

.utrecht-table--fixed th,
.utrecht-table--oneline th,
.utrecht-table--oneline td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* `.utrecht-table--html-table` should not affect nested tables.
 * We will use the `>` direct descendant selector so the styling doesn't affect nested tables. */

/* stylelint-disable no-descending-specificity */

.utrecht-table--html-table > tr,
.utrecht-table--html-table > thead > tr,
.utrecht-table--html-table > tbody > tr,
.utrecht-table--html-table > tfoot > tr,
.utrecht-table__row {
  @include utrecht-table__row;
}

.utrecht-table__row--selected {
  @include utrecht-table__row--selected;
}

.utrecht-table--html-table > tr > th,
.utrecht-table--html-table > thead > tr > th,
.utrecht-table--html-table > tbody > tr > th,
.utrecht-table--html-table > tfoot > tr > th,
.utrecht-table__header-cell {
  @include utrecht-table__header-cell;
}

.utrecht-table__header-cell--selected {
  @include utrecht-table__header-cell--selected;
}

.utrecht-table__header-cell--sticky-block {
  @include utrecht-table__header-cell--sticky-block;
}

.utrecht-table__header-cell--sticky-inline {
  @include utrecht-table__header-cell--sticky-inline;
}

.utrecht-table--html-table > tr > td,
.utrecht-table--html-table > thead > tr > td,
.utrecht-table--html-table > tbody > tr > td,
.utrecht-table--html-table > tfoot > tr > td,
.utrecht-table__cell {
  @include utrecht-table__cell;
}

.utrecht-table--html-table > tr > td:first-child,
.utrecht-table--html-table > thead > tr > td:first-child,
.utrecht-table--html-table > tbody > tr > td:first-child,
.utrecht-table--html-table > tfoot > tr > td:first-child,
.utrecht-table__cell--first {
  @include utrecht-table__cell--first;
}

.utrecht-table--html-table > tr > td:last-child,
.utrecht-table--html-table > thead > tr > td:last-child,
.utrecht-table--html-table > tbody > tr > td:last-child,
.utrecht-table--html-table > tfoot > tr > td:last-child,
.utrecht-table__cell--last {
  @include utrecht-table__cell--last;
}

.utrecht-table__cell--selected {
  @include utrecht-table__cell--selected;
}

/* stylelint-enable no-descending-specificity */

.utrecht-table__header-cell--numeric-column,
.utrecht-table__cell--numeric-column {
  @include utrecht-table__cell--numeric-column;
}

.utrecht-table__cell--numeric-data {
  @include utrecht-table__cell--numeric-data;
}

.utrecht-table__row--alternate-odd {
  @include utrecht-table__row--alternate-odd;
}

.utrecht-table__row--alternate-even {
  @include utrecht-table__row--alternate-even;
}

.utrecht-table__header-cell {
  --utrecht-button-font-size: inherit;
  --utrecht-button-font-weight: inherit;
  --utrecht-button-padding-inline-start: var(--utrecht-table-cell-padding-inline-start);
  --utrecht-button-padding-inline-end: var(--utrecht-table-cell-padding-inline-end);
  --utrecht-button-padding-block-start: var(--utrecht-table-cell-padding-block-start);
  --utrecht-button-padding-block-end: var(--utrecht-table-cell-padding-block-end);
  --utrecht-button-hover-scale: 1;
  --utrecht-button-focus-scale: 1;
  --utrecht-button-min-block-size: 100%;
  --utrecht-button-min-inline-size: 100%;
  --utrecht-button-border-color: transparent;
  --utrecht-button-border-size: 1px;
}

.utrecht-table__header-cell:has(.utrecht-button) {
  padding-block-end: 0;
  padding-block-start: 0;
  padding-inline-end: 0;
  padding-inline-start: 0;
}

.utrecht-table__header-cell-button {
  justify-content: var(--_utrecht-table-cell-text-align, start);

  // border: 1px solid transparent;
}

/* stylelint-disable-next-line block-no-empty */
.utrecht-table__data {
}

.utrecht-table__data--truncate {
  display: block;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.utrecht-table__container {
  max-inline-size: 100%;
  overflow-inline: scroll;

  // position: relative;
}

.utrecht-table__header--hidden {
  block-size: 1px;
  border: 0 solid silver;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  inline-size: 1px;
  outline: 1px solid red;
  overflow: hidden;
  /* stylelint-disable-next-line property-disallowed-list */
  padding: 0;
  position: absolute;
  white-space: nowrap;
}

.utrecht-table--busy {
  @include utrecht-table--busy;
}

.utrecht-table--alternate-row-color {
  .utrecht-table__body {
    .utrecht-table__row:nth-child(odd) {
      @include utrecht-table__row--alternate-odd;
    }
    .utrecht-table__row:nth-child(even) {
      @include utrecht-table__row--alternate-even;
    }
  }
}

.utrecht-table--row-hover {
  .utrecht-table__body {
    .utrecht-table__row:hover {
      // @media screen and (forced-colors: active) {
      .utrecht-table__header-cell,
      .utrecht-table__cell {
        background-color: papayawhip;
        color: maroon;
      }
    }
  }
}

.utrecht-table--row-focus-within {
  .utrecht-table__body {
    .utrecht-table__row:focus-within {
      // @media screen and (forced-colors: active) {
      .utrecht-table__header-cell,
      .utrecht-table__cell {
        background-color: papayawhip;
        color: maroon;
      }
    }
  }
}