@import "iugu-ux/core"
@import "compass/utilities/general/clearfix"

// CINZA
// $background_base_color: #ECECEC
// $base_ui_color: #F1ECE7
$background_base_color: #3C5A76
$base_ui_color: #ECECEC
$mobile_navigation_color: #3D3D3D
$header_ui_color: #5282BC

$desktop_navigation_size: 256px
$mobile_navigation_size: 256px

$toolbar_height: 44px

// Color Palette
$background_highlight_color: lighten( $background_base_color, 10 )

$base_ui_color_lighten: lighten( $base_ui_color, 10 )
$base_ui_color_darken: darken( $base_ui_color, 10 )
$base_ui_color_highlight: lighten( $base_ui_color, 50 )
$base_ui_color_shadow: darken( $base_ui_color, 50 )

$secondary_ui_color: darken( $base_ui_color, 3 )
$secondary_ui_color_lighten: lighten( $secondary_ui_color, 10 )
$secondary_ui_color_darken: darken( $secondary_ui_color, 10 )
$secondary_ui_color_highlight: lighten( $secondary_ui_color, 50 )
$secondary_ui_color_shadow: darken( $secondary_ui_color, 50 )

$header_ui_color_lighten: lighten(   $header_ui_color, 10 )
$header_ui_color_darken: darken(     $header_ui_color, 10 )
$header_ui_color_highlight: lighten( $header_ui_color, 50 )
$header_ui_color_shadow: darken(     $header_ui_color, 50 )

html,body,#app
  height: 100%
  width: 100%
  position: relative
  @include box-sizing( border-box )

html,body
  overflow: hidden

body
  background: $background_base_color

.ui-box
  @include pie-clearfix
  background: $base_ui_color
  width: 100%
  margin-left: auto
  margin-right: auto
  position: relative
  color: #666
  height: 100%
  @include box-sizing( border-box )
  border-left: 1px solid $base_ui_color_highlight
  border-top: 1px solid $base_ui_color_highlight
  border-right: 1px solid $base_ui_color
  border-bottom: 1px solid $base_ui_color

  .sidebar
    float: left
    width: $desktop_navigation_size 
    height: 100%
    background: $secondary_ui_color
    border-right: 1px solid $secondary_ui_color_darken
    padding: 20px
    @include box-sizing( border-box )
    position: relative

  .content
    height: 100%
    position: relative
    @include background( top, linear-gradient( lighten($base_ui_color, 3) 44px, $base_ui_color ) )

    @include box-sizing( border-box )
    .small-navigation
      display: none
    
    &.handle-sidebar
      border-left: 1px solid $secondary_ui_color_lighten
      margin-left: $desktop_navigation_size

@include for-large-screens()
  body
    padding: 20px
    @include background-image( radial-gradient(top center, circle, $background_highlight_color 0px, rgba($background_highlight_color,0) 300px) ,linear-gradient(bottom, $background_highlight_color 30%,$background_base_color 70%) )
  .ui-box
    max-width: 980px
    @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.25) 0px 0px 20px )
    border: 1px solid #FF0000, 2px solid #00FFFF
    @include border-radius( 4px, 4px )

@include for-small-screens()
  body
    background: $mobile_navigation_color

  .mobile
    .ui-box
      .content.handle-sidebar
        @include translate3d(0,0,0)

  .ui-box
    border: none
    background: $mobile_navigation_color

    .sidebar
      float: none
      position: absolute
      z-index: 1000
      width: $mobile_navigation_size
      border: none
      background: $mobile_navigation_color
      visibility: hidden

      @include transition-property( visibility, border, margin )
      @include transition-delay( 0.3s )

    .content.handle-sidebar
      margin-left: 0px
      border-left: none
      z-index: 2000
      min-width: 320px
      @include transition-property( all )
      @include transition-duration( 0.3s )
      @include transition-timing-function( ease )

    // A merda esta aki
    .content
      @include background( top, linear-gradient( lighten($base_ui_color, 3) 44px, $base_ui_color ) )
      @include box-shadow( rgba(0,0,0,0.54) 0px 0px 2px, rgba(0,0,0,0.8) 0px 0px 15px )
      border-left: 1px solid $base_ui_color_highlight
      border-top: 1px solid $base_ui_color_highlight
      border-right: 1px solid $base_ui_color
      border-bottom: 1px solid $base_ui_color
      @include border-radius( 4px, 4px )

      &.handle-sidebar
        .small-navigation
          display: block
          height: $toolbar_height
          position: relative
          background: $header_ui_color
          @include background( top, linear-gradient( $header_ui_color 22px, $header_ui_color_darken ) )

          margin-top: -1px
          margin-right: -2px

          @include border-radius( 4px 4px 0px 0px )
          border-left: 1px solid $header_ui_color_lighten
          border-top: 1px solid $header_ui_color_lighten
          border-right: 1px solid $header_ui_color
          border-bottom: 1px solid $header_ui_color_shadow
          
          .toggle-sidebar
            display: block
            width: 44px
            height: 44px
            cursor: pointer
            position: absolute
            top: 0px
            left: 0px
            z-index: 10

  .desktop .open, .mobile .open
    border: none
    .content.handle-sidebar
      @include translate3d( $mobile_navigation_size, 0, 0 )

    .sidebar
      display: block
      visibility: visible
      margin: 1px

      @include transition-property( border )
      @include transition-delay( 0.3s )