.pagination .text {
  width: 100%;
}

  .pagination .text:hover {
    background: transparent;
    color: var(--contrast) !important;
    cursor: text;
  }

[type=text] {
  padding-left: .25rem;
  border-radius: .25rem;
}

.table {
  flex-direction: column;
}

.post-table {
  margin-top: 1rem;
  padding: 1rem 0;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
}

  .post-table button {
    flex-direction: row;
    padding: 0.75rem;
    align-items: center;
    justify-content: center;
    border-radius: .5rem;
  }

    .pop-up button img,
    .post-table button img {
      width: 2ch;
      margin-right: 1ch;
    }

.wrapper--table {
  padding: 2rem 0;
  align-items: flex-start;
  position: relative;
  flex-direction: column;
}

.lightbox {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(35,35,35,.8);
  padding: 2rem;
  justify-content: center;
  align-items: center;
}

.pop-up {
  border: 1px solid var(--color);
  border-radius: .5rem;
  background-color: var(--lightest);
  flex-direction: column;
}

  .pop-up > * {
    margin: 1rem 2rem;
  }

  .pop-up button {
    justify-content: center;
    align-items: center;
    padding: .75rem;
    margin: 0 .5rem;
    min-width: 15ch;
    border-radius: .5rem;
  }

  .pop-up .close {
    margin: .5rem 1rem;
    font-size: 4ch;
    align-self: flex-end;
    color: var(--color);
    font-weight: 200;
    align-items: flex-end;
  }

.pagination {
  align-self: center;
  justify-self: center;
}

  .pagination > *,
  .number-of-results span {
    height: 2rem;
    width: 2rem;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 2px solid transparent;
  }


.glyph {
  font-weight: 200;
  font-size: 200%;
}


.pagination > span:hover,
.number-of-results span:hover {
  background: var(--color);
  color: var(--lightest) !important;
  cursor: pointer;
}

.pagination .active {
  position: relative;
  font-weight: 600;
  color: var(--color);
  border-bottom-color: var(--color);
}



.sort::after {
  content: "";
  height: 1ch;
  width: 1.5ch;
  clip-path: polygon(0 45%, 100% 45%, 100% 65%, 0% 65%);
  background: var(--compare-less);
  margin-left: 1rem;
  transition: .2s all;
}


th .sort {
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

  th .sort.ascend::after,
  th .sort.descend::after {
    clip-path: var(--triangle);
    background: var(--color);
  }

  th .sort.ascend::after {
    transform: rotate(180deg);
  }

th:hover .sort {
  cursor: pointer;
}

  th:hover .sort::after {
    clip-path: var(--triangle);
    background: var(--compare);
  }


.number-of-results {
  align-items: center;
}

  .number-of-results span.active {
    border-bottom-color: var(--color);
    color: var(--color);
  }

.post-table > * {
  width: calc(100% / 3);
}

.post-table > :last-child {
  justify-content: flex-end;
}

.post-table > :nth-child(2) {
  justify-content: center;
}

.switch {
  flex-direction: row;
  margin: .5rem;
}

  .switch:hover {
    cursor: pointer;
  }

.slider {
  position: relative;
  height: 2ch;
  width: 4ch;
  background: var(--compare);
  border-radius: var(--circle);
  box-shadow: var(--concave-sm);
  align-items: center;
  justify-content: flex-start;
  margin-right: 1rem;
  transition: all .2s;
}

  .slider::after {
    content: "";
    position: absolute;
    height: 2ch;
    width: 2ch;
    background: var(--compare-less);
    border-radius: var(--circle);
    box-shadow: var(--convex-sm);
    transition: all .2s;
  }

.switch.active .slider {
  background-color: var(--color-lt);
}

  .switch.active .slider::after {
    transform: translateX(2ch);
    background: var(--color-med);
  }