@import "compass/css3"
@import "compass/utilities/general/clearfix"

@import "normalize"

// COLORS & BACKGROUNDS --------------------------------------------------------

$yellow:     #fdf485
$orange:     #e67e39
$blue:       #4ae
$green:      #61c227
$gray:       #777
$gray-light: #aaa
$gray-dark:  #222

$color:                 $gray
$bg-color:              #f3f3f3
$border-color:          darken($bg-color, 5%)
$header-bg-color:       #fff
$section-heading-color: $orange
$heading-color:         $gray-dark
$link-color:            $blue
$code-color:            $gray-light

// TYPE --------------------------------------------------------

$body-font-family:    "Karla", "lucida grande", sans-serif
$heading-font-family: "Montserrat", "Helvetica", sans-serif
$code-font-family:    "Karla", "lucida grande", sans-serif

// LAYOUT --------------------------------------------------------

$gutter: 30px
$max-column-width: 600px

$sharing-section-z-index: 10

// UI COMPONENTS --------------------------------------------------------

$radius: 8px


/* Typography
 *----------------------------------------------- */

html
  font: 87% / 1.5 $body-font-family, sans-serif
  font-weight: 400

@media (min-width: 40rem)
  html
    font-size: 100%

@media (min-width: 64rem)
  html
    font-size: 106%

body
  color: $color
  background-color: $bg-color

h1, h2, h3, h4, h5
  color: $heading-color
  line-height: 1.2em
  font-family: $heading-font-family
  font-weight: 700

h1
  font-size: 4rem
  margin: 0 0 0.2em 0
  line-height: 1.1em

@media (min-width: 40rem)
  h1
    font-size: 4.5rem

@media (min-width: 64rem)
  h1
    font-size: 5rem

h2
  color: $section-heading-color
  margin-bottom: 1.5rem
  font-size: 1.5rem
  text-transform: uppercase

@media (min-width: 40rem)
  h2
    font-size: 2rem

h3
  font-size: 1.2rem
  margin-bottom: .5rem

p
  margin: 0 auto 2em auto
  text-align: left

.lead
  max-width: 50rem
  margin-bottom: 1.4rem
  font-size: 1.1rem

@media (min-width: 40rem)
  .lead
    font-size: 1.25rem

strong
  font-weight: bold

a
  color: $link-color
  text-decoration: none
  &:hover
    text-decoration: underline

::-moz-selection,
::selection
  background: $orange
  color: white


/* Code
 * ========================================================================== */

code
  color: $code-color
  +border-radius($radius)
  font-family: Consolas, Courier, monospace
  font-size: 0.9rem
  padding: 0.1rem 0.3rem
  position: relative
  top: -1px


/* Lists
 * ========================================================================== */

ul
  margin: 0
  text-align: left

@media (min-width: 40rem)
  ul
    display: inline-block


/* Buttons
 * ========================================================================== */

.button
  display: block
  padding: 0.7rem 2rem
  margin-bottom: 0.5rem
  border: none
  color: #fff
  background-color: $link-color
  font-size: 1.1rem
  font-weight: bold
  text-transform: uppercase
  +border-radius($radius)
  vertical-align: middle
  white-space: nowrap
  &:hover
    background: darken($link-color, 10%)
    text-decoration: none

@media (min-width: 40rem)
  .button
    display: inline-block
    margin: 0 0.25rem

.button-minor
  padding: 0.35rem 1rem
  border: 2px solid $link-color
  color: $link-color
  background-color: transparent
  font-size: 0.8rem
  &:hover
    color: white


/* Elements
 * ========================================================================== */

hr
  border: 0
  border-top: 2px solid $border-color
  margin: 2rem auto
  width: 3rem

@media (min-width: 40rem)
  hr
    margin: 2.5rem auto

/* -- Layout ------------------------------------------------------------------ */

*, *:before, *:after
  +box-sizing("border-box")

body
  margin: 0
  padding: 0
  background: $bg-color

section
  border-top: 2px solid $border-color
  text-align: center
  padding: 1.5rem 0
  &:first-of-type
    border-top: none

@media (min-width: 40rem)
  section
    padding: 2rem 0

.container
  margin: 0 auto
  max-width: 40rem
  width: 90%

/* -- Header -- */

header
  padding: 4rem 0 2rem 0
  background-color: $header-bg-color
  text-align: center
  p
    text-align: center

@media (min-width: 40rem)
  header
    padding: 2rem 0


/* -- Examples -- */

.image-section
  margin-bottom: 80px
  .image-wrap
    position: relative
    line-height: 1em

.examples-section
  .image-section
    .target-image
      +border-bottom-radius($radius)
  .image-section.with-color-thief-output
    .target-image
      +border-bottom-radius(0)

.run-functions-button
  position: absolute
  top: 50%
  left: 50%
  width: 8rem
  height: 8rem
  margin-top: -4rem
  margin-left: -4rem
  border: none
  +border-radius(50%)
  color: $color
  background-color: $yellow
  font-size: 2rem
  font-weight: bold
  cursor: pointer
  text-transform: uppercase
  outline: none
  &:hover
    +scale(1.1)
    +transition(transform .2s)
  &:active
    +scale(0.9)
  &.hide
    background-color: $yellow
    color: $color
    +transition(transform .6s, top .6s cubic-bezier(0.220, -0.370, 0.750, 0.750))
    top: 105%
    +scale(0)

// Use Modernizr to check for touch support
.touch
  .touch-label
    display: inline
  .no-touch-label
    display: none
.no-touch
  .touch-label
    display: none
  .no-touch-label
    display: inline

.target-image
  display: block
  width: 100%
  +border-top-radius($radius)

.color-thief-output
  display: none
  padding: 1.5rem
  background-color: white
  border: 1px solid $border-color
  border-top-width: 0
  +border-bottom-radius($radius)

.function-title
  margin-top: 0

.function
  margin-bottom: 1.5rem

.swatch
  display: inline-block
  margin: 0
  background: #dddddd

@media (min-width: 40rem)
  .swatch
    margin-right: -2px

.get-color
  .swatch
    width: 6rem
    height: 3rem

.get-palette
  .swatch
    width: 3rem
    height: 2rem

@media (min-width: 40rem)
  .get-palette
    .swatch
      width: 4rem
      height: 2.7rem

canvas
  display: none


/* -- Credits -- */

footer
  padding: 2rem 0
  background-color: $header-bg-color
  text-align: center
  p
    text-align: center
  .button
    margin-top: 0.5rem

/* -- Sharing -- */

.sharing-section
  position: fixed
  z-index: $sharing-section-z-index
  top: 20px
  right: 0


/* -- Drag and drop ------------------------------------------------------------------ */

.drag-drop-section
  display: none

.drop-zone
  height: 25rem
  margin-bottom: 4rem
  background-color: $gray-dark
  +border-radius($radius)
  &.dragging
    font-weight: 700
    +box-shadow(inset 0 0 0 8px $link-color)
    .drop-zone-label
      color: $link-color
    .default-label
      display: none
    .dragging-label
      display: block

.drop-zone-label
  position: relative
  top: 11rem
  color: $yellow
  font-size: 1.8rem
  text-align: center
  pointer-events: none
  text-transform: uppercase
  +border-radius($radius)

@media (min-width: 40rem)
  .drop-zone-label
    top: 10.5rem
    font-size: 2.4rem

.dragging-label
  display: none

.dropped-image
  .run-functions-button
    display: none
  .targetImage
    // width: 100%