///////////////////////////
//        METRICS        //
///////////////////////////


// DEFAULT GRID METRICS
$base-size: 16px !default
$size: 1em !default
$line-height: 1.2em !default
$module-w: 280px !default
$module-h: 280px !default
$gutter: 14px !default
// grid margins:
$margin: 20px !default
$top: 20px !default
$bottom: 20px !default
$columns: 12 !default
$text-column-span: 3 !default


$row-prefix: r !default
$column-prefix: c !default
$width-prefix: w !default
$height-prefix: h !default
$ratio-prefix: r !default

// IMAGE + PAGE RATIOS
=ratio($width, $height, $cols: $columns)
  @for $i from 1 through $cols
    .#{$ratio-prefix+$width}x#{$height}.#{$width-prefix+$i}, .container.#{$width-prefix+$i} [ratio="#{$width}x#{$height}"] img // Grid ratio, figure ratio.
      width: grid($i) // Width spans all columns
      height: round(grid($i) * ( $height / $width )) // Height is the proportion of the width.

+ratios // Run the code above. Ratios are defined in _config.sass

// GRID MEASURMENTS
@for $i from 1 through $columns // loop defines columns. c1, c2, c3 . . .
  .#{$column-prefix+$i}
    margin-left: grid($i) - $module-w
@for $i from 1 through $columns // loop defines widths. w1, w2, w3 . . .
  .#{$width-prefix+$i}
    width: grid($i)

// Vertical grid
$vertical-grid: false !default
$rows: 10 !default
@if $vertical-grid // Generate only if $vertical-grid is true. This code is usually not nessisary.
  @for $i from 1 through $rows // loop defines rows. r1, r2, r3 . . .
    .#{$row-prefix+$i}
      position: absolute
      top: (grid($i, $module-h) - $module-h) + $top
  @for $i from 1 through $rows // loop defines heights. h1, h2, h3 . . .
    .#{$height-prefix+$i}
      height: grid($i, $module-h)

// Lightbox sizes
.lightbox .container
  &[class*="single"]
    width: grid($text-column-span)
  &[class*="double"]
    width: grid($text-column-span * 2)
  &[class*="triple"]
    width: grid($text-column-span * 3)
  &[class*="quad"]
    width: grid($text-column-span * 4)

// COLUMN WIDTHS
.column
  width: grid($text-column-span)
  @include type($size, $line-height)

// GRID+FIGURE MEASUREMENTS
.grid
  position: absolute
  overflow: hidden
  z-index: 1
  // Helps reduce flickr when paging
  -webkit-backface-visibility: hidden
  // Sometimes Safari forgets this one
  -webkit-font-smoothing: subpixel-antialiased
 
// CLEAR MIN-MAX FOR FIXED GRIDS
.fixed.grid, .sizetocontainer.grid
  max-width: none
  max-height: none
  min-width: none
  min-height: none


///////////////////////////
// GENERAL FUNCTIONALITY //
///////////////////////////


// Hide things
html.js, html.no-js // Using this to up the priority of .hidden down the cascade.
  .hidden
    display: none

// Positioning of Chrome
.chrome, .viewer
  position: absolute
  display: block

.chrome
  bottom: 0
  top: 0
  left: 0
  right: 0


// DESKTOP SCROLLING CONTAINER SUPPORT
$scroll-support: true !default
@if $scroll-support
  .container.scroll
    position: absolute
    overflow: auto
    overflow-x: hidden
  .grid .scroll-fade:after // gradient to indicate overflow
    content: "\0020"
    position: absolute
    bottom: 0
    left: 0
    right: 0
    height: 40px
    z-index: 3
    background-image: -webkit-gradient(linear, left top, left bottom, from(rgba($page, 0)), to(rgba($page, 1)))
    background-image: -webkit-linear-gradient(top, rgba($page, 0), rgba($page, 1))
    background-image: -moz-linear-gradient(top, rgba($page, 0), rgba($page, 1))
    background-image: -ms-linear-gradient(top, rgba($page, 0), rgba($page, 1))
    background-image: -o-linear-gradient(top, rgba($page, 0), rgba($page, 1))
    background-image: linear-gradient(top, rgba($page, 0), rgba($page, 1))
  .container .scroll // allow scrolling
    overflow: auto
    width: 100%
    height: 100%
    padding-bottom: 40px
  // FORCE SCROLLBAR FOR SAFARI IN LION -- http://simurai.com/post/8083942390/force-lion-scrollbar
  ::-webkit-scrollbar
    -webkit-appearance: none
    width: 6px
  ::-webkit-scrollbar-thumb
    border-radius: 3px
    background-color: rgba(0,0,0,.5)
  // Make The Scrollbars Smaller On Touch Devices
  .touch ::-webkit-scrollbar
    width: 3px

