package reading.component.index.style

import scalacss.Defaults._

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

object Header extends StyleSheet.Inline {
  import dsl._

  val header = style(
    Media.desktop(margin(40.px)),
    Media.mobile(margin(30.px))
  )

  val showFiltersMenu = style(
    Media.desktop(display.none),
    Media.mobile(
      Button.simple,
      marginBottom(20.px)
    )
  )

  val filtersCount = style(
    Count.major,
    marginLeft(20.px)
  )

  val filters = style(
    display.flex,
    flexWrap.wrap,
    marginBottom(15.px),
    Media.mobile(display.none)
  )

  private val box = style(
    display.flex,
    alignItems.center,
    padding(15.px),
    marginRight(20.px),
    marginBottom(15.px),
    borderRadius(2.px),
    border(1.px, solid, C.gray.lighten(60).value),
    fontSize(18.px),
    &.hover(cursor.pointer)
  )

  val clear = style(
    box,
    backgroundColor(C.mickado.value),
    color(C.white.value),
    &.hover(backgroundColor(C.mickado.lighten(30).value))
  )

  val filter = style(
    box,
    &.hover(borderColor(C.gray.lighten(80).value))
  )

  val name = style(
    marginRight(10.px)
  )

  val cross = style(
    width(15.px),
    height(15.px)
  )

  val searchAndCount = style(
    display.flex,
    flexWrap.wrap,
    alignItems.center,
    Media.mobile(justifyContent.center)
  )

  val search = style(
    Media.mobile(display.none),
    Media.desktop(marginRight(30.px))
  )

  val booksCount = style(
    fontSize(20.px),
    color(C.gray.value),
    Media.mobile(textAlign.center)
  )
}