@import "./kdfn"

/*

* button types
================
* - small-gray
* - small-blue
* - clean-gray
* - clean-red
* - cupid-green
* - transparent

**  KDButton STYLES
*/

.kdbutton
  rel()
  outline           none
  vertical-align    top
  white-space       nowrap
  cursor            pointer
  noTextSelection()
  &:focus
    border          1px solid rgba(125,190,241,1)
    shadow          0 0 3px rgba(125,190,241,.7)
  &.with-icon
    .icon
      margin          0 5px 0 -4px
      padding         3px 2px 2px 3px
      fl()
  &.icon-only
    width             auto
    // padding-left      5px
    // padding-right     5px
    .icon
      margin          0
      padding         0
      border          none
      display         block
      bg              color,transparent
  &.auto-width
    width             auto!important
  &.with-menu
    padding-right     25px//!important
  &.loading
    color             transparent!important
    text-shadow       none!important

.kdbuttonwithmenu-wrapper
  rel()
  display           inline-block
  size              auto,auto

  button
    margin          0!important

  .chevron-separator
    abs()
    top             0
    right           20px
    border-left     1px solid #bbb
    size            0,100%

  .chevron
    display         block
    abs()
    top             0
    right           0
    size            20px,20px
    kdfsprite()
    bg              position,-80px -280px

.kdbuttonmenu.kdcontextmenu
  width               auto
  min-width           0
  rounded             3px 0 3px 3px
  border              1px solid rgb(187,187,187)
  shadow              0 7px 15px rgba(0,0,0,.17)
  bg                  color,white

  .kdlistview-contextmenu.default
    rounded           3px 0 3px 3px
    padding           0
    shadow            none
    border            none

  .chevron-ghost-wrapper
    abs()
    top               -21px
    right             -1px
    border            1px solid #A7A7A7
    border-width      1px 1px 0 1px
    bg                color,white
    overflow          hidden

    .chevron-ghost
      display         block
      size            20px,20px
      kdfsprite()
      bg              position,-80px -260px
  &.top-menu
    rounded      3px 3px 3px 0
    .chevron-ghost-wrapper
      top             initial
      bottom          -21px
      right           -1px
      border          1px solid #A7A7A7
      border-width    0 1px 1px 1px
  &.small-gray
    .chevron-ghost-wrapper
      rounded    0 10px 0 0
    &.top-menu
      .chevron-ghost-wrapper
        rounded  0 0 0 10px
  &.clean-gray,&.clean-red
    .chevron-ghost-wrapper
      rounded    0 3px 0 0
      .chevron-ghost
        margin-top    4px
    &.top-menu
      .chevron-ghost-wrapper
        rounded  0 0 0 3px
  &.cupid-green
    .chevron-ghost-wrapper
      rounded    0 3px 0 0
      .chevron-ghost
        margin-top    3px
    &.top-menu
      .chevron-ghost-wrapper
        rounded  0 0 0 3px


