package reading.component.index.style

import scalacss.Defaults._

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

object Menu extends StyleSheet.Inline {
  import dsl._

  val menu = style(
    Media.mobile(display.none),
    backgroundColor(C.englishWalnut.value),
    color(C.white.value),
    width(280.px),
    height(100.%%),
    boxShadow := "4px 0px 6px -1px rgba(0, 0, 0, 0.2)"
  )

  val header = style(
    display.flex,
    alignItems.center,
    justifyContent.center,
    position.relative,
    height(60.px),
    backgroundColor(C.englishWalnut.darken(20).value),
    color(C.white.value),
    textTransform.uppercase,
    fontWeight.bold,
    letterSpacing(1.px),
    marginBottom(20.px),
    Media.mobile(boxShadow := "0px 3px 5px -1px rgba(0, 0, 0, 0.2)")
  )

  val close = style(
    Media.desktop(display.none),
    Media.mobile(
      position.absolute,
      top(0.px),
      left(0.px),
      width(100.%%),
      height(100.%%),
      cursor.pointer
    )
  )

  val count = style(
    Count.count
  )

  val show = style(
    Media.mobile(
      display.block,
      position.fixed,
      top(0.px),
      left(0.px),
      width(100.%%),
      height(100.%%),
      zIndex(1),
      overflowY.scroll,
      backgroundColor(C.white.value),
      color(C.black.value)
    )
  )

  val filterGroup = style()

  private val filterCommon = style(
    display.flex,
    alignItems.center,
    width(100.%%),
    padding(5.px, 30.px),
    textAlign.left
  )

  val filterTitle = style(
    filterCommon,
    minHeight(50.px),
    fontWeight.bold,
    textTransform.uppercase,
    letterSpacing(1.px),
    marginBottom(10.px)
  )

  val filter = style(
    filterCommon,
    marginLeft(10.px),
    minHeight(40.px),
    color.inherit,
    &.lastChild(marginBottom(30.px))
  )

  val activeFilter = style(
    color(C.stiletto.value),
    cursor.pointer
  )
}