body
  -webkit-font-smoothing: antialiased

$breezeblocks-body-background-color: #fff

nav.bourbon
  text-rendering: optimizeLegibility
  ul
    list-style-type: none
    margin: 0
    padding: 0
    li a
      text-decoration: none
  h1
    margin: 0
    a
      text-decoration: none

$breezeblocks-color: lighten(desaturate(teal, 60%), 40%)
$breezeblocks-accent-color: #477dca
$breezeblocks-nav-height: 60px
$breezeblocks-logo-color: #93e9be
$breezeblocks-anchor-color: #f55481
$breezeblocks-hero-background: #e7f1ec
$breezeblocks-highlight-color: #bbb295
$breezeblocks-narrow-sans: "Oswald", sans-serif
$breezeblocks-white-shadow: 0 1px 1px transparentize(#fff, 0.6)
$breezeblocks-medium-screen: em(640)
$breezeblocks-large-screen: em(860)

$breezeblocks-serif: "Lusitana", $georgia
$breezeblocks-second-serif: $georgia

=breezeblocks-inset
  background: darken($breezeblocks-hero-background, 2%)
  box-shadow: inset 0 1px 2px darken($breezeblocks-hero-background, 7%), $breezeblocks-white-shadow
  text-shadow: $breezeblocks-white-shadow

body
  -webkit-backface-visibility: hidden
  background: $breezeblocks-body-background-color
  min-width: 320px

.breezeblocks-header
  @extend .breezeblocks-header
  +clearfix
  background-color: $breezeblocks-hero-background
  clear: both
  margin-bottom: 1em
  padding: 5em 0
  text-align: center
  width: 100%
  +media($breezeblocks-medium-screen)
    margin-bottom: 4em
    padding: 6em 0

  +media($breezeblocks-large-screen)
    margin-bottom: 4em
    padding: 6em 0 11em 0

  .breezeblocks-logo
    display: inline-block
    margin: 0 auto 1.4em auto
    +media($breezeblocks-medium-screen)
      max-width: 8em
      max-height: 8em

    img
      background: #fff
      border-radius: 50%
      padding: 0.3em
      margin-bottom: 1em
      max-width: 5em
      max-height: 5em
      +media($breezeblocks-medium-screen)
        margin-bottom: 2em
        max-width: 8em
        max-height: 8em
        padding: 0.5em
  h2
    font-family: $breezeblocks-second-serif
    font-size: 1.4em
    font-weight: 100
    margin: 0 auto 2em auto
    max-width: 90%
    text-align: center
    line-height: 1.4em
    +media($breezeblocks-medium-screen)
      font-size: 2em
      margin-bottom: 1em
      max-width: 90%

    +media($breezeblocks-large-screen)
      font-size: 3em
      margin-bottom: 0.8em
      line-height: 1.3em
      max-width: 55%
  h3
    font-size: 1.3em
    font-weight: 200
    margin-bottom: 1em
    text-align: center
  a
    color: $breezeblocks-anchor-color
    text-decoration: none
    &:focus,
    &:hover
      color: lighten($breezeblocks-anchor-color, 10%)
  p
    +breezeblocks-inset
    border-radius: 30px
    color: darken(desaturate($breezeblocks-logo-color, 50%), 15%)
    display: inline
    font-family: $breezeblocks-narrow-sans
    font-size: 0.8em
    font-weight: 400
    padding: 0.5em 1.4em
    +media($breezeblocks-large-screen)
      font-size: 0.8em

.menu-wrapper
  +clearfix

// Refill menu

ul.breezeblocks-menu
  font-weight: normal
  margin-bottom: 5em
  margin: -3.3em auto 0 auto
  text-align: center
  +media($breezeblocks-medium-screen)
    margin: -6em auto 0 auto

  +media($breezeblocks-large-screen)
    margin: -6.7em auto 0 auto

  .menu-item
    display: inline
    a
      text-decoration: none
      border-radius: 3px
      color: darken($breezeblocks-hero-background, 20%)
      font-family: "Lusitana", serif
      font-size: 0.9em
      padding: 0.5em 0.5em 2em
      +media($breezeblocks-medium-screen)
        font-size: 1.1em
        padding: 0.5em 0.8em 2em

      +media($breezeblocks-large-screen)
        font-size: 1.3em
        padding: 0.5em 1.3em 2em

      &:hover
        color: darken($breezeblocks-hero-background, 30%)

.breezeblocks-patterns li.patterns a
  background: $breezeblocks-body-background-color
  &:hover
    color: darken($breezeblocks-hero-background, 20%)

.breezeblocks-components li.components a
  background: $breezeblocks-body-background-color
  &:hover
    color: darken($breezeblocks-hero-background, 20%)

.breezeblocks-type-systems li.type-systems a
  background: $breezeblocks-body-background-color
  &:hover
    color: darken($breezeblocks-hero-background, 20%)

#example
  padding-top: 6em

// Refill section

section.refill
  +clearfix
  margin-bottom: 2em
  padding-bottom: 1em
  position: relative
  > h3
    margin-bottom: 1.3em
    margin-top: 1em
    padding-top: 0.5em

.breezeblocks-wrapper
  +outer-container
  padding: 1em
  h1.main-header
    background-color: $breezeblocks-color
    display: inline-block
    padding: 0.5em

// this centers the refill and sets back to text-align left below first object
.refill-centering
  text-align: center
  & > *
    display: inline-block
    & > *
      text-align: left
  script
    display: none

.line-behind-text
  border-bottom: 1px solid #cacaca
  text-align: center
  margin-bottom: 4.5em

.line-behind-text h6
  background: #fff
  color: gray
  display: inline-block
  font-family: $breezeblocks-narrow-sans
  font-size: 1em
  font-weight: 500
  padding: 0 10px
  position: relative
  text-transform: uppercase
  top: 34px

.refill h6
  margin-bottom: 1.5em

// Hiding and showing code

.js-hide-code,
.js-show-code
  border-top: 1px dashed #bebcbc
  color: #7e7a7a
  font-size: 0.8em
  text-transform: uppercase
  width: 9em
  &:hover
    color: $breezeblocks-accent-color

.js-show-code
  display: inline-block
  padding: 0.5em 1em

.js-hide-code
  display: none
  padding: 0.5em 1em

.refill-control
  display: block
  margin-bottom: 2em
  text-align: center
  width: 100%
  a
    line-height: 1.5em
    text-decoration: none

// Snippet

.refill-snippet
  margin-top: 4.5em
  padding: 0 1em
  table
    border-collapse: collapse
    margin: (1.5em / 2) 0
    table-layout: fixed
    width: 100%
  th
    font-weight: bold
    padding: (1.5em / 2) 0
    text-align: left
  td
    padding: (1.5em / 2) 0
  tr,
  td,
  th
    vertical-align: middle

pre[class*="language-"]
  background-color: #f8f8f8
  border-top: 2px solid silver
  height: 300px
  line-height: 1em

.snippets-table
  display: none
  td
    border-bottom: 0
  .snippet:nth-child(4n)
    display: none

.snippet
  +media($breezeblocks-medium-screen)
    margin-bottom: 2em

  .copy-source-container
    min-height: 3.4em
    +media($breezeblocks-medium-screen)
      min-height: 2.5em

    +media($breezeblocks-large-screen)
      min-height: 1em
  &:nth-of-type(1) .copy-source
    background: #e98065
  &:nth-of-type(2) .copy-source
    background: #55a1d4
  &:nth-of-type(3) .copy-source:nth-of-type(1)
    background: #e9c05b
  &:nth-of-type(3) .copy-source:nth-of-type(2)
    background: #89b981
  .copy-source
    border-bottom-left-radius: 10px
    border-bottom-right-radius: 0
    border-top-left-radius: 10px
    border-top-right-radius: 10px
    color: #fff
    display: inline-block
    font-size: 0.5em
    font-weight: 800
    padding: 0.4em 1em
    text-transform: uppercase
    &:hover,
    &:active
      background-color: lighten(#333, 20%)
      color: #fff
  a
    text-decoration: none
  code
    font-size: 0.6em
    line-height: 1.4em
    max-height: em(400)
    overflow: scroll

.token.variable
  background-color: transparent

// Footer

footer.breezeblocks-footer
  color: silver
  padding-bottom: 2em
  padding-top: 1em
  text-align: center
  a
    color: $breezeblocks-anchor-color
    text-decoration: none
  p
    font-size: 0.8em
    line-height: 1.5em
    margin: 0 1em
    +media($breezeblocks-large-screen)
      font-size: 1em
  .breezeblocks-footer-logo
    margin-bottom: 2em
  img
    +clearfix
    display: block
    height: 60px
    margin: auto
  .footer-links
    background: #f3f3f3
    border-radius: 3em
    box-shadow: inset 0 1px 2px darken(#f3f3f3, 6%)
    display: inline-block
    font-size: 0.8em
    margin-bottom: 2em
    padding: 0.6em
    +media($breezeblocks-large-screen)
      font-size: 1em
      padding: 1em

    li
      display: inline
      padding: 0.4em
      a
        color: #a7a7a7
        text-decoration: none
        &:hover
          color: $breezeblocks-anchor-color

// Adjustments

.refill-smaller
  +media($breezeblocks-large-screen)
    margin: auto
    width: 70%

// Type Systems

+keyframes(fadeInAccordionTabsArticles)
  0%
    opacity: 0
  100%
    opacity: 1


.accordion-tabs-type-systems
  $breezeblocks-border-color: gainsboro
  $breezeblocks-border-radius: 3px
  $breezeblocks-spacing: 1.5em
  $breezeblocks-accent-color: #477dca
  $breezeblocks-link-color: $breezeblocks-accent-color
  $dark-gray: #333
  $light-gray: #ddd
  $breezeblocks-line-height: 1.5em
  $tab-border-color: $breezeblocks-border-color
  $tab-border: 1px solid $tab-border-color
  $tab-content-background: lighten($light-gray, 15%)
  $tab-active-background: $tab-content-background
  $breezeblocks-body-inactive-color: $breezeblocks-body-background-color
  $tab-inactive-hover-color: darken($light-gray, 5%)
  $tab-mode: $breezeblocks-medium-screen
  +clearfix
  border: $tab-border
  border-radius: $breezeblocks-border-radius
  margin-bottom: $breezeblocks-spacing
  +media($tab-mode)
    border: none

  .tab
    +media($tab-mode)
      display: inline

    &:first-child .tab-link
      border-top-left-radius: $breezeblocks-border-radius
      border-top-right-radius: $breezeblocks-border-radius
    &:last-child .tab-link
      border-bottom-left-radius: $breezeblocks-border-radius
      border-bottom-right-radius: $breezeblocks-border-radius
      +media($tab-mode)
        border-bottom-left-radius: 0
        border-bottom-right-radius: 0
    .tab-link-type-system
      background-color: transparent
      border-bottom: 1px solid $tab-border-color
      color: $dark-gray
      display: block
      font-size: 0.9em
      font-weight: 200
      letter-spacing: 0.6px
      padding: ($breezeblocks-spacing / 2) ($gutter / 2)
      text-align: center
      +media($tab-mode)
        display: inline-block
        border-bottom: 0
        border-top-left-radius: $breezeblocks-border-radius
        border-top-right-radius: $breezeblocks-border-radius

      &:hover
        color: $breezeblocks-link-color
      &:focus
        outline: none
    section
      padding: $breezeblocks-spacing $gutter
      background: $tab-content-background
      display: none
      overflow: hidden
      padding: $breezeblocks-line-height $gutter
      width: 100%
      +media($tab-mode)
        +border-bottom-radius($breezeblocks-border-radius)
        border-top: $tab-border
        float: left
        left: 0
        padding: ($breezeblocks-spacing / 2) $gutter

      .tab-content
        opacity: 0
    &.js-is-active
      border-bottom: $tab-border
      +media($tab-mode)
        border-bottom: 0

      .tab-link-type-system
        background-color: $tab-active-background
        border-bottom: 0
        +media($tab-mode)
          background-color: $tab-active-background
          border-bottom: 1px solid $tab-active-background
          border: $tab-border
          margin-bottom: -1px
      section
        display: block
        .tab-content
          +animation-name(fadeInAccordionTabsArticles)
          +animation-duration(1s)
          opacity: 1