ReactPager using scalacss

CssPager.scala

object CssPager {

   type CLICKEVENT = Int => Unit

   object Style extends StyleSheet.Inline {
    import dsl._
     val pager = style(margin(20.px),
       unsafeChild(".previous")(float.left),
       unsafeChild(".next")(float.right)
     )

     val button = boolStyle(hide =>
       styleS(
         display :=! (if (hide) "none" else "block"),
         padding(5.px, 14.px),
         backgroundColor("#EF5350"),
         border :=! "1px solid transparent",
         borderRadius(2.px),
         color.white,
         cursor.pointer,
         boxShadow := "0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.24)",
         &.hover(
           backgroundColor("#ff1034")
         ),
         &.focus(
           backgroundColor("#ff1034")
         )
       )
     )
   }

   class Backend(t: BackendScope[Props, _]) {
     def handleNext = {
       val newOffset = t.props.itemsPerPage + t.props.offset
       t.props.nextClick(newOffset)
     }

     def handlePrevious = {
       val newOffset = t.props.offset - t.props.itemsPerPage
       t.props.previousClick(newOffset)
     }
   }

   val component = ReactComponentB[Props]("Pager")
     .stateless
     .backend(new Backend(_))
     .render((P, S, B) => {
     div(Style.pager)(
       a(cls := "previous", onClick --> B.handlePrevious)("← Previous", Style.button(P.offset == 0)),
       a(cls := "next", onClick --> B.handleNext)("Next →", Style.button(P.offset + P.itemsPerPage >= P.totalItems))
     )
   }).build

   case class Props(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: CLICKEVENT, previousClick: CLICKEVENT)

   def apply(itemsPerPage: Int, totalItems: Int, offset: Int, nextClick: CLICKEVENT, previousClick: CLICKEVENT) = {
     component(Props(itemsPerPage, totalItems, offset, nextClick, previousClick))
   }
 }