/***********************************************
         Invenio App RDM Table Overrides
***********************************************/

.ui.table {

  &.files {
    border: 0;

    th.hidden {
      color: transparent;
      user-select: none;
    }
  }

  td.file-upload-pending {
    text-align: center;
  }


  .ui.primary.medium.file-upload-progress {
    &.progress,
    &.success {
      &.active,
      &.disabled {
        margin-bottom: 0;

        &.error {
          margin-bottom: 0;
        }
      }
    }
  }

  @media all and (max-width: @largestTabletScreen) {
    &:not(.unstackable) {

      thead {
        display: none !important; // Responsive: header is hidden and data-label is aligned with the table data.
      }

      tbody {

        tr {
          padding-top: 0;
          padding-bottom: 0;
          box-shadow: none !important; // overriding !important on .ui.table:not(.unstackable) tr

          &:not(:first-child) {
            border-top: 1px solid @borderColor;
          }

          td {
            border-top: 0px;
            width: 100% !important;
            padding: 1rem !important; // overriding !important on .ui.table:not(.unstackable) tr > td

            &:nth-child(2n+1) {
              background-color: lighten(@borderColor, 75%);
            }

            &.right.aligned {
              &[data-label]::before {
                text-align: left;
              }
            }
            &:not(.right.aligned) {
              text-align: left;
            }

            &[data-label]  {
              display: inline-grid !important;
              grid-template-columns: [col1-start] 30% [col2-start] 70% [end];

              &:before {
                content: attr(data-label);
                font-weight: bold;
                margin-right: 1rem;
                width: inherit;
              }

              .ui.fitted.checkbox {
                padding-top: .2rem;
              }
            }

            &.file-upload-pending {
              width: 100%;
            }
          }
        }
      }

      tbody,
      tr,
      tr > th,
      tr > td {
        width: auto;
        display: block;
      }
    }
  }
}

#record-statistics.ui.table {
  .popup-trigger {
    position: relative;

    &.compact-number {
      border-bottom: 1px dotted rgba(0,0,0,0.1);
      width: max-content;
    }
  }
}

@media all and (min-width: @computerBreakpoint) {
  table.fixed-header{
    height: 45vh;              // <-- Select the height of the table
    display: block;
    width: 100% !important;
    tbody{
      overflow-y: scroll;
      height: 40vh;            //  <-- Select the height of the body
      width: 100%;
      position: absolute;
      tr {
        width: calc(100% - 2em);
        display: inline-table;
        table-layout: fixed;
      }
  }

  thead {
    tr {
          width: 100%;
          display: inline-table;
          table-layout: fixed;
        }
  }
  }
}
