@import 'base';

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

  button {
    @include _font-size(16px);
    @include _padding(2px, 10px, 2px, 10px);
  }

}

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

  p {
    color: $color-text-secondary;
  }

}

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

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

table,
th,
td {
  border: 2px solid $color-text-secondary;
}

.header-primary {
  th {
    background-color: $color-table-header-primary;
  }
}

.header-secondary {
  width: 500px;

  th {
    background-color: $color-table-header-secondary;

    p {
      color: $color-text-secondary;
      text-align: center;
      vertical-align: top;
    }

    small {
      @include _font-size(12px);
    }

  }
}

.header-tertiary {
  th {
    background-color: $color-background-positive;
  }
}

.data-primary {
  td {
    background-color: $color-background-tint-primary;
  }
}

.data-secondary {
  td {
    background-color: $color-background-tint-secondary;
  }
}

.data-tertiary {
  td {
    background-color: $color-background-tint-tertiary;
  }
}

.data-quaternary {
  td {
    background-color: $color-background-tint-quaternary;
  }
}

.data-quinary {
  td {
    background-color: $color-background-tint-quinary;
  }
}

.secondary-table {
  td {
    background-color: $color-background-secondary;
  }

  th,
  td {
    border: 2px solid $color-background-tint-primary;
  }

}

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

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

.table-footer {

  background-color: $color-background-tint-quinary;

  button {
    @include _margin(0px, 19px, 0px, 19px);
    float: left;
  }

}

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

.status-indicator--off {
  background: $color-button-primary-action-danger;
}

.status-indicator--on {
  background: $color-button-primary-action-positive;
}

.status-indicator--standby {
  background: $color-button-primary-action-setup;
}

.status-indicator--game {
  margin: auto 2 * $spacing auto 0px;
}

.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;
  word-break: break-all;
}

.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 _margin(0px, $spacing, $spacing, 0px);
    @include _padding($spacing, 3 * $spacing, $spacing, 3 * $spacing);
  }
}


.table--move {

  td {
    background-color: $color-background-secondary;
    border: 2px solid $color-background-tint-quaternary;
  }

  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);
  }

}
