/* Book list pagination *****************************/
section.section--book-list {
  background-color: var(--secondary-color);
  margin-top: 8rem;
  padding-bottom: 3rem;
  margin-bottom: 5rem;
  h1 {
    font-size: var(--h1-font-size);
    text-align: center;
    margin-bottom: 4rem;
  }
}

.book-list--headers,
.book-row {
  display: flex;
}
.book-row > * {
  padding: 1.2rem 0 0.5rem 0;
}

.book-list--headers {
  border-bottom: 3px solid black;
  > * {
    padding-bottom: 1rem;
  }
}

.book-list-container {
}
.book-row {
  border-bottom: 1px solid grey;
}

.book-cover {
  width: 10rem;
  padding-left: 0.5rem;
  img {
    width: 80%;
  }
}

.book-row--details {
  display: flex;
  width: 90%;
  > * {
    font-size: var(--normal-font-size);
    padding: 0 0.5rem 0 0.5rem;
  }
}
.book-title {
  width: 20%;
}
.book-author {
  width: 10%;
}

.book-picker {
  width: 10%;
  text-wrap: wrap;
}
.book-picker--img {
  width: clamp(4rem, 60%, 7rem);
}
.group-rating {
  width: 15%;
  max-width: 140px;
  /* letter-spacing: 0.2em; */
  span {
    font-size: 1.5rem;
    padding: 0 0.1rem;
    color: orange;
  }
}

.book-desc {
  width: 30%;
}

.book-desc .book-description {
  max-height: 10lh;
  transition: max-height 500ms ease;
  overflow: hidden;
}
.book-description.expand {
  height: auto;
  max-height: 20lh;
}

.book-desc .book-description--show {
  display: flex;
  justify-content: end;
  height: 0;
  overflow: hidden;
}
.book-description.show + div {
  opacity: 1;
  height: fit-content;
}

.book-desc .book-description--show a {
  font-size: var(--normal-font-size);
  color: var(--text-light);
  cursor: pointer;
  padding-right: 2rem;
  transition: opacity 500ms ease-in;
}

.book-description + .book-description--show a:nth-child(2) {
  display: none;
}
.book-description.expand + .book-description--show a:nth-child(2) {
  display: block;
}
.book-description.expand + .book-description--show a:nth-child(1) {
  display: none;
}

.book-genres {
  width: 15%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 0.4rem;
  align-content: flex-start;
}

.book-details--to-show {
  display: none;
}

/* Books API Load Placeholder */
.book-cover-placehold {
  width: 80%;
  aspect-ratio: 1/1.4;
  background-color: blue;
}
.picker-placeholder {
  width: clamp(4rem, 60%, 7rem);
  aspect-ratio: 1/1;
  border-radius: 50%;
}

.placeholder-bg {
  background-image: linear-gradient(
    to right,
    #e2e2e3 0%,
    #c7c8cb 10%,
    #e2e2e3 20%,
    #e2e2e3 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1.2s linear infinite;
  border: 1px solid #c7c8cb;
  opacity: 0.4;
}
.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 1rem;
  width: 85%;
}
@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }
  100% {
    background-position: -150% 0;
  }
}

.pagination-container {
  font-family: 'Bangers', system-ui;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.pagination {
  border-radius: 35px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1rem;
}

.pagination a {
  padding: 0.9rem 1.6rem;
  margin: 0 0.2rem;
  font-weight: 500;
  text-decoration: none;
  font-size: var(--btn-font-size);
  color: var(--text-dark);
  border-radius: 50px;
  transition: 0.5s ease-in-out;
}

.control {
  background-color: transparent;
  transition: 0.5s ease-in-out;
}

.disabled {
  color: rgba(12, 16, 41, 0.5);
  cursor: default;
}

.control.disabled {
  color: var(--dark-hover);
  cursor: default;
}

.control:not(.disabled):hover,
.pageNumbers a:hover {
  background-color: var(--action-color-hover);
  color: var(--text-dark);
}

a.active {
  background-color: var(--action-color-hover);
  color: var(--text-dark);
  cursor: pointer;
}