/* Copyright (c) Fortanix, Inc.
|* This Source Code Form is subject to the terms of the Mozilla Public License, v. 2.0. If a copy of
|* the MPL was not distributed with this file, You can obtain one at http://mozilla.org/MPL/2.0/. */

@use '../../../../styling/defs.scss' as bk;


@layer baklava.components {
  .bk-data-table {
    @include bk.component-base(bk-data-table);
    overflow: visible;
    
    --bk-datatable-background: #{bk.$theme-card-background-default};
    
    inline-size: 100%;
    
    .bk-data-table__footer {
      margin: bk.$spacing-5 0 bk.$spacing-5 0;
    }
    
    .bk-data-table-container {
      // If we are inside of a panel, stretch the table to the edges
      margin-inline: calc(-1 * var(--bk-panel-inset-compensation));
      
      &.bk-data-table-container--scrolled-left {
        table.bk-data-table__table {
          thead, tbody {
            th, td {
              &.column-sticky--right {
                &::after {
                  content: '';
                  position: absolute;
                  inset-block: 0;
                  inset-block-end: 0;
                  inset-inline-start: 0;
                  inline-size: 4px;
                  background: linear-gradient(to right, rgb(0 0 0 / 15%), transparent);
                  pointer-events: none;
                }
              }
            }
          }
        }
      }
      
      &.bk-data-table-container--scrolled-right {
        table.bk-data-table__table {
          thead, tbody {
            th, td {
              &.column-sticky--left {
                &::after {
                  content: '';
                  position: absolute;
                  inset-block: 0;
                  inset-block-end: 0;
                  inset-inline-end: 0;
                  inline-size: 4px;
                  background: linear-gradient(to right, rgb(0 0 0 / 15%), transparent);
                  pointer-events: none;
                }
              }
            }
          }
        }
      }
    }
    
    table.bk-data-table__table {
      inline-size: 100%;
      table-layout: fixed;
      border-collapse: collapse;
      background-color: var(--bk-datatable-background);
      
      :is(td, th) > * {
        // Reset the inset compensation for any nested data tables
        --bk-panel-inset-compensation: 0;
      }
      
      th {
        padding: bk.$spacing-3 calc(bk.$spacing-2 + var(--bk-panel-inset-compensation));
        vertical-align: middle;
        white-space: nowrap; // Header should never wrap to multiple lines
        text-overflow: ellipsis;
        overflow: hidden; // Hide overflow by default; may need to override this for things like local dropdown menus
      }
      
      td {
        // Align all table cells to the top, to prevent one large item in a cell from shifting all the other content
        // down.
        vertical-align: top;
        
        overflow: hidden;
        padding: bk.$spacing-3 calc(bk.$spacing-2 + var(--bk-panel-inset-compensation));
        
        // Note: need a wrapper div for this because setting a different `display` on a `<td>` will break the table
        .bk-data-table__text-cell {
          // Note: for `<TextLine>` to work as a child of this element, we need `display: flex` and `overflow: hidden`
          overflow: hidden;
          
          min-block-size: 1lh;
          padding: 1px; // Add a 1px padding, as a workaround for browser rounding issues (see also #358 on GitHub)
          
          display: flex;
          align-items: center;
          
          > * {
            min-inline-size: 0;
          }
        }
      }
      
      thead, tbody {
        th, td {
          &.column-sticky {
            position: sticky;
            z-index: 1;
            background-color: var(--bk-datatable-background);
            // For sticky cells we need a solid colour as background,
            // otherwise during scroll the content scrolled behind sticky cell will appear as overlapping
          }
          
          &.column-sticky--left {
            inset-inline-start: 0;
          }
          
          &.column-sticky--right {
            inset-inline-end: 0;
          }
        }
        
        tr:hover td.column-sticky,
        tr.selected td.column-sticky {
          background-color: bk.$theme-table-background-hover; // handle hover/selected background
        }
      }
      
      thead {
        border-block-end: 1px solid bk.$theme-rule-default;
        
        th {
          cursor: default;
          padding-block-end: 1rem;
          
          color: bk.$theme-table-text-body-secondry;
          font-weight: bk.$font-weight-semibold;
          font-size: bk.$font-size-s;
          text-transform: uppercase;
          
          .column-header {
            display: flex;
            align-items: center;
            gap: bk.$spacing-1;
            
            .sort-indicator {
              inline-size: bk.$spacing-4;
              
              &.sort-indicator--inactive {
                opacity: 0.5;
              }
              
              transition: transform 240ms ease-in-out,
              opacity 120ms ease-in-out;
              
              &.asc {
                transform: rotateX(180deg); // Rotate along the X-axis (i.e. it flips up-down)
              }
            }
            
            &:hover {
              .sort-indicator--inactive {
                opacity: 1;
              }
            }
          }
        }
      }
      
      tbody {
        tr:not(.bk-data-table__placeholder) {
          border-block-end: 1px solid bk.$theme-rule-default;
          
          &:hover,
          &.selected {
            background-color: bk.$theme-table-background-hover;
          }
        }
      }
      
      tfoot {
        td {
          overflow: visible; // Allow overflow due to dropdown menu
        }
      }
    }
  }

  @media only screen and (width <=1100px) {
    table.bk-data-table {
      display: flex;
      flex-direction: column;
      
      // Common styling for both `thead tr` and `tbody tr`
      tr {
        padding: 0.6rem 0;
        
        display: flex;
        flex-direction: column;
        white-space: normal;
        
        > td,
        > th {
          padding: 0.6rem 0;
          
          display: flex;
          flex-direction: row;
        }
      }
      
      thead {
        border-block-end: none;
        
        display: flex;
        flex-direction: column;
      }
      
      tbody {
        display: flex;
        flex-direction: column;
        
        tr:not(.bk-data-table__placeholder) {
          margin: 1.5rem 0;
          padding: 1.5rem;
          
          &:not(:last-of-type) {
            border-block-end: none;
          }
          
          > td:empty {
            display: none;
          }
        }
      }
    }
  }
}
