/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this file,
 * You can obtain one at http://mozilla.org/MPL/2.0/. */

@import "variables.less";

table.sort {
  th {
    color: @buttonColor;

    &:hover {
      color: #000;
    }
  }
}

table.sortableTable {
  width: 100%;
  margin-bottom: 40px;
  cursor: default;
  border-spacing: 0;

  tr {
    height: 1.7em;
    padding: 5px 20px;

    th {
      background: linear-gradient(to bottom, @lightGray, @veryLightGray);
      border-top: 1px solid @gray;
      text-align: left;
      font-weight: 300;
      padding: 8px;
      box-sizing: border-box;

      .th-inner {
        display: inline-block;
        -webkit-user-select: none;
      }

      &:after {
        font-family: FontAwesome;
        font-size: 8pt;
        margin-top: 3px;
        margin-right: 3px;
        float: right;
      }

      &.sort-up:after {
        content: "\f077";
      }

      &.sort-down:after {
        content: "\f078";
      }
    }
    th + th {
      border-left: 1px solid @braveOrange;
    }

    td {
      color: @mediumGray;
      -webkit-font-smoothing: antialiased;
      width: auto;

      &:nth-of-type(2) {
        width: 60%;
      }

      input[type='range'] {
        background: transparent;
        -webkit-appearance: none;
        width: 90%;
        margin: 0 0 0 20%;
        outline: none;

        &::-webkit-slider-runnable-track {
          -webkit-appearance: none;
          background: @gray25;
          border-radius: 1000px;
          height: 1em;
        }

        &::-webkit-slider-thumb {
          -webkit-appearance: none;
          background: linear-gradient(to bottom, @braveOrange, @braveDarkOrange);
          width: 1em;
          height: 1em;
          border-radius: 50%;
          box-shadow: 0 0 6px @black25;
        }
      }
    }
  }
  tr.rowHover:hover {
    background: @lightGray;
    &.selected {
      background: @braveOrange;
      td {
        color: white;
      }
      div {
        color: white;
      }
    }
  }
  tr.selected {
    background-color: lighten(@gray, 20%);
    td {
      color: @buttonColor;
    }
    div {
      color: @buttonColor;
    }
  }

  &:not(.sort) {
    th.sort-up:after {
      content: '';
    }

    th.sort-down:after {
      content: '';
    }
  }
}