// Parameters

// text
@text-size: 14px;
@text-font: sans-serif;
@text-color: black;
@text-color-dark: #939caa;

// background
@background-color: #fff - @text-color;
@background-color-dark: #31363f;

// border
@border: (@text-size / 14) solid #fff;
@border-color: #191a1f;

/* Base Styles */

.solid-simple-table {
  border: @border;
  text-align: left;
  border-collapse: collapse;

  th,
  td {
    padding: @text-size * 0.7;
  }

  th {
    border-right: @border;
    border-bottom: @border;

    &:last-child {
      border-right: none;
    }

    &.sortable {
      cursor: pointer;
      // do not select text on clicks
      user-select: none;
    }

    .header {
      display: inline-flex;
      align-self: flex-start;
      float: left;
    }

    .sort-icon {
      width: @text-size;

      float: right;
      margin-left: @text-size;
      display: inline-flex;
      align-self: flex-end;
      visibility: hidden;
    }

    &:hover .sort-icon {
      visibility: visible;
    }
  }

  /* Fonts */
  &.typography {
    font-family: @text-font;
    font-size: @text-size;
  }

  /* Light Theme */
  &.light {
    color: @text-color;
    border-color: @border-color;

    thead {
      background-color: darken(@background-color, 10%);
    }

    th {
      border-right-color: @border-color;
      border-bottom-color: @border-color;
    }

    tbody {
      background-color: @background-color;
    }
  }

  /* Dark Theme */
  &.dark {
    color: @text-color-dark;
    border-color: @border-color;

    thead {
      background-color: darken(@background-color-dark, 2%);
    }

    th {
      border-right-color: @border-color;
      border-bottom-color: @border-color;
    }

    tbody {
      background-color: @background-color-dark;
    }
  }
}
