@use '../config' as *;
@use '../function' as *;
@use '../mixin' as *;

@mixin generate-table(
  $selector: '.table',
  $has-variations: true,
  $has-responsive-table: true
) {
  @if ($has-responsive-table) {
    .table-responsive {
      --inline-size: #{config('responsive-inline-size', $table, false)};
      -webkit-overflow-scrolling: touch;
      overflow-x: auto;

      table {
        min-inline-size: var(--inline-size);
      }
    }
  }

  #{$selector} {
    @include generate-variables($table, ('stripe'));

    border-collapse: collapse;
    color: color('text', 'table');
    inline-size: 100%;

    caption {
      color: color(caption, table);
      font-size: config('caption-font-size', $table);
      font-style: config('caption-font-style', $table);
      font-weight: config('caption-font-weight', $table);
      margin-block-end: spacer('s');
    }

    th,
    td {
      border-block-end: 1px solid color('border', 'table');
      line-height: config('line-height', $table);
      padding: config('padding', $table);
    }

    th {
      color: color('heading', 'table');
      text-align: inherit;
      text-align: -webkit-match-parent;
    }

    @if ($has-variations) {
      &--striped {
        > tbody > tr:nth-child(#{config('stripe', $table, false)}) {
          background-color: color('stripe', 'table');
        }
      }

      &--hover {
        > tbody > tr:hover {
          background: color('hover', 'table');
        }
      }

      &--clear-border {
        th,
        td {
          border: 0;
        }
      }

      &--in-line {
        th:first-child,
        td:first-child {
          padding-inline-start: 0;
        }

        th:last-child,
        td:last-child {
          padding-inline-end: 0;
        }
      }

      &--sm {
        @include generate-variables($table-sm);

        th,
        td {
          padding: config('padding', $table-sm);
        }
      }

      &--rounded {
        th,
        td {
          &:first-child {
            border-end-start-radius: config('border-radius-sm', $display);
            border-start-start-radius: config('border-radius-sm', $display);
          }

          &:last-child {
            border-end-end-radius: config('border-radius-sm', $display);
            border-start-end-radius: config('border-radius-sm', $display);
          }
        }
      }
    }
  }
}