// Variables

@colorRed: #fa3031;
@colorPurple: #932ab6;
@colorGreen: #43c83c;
@colorBlue: #1171a3;
@colorLightBlue: #52b9e9;
@colorGrey: #444;
@colorLightest: #efefef;
@colorStriping: #F7F7F7;
@colorLight: #eee;
@colorLightGrey: #ddd;
@colorBlack: #000;
@colorWhite: #fff;
@fontDefault: "Open Sans", Arial, Helvetica, sans-serif;


// Mixins

.metroTheme(@color) {
  border-color: @color;

  > tfoot > tr,
  > thead > tr {
    > th,
    > td {
      background-color: @color;
      border-color: @color;
    }
  }
}

.borderRadius(@radius) {
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
  border-radius: @radius;
}


// Classes

.footable {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  border: 3px solid @colorLightBlue;
  font-family: @fontDefault;
  color: @colorGrey;
  background: @colorLightest;
  .borderRadius(0);

  &.breakpoint > tbody > tr {
    &.footable-row-detail {
        background: @colorLight;
    }

    &:hover:not(.footable-row-detail) {
      cursor: pointer;
    }

    > td.footable-row-detail-cell {
      background:#fff;
    }
  }

  > tbody {
    img {
      vertical-align: middle;
    }

    > tr {
      &:hover:not(.footable-row-detail) {
        background: @colorLightGrey;

        > td {
          color: @colorBlack;
        }
      }

      &:last-child > td {
          border-bottom: none;
      }

      > td {
        border-top: 1px solid @colorLightGrey;
        padding: 10px;
        text-align: left;
        border-left: none;

        &.footable-row-detail-cell,
        &.footable-first-column {
          border-left: none;
        }
      }
    }
  }

  > thead > tr {
    > th {
      border-bottom: 1px solid @colorLightGrey;
      padding: 10px;
      text-align: left;
    }

    > th,
    > td {
      background-color: @colorLightBlue;
      border: 1px solid @colorLightBlue;
      color: @colorWhite;
      border-top: none;
      border-left: none;
      font-weight: normal;

      &.footable-first-column {
        border-left: none;
      }
    }
  }

  > tfoot {
    > tr {
      > th,
      > td {
        background-color: @colorLightBlue;
        border: 1px solid @colorLightBlue;
        color: @colorWhite;
        border-top: none;
        border-left: none;
        padding: 5px;
      }
    }
  }

  // PAGINATION
  > tfoot .pagination {
    text-align: center;
    ul {
      display: inline-block;
      -webkit-box-shadow: none;
      -moz-box-shadow: none;
      box-shadow: none;
      vertical-align: middle;
      margin: 0;
      padding: 0;
      > li {
        display: inline;
        > a,
        > span{
          float: left;
          border: 2px solid transparent;
          margin: 0 3px;
          color: @colorWhite;
          background: transparent;
          padding:1px 5px;
          text-decoration: none;
        }

        &.disabled > a {
          color:#888;
        }

        &.active > a {
          border-color: @colorWhite;
        }

        &:first-child,
        &:last-child {
          > a,
          > span {
            .borderRadius(0);
          }
        }
      }
    }
  }

  //Metro Themes

  &.metro-red {
    .metroTheme(@colorRed);
  }
  &.metro-purple {
    .metroTheme(@colorPurple);
  }
  &.metro-green {
    .metroTheme(@colorGreen);
  }
  &.metro-blue {
    .metroTheme(@colorBlue);
  }
}

.footable-odd{
	background-color: @colorStriping;
}