@use 'styles/mixins';
@use 'styles/functions';

@mixin base {
  .alternative-view {
    &__placeholder {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80%;
      user-select: none;
    }
  }

  .table-container {
    --_table--row--height: var(--sc-kit--table--row--height, var(--_table--size-row-height));
    --_table--cell--font-size: var(--sc-kit--table--cell--font-size, var(--_table--size-cell-font-size));
    --_table--cell--horizontal-padding: var(--sc-kit--table--cell--horizontal-padding, var(--_table--size-cell-padding));
    --_table--head--height: var(--sc-kit--table--head--height, var(--_table--size-head-height, var(--_table--row--height)));

    --_table--head--background-color: var(--sc-kit--table--head--background-color, var(--sc-kit--color--bg--field-alt));
    --_table--head--color: var(--sc-kit--table--head--color, var(--sc-kit--color--text--secondary));
    --_table--border-color: var(--sc-kit--table--border-color, var(--sc-kit--color--border));
    --_table--row--color: var(--sc-kit--table--row--color, transparent);
    --_table--row--alternative-color: var(--sc-kit--table--row--alternative-color, var(--sc-kit--color--bg--hover));
    --_table--zebra--color: var(--sc-kit--table--zebra--color, light-dark(#fcfcfd, #232323));
    --_table--selected--color: var(--sc-kit--table--selected--color, var(--sc-kit--color--accent--softer));
    --_table--selected--color-hover: var(--sc-kit--table--selected--color--hover, var(--sc-kit--color--accent--soft));

    --_table--card--background: var(--sc-kit--table--card--background, var(--sc-kit--color--bg--panel));
    --_table--card--border-color: var(--sc-kit--table--card--border-color, var(--sc-kit--color--border));
    --_table--card--border-radius: var(--sc-kit--table--card--border-radius, var(--sc-kit--radius--lg));
    --_table--card--padding-bottom: var(--sc-kit--table--card--padding-bottom, var(--sc-kit--space--4));

    display: flex;
    overflow-x: auto;
    height: 100%;

    @include mixins.scrollbar();

    &--md {
      --_table--size-row-height: #{functions.to-rem(44)};
      --_table--size-head-height: #{functions.to-rem(40)};
      --_table--size-cell-font-size: var(--sc-kit--font-size--md);
      --_table--size-cell-padding: var(--sc-kit--space--4);
    }

    &--sm {
      --_table--size-row-height: #{functions.to-rem(36)};
      --_table--size-head-height: #{functions.to-rem(32)};
      --_table--size-cell-font-size: var(--sc-kit--font-size--sm);
      --_table--size-cell-padding: var(--sc-kit--space--3);
    }

    &--card {
      background: var(--_table--card--background);
      border: 1px solid var(--_table--card--border-color);
      border-radius: var(--_table--card--border-radius);
      padding-bottom: var(--_table--card--padding-bottom);
      // No overflow here: the radius already clips via the base overflow-x, and `hidden` would kill both scroll axes.
    }
  }

  .table {
    width: 100%;
    table-layout: auto;
    height: fit-content;
    border-collapse: separate;
    border-spacing: 0;

    &__head {
      height: var(--_table--head--height);
      max-height: var(--_table--head--height);
      background: var(--_table--head--background-color);
      color: var(--_table--head--color);
      font-size: var(--sc-kit--table--head--font-size, var(--sc-kit--font-size--sm));
      font-weight: var(--sc-kit--font-weight--semibold);
    }

    &__th {
      padding: 0 var(--_table--cell--horizontal-padding);
      text-align: left;
      vertical-align: middle;
      border-bottom: 1px solid var(--_table--border-color);
      @include mixins.no-select;

      &--centered {
        text-align: center;
        --_table-header--justify-content: center;
      }
    }

    &__tr {
      height: var(--_table--row--height);
      max-height: var(--_table--row--height);
      background: var(--_table--row--color);

      &--zebra {
        background: var(--_table--zebra--color);
      }

      &:hover,
      &--highlighted {
        background: var(--_table--row--alternative-color);
        --_table--move-row-cell-opacity: 1;
      }

      &--selected {
        background: var(--_table--selected--color);
      }

      &--selected:hover {
        background: var(--_table--selected--color-hover);
      }

      &--placeholder {
        background: var(--_table--row--color) !important;
      }
    }

    &__td {
      padding: 0 var(--_table--cell--horizontal-padding);
      border-bottom: 1px solid var(--_table--border-color);
      font-size: var(--_table--cell--font-size);
      color: var(--sc-kit--color--text--primary);
      vertical-align: middle;

      &--centered {
        text-align: center;
      }

      &--clickable {
        cursor: pointer;
      }

      &--flush {
        border-bottom: none;
      }
    }

    &__placeholder {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 80%;
      user-select: none;
    }

    &--sticky-header {
      thead {
        position: sticky;
        top: 0;
        z-index: 1;
      }
    }
  }
}