@layer layout {

  caption {
    color: black;
    background: white;
  }

  .table-container {
    position: relative;
    &:not(table.ts-table.-borderless,table.ts-table.-no-border) {
      border: 1px solid var(--table-border-color);
    }
    > table.ts-table:not(.-borderless,.-no-border) {
      border: none;
    }
  }

  table.ts-table {
    color: var(--table-text-color);
    background: var(--table-bg-color);
    border: 1px solid var(--table-border-color);
    border-collapse: separate;
    cursor: default;

    > thead > tr > th,
    > thead > tr > td,
    > tbody > tr > th,
    > tbody > tr > td,
    > tfoot > tr > th,
    > tfoot > tr > td {
      min-width: 40px;
      outline-offset: -3px;
    }

    > thead > tr > th,
    > tbody > tr > th,
    > tfoot > tr > th,
    > thead > tr > td,
    > tfoot > tr > td {
      color: var(--table-header-text);
      background: var(--table-header-bg);
      border: 1px solid var(--table-border-color);
    }

    > thead > tr > th,
    > thead > tr > td,
    > tfoot > tr > th,
    > tfoot > tr > td {
      min-height: 24px;
      padding: 4px 8px;
      text-align: left;
      vertical-align: bottom;
      &.sortable {
        padding: 0;
        .sort-button {
          padding: 4px 8px;
        }
      }
    }

    > thead > tr > th:has(+ th),
    > thead > tr > th:has(+ td),
    > thead > tr > td:has(+ th),
    > thead > tr > td:has(+ td) {
      border-right-color: var(--table-header-text);
    }

    > tbody > tr > td,
    > tbody > tr > th {
      border: none;
      padding: 2px 8px;
    }

    > tbody > tr > td {
      background: inherit;
    }

    > tbody > tr:not(:first-child) > td {
      border-top: 1px solid var(--table-grid-color);
    }

    > tbody > tr > td:not(:first-child) {
      border-left: 1px solid var(--table-grid-color);
    }

    > thead .sortable { cursor: pointer; }

    > thead .sortable,
    > thead > tr > th[tabindex] {
      &:hover,
      &:focus {
        color: var(--table-header-text);
        background-color: var(--table-header-focus);
      }
    }

    &.-freeze-header > thead > tr > th,
    &.-freeze-header > thead > tr > td {
      position: sticky !important;
      top: 0;
      z-index: 1;
    }
    &.-w100 {
      width: 100%;
    }
    &.-no-border,
    &.-borderless {
      border: none;
    }
    &.-no-grid > thead > tr > th,
    &.-no-grid > thead > tr > td,
    &.-no-grid > tbody > tr > th,
    &.-no-grid > tbody > tr > td,
    &.-no-grid > tfoot > tr > th,
    &.-no-grid > tfoot > tr > td {
      border: none !important;
    }
    &.-no-vgrid > tbody > tr > td {
      border-left: none !important;
      border-right: none !important;
    }
    &.-striped > tbody > tr:nth-of-type(even) {
      background: var(--table-bg-stripe);
    }
    &.-top-align > tbody > tr > th,
    &.-top-align > tbody > tr > td {
      vertical-align: top;
    }
    &.-row-highlight > tbody > tr:hover,
    &.-row-highlight > tbody > tr:focus {
      color: var(--table-highlight-text);
      background-color: var(--table-highlight-bg);
    }
    &.-colorless {
      border: none;
      > thead > tr > th,
      > thead > tr > td,
      > tfoot > tr > th,
      > tfoot > tr > td {
        color: var(--primary-color);
        background: var(--body-bg-color);
        font-weight: bold;
        border: none;
        border-bottom: 1px solid var(--table-grid-color);
      }
      &:not(.-striped) > tbody > tr > td {
        border: none;
        border-top: 1px solid var(--table-grid-color);
      }
    }
  }

  .ts-table.-sortable > thead > tr,
  .ts-table.-sortable > thead > tr {
    > th.sortable,
    > td.sortable {
      position: relative;
      height: 1px;
      padding: 0;
      margin: 0;
      button.sort-button {
        position: absolute;
        inset: 0;
        color: inherit;
        background: transparent;
        border: none;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: end;
        justify-content: space-between;
        .sort-indicator {
          display: none;
          align-self: center;
          flex-grow: 0;
          width: 13px;
          height: 13px;
          &::after {
            content: "";
            display: block;
            width: 13px;
            height: 13px;
            background: currentColor;
            mask-image: var(--sortsvg);
            mask-repeat: no-repeat;
            mask-size: contain;
            -webkit-mask-image: var(--sortsvg);
            -webkit-mask-repeat: no-repeat;
          }
        }
      }
      &[aria-sort="ascending"] button.sort-button {
        --sortsvg: var(--svg-triangle-up);
        .sort-indicator {
          display: block !important;
        }
      }
      &[aria-sort="descending"] button.sort-button {
        --sortsvg: var(--svg-triangle-down);
        .sort-indicator {
          display: block !important;
        }
      }
    }
  }

  /* responsive table */

  table.responsive {
    --labelwidth: 20cqw;

    width: 100%;
    margin: 0 auto;
    border-bottom: 1px solid var(--table-border-color);
    border-radius: 0;

    td, th {
      color: inherit;
      background: transparent;
      padding: 8px;

      &:empty::after {
        content: "\00A0";
      }
    }
  
    thead tr {
      color: var(--table-header-text);
      background-color: var(--table-header-bg);
   
      th {
        padding: 5px 10px;
      
        &:not(:last-child) {
          border-right: 1px solid var(--table-header-text);
        }
      }
    }
  }

  @media (max-width: 900px) {
  
    table.responsive {
      border-spacing: 0px;
      border-collapse: separate;
      border: 1px solid var(--table-grid-color);
      border-radius: var(--table-border-radius);
      overflow: hidden;
    
      thead {
        /*note: using display:none or visibility:collapse will break focus trap management*/
        visibility: hidden;
        position: absolute;
        height: 0px;
        overflow: hidden;
      }
    
      tbody {
        tr:not(:last-child) td:last-child::after {
          content: "";
          position: absolute;
          left: 0;
          right: 0;
          /*bottom: -6px;*/
          bottom: 0px;
          height: 1px;
          background-color: var(--table-grid-color);
        }

        tr {
          box-shadow: max(var(--labelwidth),20cqw) 0 0 var(--table-header-bg) inset;
        }
        
        td {
          display: block;
          text-align: left;
          padding-left: calc(max(var(--labelwidth),20cqw) + 3cqw) !important;
          position: relative;
          border: none !important;
          max-width: 88cqw;
          width: auto !important;
        
          &.right {
            text-align: right;
          }
        
          &::before {
            content: attr(data-label);
            position: absolute;
            left: 10px;
            font-weight: bold;
            font-size: 0.85rem;
            color: var(--table-header-text);
            width: calc(max(var(--labelwidth),20cqw) - 4cqw);
            text-align: right;
          }
        }
      }

      tr.p-datatable-emptymessage {
        box-shadow: 8px 0 0 var(--primary-color) inset;
        td {
          background: transparent;
          margin-left: calc(-1 * (max(var(--labelwidth), 20cqw)));
          &::before {
            display: none;
          }
        }
      }
    }
  }
  
  @media (min-width: 900px) {

    table.responsive {
      border-collapse: collapse;
      border-bottom: 1px solid var(--table-border-color);

      tbody tr:not(:first-child) td {
        border-top: 1px solid var(--table-grid-color);
      }
    }

    table.responsive {
      .gw-1 { width: 8.333333333%; }
      .gw-2 { width: 16.66666667%; }
      .gw-3 { width: 25%; }
      .gw-4 { width: 33.33333333%; }
      .gw-5 { width: 41.66666667%; }
      .gw-6 { width: 50%; }
      .gw-7 { width: 58.333333333%; }
      .gw-8 { width: 66.66666667%; }
      .gw-9 { width: 75%; }
      .gw-10 { width: 83.33333333%; }
      .gw-11 { width: 91.66666667%; }
      .gw-12 { width: 100%; }
    }
  }

  table.uninitialized tbody tr {
    display: none !important;
    visibility: collapse !important;
  }

  table.hierarchal {
    --nodewidth: 36px;
    tbody tr {
      td.expander {
        min-width: 0px;
        text-align: center;
        vertical-align: middle;
        padding: 0;
        margin: 0;
        border-left: 0px solid var(--table-grid-color) !important;
        button.expander {
          display: none;
          width: calc(var(--nodewidth) - 8px);
          height: calc(var(--nodewidth) - 8px);
          font-size: 1.4em;
          margin: 4px;
          padding: 0;
          float: left;
          align-items: center;
          justify-content: center;
        }
      }
      &.level-1 td.expander { border-left-width: var(--nodewidth) !important; }
      &.level-2 td.expander { border-left-width: calc(var(--nodewidth) * 2) !important; }
      &.level-3 td.expander { border-left-width: calc(var(--nodewidth) * 3) !important; }
      &.level-4 td.expander { border-left-width: calc(var(--nodewidth) * 4) !important; }
      &.level-5 td.expander { border-left-width: calc(var(--nodewidth) * 5) !important; }
      &.hide-0,
      &.hide-1,
      &.hide-2,
      &.hide-3,
      &.hide-4,
      &.hide-5 {
        display: none !important;
        visibility: collapse !important;
      }
    }
    thead tr th.level-1 { min-width: var(--nodewidth) !important; }
    thead tr th.level-2 { min-width: calc(var(--nodewidth) * 2) !important; }
    thead tr th.level-3 { min-width: calc(var(--nodewidth) * 3) !important; }
    thead tr th.level-4 { min-width: calc(var(--nodewidth) * 4) !important; }
    thead tr th.level-5 { min-width: calc(var(--nodewidth) * 5) !important; }
  }

  table.hierarchal tr.haschild td.expander {
    button.expander {
      display: flex;
      color: var(--btn-sub-text-color);
      background-color: inherit;
      border: 1px solid var(--btn-sub-text-color);
      border: none;
      border-radius: 50%;
      outline-offset: 0px;
      &:hover {
        color: var(--btn-text-color);
        background-color: var(--btn-focus-color);
        border-color: var(--btn-focus-color);
      }
    }
    button.expander.svg {
      --svg: var(--svg-plus);
      &[aria-expanded="true"] {
        --svg: var(--svg-minus);
      }
    }
  }

  div.emptymessage {
    display: flex;
    align-items: center;
    border-top: 1px solid var(--ts-table-border-color);
    border-bottom: 1px solid var(--ts-table-border-color);
    color: #0d76ab;
    background: linear-gradient(90deg, #e7f6fd 2%, white 40%);
    font-family: var(--ff-fs-labels);
    font-weight: bold;
    height: 50px;
    padding-left: 20px;
  }
}