// ooooooooooooooooooooooooooooooo
//  1. Tag
// ooooooooooooooooooooooooooooooo
$tag_size: 0.70
.iugu-ui
  .tag
    font-size: $baseFontSize * $tag_size
    font-weight: bold
    line-height: ($baseFontSize * $tag_size) + $baseLineSpacing
    white-space: nowrap
    background-color: $gray
    color: #FFF
    padding: 3px
    padding-top: 5px
    +border-radius( 2px )
    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
    text-transform: uppercase
  .dl-horizontal
    .tag
      line-height: ($baseFontSize * $tag_size)

.chrome,.safari
  .iugu-ui
    .tag
      padding-top: 3px
      padding-bottom: 4px
    .dl-horizontal
      .tag
        padding-top: 4px
        padding-bottom: 3px

// ooooooooooooooooooooooooooooooo
//  2. Badge
// ooooooooooooooooooooooooooooooo
.iugu-ui
  $badge_size: 0.70
  .badge
    font-size: $baseFontSize * $badge_size
    font-weight: bold
    line-height: ($baseFontSize * $badge_size) + $baseLineSpacing
    white-space: nowrap
    background-color: $gray
    color: #FFF
    padding: 3px
    +border-radius( $baseFontSize )
    +text-shadow(0px -1px 0px rgba(0,0,0,0.25))
    min-width: $baseFontSize
    text-align: center
    display: inline-block

.firefox
  .iugu-ui
    .badge
      padding-top: 4px
      padding-bottom: 2px

// ooooooooooooooooooooooooooooooo
//  Common to Label and Badge
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .badge,.tag
    &.red
      background-color: $red
    &.yellow
      background-color: $yellow
    &.green
      background-color: $green
    &.blue
      background-color: $blue

// ooooooooooooooooooooooooooooooo
//  3. Progress Bar
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .progress
    overflow: hidden
    height: 18px
    margin-bottom: $baseElementSpacing
    +box-shadow( inset 0 1px 2px rgba(0,0,0,.1) )
    +border-radius( 9px )
    +background( linear-gradient( #f5f5f5, #f9f9f9 ) )
    .bar
      width: 0%
      height: 18px
      color: #FFF
      font-size: 12px
      line-height: 18px
      text-align: center
      +text-shadow( 0 -1px 0 rgba(0,0,0,.25) )
      +background( linear-gradient( #149bdf, #0480be ) )
      +box-mode
      +transition(width .6s ease)

// ooooooooooooooooooooooooooooooo
//  4. Container
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .container
    background: $white
    +border-radius(5px)
    +box-mode
    padding: 20px
    +box-shadow( 0 1px 1px rgba(0, 0, 0, 0.3), -1px 2px 2px rgba(0, 0, 0, 0.1) )
    margin-bottom: $baseElementSpacing
    > .container
      border: 1px solid $baseLineColor
      +box-shadow( -1px -1px rgba( 0,0,0, 0.3 ) )
    &.no-padding
      padding: 0px
    .padding
      padding: 20px
    .header
      border-bottom: 1px solid $baseLineColor
      padding: 8px
    .footer
      border-top: 1px solid $baseLineColor
      padding: 8px

// ooooooooooooooooooooooooooooooo
//  5. Tabbed Container
// ooooooooooooooooooooooooooooooo
.iugu-ui
  .tabbed
    +box-shadow( 0 1px 1px rgba(0, 0, 0, 0.3), -1px 2px 2px rgba(0, 0, 0, 0.1) )
    +border-radius(5px)
    background: darken( $white, 15% )
    .nav
      @extend .auto-clear
      margin: 0px !important
      padding: 0px
      height: auto !important
      &:after
        margin-bottom: 0px
      > li
        @extend .floating-left
        display: block
        list-style: none
        margin: 0px
        padding: 0px
        background: darken( $white, 15% )
        text-align: center
        font-size: 20px
        line-height: 20px
        font-weight: bold
        cursor: pointer
        color: lighten( $textColor, 50% ) 
        +box-mode()
        overflow: hidden
        [class^="icon-"],[class*=" icon-"]
          vertical-align: baseline
          +opacity( 0.30 )
      > li:first-child
        +border-radius( 5px 0px 0px 0px )
      > li:last-child
        +border-radius( 0px 5px 0px 0px )
      > li.active,li.active:hover
        +text-shadow(-1px -1px 0 rgba(0,0,0,0.1))
        color: lighten( $textColor, 40% ) 
        background: $white
        [class^="icon-"],[class*=" icon-"]
          +opacity( 1 )
      > li:hover
        background: darken( $white, 10% ) 
        [class^="icon-"],[class*=" icon-"]
          +opacity( 0.4 )
      > li > a, > li > a:visited, li > a:hover
        text-decoration: none
        color: inherit
        display: block
        width: 100%
        padding: 15px
        height: auto
        overflow: hidden
        +box-mode()
        white-space: nowrap
        &.no-padding
          padding: 0px
        span
          display: block
          overflow: hidden
          margin: 15px

    > .container
      +border-radius( 0px 0px 5px 5px )
      +box-shadow( none )
    .tabbed
      border: 1px solid $baseLineColor
      +box-shadow( none )
      > ul.nav li
        +box-shadow( none )
        font-size: 16px
        line-height: 16px
      > .container
        +box-shadow( none )