@mixin status-badge($background, $color: white, $width: 5em) {
  color: $color;
  background: $background;
  display: block;
  padding: 0 6px;
  width: $width;
  text-align: center;
  @include border-radius(100px);
}

table.index {
  font-size: 90%;
  margin-bottom: 2em;
  width: 100%;
  border-bottom: 1px solid white;
  th {
    text-align: left;
    background-color: #9e9e9e;
    color: white;
    font-size: 90%;
    font-weight: normal;
    padding: 2px 9px;
    &.actions {
      padding-left: 15px;
      min-width: 18em;
    }
    &.name {
      width: 100%;
    }
    &.status {
      min-width: 8em;
    }
  }
  td {
    text-align: left;
    padding: 4px 9px;
    border-top: 1px solid #f0f0f0;
    a.action, span.action.disabled {
      padding: 6px;
      margin: 0 25px 0 1px;
      img {
        vertical-align: -18%;
      }
    }
    a.action {
      color: black;
      text-decoration: none;
      &:hover {
        background: #d8d8d8;
        @include linear-gradient(color-stops(white, #cccccc));
        border: 1px solid #a5c9df;
        margin: 0 24px 0 0;
        @include border-radius;
      }
      &.selected {
        background: #c5e0f5;
        @include linear-gradient(color_stops(#e5f5ff, #c5e0ff));
        border: 1px solid #a5c9df;
        margin: 0 24px 0 0;
        @include border-top-radius;
        @include border-bottom-radius(0);
      }
    }
    span.action.disabled {
      color: #cccccc;
    }
    &.empty {
      color: silver;
      font-size: 85%;
      font-style: italic;
      padding: 3em;
      text-align: center;
    }
    &.name {
      font-size: 115%;
      font-weight: bold;
      img {
        vertical-align: center;
      }
      a {
        color: black;
        text-decoration: none;
        &:hover {
          color: #0066cc;
          text-decoration: underline;
        }
      }
    }
    &.actions {
      font-size: 85%;
      white-space: nowrap;
    }
  }
  tr {
    &:first-child {
      border-top: 1px solid white;
    }
    &.hover, &:hover {
      td {
        border-top: 1px solid #d5f0ff;
        border-bottom: 1px solid #c5dff5;
        background: #c5dff5;
        @include linear-gradient(color_stops(#e5f5ff, #c5dff5));
      }
    }
  }
  thead {
    tr, tr:first-child {
      border-top: none;
    }
  }
}

table.index#pages {
  tr.page {
    &.level_0 td.name {
      font-size: 120%;
      font-weight: bold;
    }
    &.level_1 td.name {
      font-size: 115%;
      font-weight: bold;
    }
    &.level_2 td.name {
      font-size: 115%;
    }
    &.level_3 td.name {
      font-size: 105%;
    }
  }
  td.name {
    font-size: 105%;
    a {
      text-decoration: none;
      .title {
        color: black;
        text-decoration: none;
      }
      &:hover .title {
        color: #0066cc;
        text-decoration: underline;
      }
    }
    .info {
      color: #9eb3bf;
      font-style: italic;
      font-weight: normal;
      font-size: 90%;
    }
  }
  tr.page.virtual td.name a .title {
    color: #9eb3bf;
  }
  td.name {
    .w1 {
      position: relative;
      img.expander {
        left: -25px;
        position: absolute;
        padding: 6px 3px;
      }
    }
  }
  td.status {
    font-size: 80%;
  }
}

.status {
  a {
    @include plain-link;
  }
}

.draft_status {
  @include status-badge(#cc494c);
}

.hidden_status {
  @include status-badge(#9eb3bf);
}

table.index#users {
  td.name {
    padding-top: 8px;
    padding-bottom: 8px;
    img.avatar {
      margin-right: 4px;
      vertical-align: center;
    }
    .login {
      color: #9eb3bf;
      font-size: 90%;
      font-style: italic;
      font-weight: normal;
    }
  }
}