@mixin table-styles {
  &.ui-active {
    background-color: lighten($table-border-color, 3);
  }
  &.ui-info {
    background-color: hsla(hue($color-info), saturation($color-info), lightness($color-info), .1);
  }
  &.ui-primary {
    background-color: hsla(hue($color-primary), saturation($color-primary), lightness($color-primary), .1);
  }
  &.ui-warning {
    background-color: hsla(hue($color-warning), saturation($color-warning), lightness($color-warning), .1);
  }
  &.ui-success {
    background-color: hsla(hue($color-success), saturation($color-success), lightness($color-success), .1);
  }
  &.ui-danger {
    background-color: hsla(hue($color-danger), saturation($color-danger), lightness($color-danger), .1);
  }
}

table.ui-table {
  border-spacing: 0;
  //border-collapse: separate;
  //border-collapse: collapse;
  width: 100%;
  min-width: 100%;
  margin-bottom: 1em;
  background-color: #fff;

  > thead {
    > tr {
      @include table-styles;

      > th, > td {
        @include table-styles;
        text-align: left;
        font-weight: 500;
        padding: $table-cell-padding;
        background-color: $table-thead-bg-color;
        border-bottom: 1px solid $table-thead-border-color;

        &:first-child {
          padding-left: $container-horizontal-padding;
        }

        &:last-child {
          padding-right: $container-horizontal-padding;
        }
      }
    }
  }

  > tfoot {
    > tr {
      > th, > td {
        background-color: lighten($table-thead-bg-color, 3);
      }
    }
  }

  > tbody, > tfoot {
    &:first-child {
      > tr:first-child > td, > tr:first-child > th {
        border-top: 1px solid $table-border-color;
      }
    }

    > tr {
      @include table-styles;

      > td {
        font-weight: 400;
        @include table-styles;
        padding: $table-cell-padding;
        border-bottom: 1px solid $table-border-color;

        &:first-child {
          padding-left: $container-horizontal-padding;
        }

        &:last-child {
          padding-right: $container-horizontal-padding;
        }
      }

      > th {
        font-weight: 500;
        text-align: right;
        @include table-styles;
        padding: $table-cell-padding;
        border-bottom: 1px solid $table-border-color;

        &:first-child {
          padding-left: $container-horizontal-padding;
        }

        &:last-child {
          padding-right: $container-horizontal-padding;
        }
      }
    }
  }

  &.ui-table-striped {
    > tbody, > tfoot {
      > tr {
        &:nth-child(2n) {
          background-color: $table-striped-bg-color;
        }
      }
    }
  }

  &.ui-table-hover {
    > tbody, > tfoot {
      > tr {
        &:hover {
          background-color: $table-hover-bg-color;
        }
      }
    }
  }

  &.ui-table-condensed {
    > thead, > tbody, > tfoot {
      > tr {
        > td, > th {
          padding-top: $table-cell-padding / 2;
          padding-bottom: $table-cell-padding / 2;
        }
      }
    }
  }

  &.ui-table-bordered {
    > thead, > tbody, > tfoot {
      &:first-child {
        > tr:first-child {
          border-top-left-radius: 4px;
          border-top-right-radius: 4px;

          > td, > th {
            &:first-child {
              border-top-left-radius: 4px;
            }

            &:last-child {
              border-top-right-radius: 4px;
            }
          }
        }
      }

      &:last-child {
        > tr:last-child {
          > td, > th {
            &:first-child {
              border-bottom-left-radius: 4px;
            }

            &:last-child {
              border-bottom-right-radius: 4px;
            }
          }
        }
      }
    }

    > thead, > tbody, > tfoot {
      &:first-child {
        > tr:first-child {
          > th, > td {
            border-top: 1px solid $table-border-color;
          }
        }
      }
      > tr {
        > td, > th {
          border-left: 1px solid $table-border-color;

          &:last-child {
            border-right: 1px solid $table-border-color;
          }
        }
      }
    }
  }
}