@use 'sass:math';

lf-table {
  // Styles for code, label, and actions
  .label {
    align-content: space-between;
    align-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  .code-label-container {
    flex: 1;
    display: flex;
    align-items: center;
  }
  .code-container {
    flex: 0;
    .code {
      border-top-right-radius: $input-border-radius-sm !important;
      border-bottom-right-radius: $input-border-radius-sm !important;
    }
  }
  .label-container {
    flex: 1;
    &:first-child {
      align-self: flex-end;
      margin-bottom: 0 !important;
    }
  }
  .label-text {
    word-break: break-word;
  }
  .table-actions {
    flex: 0 0 auto;
    margin-left: math.div($spacer, 2);
  }

  .table {
    // Force column sizes to not depend on cell contents and remove unwanted
    // margin
    table-layout: fixed;
    margin-bottom: 0;

    th,
    td {
      @include transition($input-transition);
    }
  }

  .header-table {
    th,
    td {
      background-color: $table-head-bg;
      color: $table-head-color;
      border-top: 0;
    }
  }

  .table-container {
    border: $table-border-width solid $table-border-color;
    border-radius: $border-radius-sm;
    @include transition($input-transition);

    // Styles for table with errors/warnings (colour border and header)
    &.is-invalid {
      border: $table-border-width solid $form-feedback-invalid-color;
      .header-table {
        th,
        td {
          background-color: $form-feedback-invalid-addon-bg;
          border-color: $form-feedback-invalid-color;
          color: $white;
        }
      }
    }
    &.is-warning {
      border: $table-border-width solid $form-feedback-warning-color;
      .header-table {
        th,
        td {
          background-color: $form-feedback-warning-addon-bg;
          border-color: $form-feedback-warning-color;
          color: $white;
        }
      }
    }
  }

  // The header scrolls via events (when the body is scrolled) and should not
  // show a scrollbar
  .scrollable-header {
    overflow: hidden;
  }

  // Remove `border-top` of the first table row
  .body-table {
    th,
    td {
      // Fix Firefox painting background over borders
      background-clip: padding-box;
    }
    tr:first-child {
      th,
      td {
        border-top: 0;
      }
    }
  }

  // Style rows that are selected, have errors, or warnings
  tr[lf-table-row].is-warning > th,
  tr[lf-table-row].is-warning > td {
    background-color: theme-color-level('warning', -10);
  }
  tr[lf-table-row].is-invalid > th,
  tr[lf-table-row].is-invalid > td {
    background-color: theme-color-level('danger', -11);
  }
  tr[lf-table-row].is-selected > th,
  tr[lf-table-row].is-selected > td {
    background-color: theme-color-level('primary', -11.5);
  }

  // Fix styles of selection cell
  .table-cell-select .custom-control {
    display: flex;
    margin: 0 auto;
    .custom-control-label {
      user-select: none; // Used to prevent text selection when using `shift`
      cursor: pointer;
    }
  }

  // Hide labels, help tooltips, and legends from table cell values
  th[lf-table-cell],
  td[lf-table-cell] {
    .lf-value {
      .label,
      lf-help-tooltip,
      .legend {
        display: none;
      }
    }
  }

  // Style cells so that they cannot cause table rows to grow in height
  th[lf-table-cell],
  td[lf-table-cell] {
    position: relative;
    padding: 0;
    // `height` is set in the component according to the specified `rowHeight`
  }
  .table-cell-container {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    padding: $table-cell-padding-sm;
    &::after {
      content: '';
      height: 100%;
      display: inline-block;
      vertical-align: middle;
    }
  }
  .table-cell-inner {
    display: inline-block;
    width: 100%;
    vertical-align: middle;
  }

  // Styles for the "no rows" message
  .no-rows {
    padding: $table-cell-padding;
    text-align: center;
    color: $input-placeholder-color;
  }
}