.table-container {
  max-width: 100%;
  overflow-x: auto;
}

.v-data-table {
  &.width-auto {
    table {
      width: auto;
    }
  }

  .v-data-table__mobile-row {
    min-height: 32px;

    &:first-child {
      background-color: $color-table-header-bg;
      color: #fff;
    }
  }
}

.v-data-table-header-mobile {
  th {
    background-color: #fff;
  }
}

table {
  margin-bottom: 2rem;
  border-collapse: collapse;

  a {
    text-decoration: none;
  }

  thead {
    font-family: 'Oswald', sans-serif;
  }

  tr {

  }

  th {
    font-weight: 400;
  }

  th, td {
    padding: 6px 12px;
    border-bottom: none !important;
  }
}

.theme--light {
  thead {
    background-color: $color-table-header-bg;
    color: #fff;

    tr {
      th {
        color: #fff !important;
        i {
          color: #fff !important;
        }
      }
    }
  }
  tbody {
    tr {
      &:nth-of-type(even) {
        background-color: darken($color-background, 5);
      }
      &:nth-of-type(odd):hover {
        background-color: inherit !important;
      }
      td {
      }
    }
  }

  .v-data-table__wrapper {
    >table {
      >tbody {
        tr {
          background-color: #fff;
          &:hover {
            background-color: #eee !important;
            &.v-data-table__expanded__content {
              background-color: #fff !important;
            }
          }
          td {
            thead {

              tr {
                background-color: $color-table-header-bg;
                color: #fff;
                &:hover {
                  background-color: $color-table-header-bg !important;
                }
                th {
                  color: #fff !important;
                  i {
                    color: #fff !important;
                  }
                }
              }
            }
            tbody {
              tr {
                &:nth-of-type(even) {
                  background-color: $color-light-gray;
                }
                &:nth-of-type(odd):hover {
                  background-color: inherit !important;
                }
                td {
                }
              }
            }
          }
        }
      }
    }
  }
}

.theme--dark {
  thead {
    background-color: darken($color-gray, 30);
  }
  tbody {
    tr {
      &:nth-of-type(even) {
        background-color: darken($color-gray, 30);
      }
      &:nth-of-type(odd):hover {
        background-color: inherit !important;
      }
      td {
      }
    }
  }
}

.group-header {
  background-color: $color-dragon;
  color: #fff;
}
