/**
 * Stylesheet
 *
 * @namespace Lungo.Theme
 * @class Layout
 *
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 */

@import "__init.styl"

nav
  section > header > &
    & a:not(.button)
      color: darken(COLOR_theme, 35%)
      text-shadow 0 1px 0 lighten(COLOR_theme, 25%)
      &:active
        color: darken(COLOR_theme, 50%)

  section > footer > & > a, &[data-control=groupbar] > a
    color: NAV_LINK
    &.active
      color: NAV_LINK_ACTIVE

  section > &[data-control=groupbar] > a.active
    transition box-shadow TRANSITION_time TRANSITION_easing
    box-shadow inset 0 -4px 0 COLOR_theme

  section > footer > & > a
    box-shadow inset 0 1px 0 #000, inset 0 2px 0 lighten(COLOR_contrast, 20%)
    &.active
      box-shadow inset 0 0 16px #000
      background-color: COLOR_contrast_dark

  aside & a
    color: lighten(COLOR_contrast, 20%)
    &:active
      color: lighten(COLOR_contrast, 50%)

  &[data-control=menu]
    COLOR = COLOR_contrast
    background: COLOR
    box-shadow 0 2px 0 rgba(0,0,0,0.15)
    &.icons
      background: rgba(0,0,0,0.8)
      & > a
        color: lighten(COLOR, 35%)
        &:active > .icon
          text-shadow: 0 0 32px #fff
        & > .icon
          color: #fff
    &:not(.icons)
      & > a
        color: #fff
        text-shadow 0 1px 0 #111
        border-bottom: 1px solid darken(COLOR, 40%)
        border-top: 1px solid lighten(COLOR, 5%)
        &:active
          background: #111
          border-color: transparent
        & > .icon
          color: lighten(COLOR, 25%)
    & > a
      font-weight: 700