@use '../abstract' as *;
.table {
  /* global variable */
  --heading-text-color: var(--color-neutral-60);

  /* local variable */
  --p-table-bg-color: var(--color-neutral-0);
  --p-table-bg-color-focus: var(--color-neutral-5);
  //--p-table-bg-even-row-color: var(--color-neutral-0);
  --p-table-border-color: var(--color-neutral-10);
  --p-tbody-color-text: var(--color-neutral-60);

  --p-border-radius: var(--border-radius-medium);

  display: table;
  table-layout: fixed;
  border-collapse: collapse;
  background-color: hsl(var(--p-table-bg-color));
  border-radius: var(--p-border-radius);
  box-shadow: 0 0 0 pxToRem(1) hsl(var(--color-border)), var(--shadow-small);
  inline-size: 100%;
  line-height: 1.2;

  &-with-scroll {
    @include tableScroll; overflow:hidden;
    border-radius:var(--border-radius-medium);

    .table {
      border-end-start-radius:0; border-end-end-radius:0;
      &-row {
        &:where(:last-child) .table-col{ border-radius:unset;}
      }
    }
  }
  &-wrapper { overflow:auto; }
  :where(.table-thead-col, .table-col) {
    display:table-cell; box-sizing:content-box;
    padding-block:pxToRem(24); padding-inline:pxToRem(16); vertical-align:middle;
    @media #{$break1} { padding-inline:pxToRem(12); }
    //> * {vertical-align:middle;} //make issue when there is text unwrap with wrap
    &:not(:first-child) { @include trim(); display:table-cell; }
    :where(.image) {
      $size: pxToRem(30);
      --size: #{$size};
      flex-shrink: 0;
      img { vertical-align:bottom; }
    }
  }
  :where(.table-thead-col) {
    padding-block:pxToRem(16);
  }
  :where(.table-col) {
    /* for <ul> list tables */
    --p-col-width: auto;
    inline-size: calc(var(--p-col-width) / 16 * 1rem);
    /** **/
    padding-block:pxToRem(16); block-size:pxToRem(40);
  }
  &-thead {
    display: table-header-group;
    border-block-end: solid pxToRem(1) hsl(var(--p-table-border-color));
    .table-row { min-block-size:pxToRem(54); }
    &-col {
      --p-col-width: auto;
      inline-size: calc(var(--p-col-width) / 16 * 1rem);
      min-inline-size: calc(var(--p-col-width) / 16 * 1rem);
      text-align: unset;
    }
  }
  &-tbody {
    display: table-row-group;
    color: hsl(var(--p-tbody-color-text));
  }
  &-tfoot {
    display: table-footer-group;
  }
  &-row {
    display: table-row;
    min-block-size: pxToRem(88);
    &:where(a, [role*="button"]) {
      cursor:pointer;
      &:where(:hover, :focus) {
        background-color:hsl(var(--p-table-bg-color-focus));
        :is(.table-col):first-child { background-color:hsl(var(--p-table-bg-color-focus))!important; }
      }
    }
    &:where(:not(:first-child)) { border-block-start:solid pxToRem(1) hsl(var(--p-table-border-color));}
    &:where(:last-child) {
      :where(.table-col:first-child) { border-end-start-radius:var(--p-border-radius); }
      :where(.table-col:last-child) { border-end-end-radius:var(--p-border-radius); }
    }
  }
  .button.is-text {
    --p-text-color-default: var(--color-neutral-20);
  }

  &.is-table-layout-auto { table-layout:auto; }
  &.is-remove-outer-styles {
    border-width:0; box-shadow:none; outline:none; border-radius:initial; background-color:transparent;
    :where(.table-thead-col) {
      padding-inline:0;
      &:where(:not(:last-child)) { padding-inline-end:pxToRem(8); }
    }
    :where(.table-col) {
      padding-inline:0; padding-block:pxToRem(4);
      &:where(:not(:last-child)) { padding-inline-end:pxToRem(8); }
    }
    :where(.table-row:last-child) { border-block-end:solid pxToRem(1) hsl(var(--p-table-border-color)); }
  }
  &.is-sticky-scroll {
    table-layout: revert;
    @media #{$break3open} {
      :where(.table-thead-col, .table-col):first-child {
        position: sticky;
        inset-inline-start: 0;
        background-color: hsl(var(--p-table-bg-color));
        box-shadow: var(--shadow-large);
        > .text { @include trim; box-sizing:border-box; max-inline-size:pxToRem(150); }
      }
      :where(.table-thead-col, .table-col):first-child {
        z-index: 2;
        &::before {
          content: "";
          position:absolute; inset-block:0; inset-inline-start:100%;
          display:block; inline-size:pxToRem(20);
          background: linear-gradient(to right, rgb(0 0 0 / 0.05), rgb(0 0 0 / 0) );
        }
      }
    }
  }
  &.is-table-row-medium-size {
    :where(.table-col) {
      padding-block:pxToRem(8);
    }
  }

  #{$theme-dark} & {
    /* global variable */
    --heading-text-color: var(--color-neutral-20);

    /* local variable */
    --p-table-bg-color: var(--color-neutral-90);
    --p-table-bg-color-focus: var(--color-neutral-100);
    --p-table-border-color: var(--color-neutral-85);
    --p-tbody-color-text: var(--color-neutral-15);

  }
  @media #{$break1}, #{$break2} {
    &.is-vertical{
      display: block;
      .table {
        &-thead { display:none; }
        &-tbody { display:block; }
        &-row { display: flex; flex-direction:column; }
        &-col {
          &:where([data-title])::before {
            content: attr(data-title) ": ";
            font-size: pxToRem(16);
            font-weight: 400;
          }
        }
      }
    }
  }
  @media #{$break3open} { }
}