 
 
 ;; ------------------------------------------------------------------------------------
-;;  border
+;;  Component: border
 ;; ------------------------------------------------------------------------------------
 
 (defn border



;; ------------------------------------------------------------------------------------
;;  scroller
;; ------------------------------------------------------------------------------------

(defn scroller



;; ------------------------------------------------------------------------------------
;;  Private Component: box-base (debug colour: lightblue)
;; ------------------------------------------------------------------------------------

(defn- box-base
  [& {:keys [class f-child f-container size scroll h-scroll v-scroll width height min-width min-height justify align align-self
             margin padding border l-border r-border t-border b-border radius bk-color child style]}]
  "This should generally NOT be used as it is the basis for the box, scroller and border components."
  (let [s (merge
            (when f-child     (flex-child-style size))
            (when f-container {:display "flex" :flex-flow "inherit"})
            (when scroll      (scroll-style :overflow scroll))
            (when h-scroll    (scroll-style :overflow-x h-scroll))
            (when v-scroll    (scroll-style :overflow-y v-scroll))
            (when width       {:width width})
            (when height      {:height height})
            (when min-width   {:min-width min-width})
            (when min-height  {:min-height min-height})
            (when (and f-container justify) (justify-style justify))
            (when (and f-container align) (align-style :align-items align))
            (when align-self  (align-style :align-self align-self))
            (when margin      {:margin margin})       ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left"
            (when padding     {:padding padding})
            (when border      {:border        border})
            (when l-border    {:border-left   l-border})
            (when r-border    {:border-right  r-border})
            (when t-border    {:border-top    t-border})
            (when b-border    {:border-bottom b-border})
            (when radius      {:border-radius   radius})
            (if bk-color
              {:background-color bk-color}
              (if debug {:background-color "lightblue"} {}))
            style)]
    [:div {:class class :style s}
     child]))


;; ------------------------------------------------------------------------------------
;;  Component: gap (debug colour: chocolate)
;; ------------------------------------------------------------------------------------

(defn gap
  [& {:keys [size width height style]}]
  "Returns markup which produces a gap between children in a v-box/h-box along the main axis.
   Specify size in any sizing amount, usually px or % or perhaps em. Defaults to 20px."
  (let [s (merge
            (when size {:flex (str "0 0 " size)})
            (when width {:width width})
            (when height {:height height})
            (when debug {:background-color "chocolate"})
            style)]
    [:div {:class "rc-gap" :style s}]))


;; ------------------------------------------------------------------------------------
;;  Component: line
;; ------------------------------------------------------------------------------------

(defn line
  [& {:keys [size color style]
      :or {size "1px" color "lightgray"}}]
  "Returns markup which produces a line between children in a v-box/h-box along the main axis.
   Specify size in pixels and a stancard CSS colour. Defaults to a 1px red line."
  (let [s (merge
            {:flex (str "0 0 " size)}
            {:background-color color}
            style)]
    [:div {:class "rc-line" :style s}]))


;; ------------------------------------------------------------------------------------
;;  Component: h-box (debug colour: gold)
;; ------------------------------------------------------------------------------------

(defn h-box
  [& {:keys [f-child size width height min-width min-height justify align margin padding gap children style]
      :or   {f-child true size "none" justify :start align :stretch}}]
  "Returns markup which produces a horizontal box.
   It's primary role is to act as a container for child components and lays it's children from left to right.
   By default, it also acts as a child under it's parent."
  (let [s        (merge
                   {:display "flex" :flex-flow "row nowrap"}
                   (when f-child (flex-child-style size))
                   (if width {:width width})
                   (when height {:height height})
                   (when min-width {:min-width min-width})
                   (when min-height {:min-height min-height})
                   (justify-style justify)
                   (align-style :align-items align)
                   (when margin {:margin margin})       ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left"
                   (when padding {:padding padding})
                   (when debug {:background-color "gold"})
                   style)
        gap-form (when gap [re-com.box/gap :size gap :width gap])
        children (if gap
                   (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps
                   children)]
    (into [:div {:class "rc-h-box" :style s}] children)))


;; ------------------------------------------------------------------------------------
;;  Component: v-box (debug colour: antiquewhite)
;; ------------------------------------------------------------------------------------

(defn v-box
  [& {:keys [f-child size width height min-width min-height justify align margin padding gap children style]
      :or   {f-child true size "none" justify :start align :stretch}}]
  "Returns markup which produces a vertical box.
   It's primary role is to act as a container for child components and lays it's children from top to bottom.
   By default, it also acts as a child under it's parent."
  (let [s        (merge
                   {:display "flex" :flex-flow "column nowrap"}
                   (when f-child    (flex-child-style size))
                   (when width      {:width width})
                   {:height (if height height "inherit")}
                   (when min-width  {:min-width min-width})
                   (when min-height {:min-height min-height})
                   (justify-style justify)
                   (align-style :align-items align)
                   (when margin     {:margin margin})       ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left"
                   (when padding    {:padding padding})
                   (when debug      {:background-color "antiquewhite"})
                   style)
        gap-form (when gap [re-com.box/gap :size gap :height gap])
        children (if gap
                   (interpose gap-form (filter identity children)) ;; filter is to remove possible nils so we don't add unwanted gaps
                   children)]
    (into [:div {:class "rc-v-box" :style s}] children)))


;; ------------------------------------------------------------------------------------
;;  Component: box
;; ------------------------------------------------------------------------------------

(defn box
