package reading.component.index.style

import scalacss.Defaults._

import reading.component.style.{ Color => C, Button }
import reading.Media

object BookDetail extends StyleSheet.Inline {
  import dsl._

  val detailParent = style(
    position.fixed,
    top(0.px),
    right(0.px),
    padding(30.px, 30.px, 0.px, 30.px),
    height(100.%%),
    overflowY.scroll,
    Media.desktop(width :=! "calc(100% - 280px)"),
    Media.mobile(width(100.%%)),
    opacity(0)
  )

  val detail = style(
    display.flex,
    flexWrap.wrap,
    justifyContent.spaceAround,
    alignItems.center
  )

  val cover = style(
    height(400.px),
    marginBottom(30.px)
  )

  val presentation = style(
    Media.desktop(width(50.%%))
  )

  val title = style(
    color(C.congoBrown.value),
    fontSize(26.px),
    fontWeight.bold,
    marginBottom(1.em),
    lineHeight(1.4.em)
  )

  val author = style(
    fontSize(20.px),
    marginBottom(1.em)
  )

  val summary = style(
    textAlign.justify,
    lineHeight(1.4.em),
    marginBottom(2.em)
  )

  val definitions = style(
    marginBottom(2.5.em)
  )

  val definitionTerm = style(
    fontWeight.bold,
    float.left,
    marginRight(5.px),
    lineHeight(1.4.em)
  )

  val definitionDescription = style(
    display.flex,
    flexWrap.wrap,
    marginBottom(1.em),
    lineHeight(1.4.em)
  )

  val definitionFilter = style(
    &.hover(color(C.stiletto.value)),
    &.not(_.lastChild).after(
      content := "\",\"",
      marginRight(5.px),
      &.hover(color(C.black.value))
    )
  )

  val close = style(
    Button.simple,
    marginBottom(1.em)
  )
}