.table {

width: 100%;
max-width: 100%;
border-spacing: 0;
border-collapse: collapse;

th,
td {
  padding: 8px;
  line-height: 18px;
  vertical-align: top;
  border-top: 1px solid $ui-base-color;
  text-align: left;
  background: darken($ui-base-color, 4%);
}

& > thead > tr > th {
  vertical-align: bottom;
  border-bottom: 2px solid $ui-base-color;
  border-top: 0;
  font-weight: 500;
}

& > tbody > tr > th {
  font-weight: 500;
}

& > tbody > tr:nth-child(odd) > td,
& > tbody > tr:nth-child(odd) > th {
  background: $ui-base-color;
}

a {
  color: $highlight-text-color;
  text-decoration: underline;

  &:hover {
    text-decoration: none;
  }
}

strong {
  font-weight: 500;

  @each $lang in $cjk-langs {
    &:lang(#{$lang}) {
      font-weight: 700;
    }
  }
}

&.inline-table {
  & > tbody > tr:nth-child(odd) {
    & > td,
    & > th {
      background: transparent;
    }
  }

  & > tbody > tr:first-child {
    & > td,
    & > th {
      border-top: 0;
    }
  }
}

&.batch-table {
  & > thead > tr > th {
    background: $ui-base-color;
    border-top: 1px solid darken($ui-base-color, 8%);
    border-bottom: 1px solid darken($ui-base-color, 8%);

    &:first-child {
      border-radius: 4px 0 0;
      border-left: 1px solid darken($ui-base-color, 8%);
    }

    &:last-child {
      border-radius: 0 4px 0 0;
      border-right: 1px solid darken($ui-base-color, 8%);
    }
  }
}

&--invites tbody td {
  vertical-align: middle;
}

}

.table-wrapper {

overflow: auto;
margin-bottom: 20px;

}

samp {

font-family: $font-monospace, monospace;

}

button.table-action-link {

background: transparent;
border: 0;
font: inherit;

}

button.table-action-link, a.table-action-link {

text-decoration: none;
display: inline-block;
margin-right: 5px;
padding: 0 10px;
color: $darker-text-color;
font-weight: 500;

&:hover {
  color: $primary-text-color;
}

i.fa {
  font-weight: 400;
  margin-right: 5px;
}

&:first-child {
  padding-left: 0;
}

}

.batch-table {

&__toolbar,
&__row {
  display: flex;

  &__select {
    box-sizing: border-box;
    padding: 8px 16px;
    cursor: pointer;
    min-height: 100%;

    input {
      margin-top: 8px;
    }

    &--aligned {
      display: flex;
      align-items: center;

      input {
        margin-top: 0;
      }
    }
  }

  &__actions,
  &__content {
    padding: 8px 0;
    padding-right: 16px;
    flex: 1 1 auto;
  }
}

&__toolbar {
  border: 1px solid darken($ui-base-color, 8%);
  background: $ui-base-color;
  border-radius: 4px 0 0;
  height: 47px;
  align-items: center;

  &__actions {
    text-align: right;
    padding-right: 16px - 5px;
  }
}

&__form {
  padding: 16px;
  border: 1px solid darken($ui-base-color, 8%);
  border-top: 0;
  background: $ui-base-color;

  .fields-row {
    padding-top: 0;
    margin-bottom: 0;
  }
}

&__row {
  border: 1px solid darken($ui-base-color, 8%);
  border-top: 0;
  background: darken($ui-base-color, 4%);

  @media screen and (max-width: $no-gap-breakpoint) {
    .optional &:first-child {
      border-top: 1px solid darken($ui-base-color, 8%);
    }
  }

  &:hover {
    background: darken($ui-base-color, 2%);
  }

  &:nth-child(even) {
    background: $ui-base-color;

    &:hover {
      background: lighten($ui-base-color, 2%);
    }
  }

  &__content {
    padding-top: 12px;
    padding-bottom: 16px;

    &--unpadded {
      padding: 0;
    }

    &--with-image {
      display: flex;
      align-items: center;
    }

    &__image {
      flex: 0 0 auto;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 10px;

      .emojione {
        width: 32px;
        height: 32px;
      }
    }

    &__text {
      flex: 1 1 auto;
    }

    &__extra {
      flex: 0 0 auto;
      text-align: right;
      color: $darker-text-color;
      font-weight: 500;
    }
  }

  .directory__tag {
    margin: 0;
    width: 100%;

    a {
      background: transparent;
      border-radius: 0;
    }
  }
}

&.optional .batch-table__toolbar,
&.optional .batch-table__row__select {
  @media screen and (max-width: $no-gap-breakpoint) {
    display: none;
  }
}

.status__content {
  padding-top: 0;

  summary {
    display: list-item;
  }

  strong {
    font-weight: 700;
  }
}

.nothing-here {
  border: 1px solid darken($ui-base-color, 8%);
  border-top: 0;
  box-shadow: none;

  @media screen and (max-width: $no-gap-breakpoint) {
    border-top: 1px solid darken($ui-base-color, 8%);
  }
}

@media screen and (max-width: 870px) {
  .accounts-table tbody td.optional {
    display: none;
  }
}

}