@use 'vars' as *

.bookInfo
  margin: 0 auto

  h1, h2
    user-select: text

  h1
    font-style: italic

    @include mobile
      font-size: 4rem

  h2
    margin-bottom: 0
    font-size: 2.4rem

.tagsRating
  display: flex
  flex-direction: column

  > div
    margin-bottom: 3rem

    &:first-child
      flex: 1

    &:last-child
      @include mobile
        padding-left: 3rem

  @include mobile
    flex-direction: row

.ratingNum
  font-size: 2.4rem

  &.unrated
    color: $mid3

  .half
    font-variant-numeric: diagonal-fractions

.rating
  display: flex
  align-items: center

  @include mobile
    flex-direction: column

  .ratingNum
    width: 4rem

    @include mobile
      width: 100%
      margin-bottom: 1.2rem

    &.unrated
      position: relative
      color: $mid3
      top: -0.3rem

  input[type='range']
    width: 100%
    max-width: 9.9rem
    margin: 0
    padding: 0

.bookMeta
  margin: 3rem auto
  display: flex

  @include mobile
    flex-direction: column
    margin-bottom: 0

  .col
    display: flex
    flex-direction: column
    padding: 1rem 0
    flex: 1
    padding-right: 3rem
    border-right: 1px solid $mid2

    @include mobile
      border: none

    &:last-child
      display: flex
      flex-direction: column
      justify-content: space-between
      padding-right: 2rem
      padding-left: 2rem

      @include mobile
        padding: 0
        margin: 2rem 0

  h5
    margin-bottom: 1rem

  .tags
    padding: 0
    text-align: left

  details
    h5
      display: inline-block
      margin-bottom: 0

    > div
      margin-top: 1rem

    button + button
      margin-left: 1rem

    textarea
      margin-top: 1.5rem

    span
      color: $mid3
      font-weight: 100

  .editTitle
    input
      width: 100%
      margin: 1rem 0

.related
  li
    font-size: 2rem
    line-height: 1.3
    opacity: 0
    animation: fadeIn 333ms forwards

    + li
      margin-top: 1rem

    &:hover .score
      opacity: 1

  .score
    position: absolute
    display: inline-flex
    margin-left: 0.5rem
    vertical-align: super
    opacity: 0
    @include fade

    @include mobile
      display: none !important

  .embeddingProgress
    margin: 4rem 0

.tags
  padding: 0 4rem
  text-align: center
  max-width: 150rem
  margin: 0 auto

  @include mobile
    padding: 0

.actions
  display: flex
  justify-content: space-between
  align-items: center
  font-size: 1.8rem

  @include mobile
    flex-direction: column-reverse

  .modeHeading
    margin: 0

    @include mobile
      margin-top: 4rem

.noFav
  padding: 8rem
  font-size: 1.8rem
  text-align: center

.authorInfo
  .related
    margin: 2rem 0
    margin-bottom: 4rem

    ul, h5, li
      display: inline

    li
      margin-right: 0.4em
