@import 'ui-variables';

@row-highlight-color: #e3effc;
@row-highlight-text-color: #3a6fa7;
@row-highlight-border-color: #c9dcf0;

.nylas-table {
  height: 100%;
  width: 100%;
  overflow-y: hidden;
  overflow-x: scroll;

  thead, tbody {
    display: block;
  }

  .table-row {

    .table-cell {
      border: 1px solid lighten(@border-color-secondary, 5%);
      color: @text-color-very-subtle;

      &>div {
        min-height: 20px;
        min-width: 100px;
      }

      input {
        color: inherit;
        border: none;
        &:focus {
          border: none;
          outline: none;
          box-shadow: none;
        }
      }

      &.selected {
        // TODO
      }

      &.numbered-cell {
        width: 20px;
        min-width: 20px;
        text-align: center;
      }
    }

    &.selected {
      background: @row-highlight-color;

      .table-cell {
        color: @row-highlight-text-color;
        border: 1px double @row-highlight-border-color;
        input {
          color: @row-highlight-text-color;
        }
      }
    }
  }

}