// Frameworks
@import bourbon
@import neat

// Configuration
@import spina/configuration

// Normalizing
@import spina/normalize

// Icons
@import spina/ics_spina
@import spina/fonts

// Animations
@import spina/animate
@import spina/custom_animations

// Elements
@import spina/forms
@import spina/tables
@import spina/buttons
@import spina/labels
@import spina/modal
@import spina/sortable_lists
@import spina/gallery
@import spina/login
@import spina/cards
@import spina/trix
@import spina/wizard
@import spina/notifications

// Plugins
@import spina/morris
@import spina/wysihtml5
@import spina/farbtastic

html
  box-sizing: border-box
  min-height: 100%

*, *:before, *:after
  box-sizing: inherit

html, body
  height: 100%
  font-family: $font-family
  -webkit-font-smoothing: antialiased

body
  background: #f5f5fa
  min-width: 1024px

// Primary navigation
nav#primary
  height: 100%
  overflow: hidden
  position: fixed
  width: 300px
  z-index: 5
  @include linear-gradient(#3b3f74, #7a76ad)

  & > ul
    height: 100%
    padding-top: 12px
    position: relative
    width: 100%

  ul li
    display: block

  ul li.bottom
    bottom: 10px
    position: absolute

  ul li a
    color: #f5f5fa
    display: block
    font-size: 15px
    font-weight: 600
    line-height: 54px
    opacity: .5
    outline: none
    padding: 0 20px
    position: relative

    &:hover
      opacity: 1

    .icon
      font-size: 26px
      margin-left: 5px
      margin-right: 11px

    .icon-caret-right
      font-size: 18px
      position: absolute
      right: 10px

    .icon-home
      font-size: 32px
      margin-left: 2px
      margin-right: 8px

  ul li.active > a
    opacity: 1

  ul li ul
    bottom: 0
    left: 80px
    padding-top: 20px
    position: absolute
    top: 0
    width: calc(100% - 80px)
    z-index: 1
    @include linear-gradient(#3b3f74, #7a76ad)
    @include transform(translateX(100%))

    li a
      line-height: 40px

  ul li ul li a.back-to-main-menu
    font-size: 13px
    font-weight: 700
    opacity: .25
    text-transform: uppercase

    .icon
      font-size: 16px
      margin: -2px 0 0 -2px

    &:hover
      opacity: .5

  ul li ul li
    position: relative

  ul li ul li[data-badge]:after
    background: rgba(255, 255, 255, .4)
    border-radius: 9px
    color: #3b3f74
    content: attr(data-badge)
    display: block
    font-size: 12px
    font-weight: 600
    height: 18px
    line-height: 18px
    min-width: 24px
    padding: 0 8px
    position: absolute
    right: 20px
    text-align: center
    top: 50%
    vertical-align: middle
    z-index: 1
    @include transform(translateY(-50%))

  ul li ul li[data-badge] a
    z-index: 2

  ul li ul li.active[data-badge], ul li ul li:hover[data-badge]
    &:after
      background: rgba(255, 255, 255, .9)

  &.animated > ul
    @include transition(background .3s ease)

    & > li > a
      @include transition(all .3s ease)

      .icon
        @include transition(all .3s ease)

    li.active ul
      @include transition(all .3s ease)

  &.transformed > ul
    background: rgba(0, 0, 0, .4)

    & > li > a
      color: transparent
      @include transform(translateX(-10px))

      .icon
        color: #f5f5fa
        @include transform(translateX(10px))

    li.active ul
      @include transform(translateX(0%))

// Secondary navigation
nav#secondary
  margin-bottom: -30px
  margin-top: 20px

  ul li
    display: inline

  ul li a
    color: #4b4b4d
    display: inline-block
    font-size: 12px
    font-weight: 700
    line-height: 34px
    opacity: .5
    outline: none
    padding: 0 16px
    position: relative
    text-transform: uppercase

    &:after
      background-color: $primary-color
      bottom: 0px
      content: " "
      height: 3px
      left: 0px
      opacity: 0
      position: absolute
      width: 100%
      @include transform(scale(0))

  ul li a:hover
    opacity: 1

  ul li.active a
    cursor: default
    opacity: 1
    margin: 0 16px
    padding: 0

    &:after
      opacity: 1
      @include transform(scale(1))
      @include transition(all .2s ease)
      @include transition-delay(.05s)

  ul li:first-child a
    margin-left: 0
    padding-left: 0

// Tabs
.tab-content
  display: none

  &.active
    display: block

// Permanent notice
.permanent-notice
  background: #eee
  border-bottom: 1px solid #ddd
  color: #333
  margin: 0 -40px 30px -40px
  padding: 0 40px
  position: relative

  i.icon
    font-size: 16px
    left: 14px
    opacity: .25
    position: absolute
    top: 12px

  p
    font-size: 13px
    font-weight: 600
    line-height: 18px
    margin: 0
    padding: 12px 0

    small
      display: block
      font-size: 12px
      font-weight: 400

  &.permanent-notice-info
    background: #eef6fe
    border-color: #def
    color: #12659b

    p
      color: inherit

// Filters

.filters
  margin: 20px 0

// Datepicker

.ui-datepicker
  background: #fff
  border: none
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25)
  width: 250px

.ui-datepicker-header
  border: none
  font-weight: 300

  a.ui-datepicker-prev, a.ui-datepicker-next
    background: none
    border: none
    color: transparent
    cursor: pointer
    display: block
    height: 36px
    opacity: .6
    padding: 8px 0
    position: absolute
    right: 0
    top: 0
    width: 36px

  a.ui-datepicker-prev
    left: 0

  a.ui-datepicker-prev:hover, a.ui-datepicker-next:hover
    opacity: 1

  a.ui-datepicker-prev span
    background: url(asset-path('spina/arrow-left.png')) no-repeat center
    background-size: 10px 13px
    display: block

  a.ui-datepicker-next span
    background: url(asset-path('spina/arrow-right.png')) no-repeat center
    background-size: 10px 13px
    display: block

  .ui-datepicker-title
    line-height: 42px
    text-align: center

.ui-datepicker-calendar
  width: 100%

  tr td:first-child, tr th:first-child
    padding-left: 0px

  tr td:last-child, tr th:last-child
    padding-right: 0px

  thead th
    color: #444
    font-weight: 600

  tbody tr, thead tr
    border: none

  tbody tr td
    background: none

  tbody tr td a
    display: block
    line-height: 28px
    text-align: center
    padding: 2px 4px
    width: 32px

  tbody tr td a.ui-state-default
    background: none
    border: none
    color: #777
    font-weight: 600

  tr:hover
    background: none

  tbody tr td a:hover
    color: #000

  tbody tr td a.ui-state-highlight
    background: #eee
    border-radius: 2px

  tbody tr td a.ui-state-active
    background: #444
    border-radius: 2px
    color: #fff

// Main header
header#header
  background: #fff
  border-bottom: 1px solid #eee
  left: 300px
  padding: 30px 40px
  position: fixed
  right: 0
  top: 0
  z-index: 10

#header_actions
  float: right
  position: absolute
  right: 20px
  top: 24px

// Main content

section#main
  padding: 30px 40px 30px 340px

// Danger zone
.danger-zone
  background: url(asset-path('spina/danger-zone-ribbon.png')) repeat-x #fcfcfc
  margin: 60px -40px 0 -40px
  padding: 26px 40px

  h2
    color: #777
    font-size: 16px
    font-weight: 600

    &:before
      margin-right: 6px
      vertical-align: middle

// Breadcrumbs

#main_content_header
  .preview-website i
    vertical-align: bottom

.breadcrumbs
  color: #333
  display: inline-block
  font-size: 24px

  .button
    margin-left: 12px
    vertical-align: middle

  a
    color: #999

    &:hover
      color: #999

  .divider
    background: url(asset-path('spina/divider.png'))
    color: #999
    display: inline-block
    height: 17px
    margin: 0 20px
    width: 6px

// Well

.well
  background: #fff
  border: 1px solid #eee
  border-radius: 3px
  margin: 24px -20px
  padding: 20px

  hr.divider
    clear: both
    margin: 20px -20px

  .table-container
    margin: -20px -20px

    .table
      margin: 0

      tr td:first-child, tr th:first-child
        padding-left: 20px

      tr td:last-child, tr th:last-child
        padding-right: 20px

// General styles

h1, h2, h3, h4, h5, h6
  font-weight: 400
  margin: 0

  &.page-header
    border-bottom: 1px solid #eee
    color: #333
    margin: 40px 0 20px 0
    padding-bottom: 8px

h1, h2
  color: #333
  font-size: 24px

h3
  color: #333

ul
  list-style: none
  margin: 0
  padding: 0

p
  color: #333
  font-size: 14px
  line-height: 18px

a
  color: $primary-color
  text-decoration: none

  &:hover
    color: shade($primary-color, 40%)

label
  color: #333
  font-size: 11px
  font-weight: 600
  margin-right: 14px

.divider-container
  margin: 0 -40px

hr.divider
  background: #e9e9eb
  border: none
  height: 1px
  margin: 20px 0

.pull-left
  float: left

.pull-right
  float: right

.clearfix
  @include clearfix()

.spina-logo
  bottom: 0px
  opacity: .5
  padding: 20px
  position: fixed
  right: 0px
  @include transition(opacity .2s ease)

  &:hover
    opacity: 1

  img
    display: block

.text-danger
  color: $danger-color

.text-success
  color: $success-color

.text-muted
  color: #999

.text-center
  text-align: center

.text-right
  text-align: right

// Turbolinks
.turbolinks-progress-bar
  background-color: $primary-color