// Tables

.table {
    thead, tfoot {
        background-color: @gray-lightest;
    }

    thead > tr {
        font-weight: bold;
    }

    thead td {
        border-top: none;
        padding: 1em 0.5em;
    }

    tfoot {
        border-top: 1px solid @gray-light;
    }

    tfoot td {
        border: none;
    }

    .fas, .far, .fal, .fab {
        line-height: 1.2;
    }


    &-highlight {
        &--last {
            tr:last-child {
                font-weight: bold;

                td, th {
                    border-top-color: @font-color;
                }
            }
        }
    }

    &--small {
        @media (min-width: @reflex-md) {
            width: 50%;
        }

        @media (min-width: @reflex-lg) {
            width: 45%;
        }

        @media (min-width: @reflex-xlg) {
            width: 40%;
        }
    }
}

.table--orderlines td {
    vertical-align: middle;
}

.table--clean {
    margin: 0;

    th, td {
        border: none;
    }
}

.table--bordered {
  th,
  td {
    border: .05rem solid @gray-light;
  }
}

.table--striped {
  tbody > tr:nth-child(even) > td {
    background-color: @gray-lightest;
  }
  tbody > tr:nth-child(odd) > td {
    background-color: @gray-lighter;
  }
}

.table--hover {
  tbody tr {
     &:hover {
      background-color: @gray-lighter  ;
    }
  }
}

.table--compact {
  table-layout: fixed;

  thead > tr {
    border-bottom: .2rem solid @gray-light;
  }
  th,
  td {
    padding: .3rem;
  }
}

.table--condensed {

    th, td {
        padding: 10px 0;

        &:not([colspan]):last-child {
            text-align: right;
        }
    }

    input {
        margin: 0;
    }
}

.table--no-top-border tr:first-child td {
    border-top: 0;
}

.table__row--no-border {
    border: none;

    td {
        border: none;
    }
}

.table__section-header {
    height: 40px;
    vertical-align: bottom;
    font-weight: bold;
}

.table__row--border {
    border: .05rem solid @gray-light;
}

.table__row--top-line {
    border-top: .05rem solid @gray-light;
}

.table__row--bottom-line {
    border-bottom: .05rem solid @gray-light;
}

.table__row--solid {
    background-color: @gray-lightest;
}

// responsive table container
.table-responsive {
  overflow-x: auto;
  width: 100%;

  table {
    margin-bottom: .5rem;
  }
}