@use "../../variables/units";
@use "../../variables/colors";
@use "../../variables/media-query-breakpoints";
@use "../../variables/scaffolding";
@use "../../variables/typography";

@use "../button";
@use "../rich-content";

@use "../table";

@use "table.mixins" as css-table-mixins;

caption {
  color: colors.$text-muted;
  padding-block-end: table.$cell-padding;
  padding-block-start: table.$cell-padding;
  text-align: start;
}

td,
th {
  padding: 0;
}

th {
  font-weight: 600;
  text-align: start;
}

table.table {
  td:not(.plain-content),
  th {
    @include rich-content.children();
  }
}

table.table,
.dso-rich-content table {
  margin-block-end: typography.$line-height-computed;
  max-inline-size: 100%;
  inline-size: 100%;

  .dso-tertiary:not(dso-ozon-content-toggletip *),
  dso-icon-button {
    position: relative;
    inset-block-start: -2px;
    white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- These actions are always accomponied by icons, we always want the icon next to the text
  }

  &.dso-text-left {
    th,
    td {
      text-align: start;
    }
  }

  &.dso-text-center {
    th,
    td {
      text-align: center;
    }
  }

  &.dso-text-right {
    th,
    td {
      text-align: end;
    }
  }

  &.dso-table-vertical-lines {
    > thead {
      > tr {
        > td,
        > th {
          border: 1px solid table.$th-border-color;
        }
      }
    }

    > tbody,
    > tfoot {
      > tr {
        > td,
        > th {
          border: 1px solid table.$border-color;
        }
      }
    }

    > thead + tbody > tr:first-child {
      > td,
      > th {
        border-block-start: 0;
      }
    }
  }

  &.dso-table-outside-lines-top {
    border-block-start: 1px solid table.$th-border-color;
  }

  &.dso-table-outside-lines-bottom {
    border-block-end: 1px solid table.$border-color;
  }

  &.dso-table-outside-lines-topbot {
    @include css-table-mixins.outside-lines-topbot();
  }

  &.dso-table-outside-lines-all {
    @include css-table-mixins.outside-lines-topbot();
    @include css-table-mixins.outside-lines-sides();
  }

  &.dso-table-outside-lines-sides {
    @include css-table-mixins.outside-lines-sides();
  }

  > thead {
    > tr {
      > td,
      > th {
        &.dso-horizontal-line {
          border-block-end: 1px solid table.$th-border-color;
        }

        &:not(:last-child) {
          &.dso-vertical-line {
            border-inline-end: 1px solid table.$th-border-color;
          }
        }
      }
    }
  }

  > tbody,
  > tfoot {
    > tr {
      > td,
      > th {
        &:not(:last-child) {
          &.dso-vertical-line {
            border-inline-end: 1px solid table.$border-color;
          }
        }
      }
    }

    > tr:not(:last-child) {
      > td,
      > th {
        &.dso-horizontal-line {
          border-block-end: 1px solid table.$border-color;
        }
      }
    }
  }

  th,
  td {
    &.dso-text-left {
      text-align: start;
    }

    &.dso-text-center {
      text-align: center;
    }

    &.dso-text-right {
      text-align: end;
    }
  }

  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        line-height: typography.$line-height-base;
        padding-block: (table.$cell-padding * 1.5);
        padding-inline: table.$cell-padding;
        vertical-align: top;

        a {
          text-decoration: underline;
        }
      }
    }
  }

  &:not([class*="dso-table-outside-lines"]) {
    > thead {
      > tr {
        > td,
        > th {
          border-block-end: 1px solid table.$th-border-color;
        }
      }
    }

    > tbody,
    > tfoot {
      > tr {
        > td,
        > th {
          border-block-end: 1px solid table.$border-color;
        }
      }
    }
  }

  // Account for multiple tbody instances
  > tbody + tbody {
    border-block-start: 2px solid table.$border-color;
  }

  // Nesting
  .table {
    background-color: scaffolding.$body-bg;
  }

  // error after filtering
  > tbody > tr.result-error {
    td {
      font-style: italic;
    }
  }

  // sortable table
  > thead > tr > th {
    // Bottom align for column headings
    vertical-align: bottom;

    #{button.$buttons} {
      &.dso-sort {
        color: colors.$grijs-90;
        font-weight: 600;

        dso-icon {
          color: colors.$grijs-60;

          &.dso-sort-active {
            color: colors.$grijs-90;
          }
        }
      }
    }
  }
}

// Hover effect. Placed here since it has to come after the potential zebra striping

.table-hover {
  > tbody > tr:hover {
    background-color: table.$background-color-hover;
  }
}

// Table cell sizing. Reset default table behavior

table col[class*="col-"] {
  display: table-column;
  float: none;
  position: static;
}

table {
  background-color: table.$background-color;
  border-collapse: collapse;
  border-spacing: 0;

  td,
  th {
    &[class*="col-"] {
      display: table-cell;
      float: none;
      position: static;
    }
  }
}

// Generate the contextual variants
@include css-table-mixins.row-variant("active", table.$background-color-active);

.dso-table-responsive,
.dso-table-scroll-container {
  min-block-size: 0.01%;
  overflow-x: auto;
  position: relative;
}

.dso-table-scroll-container {
  @include css-table-mixins.responsive();
}

.dso-table-responsive {
  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {
    @include css-table-mixins.responsive();
  }
}

.dso-table-filter-wrapper {
  .dso-search-bar {
    margin-block-end: units.$u2;
    inline-size: table.$filter-wrapper-inline-size - units.$u4;
  }
}

// Web component
dso-table table.table {
  margin-block-end: 0;
}

dso-table.dso-is-responsive {
  margin-block-end: 0;

  > .table {
    // Ensure the content doesn't wrap
    > thead,
    > tbody,
    > tfoot {
      > tr {
        > th,
        > td {
          white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- Can't have responsive tables without
        }
      }
    }
  }
}

dso-icon-button + dso-icon-button {
  margin-inline-start: units.$u2;
}