@use "../../variables/units";

@use "../table";

@mixin outside-lines-sides() {
  thead {
    border-inline-start: 1px solid table.$th-border-color;
    border-inline-end: 1px solid table.$th-border-color;
  }
  tbody {
    border-inline-start: 1px solid table.$border-color;
    border-inline-end: 1px solid table.$border-color;
  }
}

@mixin outside-lines-topbot() {
  border-block-start: 1px solid table.$th-border-color;
  border-block-end: 1px solid table.$border-color;
}

@mixin row-variant($state, $background) {
  // Exact selectors below required to override `.table-striped` and prevent
  // inheritance to nested tables.
  .dso-rich-content table > thead > tr,
  .dso-rich-content table > tbody > tr,
  .dso-rich-content table > tfoot > tr,
  .table > thead > tr,
  .table > tbody > tr,
  .table > tfoot > tr {
    > td.#{$state},
    > th.#{$state},
    &.#{$state} > td,
    &.#{$state} > th {
      background-color: $background;
    }
  }

  // Hover states for `.table-hover`
  // Note: this is not available for cells or rows within `thead` or `tfoot`.
  .table-hover > tbody > tr {
    > td.#{$state}:hover,
    > th.#{$state}:hover,
    &.#{$state}:hover > td,
    &:hover > .#{$state},
    &.#{$state}:hover > th {
      background-color: table.$background-color-active;
    }

    &:hover > th,
    &:hover > td {
      background-color: table.$background-color-active;

      a {
        color: table.$link-color;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }

  .table > tbody > tr {
    &.#{$state} > th,
    &.#{$state} > td {
      background-color: table.$background-color-active;

      a {
        color: table.$link-color;

        &:hover {
          text-decoration: none;
        }
      }
    }
  }
}

@mixin responsive() {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  border: 1px solid table.$border-color;
  margin-block-end: 0;
  overflow-y: hidden;
  inline-size: 100%;

  &::before {
    content: "beweeg de tabel van links naar rechts";
    display: block;
    font-size: 0.8em;
    margin-block-end: units.$u1;
    position: relative;
    text-align: center;
  }

  // Tighten up spacing
  > .table {
    margin-block-end: 0;

    // 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
        }
      }
    }
  }
}