@import 'yeticss'

body
  border-style: solid
  border-color: $gray-lighter

h1, h2, h3, h4, h5, h6
  font-weight: $font-weight-bold

//- Code Highlighting

pre
  color: black
  background: lighten($gray-lighter, 50%)

code
  color: black
  background: lighten($gray-lighter, 50%)

//- Header

header
  padding-bottom: $ui-padding-extra-spaced
  border-bottom: 1px solid $gray-lighter
  
  h1
    margin-bottom: 0

  p
    font-size: $font-large
  
  .button
    margin: $space 0

//- Navigation

.main-nav
  text-align: center

//- Footer

footer[role='contentinfo']
  padding: $ui-padding-extra-spaced 0
  border-top: 1px solid $gray-lighter
  color: $gray
  text-align: center

  li:not(:last-of-type)
    &:after
      content: '\2219'
      margin: 0 5px 0 10px

  p
    margin-bottom: 0

  .logo
    margin-top: $space
    display: inline-block
    width: 17px
    height: 20px
    background: $logo-ampersand-gray no-repeat 0 0

//- Sectioning

section
  padding: $ui-padding-extra-spaced 0

  &:not(:last-child)
    border-bottom: 1px solid $gray-lighter

//- Interface element samples

.sample
  border: $ui-border
  padding: $ui-padding-extra-spaced
  border-radius: 3px

  *:last-child
    margin-bottom: 0

  h1, h2, h3, h4, h5, h6
    margin-bottom: 10px

//- Avatars

.avatar
  margin: 0 $space $space 0

//- Buttons

.buttons 

  .button-group
    margin-bottom: 10px

    .button
      margin: 0 0 0 -1px

  .button
    margin: 5px

//- Navigation

.top-nav ul
  z-index: 10

//- Progress

.progress
  margin-bottom: 10px

  .meter
    min-width: 50% // dummy value

//- Modals

.modal-sample
  padding: $ui-padding-spaced
  margin-bottom: $space
  box-shadow: inset 0 0 100px rgba(0,0,0,.7)
  background-color: rgba(0,0,0,.4)
  
  .modal
    position: relative
    top: 0
    left: 50%
    margin-left: -25%
    transform: none

//- Messages

.message,
.form-inline
  margin-bottom: 10px

//- Colors

.color
  display: inline-block
  padding: $ui-padding-spaced
  color: white
  text-align: center

  p
    margin: 0

.blue1
  background-color: $blue-saturated-darker

.blue2
  background-color: $blue-saturated-dark

.blue3
  background-color: $blue-saturated

.blue4
  background-color: $blue-saturated-light

.blue5
  background-color: $blue-saturated-lighter

.blue6
  background-color: $blue

.blue7
  background-color: $blue-light

.blue8
  background-color: $blue-lighter
  color: $blue

.gray1
  background-color: $gray-darker

.gray2
  background-color: $gray-dark

.gray3
  background-color: $gray

.gray4
  background-color: $gray-light

.gray5
  background-color: $gray-lighter

.gray4, .gray5
  color: $gray-darker

.pink1
  background-color: $pink

.pink2
  background-color: $pink-light

.pink3
  background-color: $pink-lighter

.pink2, .pink3
  color: $pink

.red1
  background-color: $red

.red2
  background-color: $red-light

.red3
  background-color: $red-lighter

.red2, .red3
  color: $red

.green1
  background-color: $green

.green2
  background-color: $green-light

.green3
  background-color: $green-lighter

.green2, .green3
  color: $green

.orange1
  background-color: $orange

.orange2
  background-color: $orange-light

.orange3
  background-color: $orange-lighter

.orange2, .orange3
  color: $orange

//- Icons

.icon-sample
  margin: 0 5px

//- Grid

[class^="grid-flex-cell"],[class*=" grid-flex-cell"]

  p
    border: $ui-border
    border-radius: 3px
    text-align: center
    padding: 1em
    margin: 0

@media screen and (min-width: $breakpoint-tablet+1)
  
  body
    border-width: 10px

@media screen and (max-width: $breakpoint-tablet)

  body
    border-width: 5px

  .modal-sample
    .modal
      width: auto
      left: 0
      margin-left: 0

@media screen and (max-width: $breakpoint-smartphone)

  .button
    display: inline-block
    width: auto

  .logo
    margin: 30px auto
    display: block
    text-align: center

  .color
    width: 100%

@media screen and (min-width: $breakpoint-smartphone+1)

  .logo
    margin: 20px
    display: inline-block

  .color
    width: 250px
    margin-bottom: 5px