//   Copyright (c) 2010-2011, Diaspora Inc.  This file is
//   licensed under the Affero General Public License version 3 or later.  See
//   the COPYRIGHT file.

@import 'mixins'

$button-border-color: #aaa 

.ui-autocomplete
  :left -11px

.button
  @include border-radius(3px)
  @include button-gradient($light-grey)
  @include box-shadow(0,1px,1px,#cfcfcf)
  @include transition(border)

  :display inline

  :font
    :style normal
    :size 12px
  :color #505050

  :padding 4px 9px

  :min-width 90px
  :min-height 10px

  :border 1px solid $button-border-color

  :cursor pointer
  :white-space nowrap

  &:hover
    @include button-gradient-hover-no-saturation($light-grey)
    :color #505050
    :text-decoration none
    :border 1px solid darken($button-border-color,15%)

  &:active
    @include linear-gradient(#acacac,#808080)

  img
    :position relative
    :height 20px
    :width 20px
    :top 6px

/* fix for input height */
input.button
  :padding 3px 9px
    :bottom 4px

.button .selected
  @include linear-gradient(#f0f0f0,#fafafa,29%,85%)

  :border
    :top 1px solid #aaa

.button
  &.delete
    :color desaturate($red,10%)

  &.in_aspects
    @include button-gradient($green)
    &:hover
      @include button-gradient-hover($green)

  &.creation
    @include button-gradient($creation-blue)
    :color #fff

    :border 1px solid darken($button-border-color,20%)

    &:hover
      @include button-gradient-hover($creation-blue)
      :border 1px solid darken($button-border-color,35%)

  &.red_on_hover
    &:hover
      @include button-gradient(#F74427)
      :color #222

.right
  :position absolute
  :right 0

.dropdown
  :position relative
  :display inline-block

  .button
    :width 240px

  .wrapper
    @include box-shadow(0, 2px, 5px, #666)
    //@include opacity(0)
    @include transition(opacity)

    :display none
    :z-index 20
    :position absolute
    :width 140px
    :padding 4px 0
    :margin-top 2px
    :background
      :color #fff
    :border 1px solid #999

    ul
      @include user-select(none)
      :font
        :size normal

      :padding 0 !important
      :margin 0 !important
      :color #000

      > li
        :font-size 11px !important
        :padding 3px 2px 
          :left 24px
        :position relative
        :color #222
        :list-style none

        &.selected
          :background
            :image url('/images/icons/check_yes_ok.png')
            :position 3px 1px
            :repeat no-repeat

        &.selected:hover
          :background
            :image url('/images/icons/check_yes_ok_white.png')
            /* bump top position up 1px to compensate for the 1px added top border */
            :position 3px 0px

        &.loading
          :background
            :image url('/images/ajax-loader.gif')
            :repeat no-repeat
            :position 4px 2px

        &.loading:hover
          :background
            :image url('/images/ajax-loader_inverted.gif')
            /* bump top position up 1px to compensate for the 1px added top border */
            :position 4px 1px

        &.newItem
          a
            :color #999
            :font-style italic

            &:hover
              :text-decoration none

  &.hang_right
    .wrapper
      @include border-radius(3px, 0, 3px, 3px)
      :right 3px

  &.hang_left
    .wrapper
      @include border-radius(0, 3px, 3px, 3px)
      :left 0px

  .selected
    :font-weight bold

  &.active
    .wrapper
      //@include opacity(1)
      :display block

    .button
      @include border-radius(3px, 3px, 0, 0)
      :border 1px solid #444

    .button
      :background #666

    .button,
    .wrapper ul > li:hover
      :background
        :color #666
      :color #fff
      :text-shadow none


    .wrapper ul > li:hover
      :border
        :top 1px solid #444
        :bottom 1px solid #444
      :padding
        :top 2px
        :bottom 2px

      &.divider
        :padding
          :bottom 3px

      a
        :color #ccc

    .wrapper ul > li,
    .wrapper ul > li *
      :cursor pointer