/**
 * Stylesheet
 *
 * @namespace Lungo.Layout
 * @class Widgets
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "constants.styl"

[data-article].hide
  display: none


.overthrow-enabled .overthrow
  overflow: auto
  -webkit-overflow-scrolling: touch

.scroll
  overflow-x: hidden
  overflow-y: scroll
  -webkit-overflow-scrolling: touch
  -webkit-box-flex: 1

  // & > *
  //   background: -webkit-linear-gradient(white 30%, hsla(0,0%,100%,0)), -webkit-linear-gradient(hsla(0,0%,100%,0), white 70%) bottom, -webkit-radial-gradient(50% 0, rgba(0,0,0,.2), transparent 70%), -webkit-radial-gradient(50% 100%, rgba(0,0,0,.2), transparent 70%) bottom;
  //   background-repeat: no-repeat;
  //   background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
  //   background-attachment: local, local, scroll, scroll;


  &.horizontal
    overflow-x: scroll
    overflow-y: hidden
    white-space: nowrap
  /* BUG (iOS) POSITION: relative childrens */
  & > *
    -webkit-transform: translate3d(0, 0, 0)

:not(.icon)
  &.left
    float: left
  &.right
    float: right

.hidden
  display: none
.block
  display: block

.indented > *
  padding: INDENT


/* ================================  TAG  ================================ */
.tag
  display: inline-block
  padding: 0 3px
  font-size: FONT_SIZE_TINY
  line-height: 1.25em
  height: 1.35em
  text-align: center

size = 5px
.margin
  &.bottom
    margin-bottom: size


/* ================================  .LAYOUT  ================================ */
.layout
  display-box()
  height:  inherit !important
  &:not(.horizontal)
    box-orient(vertical)
    & > [data-layout=middle]
      height: 50%
    & > [data-layout=third]
      height: 33%
    & > [data-layout=quarter]
      height: 25%

  &.horizontal
    box-orient(horizontal)
    & > [data-layout=middle]
      width: 50%
    & > [data-layout=third]
      width: 33%
    & > [data-layout=quarter]
      width: 25%

  & > *
    box-flex(0)
  & > [data-layout=secondary]
    box-flex(1)
  & > [data-layout=primary]
    box-flex(2)



/* ================================  MENU  ================================ */
[data-view-menu]
  &:after
    content: "▼"
    position: relative
    top: -5px
    left: 1px
    font-size: FONT_SIZE_TINY

/* ================================  CAROUSEL  ================================ */
[data-control=carousel]
  overflow: hidden
  list-style: none
  margin: 0
  // article
  //   display: block !important