// TYPOGRAPHY RESET
html, body
  +type($base-size, $line-height)
  font-family: $font
  color: $text
  background-color: $body
  overflow: hidden

// Make sure headlines look good and always fit
h1, h2, h3, h4, h5, h6
  text-rendering: optimizeLegibility
  word-wrap: break-word

// Hyphenate paragraphs
$hyphenate: true !default
@if $hyphenate
  p
    +hyphens(auto)


// COLUMNS
.column, .container
  position: absolute
  overflow: hidden
  top: $top
  bottom: $bottom

// Set min height so no one-line columns appear
.column
  min-height: $line-height * 3

// Page Opacity
$page-opacity: true !default
@if $page-opacity
  #previousPage, #nextPage
    opacity: 0.5

// TRIM LEFT OR RIGHT PAGE MARGINS
.grid.trimleft
  padding-left: 0
.grid.trimright
  padding-right: 0

// FIGURE PLACEMENT
figure
  display: block

.colapsed
  position: absolute
.topfix
  top: 0
.rightfix
  right: 0
.bottomfix
  bottom: 0
  top: auto
.leftfix
  left: 0

.overflow
  overflow: visible

// RESOURCES
.error, .loading
  position: absolute
  &#nextPage, &#previousPage
    display: none

.hidden, .microdata
  display: none

.group
  position: absolute
  top: 0
  bottom: 0
  padding: 0

// CENTER CONTENT
.center, .center *
  text-align: center

// DISABLES CAPTIONS FOR CONTAINER
.nocap .caption
  display: none

// Caption placement
$caption-placement: true !default
@if $caption-placement
  // Add padding to captions when in a fill grid
  .fill .caption
    padding-left: $margin
    padding-right: $margin
  // INSET CAPTION ADVANCED PLACEMENT
  .caption
    &.left
      text-align: left
    &.right
      right: 0
      text-align: right
  .insetcap
    .caption
      position: absolute
    &.ul .caption
      top: 0
      left: 0
    &.ur .caption
      top: 0
      right: 0
    &.ll .caption
      bottom: 0
      left: 0
    &.lr .caption
      bottom: 0
      right: 0

// SUPPORT FULL-BLEED FIGURES *ABITRARY CROPS BEWARE*
// !IMPORTANT FLAGS NESSISARY TO OVERRIDE TREESAVER
$fullbleed: true !default
@if $fullbleed
  .fullbleed
    position: absolute
    bottom: 0 !important
    top: 0 !important
    left: 0 !important
    right: 0 !important
    width: auto


// MOBILE OPTIMIZATIONS
// Tweaks to make things run more smoothly on mobile devices
.os-ipad, .os-iphone
  &, .grid
    // iOS doesn't subpixel AA anyway, defining as normal AA speeds things up.
    -webkit-font-smoothing: antialiased


// Online/offline elements
$offline-elements: true !default
@if $offline-elements
html.offline
  .no-offline, [data-requires~="no-offline"]
    display: none
  [data-requires~="offline"]
    display: block

html.no-offline
  [data-requires~="no-offline"]
    display: block
  [data-requires~="offline"]
    display: none

// Debug tools
// used to highlihgt elements for placement.
$debug: true !default
@if $debug
  .r
    +r
  .g
    +g
  .b
    +b
  .c
    +c
  .m
    +m
  .y
    +y