@import "base";

table {
  margin: 20px auto 20px auto;
  width: 100%;

  button {
    @include _font-size(14px);
    @include _padding(2px, 10px, 2px, 10px);
    min-width: 70px;
  }

  select {
    margin: 0;
  }
}

th {
  @include _padding(5px, 10px, 5px, 10px);
  font-weight: 500;
  color: $color-text-secondary;

  p {
    @include _padding(10px, 0px, 10px, 0px);
  }
}

td {
  @include _padding(10px, 10px, 10px, 10px);

  p {
    @include _padding(0px, 0px, 0px, 0px);
    vertical-align: middle;
  }
}

// Allows for tables with borders everywhere except the edges (aligns table to container)
table {
  border-collapse: collapse;
}

td + td,
th + th {
  border-left: 2px solid $color-background-secondary;
}

.header-primary {
  th:not(.no-bg) {
    background-color: $color-table-header-primary;
  }
}

.data-primary {
  td:not(.no-bg) {
    background-color: $color-background-tint-primary;
  }

  tr + tr {
    border-top: 2px solid $color-background-secondary;
  }
}

.header-secondary {
  th:not(.no-bg) {
    background-color: $color-table-header-secondary;
  }
}

.or-circle {
  @include _font-size(14px);
  background-color: $color-primary;
  border-radius: 50%;
  color: $color-text-secondary;
  font-weight: 600;
  line-height: 40px;
  width: 40px;
  height: 40px;
  margin: 4px;
  text-align: center;
}

.cell-center {
  text-align: center;
}

.cell-left {
  text-align: start;
}


.status-indicator {
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: block;
  height: 10px;
  margin: auto;
  width: 10px;
}

.student-table {
  a[class^="button"] {
    padding: auto;
  }

  input {
    @include _margin(0px, 5px, 0px, 0px);
  }
}

.student-table__header {
  * {
    padding: 0;
  }

  .student-table__cell {
    align-items: center;
    display: flex;
    justify-content: center;
  }
}

.student-table__cell {
  align-items: center;
  display: flex;
  justify-content: space-between;
}

.games-table {
  table-layout: fixed;
  text-align: start;

  input[type="checkbox"] {
    height: 15px;
    width: 15px;
  }
}

.games-table__header {
  * {
    padding: auto;
  }
}

.games-table__cell {
  display: flex;
  justify-content: flex-start;
}

.games-table__buttons {
  display: flex;
  justify-content: center;
  text-align: center;

  .button--small {
    @include _padding($spacing, 3 * $spacing, $spacing, 3 * $spacing);
  }
}

.table--move {
  td {
    background-color: $color-background-secondary;
    border: 2px solid $color-background-tint-primary;
  }

  input {
    font-style: italic;
  }
}

.resource {
  @include _margin(40px, 0px, 40px, 0px);
  text-align: left;

  .resource__title {
    @include _margin(30px, 0px, 10px, 0px);
  }
}

@media (max-width: $mobile-max-width) {
  .games-table {
    width: 100%;
    word-break: keep-all;
  }

  .games-table__buttons {
    flex-direction: column;
  }

  .games-table__cell {
    width: auto;
  }

  .games-table__header {
    @include _font-size(14px);
  }
}
