@include nested(12) {
  .admin-page {
    @include span(12);
    padding-bottom: 7.5rem;

    .usa-content {
      p:not(.usa-font-lead),
      ul,
      ol {
        max-width: 60rem;
      }
    }

    h3 {
      font-size: 2.4rem;
    }

    hr {
      margin: 2.5rem 0;
    }

    .form-spaced-div {
      margin-top: 40px;
    }

    // angular-data-grid styling
    .table {
      margin: 1rem 0;

      .certificate-type:after {
        content: '\A';
        white-space: pre;
      }

      thead > tr > th {
        vertical-align: middle;
      }
    }

    .admin-table-block {
      margin-bottom: 2rem;
    }

    .pages-list {
      padding-top: 2rem;
    }

    .pagination {
      margin: 0;
      padding: 0;

      li {
        position: relative;
        display: inline-block;
        list-style-type: none;
        margin: 0 2px 0 0;
        line-height: 1;

        a {
          display: block;
          position: relative;
          color: white;
          background-color: $color-primary;
          padding: 1rem 1.5rem;
          text-decoration: none;
          border: 1px solid $color-primary;

          &:hover {
            background-color: $color-primary-darkest;
          }
        }

        &.active {
          a {
            color: $text-color;
            border: 1px solid #aeb0b5;
            background-color: white;

            &:after {
              content: '';
              display: block;
              height: 3px;
              position: absolute;
              bottom: -1px;
              left: -1px;
              right: -1px;
              background-color: #0175bf;
              z-index: 1;
            }
          }
        }

        &.disabled {
          display: none;
        }
      }
    }

    .items-shown {
      white-space: nowrap;
      vertical-align: middle;
      text-align: center;
    }

    .items-view {
      text-align: center;
      padding: 3rem 0 2rem 0;
    }

    .items-per-page {
      white-space: nowrap;

      select {
        max-width: 7rem;
        display: inline-block;
      }
    }

    .pages-list {
      text-align: center;
    }

    .sortable {
      position: relative;
      padding-right: 3.2rem;

      &:after {
        font: 18px/1 FontAwesome;
        content: '\f0dc';
        padding: 0.8rem;
        position: absolute;
        top: 50%;
        margin-top: -15px;
        right: 5px;
        cursor: pointer;
      }

      &.sort-ascent:after {
        content: '\f0de';
        vertical-align: bottom;
      }

      &.sort-descent:after {
        content: '\f0dd';
        vertical-align: top;
      }

      &:hover {
        &:after {
          color: lighten($text-color, 20%);
        }
      }
    }
  }
}

// Make table scroll on small screens
.table-responsive {
  width: 100%;
  overflow-x: auto;
  margin-bottom: 1rem;
}

.usa-table-borderless {
  thead {
    td {
      border: 0;
    }
  }
}

@media (min-width: 31.25em) and (max-width: 49em) {
  .admin-filter-bar {
    .admin-filter {
      @include span(6 of 12);

      &:first-child {
        @include span(12 of 12);

        input {
          max-width: 100%;
        }
      }

      &:last-child {
        @include last;
      }
    }
  }
}

@media (min-width: 37.5em) {
  .admin-page {
    .items-shown {
      float: left;
      text-align: left;
      padding-top: 1.5rem;
    }

    .items-view {
      float: right;
      text-align: right;
      padding: 0;
      min-width: 21rem;
    }
  }
}

@media (min-width: 50rem) {
  .admin-page {
    padding-bottom: 15rem;
  }

  .admin-filter-bar {
    .admin-filter {
      @include span(4 of 12);

      &:last-child {
        @include last;
      }
    }
  }
}

@media (min-width: 50em) {
  .manage-users-block {
    text-align: right;
  }
}
