//
// Tables
// --------------------------------------------------

.table {
  font-size: floor(@component-font-size-base * 1.067); // 16px
  
  // Cells
  > thead,
  > tbody,
  > tfoot {
    > tr {
      > th,
      > td {
        padding: 9px 25px;
        line-height: 1.231; // ~19.7px
        border-top: 2px solid @table-border-color;
      }
      > th {
		    color: mix(@brand-primary, white, 85%);
		    border-bottom: 2px solid @table-border-color;
		  }
    }
  }
  [class*="fui-"] {
    vertical-align: baseline;
    font-size: 20px;
    margin: -5px 0;
    position: relative;
    top: 2px;
  }
  .checkbox,
  .radio {
  	margin: 0 0 0 -9px;

    &.no-label {
      padding-left: 0;
    }
  }
  .selected-row {
    > td {
      background-color: mix(@brand-secondary, white, 5.5%);
    }
  }
  img { vertical-align: top; }
}

// Bordered table
.table-bordered {
  border: 2px solid @table-border-color;
  font-size: ceil(@component-font-size-base * 0.933); // ~14px
	
	> thead,
  > tbody,
  > tfoot {
    > tr {
      th,
		  td {
		    border: 2px solid @table-border-color !important;
		    padding-top: 8px;
		    padding-bottom: 8px;
		    vertical-align: middle;
		  }
    }
  }  
}

// Stripped
.table-striped {
  > tbody {
    > tr {
      &:nth-child(even),
      &.selected-row {
        > td,
        > th {
          background-color: @table-bg-active;
        }
      }
      &:nth-child(odd) {
        > td,
        > th {
          background-color: transparent;
        }
      }
    }
  }
}

// Hovered table
.table-hover {
  > tbody {
    > tr:hover {
	    > td,
	    > th {
		    background-color: @table-bg-active;
	    }
    }
  }
}

// Table backgrounds
.table tbody tr {
  &.success > td,
  & > td.success {
    background-color: @table-success;
    border-color: mix(@brand-success, white, 20%);
  }
  &.error > td,
  & > td.error,
  &.danger > td,
  & > td.danger {
    background-color: @table-danger;
    border-color: mix(@brand-danger, white, 20%);
  }
  &.warning > td,
  & > td.warning {
    background-color: @table-warning;
    border-color: mix(@brand-warning, white, 33%);
  }
  &.info > td,
  & > td.info {
    background-color: @table-info;
    border-color: mix(@brand-info, white, 20%);
  }
}

// Hover states for .table-hover
.table-hover tbody tr {
  &.success:hover > td {
    background-color: darken(@table-success, 2%);
  }
  &.error:hover > td,
  &.danger:hover > td {
    background-color: darken(@table-danger, 1%);
  }
  &.warning:hover > td {
    background-color: darken(@table-warning, 2%);
  }
  &.info:hover > td {
    background-color: darken(@table-info, 1%);
  }
}