@use './typo';

// TODO: delete this file with next major release
// All mixins have been inlined in the table global style

// @deprecated
@mixin table {
  @include table--m;
  @include table--striped;

  --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
  --sbb-table-background-color: var(--sbb-background-color-1);
  --sbb-table-row-striped-color: var(--sbb-background-color-3);
  --sbb-table-color: var(--sbb-color-1);
  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
  --sbb-table-caption-margin-block-start: var(--sbb-spacing-fixed-4x);
  --sbb-table-sticky-shadow-width: 3rem;
  --sbb-table-sticky-shadow-transition-easing: var(--sbb-animation-easing);
  --sbb-table-sticky-shadow-transition-duration: var(--sbb-animation-duration-6x);

  border-spacing: 0;
  caption-side: bottom;
  color: var(--sbb-table-color);
  table-layout: auto;
  text-align: left;

  th {
    @include table-header-cell;
  }

  td {
    @include table-data-cell;
  }

  :is(th, td) {
    &.sbb-table-group-with-next {
      border-inline-end: none;
    }

    &:first-child {
      border-inline-start: var(--sbb-table-border);
    }
  }

  // In Angular the CDK table always adds a thead even if there are no headers.
  // Due to this fact we have to also insert `tr` in the `:has()` selector.
  &:has(thead tr) thead,
  &:not(:has(thead tr)) tbody {
    tr:first-of-type > :is(th, td) {
      border-block-start: var(--sbb-table-border);
    }
  }

  // Avoid borders between header rows (design specification).
  thead > tr:has(+ tr) > :is(th, td) {
    border-block-end: none;
  }

  caption {
    @include table-caption;
  }
}

// @deprecated
@mixin table-header-row {
  // If there is more than one header row, only the last one has the bottom border
  &:last-of-type > th {
    border-block-end: var(--sbb-table-border);
  }
}

// @deprecated
@mixin table-header-cell {
  font-size: var(--sbb-table-header-cell-font-size);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  font-weight: bold;
  background-color: var(--sbb-table-background-color);
  border-block-end: var(--sbb-table-border);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-header-padding-block);
  padding-inline: var(--sbb-table-header-padding-inline);
}

// @deprecated
@mixin table-data-cell {
  font-size: var(--sbb-table-data-cell-font-size);
  letter-spacing: var(--sbb-typo-letter-spacing-text);
  background-color: var(--sbb-table-background-color);
  border-block-end: var(--sbb-table-border);
  border-inline-end: var(--sbb-table-border);
  padding-block: var(--sbb-table-cell-padding-block);
  padding-inline: var(--sbb-table-cell-padding-inline);
}

// @deprecated
@mixin table-caption {
  // Workaround for storybook. It crashes if 'light-dark' is used as a 'var' fallback
  --sbb-table-caption-color-fallback: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));

  font-size: var(--sbb-text-font-size-xs);
  letter-spacing: var(--sbb-typo-letter-spacing-text);

  // Defaults are needed for cases where the caption is used outside a table
  color: var(--sbb-table-caption-color, var(--sbb-table-caption-color-fallback));
  margin-block-start: var(--sbb-table-caption-margin-block-start, var(--sbb-spacing-fixed-4x));
  text-align: left;
}

// @deprecated
@mixin table-filter {
  padding-block-start: 0 !important;
}

// @deprecated
@mixin table--striped {
  tbody tr:nth-child(odd) :is(th, td) {
    @include table-row--striped;
  }
}

// @deprecated
@mixin table--unstriped {
  tbody tr:nth-child(odd) :is(th, td) {
    background-color: var(--sbb-table-background-color);
  }
}

// @deprecated
@mixin table-row--striped {
  background-color: var(--sbb-table-row-striped-color);
}

// @deprecated
@mixin table--negative {
  --sbb-table-border-color: var(--sbb-color-anthracite);
  --sbb-table-background-color: var(--sbb-background-color-1-negative);
  --sbb-table-color: var(--sbb-color-1-negative);
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
  --sbb-table-caption-color: var(--sbb-color-cement);
}

// @deprecated
@mixin table--m {
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-s);
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-3x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-4x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-responsive-xxxs);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-4x);
}

// @deprecated
@mixin table--s {
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
  --sbb-table-header-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-2x);
  --sbb-table-cell-padding-block: var(--sbb-spacing-fixed-1x);
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-2x);
}

// @deprecated
@mixin table--xs {
  --sbb-table-header-cell-font-size: var(--sbb-text-font-size-xs);
  --sbb-table-data-cell-font-size: var(--sbb-text-font-size-xs);
  --sbb-table-header-padding-block: 0;
  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
  --sbb-table-cell-padding-block: 0;
  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
}

// @deprecated
@mixin table--theme-iron {
  --sbb-table-cell-color: var(--sbb-color-4);

  tbody > tr > td {
    color: var(--sbb-table-cell-color);
  }
}

// @deprecated
@mixin table--theme-iron-negative {
  --sbb-table-cell-color: var(--sbb-color-cloud);
}