@import '../common/narrow-window';

body[kui-theme-style] {
  .bx--select--inline .bx--select-input {
    fill: var(--color-text-01);
  }
  .bx--select__arrow {
    fill: var(--color-text-01);
  }
}

body .bx--data-table-container {
  min-width: unset;

  .bx--data-table-header {
    background-color: var(--color-stripe-01);

    .bx--data-table-header__title {
      color: var(--color-text-02);
    }
  }

  .bx--data-table {
    font-family: var(--font-sans-serif);

    &,
    thead,
    tbody {
      font-size: 1rem;
    }

    /* td [data-key='NAME'],
    td .kui--table-cell-is-name {
      font-weight: 700;
    } */

    tbody,
    td {
      background-color: transparent; /* var(--color-ui-02) */
    }

    tbody tr:hover,
    tbody tr.bx--data-table--selected:hover {
      &,
      td {
        background-color: var(--color-ui-03);
        color: var(--color-text-01);
        border-color: var(--color-table-border1);
      }
    }

    th,
    .bx--table-sort {
      vertical-align: middle; /* why do we need this? (we do, currently) */
    }

    .bx--table-sort {
      padding: 0;
    }

    td,
    th,
    .bx--table-sort {
      color: var(--color-text-01);
    }

    .bx--table-sort__icon {
      fill: var(--color-text-02);
    }
    .bx--table-sort__icon-unsorted {
      fill: var(--color-text-01);
    }
  }
}

body .bx--data-table {
  th {
    /* font-weight: 300; */
    vertical-align: middle;
  }

  th,
  .bx--table-sort {
    background-color: var(--color-base03);
  }

  thead {
    background-color: transparent;
  }

  td {
    border-top-color: var(--color-table-border1);
    border-bottom-color: var(--color-table-border3);
  }

  tr:hover,
  tbody tr:hover td,
  tbody tr.bx--data-table--selected:hover,
  tbody tr.bx--data-table--selected:hover td {
    background-color: transparent;
  }
}

@mixin full-width-tables {
  .kui--data-table-wrapper:not(.kui--data-table-as-grid) {
    /* render tables full-width when sidecar is open https://github.com/IBM/kui/issues/3952 */
    flex: 1;
  }
  .kui--paginated-table {
    flex: 1;
  }

  .repl-result {
    width: 100%;

    [data-table-watching] {
      width: 100%;
    }
    .bx--data-table-container {
      width: 100%;
      .bx--data-table {
        width: 100%;

        td.entity-name,
        td.kui--entity-name-secondary {
          width: 100%;
          max-width: 0;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }

        .hide-with-sidecar {
          display: none;
        }
      }
    }
  }
}

body[kui-theme-style] .repl.sidecar-visible {
  @include full-width-tables;
}
@include narrow-window {
  @include full-width-tables;
}

body[kui-theme-style] .kui--data-table-wrapper {
  overflow-x: auto;

  .kui--card-header {
    padding-top: 0;
    padding-bottom: 0;
  }
  .kui--card-footer {
    border-top: 1px solid var(--color-base03);
    padding-top: calc(var(--pf-c-card--child--PaddingBottom) / 4);
    padding-bottom: calc(var(--pf-c-card--child--PaddingBottom) / 4);
  }
  &:not(.kui--data-table-as-grid) {
    .kui--card-body {
      padding-top: 0;
      padding-left: 0;
      padding-right: 0;
      padding-bottom: 0;

      .bx--data-table-container {
        padding-top: 0;
      }
    }
  }
}

.kui--paginated-table {
  display: flex;
  flex-direction: column;
}