/* disabled button styles
   works with this markup: <button disabled="disabled">Submit</button>
*******************************************************************************/
button.kdbutton[disabled]
button.kdbutton[disabled]:hover
button.kdbutton[disabled]:active
  box-shadow      none
  color           #aaa
  cursor          not-allowed
  text-shadow     none
  shadow(none)
  gradient(none,none)
  bg(color,#999)




/* small gray
*******************************************************************************/
button.small-gray
  border            1px solid #ccc
  border-color      #ccc #ccc #bbb #ccc
  color             #333
  font-size         11px
  font-weight       normal
  line-height       1
  padding           3px 12px 4px 12px
  text-align        center
  text-shadow       0 1px 0 #eee
  size              auto,20px
  gradient          #eee,#ccc
  rounded           10px
  vendor(background-clip,padding-box)
  &:hover
    border          1px solid #bbb
    border-color    #bbb #bbb #999 #bbb
    cursor          pointer
    text-shadow     0 1px 0 #ddd
    gradient        #ddd,#bbb
  &.toggle
    border          1px solid #aaa
    border-bottom   1px solid #888
    shadow          inset 0 0 5px 2px #aaa\, 0 1px 0 0 #eee
  &:active
    border          1px solid #aaa
    border-bottom   1px solid #888
    shadow          inset 0 0 5px 2px #aaa\, 0 1px 0 0 #eee
  &.icon-only
    padding         3px 5px 4px 6px
  &.with-icon
    span.icon
      padding       2px 2px 1px 3px
      border        none
      margin-right  2px
      bg            color,transparent

button[disabled].small-gray,
button[disabled].small-gray:hover,
button[disabled].small-gray:active
  border            1px solid #c5c5c5
  border-color      #c5c5c5 #cecece #d9d9d9 #cecece
  color             #8f8f8f
  text-shadow       0 -1px 1px #ebebeb
  gradient          #f3f3f3,#dadada
  shadow            none

button.small-gray::-moz-focus-inner
  border            0
  padding           0


/* dark
*******************************************************************************/
button.dark
  border            1px solid #ccc
  border-color      #4B4B4B
  color             #fff
  font-size         11px
  font-weight       normal
  line-height       1
  padding           3px 12px 4px 12px
  text-align        center
  text-shadow       0 -1px 0 rgba(0,0,0,.3)
  size              auto,auto
  gradient          #2E2E2E,#171717
  rounded           3px
  vendor            background-clip,padding-box
  &:hover
    border-color    #5B5B5B
    gradient        #3E3E3E,#272727
  &.toggle
  &:active
    border-color    #3B3B3B
    gradient        #1E1E1E,#070707
    shadow          inset 0 0 5px 2px #000
  &.icon-only
    padding         2px 3px
  &.with-icon
    span.icon
      padding       2px 2px 1px 3px
      border        none
      margin-right  2px
      bg            color,transparent

button[disabled].dark,
button[disabled].dark:hover,
button[disabled].dark:active
  color             #8f8f8f

button.dark::-moz-focus-inner
  border            0
  padding           0



/* small blue
*******************************************************************************/
button.small-blue
  border            1px solid #4081af
  border-color      #4081af #20559a #2e69a3 #2e69a3
  color             #fff
  // font-family       "lucida grande", sans-serif
  font-size         11px
  font-weight       normal
  line-height       1
  padding           3px 12px 4px 12px
  text-align        center
  text-shadow       0 -1px 1px #3275bc
  width             auto
  gradient(#52a8e8,#377ad0)
  rounded(10px)
  shadow(inset 0 1px 0 0 #72b9eb\, 0 1px 2px 0 #b3b3b3)
  vendor(background-clip,padding-box)
  &:hover
    border          1px solid #2a73a6
    border-color    #2a73a6 #165899 #07428f #165899
    cursor          pointer
    text-shadow     0 -1px 1px #1d62ab
    gradient(#3e9ee5,#206bcb)
    shadow(inset 0 1px 0 0 #62b1e9)
  &.toggle
  &:active
    border          1px solid #154c8c
    border-bottom   1px solid #0e408e
    text-shadow     0 -1px 1px #2361a4
    bg(color,#3282d3)
    shadow(inset 0 0 6px 3px #1657b5\, 0 1px 0 0 #fff)

button[disabled].small-blue,
button[disabled].small-blue:hover,
button[disabled].small-blue:active
  border            1px solid #c5c5c5
  border-color      #c5c5c5 #cecece #d9d9d9 #cecece
  color             #8f8f8f
  text-shadow       0 -1px 1px #ebebeb
  gradient(#f3f3f3,#dadada)
  shadow(none)

button.small-blue::-moz-focus-inner
  border            0
  padding           0




/* clean gray
*******************************************************************************/
button.clean-gray
  border            1px solid #ccc
  border-color      #ccc #ccc #bbb #ccc
  color             #333
  font-size         11px
  font-weight       bold
  padding           4px 8px 3px 8px
  text-align        center
  text-shadow       0 1px 0 #eee
  width             auto
  gradient          rgba(247,247,245,1),rgba(210,210,208,1)
  rounded           3px
  &:hover
    border          1px solid #bbb
    border-color    #bbb #bbb #999 #bbb
    cursor          pointer
    text-shadow     0 1px 0 #ddd
    gradient(#ddd,#bbb)
  &.toggle
    color           #eee
    text-shadow     0 1px 0 #333
    gradient        #686868, #9a9a9a
    border-color    #585858 #5a5a5a #858585 #5a5a5a
    shadow          inset 0 0 6px 2px rgba(0,0,0,.3)
  &:active
    border          1px solid #aaa
    border-bottom   1px solid #888
    shadow(inset 0 0 5px 2px #aaa\, 0 1px 0 0 #eee)
  &.icon-only
    padding         2px 3px
  &.with-icon
    span.icon
      padding       2px 2px 1px 3px
      margin-right  2px
      bg            color,transparent

.kdbuttonwithmenu-wrapper.clean-gray
  .chevron
    top             4px




/* clean red
*******************************************************************************/
button.clean-red
  border            1px solid #c63929
  border-color      #c63929 #c63929 #b51700 #c63929
  color             #fff
  // font-family       lucida
  font-size         11px
  font-weight       bold
  line-height       1
  padding           8px 0
  text-align        center
  text-shadow       0px -1px 0 rgba(0, 0, 0, .3)
  width             150px
  gradient(#ee432e,#c63929)
  rounded(3px)
  &:hover
    border          1px solid #b51700
    border-color    #b51700 #b51700 #999 #b51700
    cursor          pointer
    text-shadow     0 1px 0 rgba(0, 0, 0, .3)
    gradient(#ee432e,#b51700)
  &.toggle
    border          1px solid #b51700
    border-bottom   1px solid #951700
    shadow(inset 0 0 5px 2px #b51700)
  &:active
    border          1px solid #b51700
    border-bottom   1px solid #951700
    shadow(inset 0 0 5px 2px #b51700)

.kdbuttonwithmenu-wrapper.clean-red
  .chevron
    top             4px
  .chevron-separator
    border-left     1px solid brown




/* cupid green (inspired by okcupid.com)
*******************************************************************************/
button.cupid-green
  border            1px solid #63a62f
  border-color      #63a62f #63a62f #5b992b #63a62f
  color             #fff
  // font-family       lucida
  font-size         11px
  font-weight       bold
  line-height       1
  padding           7px 0 8px 0
  text-align        center
  text-shadow       0 -1px 0 #4c9021
  width             150px
  gradient(#7fbf4d,#63a62f)
  rounded(3px)
  shadow(inset 0 1px 0 0 #96ca6d)
  &:hover
    cursor          pointer
    gradient(#76b347,#5e9e2e)
    shadow(inset 0 1px 0 0 #8dbf67)
  &.toggle
  &:active
    border          1px solid #5b992b
    border-bottom   1px solid #538c27
    shadow(inset 0 0 8px 4px #548c29\, 0 1px 0 0 #eee)
.kdbuttonwithmenu-wrapper.cupid-green
  .chevron
    top             4px
  .chevron-separator
    border-left     1px solid #668471




/* transparent
*******************************************************************************/
button.transparent
  border            none
  color             #333
  // font-family       lucida
  font-size         11px
  font-weight       bold
  line-height       11px
  padding           3px 8px 4px 8px
  text-align        center
  text-shadow       0 1px 0 #eee
  width             auto
  height            auto!important
  bg(color,transparent)
  rounded(9px)
  &.toggle
  &:hover
  &:active
    cursor          pointer
    color           white
    text-shadow     0 1px 0 #000
    shadow(inset 0 0 1px 0 #000)
    gradient(#666,#888)





.kdview.kdbuttongroup
  display             inline-block
  // shadow              0 1px 0 rgba(255,255,255,.8)
  size                auto, auto
  rounded             3px
  >button
    // border            1px solid #ccc
    border-width      1px 1px 1px 0
    // color             #333
    // font-size         11px
    // font-weight       bold
    padding           3px 8px 4px 8px
    text-align        center
    // text-shadow       0 1px 0 #eee
    width             auto
    rounded           0
    &:hover
      // border-color    #bbb #bbb #999 #bbb
      // cursor          pointer
      // text-shadow     0 1px 0 #ddd
      // gradient        #ddd, #bbb
    &:active
      // color           #eee
      // text-shadow     0 1px 0 #333
      // gradient        #686868, #9a9a9a
      // border-color    #585858 #5a5a5a #858585 #5a5a5a
      // shadow          inset 0 0 6px 2px rgba(0,0,0,.3)
    &.icon-only
      padding         2px 3px
    &.with-icon
      span.icon
        padding       2px 2px 1px 3px
        margin-right  2px
        // bg            color,transparent

  >button:first-child
    border-width    1px
    rounded         3px 0 0 3px

  >button:last-child
    // border-width    1px
    rounded         0 3px 3px 0