@mixin field {
  height: 4rem;
  padding: 1.25rem;
  transition: .3s;
  color: #fff;
  border: 3px solid #373737;
  border-radius: 4rem;
  background: transparent;
}

@mixin input {
  flex-shrink: 0;
  padding: .5rem 1.25rem;

  @include shadow-effect;

  &::placeholder {
    color: silver;
    opacity: .2;
  }

  &:hover::placeholder{
    color: #fff;
  }
}

.books-page,
.bookmarks-page,
.users-page {
  display: grid;
  width: 100%;
  grid-template-columns: 4rem minmax(8rem, 1fr) 2fr minmax(8rem, 1fr) 4rem;
  place-items: center;
  gap: 2rem;
  transition: .3s;

  .add-book,
  .add-user {
    display: contents;

    & > * {
      width: 100%;
    }
  }

  .add-book,
  .add-user {
    input[type="text"],
    textarea,
    select {
      @include field;
    }

    input[type="text"] {
      @include input
    }

    textarea {
      resize: vertical;
      transition: box-shadow .3s;

      @include shadow-effect;

      &::placeholder {
        color: gray;
      }

      &:hover::placeholder{
        color: #fff;
      }
    }

    select {
      text-indent: 1px;
      color: gray;

      -webkit-appearance: none;
      -moz-appearance: none;

      @include shadow-effect;

      &:hover {
        color: #fff;
      }
    }
  }

  .books,
  .users {
    display: contents;
  }

  .book,
  .user {
    display: contents;

    & > * {
      width: 100%;
      transition: .3s;
    }

    img {
      overflow: hidden;
      flex-shrink: 0;
      width: 4rem;
      transition: .3s;
      border: 3px solid #373737;
      border-radius: 1rem;

      &:hover {
        transform: scale(1.3);
      }
    }

    .clm2,
    .clm3,
    .clm4 {
      display: grid;
      align-items: center;
      height: 4rem;
      padding: .5rem 1.25rem;
      color: #fff;
      border: 3px solid #373737;
      border-radius: 4rem;
    }

    .clm3 {
      min-height: 4rem;
      height: fit-content;
      border-radius: 1rem;

      p {
        display: -webkit-box !important;
        overflow: hidden;
        -webkit-box-orient: vertical;
        white-space: normal;

        -webkit-line-clamp: 5;
      }
    }
  }
}
